Ed eccoci al nostro secondo tutorial. Dopo la prima infarinatura dei giorni scorsi su alcuni concetti teorici e dopo la presentazione dei principali strumenti disponibili per programmare il vostro iPhone vi presentiamo un esempio pratico. Quello che andiamo a costruire oggi è un piccolo programma per il calcolo della somma di due addendi, che avrà l’aspetto mostrato in Figura 1.
Figura 1 – Aspetto finale del programma T#002
Come potete vedere dall’immagine ci sono diversi elementi con cui faremo la nostra conoscenza. Il funzionamento del programmino è semplice e intuitivo. Basterà infatti inserire i valori di X e Y negli appositi campi e premendo il tasto “calcola somma” verrà 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à un tocco più completo anche ad un programma di così piccole dimensioni.
Apriamo Xcode e selezioniamo “Create a new Xcode project“. Nella schermata che si apre tra i Template iPhone OS, selezioniamo “view-based Application” (Figura 2) e andiamo avanti.
Figura 2 – Scelta template nuovo progetto
Diamo il nome “Somma” al nostro nuovo progetto. Salviamo quindi nella posizione desiderata e iniziamo a dare un’occhiata a come si presenta il nostro nuovo progetto.
Figura 3 – Finestra nuovo progetto Xcode
Come potete vedere dalla Figura 3 in Groups & Files sulla sinistra, sono presenti molte cartelle e files del progetto pronti per essere modificati. Ciò che interessa a noi in questo tutorial sono 2 file nella cartella Classes: SommaViewController.h e SommaViewController.m che contengono il codice sorgente dei controlli nella nostra applicazione più il metodo che si occuperà di effettuare la somma e un file nella cartella Resources, ovvero SommaViewController.xib inerente l’interfaccia grafica creata tramite Interface Builder.
Creiamo l’interfaccia grafica
Facciamo doppio click sul file SommaViewController.xib descritto poco fa, si aprirà 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.
Fate doppio click sull’icona della View mostrata in Figura 4 e si aprirà la vostra view vuota.
Figura 4 – Aprire la view
Ora, tramite la finestra Library di Interface Builder, contenente tutti gli oggetti preconfezionati, cercate e trascinate nella view i seguenti elementi (utilizzate, se volete, il campo testo “Filter” utile per la ricerca degli elementi al fondo di Library ):
- N. 2 UITextField
- N. 1 UIButton
- N. 1 UILabel
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à Text, mentre per il titolo in alto ho usato una UINavigationBar (che vedremo più avanti a cosa serve) con settato il solo attributo Title, comodo per abbellire un po’ la nostra applicazione fornendola appunto di un titolo.
Inseriti gli oggetti nella view, posizionatoli, trascinandoli, in modo che l’aspetto sia il più 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), mostrata in Figura 5. Da qui potrete modificare in modo semplice e intuitivo le proprietà di ogni oggetto inserito nella vostra applicazione.
Figura 5 – Finestra degli attributi
Modificate per quanto riguarda le UITextField inserite gli attributi “Correction” impostandolo a “No”, l’attributo “Keyboard” in “Numbers & Punctuaction” (che aprirà in automatico la tastiera corretta per questa applicazione) e lasciate la spunta su “Clear When Editing Begins” che non farà 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à e di osservare il comportamento in fase di esecuzione dell’applicazione.
Per quanto riguarda l’oggetto UIButton, sempre tramite la finetra Attributes o semplicemente con un doppio-click sul controllo, modificate l’attributo Title inserendo “CALCOLA SOMMA”.
Salvate quindi e chiudete momentaneamente Interface Builder.
Dichiariamo i nostri oggetti in Xcode
Torniamo su Xcode e clicchiamo SommaViewController.h dentro Classes tramite Groups & Files. Dentro questo file andremo a dichiarare gli oggetti ed i metodi che userà l’applicazione.
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à inoltre ad imparare per bene la sintassi di objective-c
#import
@interface SommaViewController : UIViewController {
IBOutlet UITextField *txtPrimoAddendo;
IBOutlet UITextField *txtSecondoAddendo;
IBOutlet UILabel *lblTotale;
}
-(IBAction)somma;
@property (nonatomic, retain) IBOutlet UITextField *txtPrimoAddendo;
@property (nonatomic, retain) IBOutlet UITextField *txtSecondoAddendo;
@property (nonatomic, retain) IBOutlet UILabel *lblTotale;
@end
Analizziamo insieme il codice. IBOutlet indica che l’oggetto è associato ad un elemento creato con Interface Builder, infatti troviamo la dichiarazione dei due UITextField e della UILabel che useremo per il risultato.
-(IBAction)somma; è la dichiarazione del metodo che si occuperà di effettuare il calcolo e come avrete intuito tramite l’istruzione IBAction, anch’esso sarà collegato ad un oggetto creato in IB (Interface Builder), precisamente all’UIButton.
Le tre @property successive ci serviranno infine per poter usare tutte le proprietà degli oggetti che abbiamo appena dichiarato.
Salvate il file e torniamo in Interface Builder per effettuare gli opportuni collegamenti.
Fate quindi doppio-click sul file SommaViewController.xib dentro Resources.
Colleghiamo gli oggetti di IB con quelli di Xcode
Nella finestra mostrata in Figura 4 clicchiamo su File’s Owner e apriamo quindi la finestra Connection. Tra gli Outlets troveremo l’elenco degli elementi dichiarati in Xcode, portiamo il puntatore del mouse sul pallino che diventerà un +, clicchiamo e tenendo premuto apparirà una freccia che dovremmo portare sull’oggetto equivalente nella View. Dopodichè rilasciamo il puntatore e si creerà la connessione. Dovremo effettuare le seguenti connessioni:
- txtPrimoAddendo con il primo UITextField della View
- txtSecondoAddendo con il secondo UITextField della View
- lblTotale con la UILabel che mostrerà il risultato
Rimane ora solo da effettuare il collegamento dell’unica Received Action, ovvero Somma con il nostro UIButton. Facendo ciò comparirà un menù contestuale dove andremo a selezionare “Touch Up Inside” che indica semplicemente che il calcolo dovrà essere svolto alla pressione del tasto.
In Figura 6 mostriamo come dovrebbe apparire la finestra Connection al termine di questa fase del tutorial:
Figura 6 – Connessioni tra oggetti IB e Xcode
Salvate e chiudete Interface Builder. Non ci resta quindi che scrivere il codice vero e proprio che farà funzionare la nostra applicazione.
Scriviamo un po’ di codice
Apriamo ora il file SommaViewController.m dentro Classes in Groups & Files e inseriamo al suo interno il seguente codice senza modificare il resto già presente:
#import "SommaViewController.h"
@implementation SommaViewController
@synthesize txtPrimoAddendo, txtSecondoAddendo, lblTotale;
-(IBAction)somma{
int x = [[txtPrimoAddendo text] intValue];
int y = [[txtSecondoAddendo text] intValue];
int t = x + y;
NSString *stringaRisultato = [NSString stringWithFormat:@"%d",t];
[lblTotale setText:stringaRisultato];
}
- (void)dealloc {
[txtPrimoAddendo dealloc];
[txtSecondoAddendo dealloc];
[lblTotale dealloc];
[super dealloc];
}
Vediamo a grandi linee cosa significa quanto appena scritto. L’istruzione @synthetize non fa altro che caricare gli elementi dichiarati nel file SommaViewController.h 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à un intero (int) e le inizializziamo assegnando alle prima due (X e Y) il contenuto dell’attributo Text dei due UITextField, ovviamente il contenuto deve essere trattato come valore intero (grazie a intValue) e non come se fosse una stringa, il tutto tramite le istruzioni int x = [[txtPrimoAddendo text] intValue]; e la successiva int y = [[txtSecondoAddendo text] intValue];
La terza inizializzazione, invece, setta nella variabile t, sempre di tipo int, la somma delle due precedenti (X e Y), calcola quindi la somma dei due valori inseriti dall’utente.
Le ultime due istruzioni servono invece a settare in una stringa (stringaRisultato) la somma ottenuta, poi da visualizzare grazie all’ultima istruzione del metodo sulla UILabel della view connessa con lblTotale.
L’ultima porzione di codice non serve a nient’altro che a deallocare la memoria utilizzata dalle variabili del programma. Questo per aumentare l’efficienza delle vostre applicazioni che girano su un Hardware se possiamo dire “limitato”.
A questo punto l’applicazione è quasi terminata. L’unica cosa che manca da fare è 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.
Nascondiamo la tastiera
Apriamo il nostro file SommaViewController.m e aggiungiamo sotto il nostro metodo creato in precedenza quest’altro metodo:
// Metodo per far chiudere la tastiera
-(BOOL)textFieldShouldReturn:(UITextField *)textField{
[textField resignFirstResponder];
return YES;
}
Non preoccupatevi ora di come funziona, in quanto ancora complesso da capire. Tenete presente che ogni volta che ne avrete bisogno sarà sempre questo il metodo da inserire.
Colleghiamolo quindi il metodo ai nostri UITextField tramite Interface Builder. Apriamo IB facendo come al solito doppio-click sul file SommaViewController.xib, 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.
A questo punto la nostra applicazione è terminata non ci resta che avviarla e testarne il suo funzionamento.
Avviare l’applicazione
Impostate l’SDK attivo come spiegato e avviate ed eseguite l’applicazione, come spiegato nel nostro primo tutorial, sull’iPhone Simulatore o in alternativa sul vostro iPhone.
Video Tutorial
by David Pollak
Parte 1
Parte 2
32 Responses to “T#002 – Calcolo di una somma”
27 Ottobre 2009
T#002 – Calcolo di una somma | IPhoneMate[…] here: T#002 – Calcolo di una somma Share and […]
28 Ottobre 2009
Fede81Ottimo tutorial… E ottimo sito!!! Continuate così 😉
30 Ottobre 2009
Tano70Tutorial semplice e chiaro, grazie. E’ possibile avere qualche chiarimento sul funzionamento del linguaggio di programmazione?
30 Ottobre 2009
Staff devAPPSi, stiamo preparando delle lezioni sull’objective-C che saranno online nei prossimi giorni 😉
2 Novembre 2009
T#004 – Inviare una e-mail | devAPP[…] infine di collegare, come già visto nel Tutorial 02, gli outlet delle UIText con File’s Owner per far sparire la tastiera quando non […]
11 Novembre 2009
MauriEhy ciao!
Sto provando un pò di tutorial visto che sono a casa malato e già mi sono “bloccato”. Non riesco a far scomparire la tastiera quando premo il tasto “Return”. Sapreste consigliarmi dove potrei ricercare il problena? La cosa strana è che non da errori di nessun tipo. :-\
Anche mettendo un printf all’interno del metodo “textFieldShouldReturn”, non mi appare nulla nella console.
Grazie in anticipo!
11 Novembre 2009
Staff devAPPPosta il codice nel forum nella sezione Xcode e vediamo dov’è l’errore 😉
11 Novembre 2009
MauriOk, grazie! 😀
18 Novembre 2009
pippomancome faccio ad impostare un’icona aiutatemi ho già provato a inserire una jpg di 60*60 chiamata”Icon.jpg” nella cartella del progetto ma non è cambiato nulla
18 Novembre 2009
Staff devAPPCrea un file .png delle dimensioni 57×57 pixel e chiamalo Icon.png
Importalo nel progetto e avrai la tua icona 😉
22 Novembre 2009
Eus881Salve, ho appena iniziato a conoscere xcode e l sdk x l’iphone in generale. il programma effettivamente m funziona ma non riesco a far scomparire la tastiera, ho provato a seguire la guida piu volte, ma non scompare.
ho fatto tutto quello che dice la guida ma non sparisce.
in un altra guida ho trovato anche chge bisogna aggiungere
dove al metodo :
al metodo @interface SommaViewController : UIViewController ….
è vero? comunque ho provato anche questo ma niente.. se avete tempo magari e riuscite ad aiutarmi.. posso postare qualke listato o quello che vi serve.. grazie..
22 Novembre 2009
Eus881Salve, ho appena iniziato a conoscere xcode e l sdk x l’iphone in generale. il programma effettivamente m funziona ma non riesco a far scomparire la tastiera, ho provato a seguire la guida piu volte, ma non scompare.
ho fatto tutto quello che dice la guida ma non sparisce.
in un altra guida ho trovato anche chge bisogna aggiungere
al metodo
@interface SommaViewController : UIViewController ….
è vero? comunque ho provato anche questo ma niente.. se avete tempo magari e riuscite ad aiutarmi.. posso postare qualke listato o quello che vi serve.. grazie..
22 Novembre 2009
Staff devAPPNel forum objective-c “Problemi con T#002 – Calcolo di una somma” trovi la soluzione spiegata con un’ulteriore immagine 😉
22 Novembre 2009
Staff devAPPAttenzione a questa parte:
“selezioniamo il primo UITextField e apriamo la finestra Connections, colleghiamo l’unico Outlets presente con il nostro File’s Owner.”
Comunque trovi un’immagine che mostra esattamente questo passaggio da fare per ogni UITextField nel forum
19 Gennaio 2010
manuelconclusa anche questa…
25 Marzo 2010
El JobsoCiao, potresti darmi il link per scaricare il progetto?
29 Marzo 2010
Video Tutorial di programmazione iPhone SDK (in italiano) | devAPP[…] Ed eccoci al nostro secondo tutorial. Dopo la prima infarinatura dei giorni scorsi su alcuni concetti teorici e dopo la presentazione dei principali strumenti disponibili per programmare il vostro iPhone vi presentiamo un esempio pratico. Quello che andiamo a costruire oggi è un piccolo programma per il calcolo della somma di due addendi (visualizza l’articolo completo) […]
25 Aprile 2010
AndreaBene arrivo tardi ma ottimo, e se invece della somma volessi fare un operazione + complessa tipo una moltiplicazione con 2 variabili e 2 costanti :
PesoBobina=Diametro*(kPesoSpecifico*kValoreMoltiplicazione*Larghezza), non ne capisco molto….
saluti
26 Aprile 2010
AndreaBernsBello Complimenti, Ottimo anche il Video(anche migliore ..)
21 Luglio 2010
GianlucaCiao,
il video tutorial relativo alla somma si compone di due parti.
La seconda parte che avete scaricato in realtà è sempre la prima.
Sbaglio io qualcosa oppure è così?
Grazie
21 Luglio 2010
Staff devAPPPiccola svista 😛 Correggiamo subito, grazie per la segnalazione 😉
22 Novembre 2010
eronddomanda forse stupida.
E se volessi associare il metodo che fa scomparire la tastiera ANCHE all’azione del UIButton?
Ovvero, l’utente digita ma se anzichè premere return del tastierino schiaccia direttamente il pulsante “SOMMA” vorrei che si chiudesse la tastiera comunque!
Grazie..
18 Gennaio 2011
CodeSurgeonSul forum non trovo un post intitolato Problemi con T#002… come si fà? 🙂
19 Gennaio 2011
Staff devAPPMa il post esisteva già?
24 Gennaio 2011
GiòComplimenti per la chiarezza e peri vostri tutorial che aiutano gli imbranati come me a muovere i primi passi in questo mondo affascinante.
12 Marzo 2011
Stefano MalaisiChiedo scusa..sono nuovo.. Nelle mie library NON c’e’ o almeno sembra non esserci l’elemento TITLE.. Dal video ho notato che mi mancano anche altre cose..Per intenderci dall’Interface Builder quando costruisco il layout della view..!! David mette un TITLE che io non ho..
Qualcuno potrebbe dirmi dove sbaglio o se non sono aggiornato ??
Grazie siete molto professionali.
Avete un nuovo Alunno !!
12 Marzo 2011
Stefano MalaisiComplimenti da oggi avete un nuovo Alunno !!!
12 Marzo 2011
Stefano MalaisiVolevo cancellare il primo post avendo trovato tutto !!!
Scusate..
2 Maggio 2011
MaveDevGrazie mille anche per questo tutorial, tutti sempre molto ben fatti 😉
27 Ottobre 2011
MoserCiao a tutti, a me l’applicazione va in crash subito dopo averla lanciata…sospetto errore in IB…possibile?
25 Aprile 2012
GiulyDoovrei calcolare la somma di piú numeri (ciascuno dato da un UIButton, come si fa a dichiarare i valori dei singoli bottoni? Potete aiutarmi per favore? Sono un’imbranata totale!!
17 Agosto 2012
AntonioRaga sapete aiutarmi? non mi trovo bene con queste guide perché ho una versione di xcode più aggiornata e cambiano tutti i nomi 🙁 non riesco a trovare file e cartelle la mia versione è Version 4.3.3 (4E3002) ho un macbook pro sistema osx 10.7.3.
Sapete aiutarmi? Grazie!