DevTutorial #1 – HelloWorld

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 “HelloWorldViewController.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:

#import "UIKit/UIKit.h"

@interface HelloWorldViewController : UIViewController  {
	IBOutlet UITextField *fieldNome;
	IBOutlet UILabel *labelSaluto;

}

-(IBAction)saluta;

@property (nonatomic, retain) IBOutlet UITextField *fieldNome;
@property (nonatomic, retain) IBOutlet UILabel *labelSaluto;

@end

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 sarà associato ad un oggetto di 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 questo:

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:

#import "HelloWorldViewController.h"

@implementation HelloWorldViewController

// importiamo i componenti di cui abbiamo definito le property
@synthesize fieldNome, labelSaluto;

// azione richiamata alla pressione del bottone
-(IBAction)saluta{
	// leggiamo la stringa contenuta nella UITextField (il nome dell'utente)
	NSString *nome = fieldNome.text;

	if ([nome length] == 0){
		// l'utente non ha inserito nessun nome
		labelSaluto.text = [[NSString alloc] initWithFormat:@"Ciao anonimo!"];
	}else{
		// salutiamo l'utente
		labelSaluto.text = [[NSString alloc] initWithFormat:@"Ciao %@",nome];
	}
}

- (void)dealloc {
	[labelSaluto dealloc];
	[fieldNome dealloc];

    [super dealloc];
}

Analizziamo il codice poco alla volta. L’istruzione presente alla riga 6 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 Run!”, 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:

@interface HelloWorldViewController : UIViewController  <UITextFieldDelegate>{

Potete notare che abbiamo aggiunto “<UITextFieldDelegate>“, ovvero la nostra classe deve implementare il delegato della classe UITextField. Man mano procederete con la vostra avventura con la programmazione per iPhone imparerete cosa sono esattamente 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:

// questo metodo permette alla tastiera di chiudersi
-(BOOL)textFieldShouldReturn:(UITextField *)textField{
	[textField resignFirstResponder];
	return YES;
}

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 scritta da Andrea Busi per “iSpazio.net” e per “Bubi Devs“, prendendo spunto da questa guida: iPhone SDK Articles: First iPhone Application. I meriti delle rispettive versioni, quindi, sono dei legittimi autori.

Ingegnere informatico e sviluppatore freelance, mi occupo da anni di sviluppo per iOS (ma non solo). Dal 2008 scrivo su questo piccolo blog (con qualche lunga pausa), in cui parlo di programmazione e di qualsiasi altra cosa che mi diverta.

26 comments On DevTutorial #1 – HelloWorld

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

  • @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ù.. 😉

  • il file del progetto non c’è

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

  • 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

  • @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)

  • 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???

  • 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è….

  • @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!

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

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

  • Salve,

    è possibile avere un tastierino numerico con il punto incluso?

    ho il problema di dover inserire in alcuni campi di testo dei valori numerici che potrebbero essere con la virgola, impostando il tipo di tastiera a “Number Pad”, ma in questo modo avrei un tastierino numerico senza la possibilità di inserire la virgola…

    è possibile farlo?

    Grazie

  • Aveva iniziato a lavorare con xcode qualche mese fa proprio su questo tutorial e ho realizzato la mia hello world poi però ho dovuto abbandonare per un po’ e riprendendo oggi ho deciso di cominciare da capo ma al momento di creare l’interfaccia grafica non riesco a caricare gli elementi che servono. Come si fa?

  • Ho risolto bastava aprire library ed era tutto lì. Grazie per il tutorial

  • Innanzi tutto grazie per questo sito che è ottimo per chi come me sta iniziando adesso a programmare in objective-c poi domandina….
    riga 11: NSString *nome = fieldNome.text;
    mi spiegate perchè per questo puntatore a variabile io non alloco memoria??
    La variabile nome prende il valore contenuto nel campo testo ma perchè non devo allocare memoria per questo valore mentre alloco memoria per stampare a video la stringa?
    Grazie

  • Ciao, bello questo tutorial.
    Ottimo anche il libro.

  • qualcuno mi spiega perche copiando e incollando tutto perfettamente e seguendo tutti i passi nel simulatore mi compare tutto grigio??nessun tasto ne niente!!!

  • @marco: hai seguito correttamente tutto il tutorial? anche la parte da fare in Interface Builder?

  • Ciao Andrea, ho un problema, dopo aver messo in RUN, mi si blocca (schermo nero dell’iphone) e mi evidenzia la riga:
    @synthesize fieldNome, labelSaluto;

    dicendomi:
    stopped at breakpoint 5

    Puoi aiutarmi?
    Ringrazio in anticipo

  • Sono riuscito a farlo funzionare…
    Avevo inserito per sbaglio un BreakPoint su una riga… riguardando il codice me ne sono accorto..
    grazie lo stesso

    ___________________
    Ciao Andrea, ho un problema, dopo aver messo in RUN, mi si blocca (schermo nero dell’iphone) e mi evidenzia la riga:
    @synthesize fieldNome, labelSaluto;

    dicendomi:
    stopped at breakpoint 5

    Puoi aiutarmi?
    Ringrazio in anticipo

  • Vorrei porgere una domanda: il metodo del rilascio della tastiera e’ legato al bottone “Saluta” vero??? e se volessi che la tastiera fosse nascosta dopo aver premuto return dalla stessa ??? grazie…..

  • @dodo: È proprio quello che viene spiegato nella parte finale del tutorial. Semplicemente devi implementare un metodo del UITextField delegate, esattamente il seguente:

    // questo metodo permette alla tastiera di chiudersi
    -(BOOL)textFieldShouldReturn:(UITextField *)textField{
    	[textField resignFirstResponder];
    	return YES;
    }
    

    Così facendo quando premerai su “Return” la tastiera verrà nascosta 😉

  • ciao allora la guida è veramente chiarissima e fatta molto bene , ho riscontrato solo un problema:
    quando vado nel file HelloWorldViewController.h e modifico la stringa:
    @interface HelloWorldViewController : UIViewController {
    con questa:
    @interface HelloWorldViewController : UIViewController <UITextFieldDelegate>{
    mi da degli errori e xcode mi dice che si aspetta qualcosa prima del token &.
    Ho risolto mettendo al posto di “<UITextFieldDelegate> ” questo :
    ” “.
    Volevo sapere se è la stessa cosa grazie mille in anticipo

  • scusa ma ho fatto confusione nel post sopra volevo scrivere:
    quando vado nel file HelloWorldViewController.h e modifico la stringa:
    @interface HelloWorldViewController : UIViewController {
    con questa:
    @interface HelloWorldViewController : UIViewController <UITextFieldDelegate>{
    mi da degli errori e xcode mi dice che si aspetta qualcosa prima del token &.
    Ho risolto sostituendo <UITextFieldDelegate> con .
    cambia qualcosa???

  • mi sa che non mi prende alcuni caratteri comunque facendola breve la stringa nel file HelloWorldViewController.h per far nascondere la tastiera non mi funziona e ho risolto con quest’altra:
    @interface HelloWorldViewController : UIViewController

Leave a reply:

Your email address will not be published.

Site Footer