Abbonati al feed RSS!
twitter
  •  

DevTutorial #1 – HelloUniverse

|
Categorie: DevTutorial, iPhone SDK

12

In questo primo tutorial realizzeremo la nostra prima applicazione, il classico HelloWorld! Chiederemo all’utente il proprio nome (ad esempio Tizio) e alla pressione di un bottone faremo apparire il messaggio “Ciao Tizio”. Niente di complicato quindi, però cercate di capire bene tutti i passaggi, in modo da non avere lacune su queste cose basilari.

1. Creaiamo la struttura grafica
Iniziamo quindi creando un nuovo progetto di tipo “View-Based Application” e chiamiamolo “HelloWorld”.

Immagine 1

Apriamo quindi il file “HelloWorldViewController.xib”, che avvierà anche l’Interface Builder. Ora dobbiamo creare la struttura grafica, che deve essere simile a questa:

Immagine 2

Come potete osservare, ci sono tre componenti principali:

  1. una UITextField in cui l’utente potrà inserire il proprio nome;
  2. una UIButton, con la scritta “Saluta!”, che l’utente dovrà premere per far apparire il saluto;
  3. due UILabel, una con la scritta “Nome” (e questa serve solo per rendere più intuitivo il nostro programma), l’altra posta a centro schermo (che contiene la stringa Label). È importante impostare le dimensioni di questa ultima label in modo che occupi tutta la larghezza della vista, altrimenti avremo problemi quando andremo a stampare il messaggio di saluto
    in seguito.

Tramite “Attribute Inspector” possiamo definire alcune proprietà per questi oggetti. Selezioniamo ad esempio la UITextField, e impostiamo i seguenti valori:

  • Capitalize”: “Words” (ovvero quando l’utente inizia a digitare il proprio nome la prima lettera viene scritta in maiuscolo);
  • Corrections”: “No” (disabilitiamo la correzione automatica per questo campo);
  • Spuntiamo l’opzione “Clear Context Before Drawing” (cancellerà il contenuto già presente non appena l’utente seleziona il campo).

A vostro piacere potete anche impostare altre proprietà, provatene alcune per prendere un po’ più di confidenza.
Prima di proseguire, diamo un’occhiata a ciò che compone questo file (lo potete trovare nel Pannello dei documenti):

Immagine 3

Potete notare tre elementi, che XCode ha già definito per noi.

  • File’s Owner, come dice la parola stessa, è il proprietario del file. È, in sostanza, la classe che gestisce la nostra finestra, ovvero che gestisce ogni singolo aspetto. Nel nostro caso sarà la classe “HelloWorldViewController”, dove poi andremo a scrivere il codice necessario.
  • First Responder, per ora non è un componente che ci interessa, però sappiate che si occupa, ad esempio, della gestione del multi-touch.
  • View, è la nostra vista, ovvero la schermata che abbiamo definito. In questo caso ne abbiamo solo una, ma nulla ci vieta di definirne svariate e richiamarle poi a nostro piacimento.

2. Definiamo gli elementi e le azioni

Dobbiamo ora definire gli elementi e le azioni necessarie. Potremmo fare questa operazione da Interface Builder (e impareremo a farlo dal prossimo tutorial), ma per questa volta lo faremo via codice, in modo che capiate bene come XCode lavora. Salviamo tutto e chiudiamo Interface Builder, tornando così in XCode.

Nella cartella “Classes” noteremo quattro file: due con estensione “.h” e due con estensione “.m”. I file “.h” stanno ad indicare le classi di intestazione, ovvero dove vengono definiti i metodi e i componenti necessari, ma non vi è alcuna implementazione dei metodi. Saranno i file con estensione “.m” a contenere tutte le implementazioni dei metodi, ovvero il codice delle varie funzioni.
Iniziamo, quindi, aprendo il file “He#oWorldContro#er.h”, in cui dovremo definire gli oggetti che ci serviranno. Nel nostro esempio, saranno due gli elementi da definire: la UITextField in cui l’utente inserisce il proprio nome (e da cui noi dobbiamo leggerne il valore), e la UILabel in cui scriveremo il saluto. Dovremo, poi, definire un’azione, quella che verrà richiamata alla pressione del bottone.
Ecco il codice da inserire:

Immagine 4

Abbiamo dichiarato una UITextField e una UILabel, proprio i due componenti che ci servono.
Possiamo notare che entrambe le dichiarazioni sono precedute dalla clausola “IBOutlet”, che indica ad XCode che quell’elemento è stato definito in Interface Builder. Questo è necessario perché, come vedrete fra poco, ci permetterà di collegare l’oggetto creato tramite Interface Builder con quello dichiarato in XCode.
Dopo queste due dichiarazioni, trovate l’intestazione del metodo “saluta”, e anche in questo caso trovate una clausola ”IBAction”: anche questa sta a significare che l’azione è collegata ad un componente di Interface Builder.
Le due property, poi, servono per poter utilizzare senza problemi le proprietà degli oggetti che abbiamo definito.
Ora salviamo il file (Cmd + S) e riapriamo “HelloWorldViewController.xib”. Dobbiamo collegare questi componenti con quelli effettivamente inseriti nella nostra vista.

Dal pannello dei documenti selezionate il componente “File’s Owner”. Aprendo il “Connections Inspector” dovreste vedere un pannello come questo:

Immagine 5

Potete notare che sono presenti i componenti che abbiamo definito via codice! Ora non dobbiamo fare altro che collegarli agli elementi adeguati. Prendiamo il pallino a fianco di “fieldNome” e trasciniamolo fino alla UITextField della nostra vista. Avremo così collegato i due elementi! Ripetiamo la stessa operazione con “labelSaluto”, trascinando il pallino sulla UILabel posta a centro schermo. Stessa operazione va eseguita per l’azione “saluta”. Collegatela al bottone, ma quando rilasciate il bottone del mouse vi apparirà un menù come quello che trovate qui sotto:

Immagine 6

Sono tutte le azioni che può gestire un bottone. Noi selezioniamo “Touch Up Inside”, in modo che l’azione venga richiamata non appena si clicca sul bottone. Volendo potremmo scegliere di avviare l’azione quando il bottone viene rilasciato, ma per il nostro scopo non cambia niente. Se avete eseguito tutto correttamente avrete un pannello “Connections Inspector” come que-
sto:

Immagine 7

Abbiamo così concluso la definizione dei componenti della nostra applicazione. Salviamo tutto e chiudiamo Interface Builder.

3. Scriviamo il codice necessario

Dobbiamo ora implementare il metodo “saluta”, che si occuperà di leggere il nome inserito dall’utente e stampare il messaggio di benvenuto sulla label predisposta.
Apriamo il file “HelloWorldViewController.m” e inseriamo il seguente codice:

Immagine 8

Analizziamo il codice poco alla volta. L’istruzione presente alla riga 3 che ha il compito di cariare gli elementi di cui prima abbiamo definito le “property”. Potrebbe sembrare un po’ strana, ma per ora prendetela come regola.
Dalla riga 9 alla 20 troviamo la definizione del metodo “saluta”. In tale metodo, non facciamo altro che leggere il nome inserito dall’utente (tramite “fieldNome.text”, che ci restituisce la stringa contenuta nella UITextField) e assegnarlo alla variabile “nome” (riga 11). Tramite una costrutto “if” (dalla riga 13 alla 19) andiamo poi a controllare se tale stringa è vuota (e quindi l’utente ha premuto il tasto senza inserire nessun nome) oppure se vi è un valore. Ovviamente inseriamo due messaggi di saluto diversi a seconda del caso. Particolare attenzione merita parte dell’istruzione alla riga 18, ed in particolare questo pezzo di
codice: “@”Ciao %@”,nome”.

  • “@”, la prima chiocciola sta ad indicare che ciò che segue è una stringa. La sintassi è sempre la stessa, è può essere schematizzata nel seguente modo: @”stringa_desiderata”. Dovrete sempre utilizzare questo formato quando istanziate una stringa.
  • “%@”, quando trovate un % in una stringa, significa che li ci andrà il valore di una determinata variabile. Non a caso dopo la stringa trovare la variabile “nome”: il contenuto di tale variabile nome andrà inserito al posto di %@. Se avessimo dovuto inserire il valore di una variabile di tipo float avremmo usato la sintassi %f. Vedremo parecchi esempi nei prossimi tutorial.

Il metodo “dealloc”, infine, è quello che si occupa di liberare la memoria che abbiamo utilizzato. L’Objective-C, infatti, non prevede un gestore della memoria come avviene invece in Java (tramite il Garbage Collector). Sarà compito degli sviluppatori, quindi, liberare la memoria dagli oggetti che non servono più. In questo metodo dovrete sempre inserire i componenti che avete utilizzati, richiamando per ognuno il metodo “dealloc”. Nell’esempio potete vedere che liberiamo dalla memoria gli oggetti “labelSaluto” e “fieldNome”. Possiamo ora cliccare su “Build and Go!”, se non abbiamo commesso errori nell’inserire il codice si avvierà l’iPhone Simulator e potremo testare il nostro programma!

Immagine 9

4. Facciamo chiudere la tastiera

Se provate ad inserire un nome e a premere il tasto “Invio” della tastiera che appare sull’iPhone, noterete che essa non si chiude. Si tratta di un bug? La risposta è no. È normale, in quanto non abbiamo implementato niente che chiuda tale tastiera. Per sistemare questo problema, apriamo il file “HelloWorldViewController.h” e modifichiamo l’intestazione nella seguente maniera:

Immagine 10

Potete notare che abbiamo aggiunto “<UITextFieldDelegate>“, ovvero la nostra classe deve implementare il delegato della classe UITextField. Parleremo più avanti di cosa siano i delegati,  per ora sappiate che sono dei comportamenti comuni a delle classi di oggetti. Fatto ciò, andiamo nel file “HelloWorldViewController.m” e inseriamo, in un qualsiasi punto, questo metodo:

Immagine 11

Questo metodo si occuperà della chiusura della nostra tastiera. Non soffermiamoci sul codice, in quanto è così in qualsiasi occasione voi vogliate implementarlo. Salvate entrambi i file e aprite “HelloWorldViewController.xib”. Cliccate sulla UITextField e aprite il “Connections Inspector”: vedrete nella sezione “Outlets” un elemento chiamato “delegate”, prendete il pallino e trascinatelo sul “File’s Owner” nel pannello dei documenti. Se avrete eseguito correttamente questa operazione il vostro pannello sarà come questo:

Immagine 12

In pratica, abbiamo detto che il delegato di tale oggetto è gestito dalla classe “HelloWorldViewController”. Salvate ora il tutto e chiudete Interface Builder. Provate poi ad eseguire la vostra applicazione, tutto funzionerà in maniera corretta!
Avete così creato la vostra prima applicazione funzionante per iPhone!

Immagine 9

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

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

2.219 visite

Commenti (12)

Reply to this comment

[...] scorso articolo vi avevamo proposto un tutorial per la creazione di una semplice applicazione, l’HelloUniverse. [...]

Reply to this comment

Si, cioé, se il codice non fosse in png ma copiabile si risparmierebbe un sacco di tempo.

Reply to this comment

@stefano tinti: Se vuoi avere il codice già pronto c’è il file de progetto a fondo pagina..
Io preferisco postare le immagini png i quanto chi segue il tutorial è così obbligato a copiare il codice, imparando molto di più.. ;-)

Reply to this comment

il file del progetto non c’è

Reply to this comment

@stefano tinti: hai ragione, scusami..
ho già provveduto a ricaricare il file del progetto! ;-)

Reply to this comment

grazie, ah, per farti capire a che livello sono: non ho ancora capito nemmeno come si fa l’icona di una app per l’iPhone. C’è quì una tute per questo?
grazie

Reply to this comment

@stefano tinti: Ihih.. comunque ti basta inserire un file png chiamato “Icon.png” all’interno del tuo progetto.. Tutto qui! (le dimensioni non me le ricordo bene, mi sembra 60×60 pixel)

Reply to this comment

ciao, intanto grazie, sto trovando molto utili le vostre guide…. ho solo un piccolo problema a me compare la tastiera numerica, quella del telefono, e non quella alfabetica… ma non mi sembra di aver saltato nessun passaggio….. qualke idea???

Reply to this comment

ho risolto….. avevo messo phone pad al posto di name phone pad….. grazie mille…..
adesso xò ho un altro problema, quando finisco di digitare la tastiera non se ne va….. eppure ho fatto tutto uguale…. nn capisco il perchè….

Reply to this comment

@andrea: si, forse c’è un errore nel tutorial.. segui lo stesso tutorial (ma completamente riscritto) che trovi nella preview del mio libro..
vedrai che non avrai problemi!

Reply to this comment

andrea, a me non conpaiono gli elementi nell connections inspector, il codice lo ho messo… come mai? grazie

Reply to this comment

@francesco: hai selezionato la giusta classe in IB? ti sei assicurato di salvare il file modificato prima di aprire IB?

Scrivi un commento!