![\"Tutorial_002\"](\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/10\/T002.jpg\")
<\/p>\nFigura 1 – Aspetto finale del programma T#002<\/p>\n<\/div>\n
<\/center><\/p>\n
Come potete vedere dall’immagine ci sono diversi elementi con cui faremo la nostra conoscenza. Il funzionamento del programmino \u00e8 semplice e intuitivo. Baster\u00e0 infatti inserire i valori di X e Y negli appositi campi e premendo il tasto “calcola somma” verr\u00e0 eseguito il calcolo e mostrato come risultato nella label a sfondo nero che vedere nell’immagine. Poche istruzioni quindi, ma anche qualche piccola accortezza che dar\u00e0 un tocco pi\u00f9 completo anche ad un programma di cos\u00ec piccole dimensioni.<\/p>\n
Apriamo Xcode e selezioniamo “Create a new Xcode project<\/em>“. Nella schermata che si apre tra i Template iPhone OS, selezioniamo “view-based Application<\/em>” (Figura 2) e andiamo avanti.<\/p>\n Figura 2 – Scelta template nuovo progetto<\/p>\n<\/div>\n <\/center><\/p>\n Diamo il nome “Somma<\/em>” al nostro nuovo progetto. Salviamo quindi nella posizione desiderata e iniziamo a dare un’occhiata a come si presenta il nostro nuovo progetto.<\/p>\n Figura 3 – Finestra nuovo progetto Xcode<\/p>\n<\/div>\n <\/center><\/p>\n Come potete vedere dalla Figura 3 in Groups & Files<\/em> sulla sinistra, sono presenti molte cartelle e files del progetto pronti per essere modificati. Ci\u00f2 che interessa a noi in questo tutorial sono 2 file nella cartella Classes<\/em>: SommaViewController.h<\/em> e SommaViewController.m<\/em> che contengono il codice sorgente dei controlli nella nostra applicazione pi\u00f9 il metodo che si occuper\u00e0 di effettuare la somma e un file nella cartella Resources<\/em>, ovvero SommaViewController.xib<\/em> inerente l’interfaccia grafica creata tramite Interface Builder.<\/p>\n Facciamo doppio click sul file SommaViewController.xib<\/em> descritto poco fa, si aprir\u00e0 quindi Interface Builder che useremo per disegnare, tramite Drag & Drop, l’interfaccia mostrata in Figura 1. Lasciamo perdere per ora gli abbellimenti grafici visibili in Figura 1, come il titolo o lo sfondo e “disegnamo” solo i controlli principali.<\/p>\n Fate doppio click sull’icona della View mostrata in Figura 4 e si aprir\u00e0 la vostra view vuota.<\/p>\n Figura 4 – Aprire la view<\/p>\n<\/div>\n <\/center><\/p>\n Ora, tramite la finestra Library<\/em> di Interface Builder, contenente tutti gli oggetti preconfezionati, cercate e trascinate nella view i seguenti elementi (utilizzate, se volete, il campo testo “Filter<\/em>” utile per la ricerca degli elementi al fondo di Library<\/em> ):<\/p>\n Questi sono i controlli essenziali per il corretto funzionamento dell’applicazione di questo tutorial. Nessuno vi vieta, per impratichirvi un po’ con Interface Builder, di inserire anche gli altri elementi che vedete in Figura uno, per la maggior parte semplici UILabel con settata la sola propriet\u00e0 Text<\/em>, mentre per il titolo in alto ho usato una UINavigationBar (che vedremo pi\u00f9 avanti a cosa serve) con settato il solo attributo Title<\/em>, comodo per abbellire un po’ la nostra applicazione fornendola appunto di un titolo.<\/p>\n Inseriti gli oggetti nella view, posizionatoli, trascinandoli, in modo che l’aspetto sia il pi\u00f9 vicino possibile a quello della Figura 1, o come meglio preferite, e selezionandoli uno ad uno iniziate a dare un’occhiata alla finestra degli Attributi (Attributes<\/em>), mostrata in Figura 5. Da qui potrete modificare in modo semplice e intuitivo le propriet\u00e0 di ogni oggetto inserito nella vostra applicazione.<\/p>\n Figura 5 – Finestra degli attributi<\/p>\n<\/div>\n <\/center><\/p>\n Modificate per quanto riguarda le UITextField inserite gli attributi “Correction<\/em>” impostandolo a “No”, l’attributo “Keyboard<\/em>” in “Numbers & Punctuaction<\/em>” (che aprir\u00e0 in automatico la tastiera corretta per questa applicazione) e lasciate la spunta su “Clear When Editing Begins” che non far\u00e0 altro che cancellare il contenuto esistente nelle UITextField quando vorrette immettere un numero in fase di esecuzione. Vi consiglio, a tutorial terminato, di sperimentare con le altre propriet\u00e0 e di osservare il comportamento in fase di esecuzione dell’applicazione.<\/p>\n Per quanto riguarda l’oggetto UIButton, sempre tramite la finetra Attributes<\/em> o semplicemente con un doppio-click sul controllo, modificate l’attributo Title<\/em> inserendo “CALCOLA SOMMA”.<\/p>\n Salvate quindi e chiudete momentaneamente Interface Builder.<\/p>\n Torniamo su Xcode e clicchiamo SommaViewController.h<\/em> dentro Classes tramite Groups & Files. Dentro questo file andremo a dichiarare gli oggetti ed i metodi che user\u00e0 l’applicazione.<\/p>\n Di seguito il codice che dovrete scrivere al suo interno. Potete copiare e incollare, ma per esercitarvi con l’editor consiglio di riscrivere il codice. Questo vi aiuter\u00e0 inoltre ad imparare per bene la sintassi di objective-c<\/p>\n Analizziamo insieme il codice. IBOutlet<\/em> indica che l’oggetto \u00e8 associato ad un elemento creato con Interface Builder, infatti troviamo la dichiarazione dei due UITextField e della UILabel che useremo per il risultato.<\/p>\n -(IBAction)somma;<\/em> \u00e8 la dichiarazione del metodo che si occuper\u00e0 di effettuare il calcolo e come avrete intuito tramite l’istruzione IBAction<\/em>, anch’esso sar\u00e0 collegato ad un oggetto creato in IB (Interface Builder), precisamente all’UIButton.<\/p>\n Le tre @property<\/em> successive ci serviranno infine per poter usare tutte le propriet\u00e0 degli oggetti che abbiamo appena dichiarato.<\/p>\n Salvate il file e torniamo in Interface Builder per effettuare gli opportuni collegamenti.<\/p>\n Fate quindi doppio-click sul file SommaViewController.xib<\/em> dentro Resources<\/em>.<\/p>\n Nella finestra mostrata in Figura 4 clicchiamo su File’s Owner<\/em> e apriamo quindi la finestra Connection. Tra gli Outlets t<\/em>roveremo l’elenco degli elementi dichiarati in Xcode, portiamo il puntatore del mouse sul pallino che diventer\u00e0 un +, clicchiamo e tenendo premuto apparir\u00e0 una freccia che dovremmo portare sull’oggetto equivalente nella View. Dopodich\u00e8 rilasciamo il puntatore e si creer\u00e0 la connessione. Dovremo effettuare le seguenti connessioni:<\/p>\n Rimane ora solo da effettuare il collegamento dell’unica Received Action<\/em>, ovvero Somma<\/em> con il nostro UIButton. Facendo ci\u00f2 comparir\u00e0 un men\u00f9 contestuale dove andremo a selezionare “Touch Up Inside<\/em>” che indica semplicemente che il calcolo dovr\u00e0 essere svolto alla pressione del tasto.<\/p>\n In Figura 6 mostriamo come dovrebbe apparire la finestra Connection al termine di questa fase del tutorial:<\/p>\n Figura 6 – Connessioni tra oggetti IB e Xcode<\/p>\n<\/div>\n <\/center><\/p>\n Salvate e chiudete Interface Builder. Non ci resta quindi che scrivere il codice vero e proprio che far\u00e0 funzionare la nostra applicazione.<\/p>\n Apriamo ora il file SommaV<\/em>iewController.m<\/em> dentro Classes in Groups & Files e inseriamo al suo interno il seguente codice senza modificare il resto gi\u00e0 presente:<\/p>\n Vediamo a grandi linee cosa significa quanto appena scritto. L’istruzione @synthetize<\/em> non fa altro che caricare gli elementi dichiarati nel file SommaViewController.h<\/em> importato con la prima istruzione. Segue quindi il nostro metodo, il cuore di questo programmino. Per prima cosa dichiariamo tre variabili il cui tipo di valore sar\u00e0 un intero (int<\/em>) e le inizializziamo assegnando alle prima due (X e Y) il contenuto dell’attributo Text<\/em> dei due UITextField, ovviamente il contenuto deve essere trattato come valore intero (grazie a\u00a0intValue<\/em>) e non come se fosse una stringa, il tutto tramite le istruzioni int x = [[txtPrimoAddendo text] intValue];<\/em> e la successiva int y = [[txtSecondoAddendo text] intValue];<\/em><\/p>\n La terza inizializzazione, invece, setta nella variabile t<\/em>, sempre di tipo int<\/em>, la somma delle due precedenti (X e Y), calcola quindi la somma dei due valori inseriti dall’utente.<\/p>\n Le ultime due istruzioni servono invece a settare in una stringa (stringaRisultato<\/em>) la somma ottenuta, poi da visualizzare grazie all’ultima istruzione del metodo sulla UILabel della view connessa con lblTotale.<\/p>\n L’ultima porzione di codice non serve a nient’altro che a deallocare<\/em> la memoria utilizzata dalle variabili del programma. Questo per aumentare l’efficienza delle vostre applicazioni che girano su un Hardware se possiamo dire “limitato”.<\/p>\n A questo punto l’applicazione \u00e8 quasi terminata. L’unica cosa che manca da fare \u00e8 dire al programma di chiudere la tastiera una volta inseriti i nostri dati, in modo da nasconderla e poter visualizzare il nostro risultato. Vediamo come fare.<\/p>\n Apriamo il nostro file SommaViewController.m e aggiungiamo sotto il nostro metodo creato in precedenza quest’altro metodo:<\/p>\n Non preoccupatevi ora di come funziona, in quanto ancora complesso da capire. Tenete presente che ogni volta che ne avrete bisogno sar\u00e0 sempre questo il metodo da inserire.<\/p>\n Colleghiamolo quindi il metodo ai nostri UITextField tramite Interface Builder. Apriamo IB facendo come al solito doppio-click sul file SommaViewController.xib<\/em>, selezioniamo il primo UITextField e apriamo la finestra Connections, colleghiamo l’unico Outlets presente con il nostro File’s Owner. Ripetiamo il procedimento con il secondo UITextField, salviamo e chiudiamo infine Interface Builder.<\/p>\n A questo punto la nostra applicazione \u00e8 terminata non ci resta che avviarla e testarne il suo funzionamento.<\/p>\n Impostate l’SDK attivo come spiegato e avviate ed eseguite l’applicazione, come spiegato nel nostro primo tutorial<\/a>, sull’iPhone Simulatore o in alternativa sul vostro iPhone.<\/p>\n by David Pollak![\"Scelta](\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/10\/newProject.jpg\")
<\/p>\n![\"Finestra](\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/10\/somma_Xcode.jpg\")
<\/p>\nCreiamo l’interfaccia grafica<\/h4>\n
![\"Elementi_Programma_in_IB\"](\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/10\/finestra_elementi_IB.jpg\")
<\/p>\n\n
![\"Window_Attributes\"](\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/10\/attributi_IB.jpg\")
<\/p>\nDichiariamo i nostri oggetti in Xcode<\/h4>\n
\r\n\r\n#import
Colleghiamo gli oggetti di IB con quelli di Xcode<\/h4>\n
\n
![\"Connections_T002\"](\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/10\/connection_T002.jpg\")
<\/p>\nScriviamo un po’ di codice<\/h4>\n
\r\n#import \"SommaViewController.h\"\r\n\r\n@implementation SommaViewController\r\n\r\n@synthesize txtPrimoAddendo, txtSecondoAddendo, lblTotale;\r\n\r\n-(IBAction)somma{\r\n\tint x = [[txtPrimoAddendo text] intValue];\r\n\tint y = [[txtSecondoAddendo text] intValue];\r\n\tint t = x + y;\r\n\r\n\tNSString *stringaRisultato = [NSString stringWithFormat:@\"%d\",t];\r\n\t[lblTotale setText:stringaRisultato];\r\n}\r\n\r\n- (void)dealloc {\r\n\t[txtPrimoAddendo dealloc];\r\n\t[txtSecondoAddendo dealloc];\r\n\t[lblTotale dealloc];\r\n [super dealloc];\r\n}\r\n<\/pre>\nNascondiamo la tastiera<\/h4>\n
\r\n\/\/ Metodo per far chiudere la tastiera\r\n-(BOOL)textFieldShouldReturn:(UITextField *)textField{\r\n\t[textField resignFirstResponder];\r\n\treturn YES;\r\n}\r\n<\/pre>\nAvviare l’applicazione<\/h4>\n
Video Tutorial<\/h4>\n
\n<\/center><\/p>\n
\nParte 1<\/strong>
\n