Ανάπτυξη στο iPhone (4): η πρώτη μας εφαρμογή (II)

Στην προηγούμενη ανάρτησή μας υποδείξαμε πώς θα ήταν η εφαρμογή μας HelloWorld και τα βήματα που επρόκειτο να λάβουμε για τη δημιουργία της εφαρμογής μας, καθώς και παρέχοντας συνδέσμους προς την απαιτούμενη τεκμηρίωση. Σε αυτό το άρθρο ξεκινάμε ανοίγοντας το XCode και ξεκινάμε την ανάπτυξη.

Βήμα 1. Δημιουργήστε το έργο.

Γι' αυτό ανοίγουμε το XCode και κλείνουμε (αν βγει), το παράθυρο καλωσορίσματος της εφαρμογής. Πριν δημιουργήσουμε το έργο μας, μπορούμε να εισάγουμε τις προτιμήσεις XCode. Σε Γενικά -> Διάταξη επιλέξτε 'Όλα-σε-Ένα', τουλάχιστον αν θέλετε να μπορείτε να συγκρίνετε αυτό που βλέπετε στις οθόνες σας με τις εικόνες που θα δείτε.

Αυτή τη στιγμή δημιουργούμε το έργο: Αρχείο -> Νέο έργο και επιλέγουμε βάσει προβολής:

Όπως αναφέραμε στο προηγούμενο άρθρο, για ένα έργο που βασίζεται σε προβολή, το XCode δημιουργεί μια προβολή που συνδέεται με μια κλάση Controller (θυμηθείτε ότι μιλούσαμε για το μοτίβο MVC). Καλέστε το έργο HelloWorld και αποθηκεύστε το στον φάκελο της επιλογής σας. Θα δείτε κάτι παρόμοιο με αυτό:

Βλέπουμε ότι έχουμε πολλά αρχεία:

• HelloWorldViewController.h και HelloWorldViewController.m. Και τα δύο αντιστοιχούν στο χειριστήριο της οθόνης μας. Εδώ θα είναι η λογική που σχετίζεται με την άποψή μας. Στην περίπτωσή μας, εδώ θα πρέπει να είναι ο κωδικός που κάνει την τιμή της ετικέτας να αλλάζει με αυτό που εισάγεται στο πλαίσιο κειμένου. Βλέπουμε ότι υπάρχει ένα αρχείο .h και ένα άλλο .m. Το πρώτο είναι η κεφαλίδα, στη Java θα ήταν η διεπαφή. Εδώ είναι οι δηλώσεις μεταβλητών, μεθόδων κ.λπ. Το αρχείο .m είναι αυτό που περιέχει ήδη την υλοποίηση.
• HelloWorldViewController.xib. ib=InterfaceBuilder. Αυτό το αρχείο είναι η άποψή μας, η οθόνη. Ονομάζεται από το MainWindow.xib, την κύρια όψη πρόσοψης που δεν θα αγγίξουμε.
• HelloWorldAppDelegate (.h και .m). Δεν πρόκειται να τα τροποποιήσουμε, έχει δείκτη στο ViewController μας.
• Info.plist. Είναι ένα XML με πληροφορίες για την εφαρμογή μας. Εδώ μπορούμε, για παράδειγμα, να υποδείξουμε το εικονίδιο της εφαρμογής μας.

Βήμα 2. Σχεδιάστε τη διεπαφή.

Ας αρχίσουμε να «ζωγραφίζουμε» την οθόνη της εφαρμογής μας. Για να γίνει αυτό, στο XCode κάνουμε διπλό κλικ στο HelloWorldViewController.xib και θα δούμε ότι ανοίγει η εφαρμογή Interface Builder. Πρώτα απ 'όλα, ως πρακτική συμβουλή συνιστώ να ελέγχετε πάντα ότι έχετε ανοιχτές τις παλέτες Inspector και Library. Μπορείτε να τα ανοίξετε στο μενού Εργαλεία δημιουργίας διεπαφής. Η παλέτα Βιβλιοθήκη θα σας επιτρέψει να προσθέσετε διαφορετικά στοιχεία ελέγχου στην προβολή σας και η παλέτα Επιθεωρητής σάς επιτρέπει να δείτε τις ιδιότητες κάθε αντικειμένου και να τις τροποποιήσετε.

Δεν θα προσπαθήσουμε να φτιάξουμε μια όμορφη εφαρμογή, απλώς θα την κάνουμε να λειτουργήσει. Ξεκινήστε εντοπίζοντας την οθόνη, με την ένδειξη Προβολή. Εάν δεν είναι ανοιχτό, ανοίγει κάνοντας διπλό κλικ στο View στην ακόλουθη οθόνη:

Στην προβολή, σύρετε από την παλέτα της Βιβλιοθήκης ένα Πεδίο κειμένου πάνω, μια Ετικέτα κάτω και, τέλος, ένα Στρογγυλό Κουμπί Rect. Προσέχουμε, αν έχουμε επιλέξει ένα στοιχείο ελέγχου όπως το TextField, μπορούμε να μετακινήσουμε το μέγεθος αυτού του στοιχείου ελέγχου, να το μετακινήσουμε στην οθόνη... και στην παλέτα Inspector να έχουμε τις ιδιότητές του. Επιλέγοντας το κουμπί μπορούμε να βάλουμε έναν Τίτλο με τιμή "Αλλαγή!". Στο τέλος θα έχουμε κάτι σαν αυτό:

Με αυτό έχουμε ορίσει τη διεπαφή της εφαρμογής μας. Συμμορφώνεται με αυτό που είχαμε προβλέψει: ένα πλαίσιο κειμένου (εφεξής, TextField) όπου θα εισάγουμε πληροφορίες. Μια ετικέτα (σταθερό κείμενο) και ένα κουμπί. Όταν πατήσουμε το κουμπί, η Ετικέτα θα δείξει τι έχουμε γράψει στο Πεδίο Κειμένου. Για αυτό θα πρέπει να δημιουργήσουμε τις μεταβλητές που αναφέρονται στην ετικέτα και το πεδίο κειμένου στο ViewController μας και θα πρέπει να πούμε στο Εργαλείο δημιουργίας διεπαφής τη σχέση μεταξύ της ετικέτας και του πεδίου κειμένου με αυτές τις μεταβλητές. Θα πρέπει επίσης να δημιουργήσουμε μια μέθοδο στο ViewController που είναι υπεύθυνη για την ενημέρωση της τιμής της ετικέτας με αυτό που έχουμε εισαγάγει στο πεδίο κειμένου και να συσχετίσουμε το κουμπί με αυτήν τη μέθοδο στο Εργαλείο δημιουργίας διεπαφής. Όλα αυτά θα είναι τα βήματα 3, 4 και 5 του αρχικού μας σεναρίου και θα εξηγηθούν στην επόμενη ανάρτηση.

Φυσικά, πριν ολοκληρώσετε, σας συνιστώ να δείτε τι εμφανίζεται στην παλέτα της Βιβλιοθήκης όταν έχετε επιλέξει, για παράδειγμα, ένα πεδίο κειμένου για να το προσθέσετε στην προβολή:

Μπορείτε να δείτε ότι εξηγεί τι κάνει το στοιχείο ελέγχου TextField, αλλά βάζει επίσης το "UITextField" κάτω από αυτό. Αυτό είναι σημαντικό, γιατί μας λέει ποια κατηγορία από το πλαίσιο Cocoa UIKit αντιστοιχεί σε αυτό το στοιχείο ελέγχου. Αυτό μας δίνει μια ιδέα: για να δημιουργήσουμε τη μεταβλητή που χειρίζεται αυτό το στοιχείο ελέγχου στο ViewController, θα πρέπει να είναι τύπου UITextField.