Sviluppo su iPhone (4): la nostra prima applicazione (II)

Nel nostro post precedente abbiamo indicato come sarebbe stata la nostra applicazione HelloWorld e i passaggi che avremmo intrapreso per creare la nostra applicazione, oltre a fornire collegamenti alla documentazione richiesta. In questo articolo iniziamo aprendo l'XCode e iniziamo a sviluppare.

Passaggio 1. Crea il progetto.

Ecco perché apriamo XCode e chiudiamo (se esce), la finestra di benvenuto dell'applicazione. Prima di creare il nostro progetto, possiamo inserire le preferenze di XCode. In generale -> Layout scegli "All-In-One", almeno se vuoi poter confrontare ciò che vedi sui tuoi schermi con le immagini che vedrai.

In questo momento creiamo il progetto: File -> Nuovo progetto, e scegliamo Basato su visualizzazione:

Come abbiamo indicato nel precedente articolo, per un progetto XCode View-Based crea una vista collegata ad una classe Controller (ricordiamo che stavamo parlando del pattern MVC). Chiama il progetto HelloWorld e salvalo nella cartella che desideri. Vedrai qualcosa di simile a questo:

Vediamo che abbiamo diversi file:

• HelloWorldViewController.he HelloWorldViewController.m. Entrambi corrispondono al controller del nostro schermo. Ecco la logica relativa al nostro punto di vista; Nel nostro caso, qui deve essere il codice che fa cambiare il valore dell'etichetta con quanto inserito nella casella di testo. Vediamo che c'è un file .h e un altro .m. Il primo è l'intestazione, in Java sarebbe l'interfaccia. Ecco le dichiarazioni di variabili, metodi, ecc. Il file .m è quello che contiene già l'implementazione.
• HelloWorldViewController.xib. ib = Interface Builder. Questo file è il nostro punto di vista, lo schermo. Viene invocato da MainWindow.xib, la facciata principale delle viste che non toccheremo.
• HelloWorldAppDelegate (.he .m). Non li modificheremo, ha un puntatore al nostro ViewController.
• Info.plist. È un XML con informazioni sulla nostra applicazione. Qui possiamo ad esempio indicare quale è l'icona della nostra applicazione.

Passaggio 2. Progettare l'interfaccia.

Inizieremo a "disegnare" lo schermo della nostra applicazione. Per fare ciò, in XCode facciamo doppio clic su HelloWorldViewController.xib e vedremo che si apre l'applicazione Interface Builder. Innanzitutto, come consiglio pratico, ti consiglio di controllare sempre di avere le palette Inspector e Library aperte. Puoi aprirli nel menu Strumenti di Interface Builder. La palette Libreria vi permetterà di aggiungere diversi controlli alla vostra vista e la palette Inspector vi permette di vedere le proprietà di ogni oggetto e di modificarle.

Non proveremo a creare un'applicazione carina, ma a farla funzionare. Inizia individuando lo schermo, etichettato Visualizza. Se non è aperto, viene aperto facendo doppio clic su Visualizza nella schermata seguente:

Nella vista, trascina dalla tavolozza Libreria un TextField sopra, un'etichetta sotto e infine un Round Rect Button. Lo guardiamo, se abbiamo un controllo come il TextField selezionato, possiamo spostare la dimensione di questo controllo, riposizionarlo sullo schermo ... e nella palette Inspector possiamo avere le sue proprietà. Selezionando il pulsante possiamo inserire un Titolo con valore «Cambia!». Alla fine avremo qualcosa del genere:

Con questo abbiamo definito l'interfaccia della nostra applicazione. È conforme a quanto avevamo pianificato: una casella di testo (di seguito, TextField) in cui inseriremo le informazioni. Un'etichetta (testo fisso) e un pulsante. Quando premiamo il pulsante, l'etichetta mostrerà ciò che abbiamo scritto nel TextField. Per fare questo dovremo creare le variabili che fanno riferimento alla Label e al TextField nel nostro ViewController e dovremo indicare a Interface Builder la relazione tra la Label e il TextField con queste variabili. Dovremo anche creare un metodo nel ViewController che si occupi di aggiornare il valore dell'etichetta con ciò che abbiamo inserito nel TextField e correlare il pulsante a quel metodo in Interface Builder. Tutto ciò rappresenterà i passaggi 3, 4 e 5 del nostro script iniziale e verrà spiegato nel prossimo post.

Ovviamente prima di finire ti consiglio di guardare cosa appare nella palette Library quando hai selezionato, ad esempio, un TextField per aggiungerlo alla vista:

Puoi vedere che spiega cosa fa il controllo TextField, ma dice anche "UITextField" di seguito. Questo è importante, perché ci dice quale classe nel framework Cocoa UIKit corrisponde a questo controllo. Questo ci dà un suggerimento: per creare la variabile che gestisce questo controllo nel ViewController, dovrà essere di tipo UITextField.