T#002 – Calcolo di una somma

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 <UIKit/UIKit.h>
 
@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.