HelloUniverse – iSpazio Developers Program #1 

Ha inizio l’iSpazio Developers Program! Periodicamente (almeno all’inizio) vi forniremo delle guide dettagliate su come creare determinate applicazioni. Andando avanti, (probabilmente a settembre) grazie al nostro ingegnere/programmatore riusciremo a fornirvi un programma completo e dei veri e propri seminari live, per formarvi in maniera completa.

Iniziamo subito con la Guida per la compilazione di “HelloUniverse”

PREMESSA: Questa non vuole essere una guida completa sull’SDK, ma solo un tutorial per creare una semplice applicazione, per chi, come me, vuole affacciarsi sul mondo della programmazione per iPhone / iPod Touch. Il corso completo all’SDK per Utenti e Aziende, arriverà tra poco su iSpazio.

TUTORIAL: In questo tutorial imparerete a:

1. Creare un nuovo progetto
2. Creare una vista
3. Creare il controller della vista
4. Gestore degli eventi.
5. Aggiungere la vista alla finestra
6. Collegare i controlli sul visualizzatore degli oggetti.

REQUISITI: Ecco cosa vi occorre per cominciare:

– L’ultima versione dell’iPhone SDK (occorre essere registrati e loggati sul sito Apple per scaricarlo)
– Ed ovviamente un Mac

1. Creare un nuovo progetto
Iniziamo aprendo Xcode, e chiudendo la schermata di benvenuto che viene visualizzata. Create un nuovo progetto facendo clic su “File -> Nuovo progetto” e selezionando “Window-Based Applications” da “iPhone OS”.

Mettere come nome del progetto “HelloUniverse” e salvarlo. La finestra che vedete di fronte a voi è l’IDE Xcode.

Nota: Se avete chiamato il vostro progetto in maniera diversa, i vostri file avranno un nome diverso rispetto a quello che dirò io nel tutorial.

Alcuni dei file necessari per eseguire l’applicazione sono già stati creati. Uno dei più importanti si chiama “main.m” e ha un metodo chiamato “main” che riceve due argomenti in input e ritorna un intero. Quasi ogni applicazione per iPhone che viene creata, avrà un metodo “main” simile a questo.

Un altro dettaglio importante del progetto è l’applicazione delegata, che nel nostro progetto si chiama “HelloUniverseAppDelegate”, dove la classe è dichiarata nel file header (indicato da un’estensione “.h”) e la classe è implementata nel file di implementazione (indicato da un’estensione “.m”).
Avete appena creato la vostra prima applicazione per iPhone; cliccate su “Build and Go” per scoprirlo da soli.

Quello che state vedendo è l’applicazione in esecuzione su un simulatore dell’iPhone. Ciò non fare nulla di utile, ad eccezione di visualizzare uno schermo bianco. Aggiungiamo ora alcune funzionalità ad esso.

Scrivere applicazioni per iPhone è un’esperienza completamente nuova su un altro dispositivo. Ci sono poche cose che devi ricordare, durante la creazione di applicazioni per l’iPhone:
1. Un’applicazione per iPhone può avere solo una finestra. Creeremo viste che potranno poi essere aggiunte alla finestra.
2. iPhone OS non supporta la gestione della memoria utilizzando la funzione di “Garbage collection” che è presente in Mac OS X v10.5 o successivi.

2. Creare una vista
Per creare una nuova vista, dobbiamo creare un file nib. Un file nib è l’interfaccia utente che si progetta utilizzando “Interface Builder”, che viene fornito con il SDK. Come il nome suggerisce, “Interface Builder” è uno strumento visuale che si utilizza per creare finestre, viste e stabilire relazioni tra le viste e gli altri oggetti nell’applicazione. Un file nib ha estensione “.xib”. Un file è già creato per noi ed è la finestra principale. La stessa finestra che abbiamo visto nel simulatore dell’iPhone.

Fare doppio clic sul file “MainWindow.xib” per avviare l’Interface Builder.

MainWindow.xib ha quattro oggetti:
1. File’s Owner – Questa è l’istanza della UIApplicaion.
2. First Responder – Questo viene utilizzato per gestire gli eventi multi-touch.
3. Hello Universe App Delegate – Responsabile per la visualizzazione della finestra e dei settaggi della vista iniziale. È anche responsabile del ripristinare dell’applicazione al suo stato precedente, del controllo della memoria, rispondere ai cambiamenti nell’orientamento del dispositivo. È impostato su un’istanza della classe HelloUniverseAppDelegate.
4. Window – Questa è la finestra che si vede quando l’applicazione si carica.

Per creare una nuova vista usando Interface Builder, fare clic su “File -> Nuovo”. Nel pannello di sinistra selezionare “Cocoa Touch”, e poi selezionate”View”. Verrà visualizzata la nuova vista appena creata.

Per prima cosa, dobbiamo salvare la nuova vista e aggiungerla al nostro progetto Xcode. Per fare ciò, seleziona la vista e fare clic su “File -> Salva”, selezionare il percorso per salvarla (nella vostra cartella di progetto), chiamatela “HelloView” e fate clic su “Save”. Non appena si salva il file, vi verrà chiesto di aggiungere la vista ad un progetto Xcode, selezionare il progetto e fare clic su “Add”.

Andate ora in Xcode e trascinate la vista sotto “Resources”. Questo è il luogo dove i tuoi file nib devono essere messi.

Ora abbiamo creato la nostra vista. Cerchiamo di aggiungere alcuni controlli alla vista. Potete farlo con un doppio clic sulla vista appena creata e aggiungendo oggetti dalla libreria. Se non vedete la libreria, è possibile aprirla facendo clic su “Tools -> Library”.

Creaiamo ora l’interfaccia grafica vera e propria. Inseriamo nella nostra vista due “Text field” (campi che permettono l’immissione di testo), una “Label” (etichetta in cui visualizzeremo una stringa) e un “Button”. Il tutto dovrebbe apparire più o meno così:

Impostiamo alcune proprietà sui nostri controlli.
Selezionare il primo campo di testo e selezionare “Attributes Inspector” (“Tools -> Attributes Inspector”). Inserire “First Name” per Placeholder, nella sezione “Text Input Traits” selezionare “Words” in “Capitalize”, “Name Phone Pad” in “Type” e “Done” in “Return key”. Selezionare, inoltre, “Clear Context before Drawing” nella scheda “View” (questo cancellerà il contenuto del campo prima di inserire il testo).
Applicare le stesse impostazioni per il secondo campo di testo, ma inserire “Last Name” in Placeholder.
Ora, fate doppio clic sul bottone e immettete “Click ME!!!”. Questo può anche essere fatto selezionando il pulsante e modificando l’attributo “Title” nell'”Attribute Inspector”.
Infine selezionate la label e assicuratevi che l’opzione “Clear Context before Drawing” sia selezionata.

Abbiamo così finito di progettare la nostra prima vista. Salviamo il tutto selezionado “File -> Save”.

3. Creare il controller della vista
Ora bisogna creare una controller della vista. Questo controller svolge un ruolo centrale nella creazione di un’applicazione per iPhone. Sono responsabili della gestione della vista, della navigazione e della memoria. Ogni vista è collegato a un controller della vista.
Dunque iniziamo a creare il nostro controller della vista. La UIKit prevede una classe UIViewController che nasconde la maggior parte dei comportamenti di default. Per creare un nuovo controller della vista seleziona Xcode, clicca sulla classe, seleziona “File -> New File” e infine seleziona “UIViewControllersubclass”, fare quindi clic su “Next” e immettere come nome “HelloViewController”.

Ora dobbiamo creare le variabili per i controlli che abbiamo definito nella nostra vista. Così potremo collegare queste variabili ai controlli sulla vista.
Per effettuare ciò, aprite il file header (che dovrebbe chiamarsi “HelloViewController.h”) e aggiungete il seguente codice:

Ora, la compilazione della vostra applicazione dovrebbe andare a buon fine, ma con alcuni “warnings”.

Si può notare che i controlli sono definiti con la aprola riservata IBOutlet, che specifica al compilatore di rendere queste variabili disponibili nell’Interface Builder. Abbiamo anche proprietà definite per le nostre variabili.

4. Gestione degli eventi
Abbiamo anche dichiarato un metodo per gestire l’evento del click del pulsante. Questo metodo è dichiarato con una parola speciale: IBAction, che dice al compilatore di rendere questo metodo disponibile nell’Interface Builder. Il metodo prende un parametro di tipo id (tipo generico) e restituisce void (contrassegnato da IBAction).

Ora abbiamo bisogno di implementare il metodo e anche di sintetizzare le proprietà. Insostanza dovremo dire al compilatore di creare il metodo get e set.

Aprire il file di implementazione (“HelloViewController.m”) e aggiungi le seguenti righe di codice dopo la linea “@implementation HelloViewController”:

Ora scrivere il codice riportato di seguito per visualizzare un messaggio per l’utente:

La variabile sTemp è un oggetto creato con il messaggio alloc e inizializzato con il messaggio “initWithFormat”. Come si può vedere “%@” all’interno della stringa è per la posizione della variabile nth. La logica di controllo prova ogni combinazione per trovare il tipo di messaggio da visualizzare basato sul input dell’utente. Dal momento che la stringa é un’istanza di NSString e creata utilizzando alloc, dobbiamo deallocarla manualmente. Questo è fatto passando il messaggio “release” all’oggetto ricevente.

Abbiamo anche tre proprietà di cui tenere sulle text field e sulla label della vista. Dal momento che sono stati con l’attributo “retain” noi dobbiamo rilasciare anche la loro memoria. Questo viene fatto nel metodo “dealloc”, come mostrato di seguito. Il metodo “dealloc” viene utilizzato per liberare la memoria degli oggetti Objective-C che creiamo.

5. Aggiungere la vista alla finestra
Adesso, dobbiamo aggiungere la vista come una sotto-vista dell’attuale finestra che viene mostrata nel simulatore. Per fare questo aprite il file “HelloUniverseAppDelegate.h” e create una variabile di tipo “HelloViewController” e creare anche una proprietà.
Dal momento che stiamo usando il tipo HelloViewController nel file header, dobbiamo avvertire il nostro file del controller della vista. Lo facciamo aggiungendo una dichiarazione più avanti, che indicherà al compilatore che la classe è definita da qualche altra parte e di non preoccuparsi di ricerca ora. Questa dichiarazione è aggiunta prima dell’inizio dell’interfaccia usando la stringa “@class classname”.

Nel fil dell’implementazione, abbiamo bisogno di sintetizzare la proprietà e anche di rilasciare la memoria tramite il metodo dealloc.
Ecco cosa dovrete aggiungere al file “HelloUniverseAppDelegate.h”.

E’ nel metodo “applicationDidFinishLaunching” che noi dovremo aggiungere la nostra vista come una sotto-vista della finestra. Questo è il metodo che viene chiamato quando l’applicazione ha finito il suo caricamento e dove si dovrebbe inizializzare la prima vista che l’utente vedrà oppure ripristinare l’applicazione.
Questa volta il file da modificare sarà “HelloUniverseAppDelegate.m”, con il seguente codice:

Ricapitoliamo quindi i passi da seguire per aggiungere una sotto-vista ad una finestra:
1. Creare un oggetto di tipo “HelloViewController” utilizzando il comando alloc e instanziarlo usando “initWithnibName” che carica il file nib “HelloView” dal package principale. Un pacchetto non è pertinente a questo articolo, ma la maggior parte dei file nib sono caricati dal package principale.
2. Impostare la vista nella proprietà.
3. Liberare la memoria.
4. Quindi possiamo prendere la vista dal controller della vista e aggiungerla come sotto-vista della finestra. Qui il messaggio della vista è passato al controller della vista e la vista ritornata è aggiunta come un sotto-vista della finestra.
5. Poi rendiamo tutto visibile.

6. Connettere i controlli della vista agli oggetti della vista
Ora dobbiamo collegare i controlli della vista agli oggetti che abbiamo creato. Per fare ciò, fare doppio click sul file “HelloView.xib”, che aprirà l’Interface Builder.

Per prima cosa debbiamo impostare il controller della vista come “File’s Owner Proxy Object”. Per fare ciò nella schermata “HelloView” selezionate il “File’s Owner”, poi aprite l'”Identity Inspector” nel menù “Tools”; ora, nel menù a tendina Class selezionate “HelloViewController”. Se prendiamo un secondo ad esaminare questa schermata, sotto “Class Outlets” vedremo che tutte le nostre variabili definite nel file header sono presenti qui. Ora bisogna collegare il controller della vista con la vista. Per fare ciò cliccate, sempre nel pannello precedente, su “Connetors”, dove vedrete le variabili che abbiamo definito in precedenza. Dovreste avere una schermata come questa:

Al fianco a “view” dovreste vedere un cerchio vuoto, fate clic sul cerchio e trascinarlo sulla vista, per poi rilasciarlo. Si noterà che la connessione è stata fatta tra la variabile della vista e la vista setssa.Fate poi la stessa cosa per le variabili lblMessage, txtFirstName, txtLastName.
Fatto ciò, dovreste avere una schermata come questa:

Ora abbiamo bisogno di una connessione per invocare il nostro metodo di visualizzazione del messaggio quando viene cliccato il pulsante. Per fare questo, selezionare la vista e il suo “Connecion Inspector”. Cliccate sul bottone della vista, tra le varie opzioni nel “Connections” dovreste vedere “Touch Up Inside”, che è l’evento chiamato quando il bottone viene cliccato. Fare clic sul cerchio vuoto a fianco e trascinarlo sull’oggetto “File’s Owner”; quando lo rilascerete vi apparirà un’opzione “displayMessage”, cliccateci per creare la connessione. La connessione dovrebbe apparire come qualcosa di seguito:

Questo è tutto ciò che dobbiamo fare. Torniamo in Xcode e clicchiamo su “Build and Go”. Assicuratevi di avere i quattro file con il codice (“HelloUniverseAppDelegate.h”, “HelloUniverseAppDelegate.m”, “HelloViewController.h”, “HelloViewController.m”) all’interno della cartella “Classes”. Procedete quindi alla compilazione.
L’applicazione deve essere compilata senza nessun errore e senza nessun avvertimento. L’applicazione verrà lanciata, e potremo inserire il nostro nome e cognome e vedere apparire il messaggio.

Ma abbiamo un problema, sembra che l’editor di testo non capisca che sia terminata la modifica e non chiude se stesso. Per risolvere questo problema, abbiamo bisogno di implementare un protocollo nel nostro controller della vista.

Il modo di implementare un protocollo è racchiudendo tra <> il nome dell’interfaccia, dopo il nome della super classe. Il protocollo che dobbiamo implemenatare è “UITextFieldDelegate”. Usano questo protocollo possiamo impostare il “File’s Owner” come un delegato dei due campi di testo. La dichiarazione dell’interfaccia del file dovrebbe apparire come qualcosa di simile (da fare nel file “HelloViewController.h”):

Ora abbiamo bisogno di implementare il metodo che sarà in grado di gestire la chiusura degli editor di testo quando si clicca sul bottone.
Per fare ciò aggiungere il seguente metodo per al file di implementazione (“HelloViewController.m”)

Quello che questo codice fa è di verificare da quale campo questo metodo viene chiamato e anche se è da entrambi i campi inviamo il messaggio “resignFirstResponder” e ritorniamo YES, che è simile al ritorno di un tipo booleano.

Ora non ci resta che dire al campo di testo di usare il “File’s Owner” come un delegato. Per fare ciò, seleziona la vista e clicchiamo sul campo “First name” e seleziamo dal menù “Tools” “Connetions Inspector”. Vedremo un campo chiamato “delegate”, cliccate sul cerchio vuoto a fianco e trascinatelo all’oggetto “File’s Owner”, così che la connessione verrà creata. Eseguite poi la stessa operazione con il campo “Last name”. Avrete una schermata come questa:

Salvate l’applicazione e cliccate su “Build and Go”. Ora l’applicazione funzionerà alla perfezione!

Se Avete Problemi, questo è il nostro file di progetto.

La guida è stata tradotta da Andrea Busi per iSpazio.net. Trovare la versione originale a questo indirizzo: iPhone SDK Articles: First iPhone Application. I Meriti quindi relativamente alla versione inglese, sono del legittimo autore.