Tutorial Pratici Per iPhone Sdk

5/10/2018 Tutorial Pratici Per iPhone Sdk - slidepdf.com

http://slidepdf.com/reader/full/tutorial-pratici-per-iphone-sdk 1/85

TUTO RIAL PRATICIPER IPHONE SDK

Andrea Busi, “BubiDevs”

www.bubidevs.net

Prima Edizione - Giugno 2009

Guida pratica a # ’iPhone SDK 1

http://www.bubidevs.net/




INDICE

Prefazione 5Ca pitolo 1: Introduzione al SDK e ad XCode 6

Introduzione 6

Panoramica sul SDK 6

XCode 7

Ca pitolo 2: Come creare un nuovo progetto 9 I template di XCode 9

Creare un nuovo progetto 11

Interface Builder 11

Capitolo 3: Il nostro primo progetto, He # oWorld! 14

Creiamo la struttura grafica 14

Definiamo gli elementi e le azioni 15

Scriviamo il codice necessario 18

Facciamo nascondere la tastiera 19

Ca pitolo 4: TrashApp, gestiamo le immagini 21

Definiamo l ’applicazione 21

Definiamo gli o % etti e la classe 24

Implementiamo il movimento del logo 26

Il ripristino del logo 28

Capitolo 5: UIToolbar e auto- rotazione 29





Definiamo la classe e gli o % etti 32


Ca pitolo: 6: NSTimer e UIProgressView 35


Definiamo la classe e gli o % etti 36

Scriviamo il codice 38

Ca pitolo 7: AccessContact, accediamo a # a rubrica 41

Definiamo il progetto 41

Definiamo la struttura grafica 42


Ca pitolo 8: Creiamo un mini browser con le UIWebView 46


Definiamo i componenti e co # eghiamo le azioni 47

Scriviamo il codice per aprire la pagina desiderata 49

Ca pitolo 9: UITableView, gestiamo le tabe # e 51

Parte 1: creiamo e definiamo la tabe # a 51

Creiamo un nuovo progetto 51

Definiamo la struttura grafica 52

Inseriamo il codice necessario 53

Parte 2: Inseriamo alcune funzionalità 56

A % iungiamo la barra di navigazione 56

Permettiamo la cance # azione di una riga 57




Rendiamo le ce # e selezionabili 58

Parte 3: Implementiamo la ricerca 60

A % iungiamo il box di ricerca 60

Modifichiamo i metodi già esistenti 61

Implementiamo la ricerca 63

Capitolo 10: XML 66

Cosa è XML? 66

XML nel SDK di iPhone 68



Ca pitolo 11: Gestire più viste create con IB 74

Creiamo la vista principale 74

Creiamo la vista ( e la classe ) “VistaUno” 75

Facciamo caricare la prima vista a # ’avvio de # ’applicazione 78

Creiamo la vista ( e la classe ) “VistaDue” 81

Impostiamo le azioni per muoverci tra le viste 82




PrefazioneQuesto libro racchiude tutti i tutorial che ho creato sulla programmazione per iPhone e iPod

Touch. Non vuole essere un manuale esauriente o sostituirsi alla documentazione ufficiale App-

le, ma solo uno strumento per chi è alle prime armi, oppure per chi vuole imparare qualcosa che ancora non sa.

Troverete una serie di guide pratiche, da seguire passo per passo, commentate e spiegate, perconsentire a tutti di imparare e capire quello che viene fatto.Ringrazio chiunque legga queste pagine, sperando di potervi aiutare in un vostro scopo, sia la -

vorativo o per pura passione ( come la mia ).Ringrazio Fabiano Confuorto, fondatore e amministratore di iSpazio, una stupenda community che mi ha fatto scoprire il mondo iPhone, e che mi ha dato l’opportunità di creare e pubblicarei miei primi tutorial.

Ringrazio la mia fidanzata, che mi ha sempre sopportato e supportato, seppur non sappia nien-te di programmazione!Ringrazio Steve Jobs, per aver creato Mac e l’iPhone, cercando sempre la perfezione nelle cose.E ricordatevi, solo essendo curiosi e a ff amati è possibile scoprire e creare qualcosa di nuovo e

veramente innovativo.

“Siate a ff amati, siate fo # i.”




Capitolo 1: Introduzione al SDK e ad XCode

INTRODUZIONE

Con il rilascio del firmware 2.0, Apple ha segnato una svolta nel settore mobile: non era maistato così semplice sviluppare e vendere le proprie applicazioni. Per permettere tutto ciò, App-le ha creato AppStore, uno spazio che si integra al già famoso e collaudato iTunes Store. Qual-siasi sviluppatore, indipendente o azienda già a ff ermata, può pubblicare le proprie creazionisemplicemente acquistando una licenza annua, al prezzo di 99$ ( 79€ per noi europei ).Ma come si sviluppano le applicazioni?Il tutto è davvero molto semplice ( in pieno stile Apple ): insieme al firmware 2.0, infatti, è statorilasciato un SDK ( Software Development Kit ) ufficiale, che integra tutti gli strumenti neces-sari per creare applicazioni e giochi per iPhone e iPod Touch. Questo SDK è liberamente sca -

ricabile dall’iPhone Dev Center ( http://developer.apple.com/iphone/ ), previa registrazione gra -tuita ( ma si può accedere alla sezione anche con il proprio account di iTunes ). L’iPhone Dev Center è l’area di Apple dedicata agli sviluppatori ( ovviamente di applicazioni per iPhone ), incui si può trovare davvero tantissimo materiale molto utile: esempi con codice ben commenta -to, documentazione delle librerie, documenti teorici, video, e molto altro ancora.Come ho già detto, per pubblicare applicazioni in AppStore è necessario disporre della licenza ufficiale. Questo, però, non basta per vedere pubblicate le proprie creazioni: ogni applicazione,infatti, passa sotto il controllo di Apple, che decide se accettarle o meno. Le applicazioni pre-senti in AppStore, infatti, devono rispettare il contratto del SDK, che prevede alcune limita -zioni: è vietato, ad esempio, duplicare funzioni già presenti nel S.O. dell’iPhone ( come l’invio diSMS e MMS ), oppure sono vietate applicazioni con contenuto a sfondo sessuale o violento.Non pensate, quindi, di poter fregare Apple: c’è chi si è visto rifiutare la propria applicazioneanche per una semplice icona.

PANORAMICA SUL SDKDopo aver scaricato e installato l’SDK ( un’immagine dmg di circa 2 GByte ), troverete tutto ilnecessario per sviluppare nella cartella “/Developer/Applications”. Gli strumenti ( davvero mol-

to potenti ) che Apple mette a disposizione sono i seguenti:• Dashcod e , è un utile tool con cui potremo creare pagine web, widget ( anche per la Dash-

board di Mac OS X ) e altro;• Instruments, permette di analizzare e valutare le prestazioni delle nostre applicazioni ( in

termini di consumo di memoria, impiego del processore, etc ). È destinato, ovviamente, aglisviluppatori più esperti.

• Interface Builder , grazie a questa applicazione sarà davvero un gioco da ragazzi crearel’aspetto grafico dei nostri programmi. Potremo inserire qualsiasi tipo di oggetto ( bottoni,label, viste ) semplicemente trascinando gli oggetti nella nostra schermata.


http://developer.apple.com/iphone/

http://developer.apple.com/iphone/



• Quartz Composer , è un tool che permette di creare animazioni ed eff etti grafici, da utilizzarepoi in altri programmi.

• XCod e , è l’ambiente di sviluppo vero e proprio. Sarà qui, infatti, che andremo a creare i no-

stri progetti, scrivere il codice e compilare il tutto. È lo strumento, insieme ad InterfaceBuilder, che utilizzeremo di più.

XCODE Analizziamo, ora, come si presenta XCode. Aprendo un progetto ( vedremo nel capitolo 2 comecrearne un nuovo ) otterremo la seguente schermata:

Potete notare tre sezioni principali: a destra troviamo “Groups & Files”, in cui abbiamo tutti ifile che compongono il nostro progetto. Troveremo, quindi, le classi, le immagini inserite, iframework utilizzati. A destra, invece, possiamo vedere l’editor del codice, che ci assisterà e cipermetterà di scrivere il nostro codice. La barra in alto, infine, ci off re la possibilità di compila -re ed installare la nostra applicazione, sul dispositivo che preferiamo: il nostro iPhone ( solo nelcaso in cui abbiamo la licenza ufficiale ) oppure l’iPhone Simulator ( un simulatore che ci per-




metterà di testare le nostre applicazioni comodamente sul Mac, senza dover installare nulla sulnostro iPhone ).Particolare importanza ha il menù a tendina presente a sinistra della barra. Se lo apriamo tro-

viamo le seguenti voci:

Nella prima parte, denominata “ Active SDK ” andremo a selezionare la versione del firmwarecon cui vogliamo che sia compatibile la nostra applicazione. Questo è necessario in quantospesso, con il rilascio di nuovi firmware, vengono aggiunte anche nuove funzioni al SDK ( le

API ). Quindi, un’applicazione scritta e compilata per il firmware 2.2 potrebbe non funzionarecon una versione inferiore del firmware ( spesso è proprio impossibile installarla, in quanto

l’AppStore controlla questa compatibilità in fase di installazione )

. Al contrario, se compiliamol’applicazione per la versione 2.1 funzionerà sicuramente ( a meno che non utilizziate delle APIcon dei bug ) sulla 2.2. È importante, quindi, scegliere con cura la versione da utilizzare, per nonescludere parte di utenza dall’utilizzo della nostra applicazione. È possibile, inoltre, scegliere seeseguirla sul simulatore ( e in tal caso ci basta scegliere quelle con prefisso “Simulator” ) oppuresul nostro iPhone.La seconda impostazione molto importante riguarda “ Active Configuration”: selezionando l’op-zione “Debug” otterremo un’applicazione più pesante, progettata per essere testata e corretta ( proprio in quella che viene definita fase di debug ); la versione ”Release”, invece, è molto più

leggere ed è pronta per essere rilasciata e pubblicata in AppStore.




Capitolo 2: Come creare un nuovo progetto

Abbiamo dato un’occhiata al SDK e ad XCode. È venuto il momento di iniziare a vedere gli

strumenti che XCode ci mette a disposizione per realizzare i nostri progetti.In questo capitolo vedremo come creare un nuovo progetto, quali template XCode ci mette a disposizione e le caratteristiche principali di Interface Builder.

I TEMPLATE DI XCODE Avviando XCode e selezionando “File -> New Project...”, si aprirà la seguente finestra:

Potete notare che XCode ci fornisce vari template, ovvero delle strutture già pronte, che cipermetteranno di realizzare applicazioni sullo stile di quelle native. Non dovremo perderetempo, quindi, per replicare lo stile delle altre applicazioni, perché è Apple stessa che ce li met-te a disposizione.




Navigation- Based Tab Bar Application Utility Application

Analizziamo, ora, i vari template che ci vengono forniti.• Navigation- Based Application, genera un’applicazione in cui possiamo navigare in sotto-livel-

li. Per farvi un esempio, pensate alla struttura di “Impostazioni” nel vostro iPhone: aveteuna barra in alto che visualizza il titolo della sezione corrente, e vi permette, tramite unbottone, di tornare alla sezione precedente. Questa barra viene chiamata “Navigation Bar”.

Utile per creare applicazioni con tabelle, in cui vogliamo mostrare anche le informazionisui vari elementi.

• OpenGL ES Application, questa è sicuramente la tipologia più complessa, in quanto si basa sulla tecnologia OpenGL ( http://it.wikipedia.org/wiki/OpenGL ), sfruttata principalmenteper realizzare videogiochi o animazioni grafiche complesse. In questo libro non analizze-remo questa tipologia di applicazioni.

• Tab Bar Application, fornisce un’applicazione con la “tab bar”, ovvero la barra nera compo -sta da più sezioni ( ad esempio quella che trovate nell’applicazione nativa “Musica” ).

• Utility Application, questa tipologia implementa un menù che viene richiamato ruotando la

schermata principale. Anche in questo caso, potete trovare una similitudine con l’applica -zione “Meteo”: se premete sulla “i” presente a fondo pagina, la schermata ruoterà e vi per-metterà di modificare i settaggi dell’applicazione.

• View- Based Application, fornisce un’applicazione vuota, senza nessuna implementazioneparticolare. Questo template è composto da una finestra, chiamata “MainWindow”, e una

vista, “[nome_progetto]ViewController”, che viene caricata proprio dalla finestra principa -le. Sarà questo punto di partenza per tutti i nostri tutorial.

• Window- Based Application, è molto simile al caso precedente, ma il template fornito è com -

posto solamente da una finestra ( non è presente quindi la vista “[nome_progetto]ViewCon-troller” ).


http://it.wikipedia.org/wiki/OpenGL

http://it.wikipedia.org/wiki/OpenGL



CREARE UN NUOVO PROGETTOIn ogni tutorial che vedremo, sarà necessario creare un nuovo progetto. Per fare ciò, vi basterà aprire XCode, selezionare “File -> New Project...”, si aprirà la finestra con la scelta del templa -

te, che abbiamo appena analizzato. Scegliete il template desiderato ( generalmente sarà View -Based Application ), cliccate su “Choose..” e nel box successivo inserite il nome del nostro progetto. Finito!

INTERFACE BUILDER Scorrendo la sezione “Groups & Files” possiamo vedere tutti i file che XCode ha già inseritoper noi. Nel capitolo 3 vedremo come creare la nostra prima applicazione ( il classico Hel-loWorld ), ora ci limitiamo ad analizzare le caratteristiche principali dell’Interface Builder.Facciamo doppio clic su “[nome_progetto]ViewController.xib”, nella cartella “Resources”, e si

aprirà Interface Builder.Ci ritroveremo con una situazione simile a questa:

Potete notare vari strumenti sul vostro desktop: la libreria, la schermata della nostra applica -zione ( per ora completamente grigia ), ed altri strumenti.

Analizziamo ora questi componenti.




• Library, è la libreria da cui possiamo inserire tutti gli oggetti che desideriamo. Se non è già aperta, ci basterà andare in “Tools -> Library” e si apri-rà una finestra come quella a lato. Scorrendo la barra

laterale, potete notare moltissimi componenti, comebottoni, label di testo, viste, barre e molto altro. Tuttiquesti elementi potranno essere utilizzati nelle nostreapplicazioni. Per inserirli basta trascinare un compo-nente nella schermata dell’applicazione, e posizionarloa proprio piacere ( questo è vero per tutti i componentitranne i “Controllers”, che potrete riconoscere perchéhanno uno sfondo giallo ).

• Vista o finestra, è la nostra vista, ovvero la finestra che verrà visualizzata sull’iPhone. Potre-mo personalizzarla a nostro piacimento, e impareremo nei capitoli successivi come fare.L’unica cosa che vi faccio notare, è la freccia presente a destra del nome della vista:

Se provate a cliccarla, noterete che la vista ruota: questo perché sarà possibile implementa -re la possibilità di ruotare la nostra applicazione quando l’utente ruota il proprio iPhone.Vedremo in dettaglio questo aspetto in un tutorial successivo.

• Panne # o documenti , questo pannello vi mostra tutti i componenti del vostro file xib. All’ini-zio vi potrà sembrareinutile, però quando l’applica -

zione inizierà a diventare complessa, vi sarà moltoutile per ritrovare tutti i componenti della vostra finestra.




• Inspector , è sicuramente la parte più importante di Interface Builder, in quanto ci permettedi impostare qualsiasi proprietà, relativa ad ogni oggetto ( dalla vista al singolo bottone ).Potremo, quindi, modificare l’aspetto degli oggetti, collegare le azioni, modificarne la di-

mensioni. Insomma, potrete agire su moltissimi aspetti(

il tutto senza scrivere una riga dicodice ).L’Inspector è composto da 5 parti:

✴ Attributes, qui possiamo variare gli attributi generici dei nostri oggetti, ad esempio ilcolore, la dimensione del font, ed altre proprietà che impareremo poco alla volta.✴Connections, è uno dei pannelli principali. Qui andremo a collegare le azioni agli oggetti. Cosa significa? Ve lo spiego con un esempio. Supponiamo di avere un bottonenella nostra vista, e vogliamo che quando viene premuto venga scritto “Ciao” in una casella di testo. Creeremo, quindi, un’azione, che si occuperò di scrivere “Ciao”. Do-

vremo, poi, collegare questa azione al bottone, in modo che quando l’utente preme ilbottone, viene eseguito il comportamento desiderato. Vedrete che con i prossimi tu-toria tutto questo sarà più familiare.✴Size , questa sezione permette, come dice la parola stessa, di modificare le dimensioni

dell’oggetto, e di modificarne anche la posizione e l’ancoraggio ( ovvero dove deve es-sere fissato, questo sarà fondamentale quando implementeremo la rotazione della schermata ).✴ Identity, in questo pannello potremo definire la classe, gli oggetti e le azioni che ci

servono, senza scrivere una riga di codice! Potremo fare tutto in maniera davvero

molto semplice, e ci basterà un clic per salvare la classe che avremo creato e le azionirelative.

Abbiamo così completato la panoramica sull’Interface Builder. Mi pare inutile, per ora, dilun- garmi in altri aspetti, che vi saranno sicuramente più chiari e familiari con un po’ di pratica. Inpochissimo tempo, non riuscirete più a fare a meno di Interface Builder!




Capitolo 3: Il nostro primo progetto, HelloWorld!

In questo capitolo realizzeremo la nostra prima applicazione, il classico HelloWorld! Chiede-

remo all’utente il proprio nome ( ad esempio Tizio ) e alla pressione di un bottone faremo appa -rire il messaggio “Ciao Tizio”. Niente di complicato quindi, però cercate di capire bene tutti ipassaggi, in modo da non avere lacune su queste cose basilari.

CREIAMO LA STRUTTURA GRAFICAIniziamo quindi creando un nuovo progetto di tipo “View -Based Application” e chiamiamolo“HelloWorld”. Apriamo quindi il file “HelloWorldViewController.xib”, che avvierà anche l’In-terface Builder. Ora dobbiamo creare la struttura grafica, che deve essere simile a questa:

Come potete osservare, ci sono tre componenti principali:1.una UITextField in cui l’utente potrà inserire il proprio nome;2.una UIButto n, con la scritta “Saluta!”, che l’utente dovrà premere per far apparire il salu-

to;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 ). È impor-tante 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 salutoin seguito.

Tramite “Attribute Inspector” possiamo definire alcune proprietà per questi oggetti. Selezio-

niamo ad esempio la UITextField, e impostiamo i seguenti valori:• “Capitalize ”: “Words” ( ovvero quando l’utente inizia a digitare il proprio nome la prima let-tera 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 ):

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 abbia -mo solo una, ma nulla ci vieta di definirne svariate e richiamarle poi a nostro piacimento.

DEFINIAMO GLI ELEMENTI E LE AZIONIDobbiamo 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 InterfaceBuilder, 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 me-todi e i componenti necessari, ma non vi è alcuna implementazione dei metodi. Saranno i filecon estensione “.m” a contenere tutte le implementazioni dei metodi, ovvero il codice delle va -rie funzioni.Iniziamo, quindi, aprendo il file “ He # oWorldContro # er.h”, in cui dovremo definire gli oggetti checi serviranno. Nel nostro esempio, saranno due gli elementi da definire: la UITextField in cuil’utente inserisce il proprio nome ( e da cui noi dobbiamo leggerne il valore ), e la UILabel in cuiscriveremo il saluto. Dovremo, poi, definire un’azione, quella che verrà richiamata alla pressio-

ne del bottone.Ecco il codice da inserire:

1

2

3

4

5

6

7

8

910

11

12

13

14

#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”, cheindica 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 InterfaceBuilder con quello dichiarato in XCode.Dopo queste due dichiarazioni, trovate l’intestazione del metodo “saluta”, e anche in questocaso trovate una clausola ”IBAction”: anche questa sta a significare che l’azione è collegata adun componente di Interface Builder.Le due property, poi, servono per poter utilizzare senza problemi le proprietà degli oggetti cheabbiamo definito.Ora salviamo il file ( Cmd + S ) e riapriamo “HelloWorldViewController.xib”. Dobbiamo collega -re questi componenti con quelli eff ettivamente inseriti nella nostra vista.




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

Potete notare che sono presenti i componenti che abbiamo definito via codice! Ora non dob-biamo fare altro che collegarli agli elementi adeguati. Prendiamo il pallino a fianco di “ fieldNo-

me ” 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 chetrovate qui a fianco.

Sono tutte le azioni che può gestire un bottone. Noi selezioniamo “Touch

Up Insid e ”, in modo che l’azione venga richiamata non appena si clicca sulbottone. 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:




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

SCRIVIAMO IL CODICE NECESSARIODobbiamo ora implementare il metodo “saluta”, che si occuperà di leggere il nome inserito dal-l’utente e stampare il messaggio di benvenuto sulla label predisposta.

Apriamo il file “HelloWorldViewController.m” e inseriamo il seguente codice:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

1617

18

19

20

21

22

23

24

25

26

#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 TextField (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 anoni-

mo!"];

}else{ // salutiamo l'utente

labelSaluto.text = [[NSString alloc] initWithFormat:@"Ciao %@",no-

me];

}

}

- (void)dealloc {

[labelSaluto dealloc];

[fieldNome dealloc];

[super dealloc];

}

Analizziamo il codice poco alla volta. L’istruzione presente alla riga 3 che ha il compito di cari-care 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 facciamoaltro 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. Ovviamenteinseriamo 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 è sem-

pre la stessa, è può essere schematizzata nel seguente modo: @”stringa_desiderata”. Dovre-te sempre utilizzare questo formato quando istanziate una stringa.

• “%@”, quando trovate un % in una stringa, significa che li ci andrà il valore di una determi-nata 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 prossimitutorial.

Il metodo “deal oc”, infine, è quello che si occupa di liberare la memoria che abbiamo utilizza -to. 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 da -

gli oggetti che non servono più. In questo metodo dovrete sempre inserire i componenti cheavete utilizzati, richiamando per ognuno il metodo “dealloc”. Nell’esempio potete vedere cheliberiamo dalla memoria gli oggetti “ labelSaluto” e “ fieldNome ”.

Possiamo ora cliccare su “Build and Go!”, se non abbiamo commesso errori nell’inserire il codi-ce si avvierà l’iPhone Simulator e potremo testare il nostro programma!

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

1

2

@interface HelloWorldViewController : UIViewController <UITextFieldDelega-

te>

Potete notare che abbiamo aggiunto “<UITextFieldDelegate>“, ovvero la nostra classe deveimplementare 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:

1

2

3

4

-(BOOL)textFieldShouldReturn:(UITextField *)textField{

[textField resignFirstResponder];

return YES;

}




Questo metodo si occuperà della chiusura della nostra tastiera. Non soff ermiamoci sul codice,in quanto è così in qualsiasi occasione voi vogliate implementarlo. Salvate entrambi i file e apri-te “HelloWorldViewController.xib”. Cliccate sulla UITextField e aprite il “Connections In-

spector”: vedrete nella sezione “Outlets” un elemento chiamato “delegate”, prendete il pallino etrascinatelo sul “File’s Owner” nel pannello dei documenti. Se avrete eseguito correttamentequesta operazione il vostro pannello sarà come questo:

In pratica, abbiamo detto che il delegato di tale oggetto è gestito dalla classe “HelloWorld-ViewController”.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!




Capitolo 4: TrashApp, gestiamo le immagini

In questo secondo tutorial, inizieremo a prendere confidenza con un aspetto molto importan-

te: la gestione delle immagini, e come l’utente può interagire con esse. Andremo a creare, infat-ti, un finto cestino, in cui potremo trascinare un’immagine e ripristinarla tramite un appositopulsante.

DEFINIAMO L’APPLICAZIONECreiamo un nuovo progetto di tipo “Window -Based Application” e chiamiamolo “TrashApp”.

A diff erenza del tutorial precedente, questa volta creeremo tutto tramite Interface Builder, me-todo sicuramente più veloce e comodo per applicazioni non troppo complesse.

Prima di fare qualsiasi cosa, inseriamo nel nostro progetto le immagini che ci serviranno. Ioutilizzerò le seguenti immagini: due per il cestino, e una per il documento da “eliminare” ( pote-te trovare queste immagini nel file di progetto dell’esempio ):

TrashIconEmpty.png TrashIconFu # .png windows icon.png

Trascinate le immagini nel progetto in XCode, e nel pop-up che vi apparirà mettere la spunta a “Copy items into destination group’s folder ( if needed )”. Noterete ora le immagini all’interno del progetto:

Procediamo, quindi, con la definizione della struttura grafica della nostra applicazione. Fatedoppio clic sul file “MainWindow.xib”, si avvierà Interface Builder. Dalla “Library” prendete uncomponente “UIView” e trascinatelo nella finestra principale della vostra applicazione. Dovre-ste avere una schermata come questa:




Inseriamo, poi, gli altri elementi necessari: due componenti UIImageView e un UIButton. At-

tenzione: la prima UIImageView che inserire deve essere quella in basso, altrimenti avreteproblemi nelle fasi successive! Ecco come si presenterà la vostra applicazione:




Ora dobbiamo collegare i vari componenti alle immagini che abbiamo inserito all’inizio nelprogetto. Clicchiamo sul primo componente UIImageView ( quello più in alto, ma il secondoche avete inserito! ) e apriamo il pannello “Attributes Inspector”. Nel menù a tendina “Images”

selezioniamo il file “windows icon.png” e lo vedremo comparire anche nell’applicazione. Spun-

tiamo, inoltre, la casella “User Interaction Enabled ”. Avremo un pannello così impostato:

Facciamo la stessa cosa per la UIImageView sottostante, selezionando come immagine“TrashIconEmpty.png”, ma senza spuntare “User Interaction Enabled”. Inseriamo all’internodel bottone la scritta “Ripristina”, aggiustiamo le dimensioni e la posizione delle due immagini( in modo che i bordi delle UIImageView coincidano con le immagini al loro interno ) fino adavere un risultato come questo:




DEFINIAMO GLI OGGETTI E LA CLASSEUna volta impostata la struttura grafica della nostra applicazione, dobbiamo definire gli oggettie le azioni necessarie. Se vi ricordare, nello scorso tutorial abbiamo fatto tutto via codice, e poi

abbiamo collegato gli oggetti da Interface Builder. Ora, invece, eseguiremo tutto direttamenteda Interface Builder, da cui creeremo anche la classe necessaria.Clicchiamo sullo sfondo della nostra vista ed entriamo nel pannello “View Identity”.Nel campo “Class” scrivete “MainView” ( questo sarà il nome della nostra classe ), nella sezione“Class Outlets” fate due clic sul pulsante “+” per aggiungere due elementi. Il primo rinominate-lo in “imageLogo”, il secondo in “imageCestino”, e in entrambi inserite “UIImageView” cometipo. Cliccate, poi, sul “+” della sezione “Class Actions”, rinominando il nuovo elemento in “ri-pristina:”.Dovreste avere, quindi, una schermata come questa:

Ora dobbiamo connettere gli elementi e l’azione che abbiamo appena definito. Questo lo fare -mo come abbiamo già imparato( e andrà fatto sempre così ). Apriamo, quindi, la scheda “Con-nections Inspector”, vedremo i due elementi ( “imageLogo” e “imageCestino” ) che abbiamo ap-pena creato. Prendiamo il pallino che troviamo a fianco di “imageLogo” e trasciniamolo sul lo -

go di Windows, mentre quello di “imageCestino” sull’immagine del cestino.Colleghiamo, infine, l’azione: proprio come nello scorso tutorial, colleghiamo il pallino del-l’azione “ripristina:” sul bottone, e nel menù che appare selezioniamo “Touch Up Inside”. Seabbiamo eseguito tutto in maniera corretta avremo un pannello come il seguente:




L’ultima cosa che ci resta da fare è creare la nostra classe ( che si chiamerà “MainView”, ovvero il

nome che abbiamo inserito in precedenza ). Dal menù “File” clicchiamo “Write Class Files...”, siaprirà una finestra in cui dobbiamo selezionare la cartella di destinazione. Selezioniamo la car-tella “Classes” e clicchiamo poi su “Save”.

Nella schermata che apparirà subito dopo mettiamo la spunta sul nostro progetto “TrashApp”e poi clicchiamo “Add”.




Abbiamo creato così la nostra classe, che ritroveremo poi in XCode! Salviamo tutto e chiudia -mo Interface Builder.

IMPLEMENTIAMO IL MOVIMENTO DEL LOGOIn XCode possiamo notare che vi sono due nuovi file: “MainView.h” e “MainView.m”. Iniziamocompletando la definizione della classe “MainView”. Apriamo, quindi, il file “MainView.h” e

scriviamo il seguente codice:

1

2

3

4

5

6

7

8

9

10

11

12

13


#import <Foundation/Foundation.h>

@interface MainView : UIView {

IBOutlet UIImageView *imageCestino;

IBOutlet UIImageView *imageLogo;

BOOL cancellato;

}

- (IBAction)ripristina:(id)sender;

- (void)cancella;

@end

Per prima cosa abbiamo definito la superclasse della nostra MainView: questo è stato fatto alla riga numero 4, scrivendo UIView. Cosa vuol dire? Significa che la nostra classe è figlia di UI -View, da cui erediterà metodi e proprietà. Questa è una caratteristica della programmazione adoggetti, che non voglio approfondire in questo libro.

Alla riga 7 abbiamo aggiunto una variabile che ci servirà per controllare se il nostro oggetto è

già stato eliminato ( quindi, al valore YES corrisponderà il logo eliminato, con NO il nostro lo-




go sarà ancora visibile ); lo stesso vale per il metodo “cancella”, che si occuperà però dell’anima -zione legata all’eliminazione del logo.

Ora iniziamo ad implementare i metodi necessari. Apriamo il file “MainView.m” e inseriamo i lseguente codice:

1

2

3

4

5

6

7

8

910

11

12

13

14

15

16

17

18

19

20

21

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {

UITouch *touch = [[event allTouches] anyObject];

if ([touch view] == imageLogo) {

imageLogo.center = [touch locationInView:self];

} }

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {

if (CGRectContainsRect([imageCestino frame], [imageLogo frame])){ imageCestino.image = [UIImage imageNamed:@"TrashIconFull.png"];

[self cancella];

}

}- (void)cancella{

cancellato = YES;

[UIView beginAnimations:nil context:NULL];

[UIView setAnimationDuration:0.5];

imageLogo.transform = CGAffineTransformMakeScale(.001, .001);

[UIView commitAnimations];

}

Abbiamo definito tre metodi, che si occuperanno del movimento del logo di Windows e della sua cancellazione. vediamoli nel dettaglio:

• touchesMoved , ( dalla riga 1 alla 6 ) In questo metodo, salviamo nella variabile “touch”l’evento che l’utente compie toccando un qualsiasi oggetto della nostra applicazione ( riga 2 ). Controlliamo, poi, che l’oggetto toccato corrisponda a “imageLogo” ( riga 3 ), cioè al logodi Windows: se l’oggetto è proprio quello, teniamo traccia del centro dell’oggetto ( che nelfrattempo viene mosso dall’utente ) con la posizione del dito sullo schermo ( riga 4 ). Ovvero,è come se spostassimo fisicamente l’oggetto con il nostro dito e lo muovessimo su un piano.

• touchesEnded , ( dalla riga 8 alla 13 ) In questo metodo diciamo semplicemente che se ilframe di “imageLogo” ( ovvero il logo di Windows ) è contenuto in quello del cestino ( riga 9 ), deve essere chiamato il metodo “cancella”, che si occuperà dell’animazione della cancel-lazione ( riga 11 ). Prima di chiamare tale metodo, inoltre, cambiamo l’immagine del cestino

vuoto con quella del cestino pieno ( riga 10 ).• cancel a, ( dalla riga 15 alla 21 ) In questo metodo definiamo l’animazione che avrà il logo di

Windows quando verrà sposato sopra il cestino. Alla riga 16 cambiamo il valore della varia -

bile “cancella”, in modo da sapere che il logo è stato eliminato. Alla riga 17 definiamo il




punto di partenza della nostra animazione, mentre con l’istruzione successiva ne definiamola durata. La riga 19 è l’animazione vera e propria, che farà scomparire il logo. Con l’ultima istruzione definiamo la fine dell’animazione.

IL RIPRISTINO DEL LOGO Abbiamo quasi terminato la nostra applicazione, manca solo la definizione dell’azione “ripristi-na:”. Tale metodo è già stato definito da Interface Builder, quindi noi dobbiamo solo scrivere ilcodice al suo interno. Ecco le istruzioni da inserire:

1

2

3

4

56

7

8

9

10

- (IBAction)ripristina:(id)sender {

if (cancellato) {



imageLogo.transform = CGAffineTransformIdentity; imageCestino.image = [UIImage imageNamed:@"TrashIconEmpty.png"];

imageLogo.center = CGPointMake(155.0, 100.0);


}

}

Questo metodo è speculare a “cancella”, in quanto dobbiamo eseguire l’animazione inversa! Andremo, quindi, ad eseguire un’animazione, che porterà il logo dal cestino ( in cui si trova ) alla posizione originale ( o quasi, in quanto è definita in modo arbitrario da noi, alla riga 7 ).

Clicchiamo ora su “Build and Go!”, e testiamo la nostra applicazione funzionante!




Capitolo 5: UIToolbar e auto-rotazione

In questo terzo tutorial, analizzeremo un componente molto importante, la UIToolbar, e una

funzionalità molto gradita agli utenti, l’auto-rotazione.Non creeremo nessun applicazione complicata, semplicemente avremo due pulsanti nella tool-bar che modificheranno il valore di una label posta al centro dello schermo. L’auto-rotazione,infine, aggiungerà un tocco più professionale alla nostra applicazione.

CREIAMO LA STRUTTURA GRAFICACome sempre, la prima cosa che faremo è definire un nuovo progetto. Creiamo un nuovo pro-

getto di tipo “View -Based Application” e chiamiamolo “CountRotateApp”. Il procedimentosarà molto simile a quello dello scorso tutorial, con una piccola diff erenza. Noterete che ora ifile “.xib” sono due: “MainWindow.xib” e “CountRotateAppViewController.xib”. Eliminate ilsecondo file, ( tasto destro -> “Delete” e cliccando poi su “Also Move to Trash” ). Abbiamo elimi-nato questo file in quanto non ci servirà. Avremmo potuto utilizzarlo e sviluppare li la nostra applicazione, ma ho preferito optare per la soluzione che analizzeremo fra poco.Possiamo ora aprire il file “MainWindow.xib”. Avrete una finestra che si presenterà come que-sta:




Apriamo l’”Attribute Inspector” ti tale finestra, ed eliminiamo la voce “CountRota -teAppViewController” che troviamo nel campo “NIB Name”:

Prendiamo ora un componente di tipo “UIView” dalla libreria e inseriamolo nella nostra fine-stra. Nella parte bassa della vista inserite una UIToolbar, con due UIBarButtonItem: in unoscrivete “-”, nell’altro “+”. Noterete che i due bottoni sono quasi attaccati. Noi vogliamo chesiano ai due estremi, quindi tra di essi inseriamo un “ Flexible Space Bar Button Ite m”, in modoche restino sempre separati. Ecco come si presenterà la vostra toolbar:

Questo spazio flessibile ha una grossa utilità: non solo ci separa i due bottoni, ma ci permettedi non doverci occupare della giusta distanza tra essi, anche nel caso che ne aggiungessimo unterzo. Inoltre esso ci permette di tenere i due bottoni alle estremità della barra anche nel casoin cui ruotassimo la nostra applicazione. Come facciamo a testarlo? Semplice. Cliccate sulla freccia presente nel titolo della finestra della nostra applicazione:

Vedrete che la schermata ruoterà!




E come possiamo notare i due bottoni restano agli estremi della nostra barra. Proprio il risulta -to che volevamo.

Riportiamo la finestra alla sua posizione originale, e inseriamo al centro una UILabel, partendoda un angolo in alto a sinistra, per poi ingrandirla fino all’angolo opposto. In Attribute Inspec-tor settate i seguenti parametri:

• “Text”: 0 ( zero );

• A # ineamento central e ;• “ Font Size ”: 200

Dovreste avere il seguente risultato:




Proviamo ora a far ruotare la schermata come abbiamo fatto poco fa. Noteremo che lo zeronon rimane in posizione centrale, ma addirittura viene per metà nascosto. Come facciamo a lasciarlo centrato? Anche qui ci viene in aiuto l’Interface Builder, che off re grandi potenzialità

anche in questo aspetto.Selezioniamo la label che contiene lo zero e apriamo il “Size Inspector”. Nella seconda partepossiamo vedere che vi è una sezione denominata “Autosizing”. Clicchiamo sulle due freccetterosse che vediamo nel riquadro piccolo, in modo da avere questo schema:

Proviamo ora a ruotare la nostra applicazione: lo zero resterà perfettamente in posizione cen-

trale!

DEFINIAMO LA CLASSE E GLI OGGETTI Abbiamo imparato nello scorso capitolo come definire gli oggetti e le azioni direttamente inInterface Builder, quindi ora faremo lo stesso procedimento. Selezioniamo la vista ( state attentia selezionare correttamente il componente UIView ) e apriamo l’”Identity Inspector”. Impo-stiamo come nome della classe “MainView” e definiamo i seguenti elementi:

Abbiamo così definito due azioni ( una per aggiungere e una per sottrarre ) e un componente perla label contenente il numero. Andiamo ad eseguire i soliti collegamenti, collegando l’azione




“aggiungi:” al bottone “+”, mentre “sottrai:” andrà collegata con il bottone “-”. L’elemento “la -belNumero”, ovviamente, va associata alla label presente a centro schermo.Ecco come apparirà il pannello “Connections Inspector”:

Dobbiamo infine creare la classe. Andiamo in “File -> Write Classes Files...” e salvate la classe

“MainView” ( fate riferimento al capitolo precedente se non vi ricordate il procedimento ).Salvate tutto e chiudere pure Interface Builder.

SCRIVIAMO IL CODICE NECESSARIOCome al solito, dobbiamo ora implementare i metodi necessari ( che vedrete essere davverosemplici ). Iniziamo aprendo il file “MainView.h” e completando l’intestazione della classe nelseguente modo:

1

23

4


IBOutlet UILabel *labelNumero; int numero;

}

Dovremo solamente aggiungere “UIView” all’intestazione, e definire una variabile intera chia -mata “numero” ( che conterrà il valore visualizzato nella label ).Possiamo passare subito ai metodi contenuti nella classe “MainView.m”. Il primo metodo da aggiungere ( che incontrerete molte volte nei prossimi tutorial ) è il seguente:

1

2

3

- (void)awakeFromNib{

numero = 0;

}

Questo metodo viene richiamato sempre all’avvio del file “.xib” associato alla classe ( i file “.xib”sono quelli creati da InterfaceBuilder ). In questo metodo possiamo inizializzare tutti i compo-nenti che ci serviranno. Qui, in pratica, dobbiamo inserire tutte quelle operazioni che vogliamo

vengano eseguite all’avvio dell’applicazione. Nel nostro esempio, vogliamo che la variabile“numero” sia impostata a zero.




1

2

3

4

5

6

7

8

9

- (IBAction)aggiungi:(id)sender {

numero++;

labelNumero.text = [[NSString alloc] initWithFormat:@"%i",numero];

}

- (IBAction)sottrai:(id)sender {

numero--;

labelNumero.text = [[NSString alloc] initWithFormat:@"%i",numero];

}

Quello che vedete qui sopra è il codice che dovete inserire nei due metodi che trovate già defi-niti. Non eseguono niente di complicato: prima viene incrementata ( o decrementata ) la variabi-le “numero”, poi viene visualizzata nella label. Semplice vero?

L’ultima cosa da implementare è la rotazione della vista. Aprite i l f i le“CountRotateAppViewController.m” e inserite il seguente metodo ( dovrebbe essere già pre-sente, vi basterà decommentarlo e modificare un’istruzione ):

1

2

3

- (BOOL)shouldAutorotateToInterfaceOrientation:

(UIInterfaceOrientation)interfaceOrientation{

return YES;

}

Questo è un metodo della classe “UIViewController”, che implementa già la rotazione automa -tica dello schermo. Ancora una volta non dovremo fare veramente niente, in quanto sono le

librerie del SDK a fornirci tutti pronto.Piccola nota: se non volessimo implementare l’auto-rotazione, ci basterebbe ritornare come

valore “NO”, oppure semplicemente non inserire il metodo nell’applicazione.

Clicchiamo ora su “Build and Go!” e testiamo la nostra applicazione!




Capitolo: 6: NSTimer e UIProgressView

Proseguiamo la panoramica sui componenti più utilizzati nella creazione di applicazioni per

iPhone. In questo capitolo vedremo come utilizzare la classe NSTimer, ovvero un temporizza -tore, che ci permetterà di eseguire animazioni e transizioni con durate predefinite. Utilizzere-mo, inoltre, la UIProgressView, ovvero la barra di progresso, necessaria quando si deve mostra -re un caricamento.Quella che andremo a creare sarà una semplice applicazione, che permetterà all’utente di cam-

biare il colore dello sfondo, semplicemente cliccando su un bottone. Il cambio del colore, inol-tre, avverrà in maniera graduale tramite un’animazione della durata di 10 secondi.

CREIAMO LA STRUTTURA GRAFICACome sempre, iniziamo creando un progetto di tipo “Window -Based Application” e chiamia -molo “ProgressColour”. Fate doppio clic sul file “MainWindow.xib” per aprire Interface Buil-der, in cui definiremo la struttura grafica dell’applicazione.Come al solito, inseriamo un componente “UIView” nella nostra finestra. Inseriamo, poi, glialtri due componenti necessari: una UILabel e una UIProgressView. Ricreate una disposizionesimile a questa ( ovviamente nessuno vi vieta di personalizzarla a vostro piacimento ):

Come potete notare la label e la barra di progresso occupano quasi per intero la larghezza della vista, questo per rendere più evidente ciò che avviene.Selezioniamo la label e apriamo “Attributes Inspector”, per modificare alcune proprietà:

• cancellate il contenuto del campo testo;




• “ Font Size ”: 20• allineamento centrale.

Selezioniamo ora la UIProgressView e, sempre in “Attributes Inspector”, impostiamo il valore

della casella “ Progress” a zero.Inseriamo ora nella vista due bottoni, in modo da avere un risultato finale come questo:

DEFINIAMO LA CLASSE E GLI OGGETTIDobbiamo definire, come al solito, gli oggetti necessari e la classe. Iniziamo cliccando sulla vi-sta e inserendo come nome “MainView” ( ovviamente nel solito pannello “Identity Inspector” ).Definiamo due oggetti: “progressLabel” ( di tipo UILabel ) e “progressBar” ( di tipo UIPro-

gressView )

. Fatto ciò, inseriamo anche due azioni: “caricamentoBlu” e “caricamentoRosso”. Ec-

co come si presenterà il vostro pannello alla fine di queste definizioni:




Sapete già cosa dobbiamo fare ora: collegare gli oggetti e le azioni che abbiamo appena definitocon i componenti grafici. Apriamo quindi il “Connections Inspector” e colleghiamo “pro-

gressBar” con la UIProgressView e “progressLabel” con la UILabel. Colleghiamo, poi, le dueazioni: “caricamentoBlu” con il bottone con la scritta “Applica colore blu”, mentre l’azione “ca -ricamentoRosso” con l’altro bottone ( quando vi appare il menù con le varie azioni selezionatecome sempre “Touch Up Inside” ). Ecco come si deve presentare il vostro pannello “Connec-tions Inspector”:

Salviamo ora la classe ( “File -> Write Class Files...” ) e inseriamola nel nostro progetto. Salviamoe chiudiamo Interface Builder.




SCRIVIAMO IL CODICE Apriamo il file “MainView.h” e inseriamo il seguente codice:

1

23

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20




IBOutlet UIProgressView *progressBar;

IBOutlet UILabel *progressLabel;

NSTimer *timer;

}

@property (nonatomic, retain) NSTimer *timer;

- (IBAction)caricamentoBlu;

- (IBAction)caricamentoRosso;

- (void)aggiornaBlu;

- (void)aggiornaRosso;

- (void)applicaBlu;

- (void)applicaRosso;

@end

Abbiamo definito un componente “NSTimer”, che sarà il temporizzatore che ci permetterà dieseguire l’animazione prevista. Abbiamo definito, inoltre, quattro nuovi metodi, che ci servi-ranno per implementare tutte le azioni necessarie.

Passiamo ora al file “MainView.m” e iniziamo ad implementare i metodi necessari. Inseriamo ilseguente codice:

1

2

3

4

5

6

7

8

9

10

11

12

13

@synthesize timer;

- (IBAction)caricamentoBlu {

progressBar.progress = 0.0;

progressLabel.text = @"Caricamento colore...";

timer = [NSTimer scheduledTimerWithTimeInterval :1.0 target:self

selector:@selector(aggiornaBlu) userInfo:nil repeats:YES];

}

- (IBAction)caricamentoRosso {

progressBar.progress = 0.0;

progressLabel.text = @"Caricamento colore...";

timer = [NSTimer scheduledTimerWithTimeInterval :1.0 target:self

selector:@selector(aggiornaRosso) userInfo:nil repeats:YES];}




Questi due metodi sono praticamente identici, quindi mi limiterà a commentare solamente ilprimo. Alla riga 4 viene settato il valore di progresso della barra a zero ( tale valore di default va da 0.0 a 1.0, ma questo intervallo può essere modificato a piacere ). Nella riga 5 inseriamo un

messaggio nella label, in modo da comunicare all’utente ciò che sta avvenendo. L’istruzionepresente alla riga 6, infine, è quella che merita più attenzione. Viene definita la variabile timer,istanziandola con la classe NSTimer. Ci sono tre parametri molto importanti in questa funzio-ne: la durata di 1 secondo ( alla clausola “scheduledTimerWithTimeInterval ” ), il metodo chedeve essere eseguito ad ogni ripetizione ( clausola “@selector()” ) e la ripetizione continua ditale intervallo di tempo ( impostata tramite “repeats:YES“ ).

Proseguiamo con la definizione dei metodi:

1

23

4

5

6

7

8

9

10

11

1213

14

15

16

17

18

19

20

21

22

23

- (void)aggiornaBlu{

progressBar.progress = progressBar.progress + 0.1; if (progressBar.progress == 0.5){

progressLabel.text = @"Applicando colore...";

[self applicaBlu];

}

if (progressBar.progress == 1.0){

progressLabel.text = @"Colore applicato!";

[timer invalidate];

}

}

- (void)aggiornaRosso{

progressBar.progress = progressBar.progress + 0.1;


progressLabel.text = @"Applicando colore...";

[self applicaRosso];

}


progressLabel.text = @"Colore applicato!";

[timer invalidate];

}

}

Anche questi due metodi sono praticamente uguali. Alla riga 2 incrementiamo il valore della nostra barra di progresso, aumentandone il valore del 10%. Alla riga 3 troviamo un controllo if,che verifica se il valore della barra è 0.5 ( ovvero siamo a metà ): in caso a ff ermativo, cambiamo iltesto presente nella label, altrimenti lasciamo tutto invariato. Anche alla riga 7 un ciclo if con-trolla se la barra di progresso è arrivata al suo valore massimo: in tal caso inseriamo un nuovotesto nella label, e fermiamo il timer ( con l’istruzione alla riga 9 ).

Nel primo ciclo if che abbiamo esaminato, notiamo che alla riga 5 viene richiamato il metodo




“applicaBlu”: tale metodo avrà il compito di cambiare il colore allo sfondo della vista, conun’animazione che dovrà durare 5 secondi ( infatti siamo al 50% del progresso, e la barra avanza del 10% ogni secondo ).

Ecco i due metodi che si occupano di fare ciò:1

2

3

4

5

6

7

8

9

1011

12

13

- (void)applicaBlu{



self.backgroundColor = [UIColor blueColor];


}

- (void)applicaRosso{


[UIView setAnimationDuration:5.0]; self.backgroundColor = [UIColor redColor];


}

In questi due metodi viene definita l’animazione che permette allo sfondo della nostra vista dicambiare colore. L’animazione rispecchia molto quella illustrata in un capitolo precedente.

Alla riga 3 definiamo la durata di tale animazione ( 5 secondi ); l’istruzione successiva è il risulta -to che vogliamo ottenere, ovvero il nostro colore di sfondo. Chiude il gruppo di istruzioni la riga 5, che avvia l’animazione.

Clicchiamo su “Build and Go!” e testiamo la nostra applicazione!




Capitolo 7: AccessContact, accediamo alla rubrica

In questo capitolo andremo ad implementare una funzione un po’ particolare, in quanto acce-

deremo all’applicazione nativa “Contatti” e ricaveremo le informazioni di un contatto.Impareremo ad utilizzare il framework ( una sorta di libreria, che ci fornisce delle funzionalità

già pronte ) “AddressBook ” e come sfruttare le funzioni che ci mette a disposizione.

DEFINIAMO IL PROGETTOIniziamo creando un progetto del tipo “View -Based Application” e chiamiamolo “AccessCon-tact”. Questa volta procederemo come nel primo tutorial, ovvero andremo a definire prima icomponenti via codice, poi li collegheremo tramite Interface Builder.

Apriamo il file “AccessContactViewController,m”, che è la classe della vista che ci viene fornita con questo template. Inseriamo il seguente codice:

1

2

3

4

5

6

7

8

9

10

11

12

13


#import <AddressBook/AddressBook.h>

#import <AddressBookUI/AddressBookUI.h>

@interface AccessContactViewController : UIViewController {

IBOutlet UILabel *labelNome;

IBOutlet UILabel *labelCognome;

IBOutlet UILabel *labelTel;

}

- (IBAction)getContatto;

@end

Ormai siete esperti, e avrete subito capito che abbiamo definito tre label e un’azione. Alle righe2 e 3, però, abbiamo importato due librerie, che si riferiscono ad “AddressBook”, ovvero all’ap-plicazione “Contatti”. Questo, però, non basta per poter utilizzare tutte le sue funzioni. Dob-biamo importare all’interno del nostro progetto anche il framework necessario.Espandete la sezione “Targets” nel progetto, e cliccate con il tasto destro su “AccessContact”,selezionando poi “Get Info”. Si aprirà una nuova schermata, in cui dobbiamo andare nella se-zione “General”. Nell’angolo in basso a sinistra noteremo un bottone “+”, clicchiamo e si aprirà un elenco di tutti i framework disponibili:




Selezioniamo “AddressBook.framework” e “AddressBookUI.framework” e clicchiamo poi su“Add”. Avremo così aggiunto questi due framework al nostro progetto. Possiamo così chiuderela schermata delle proprietà.Salviamo il file “AccessContactViewController.h” e facciamo doppio clic su“AccessContactViewControlle.xib” per aprire Interface Builder.

DEFINIAMO LA STRUTTURA GRAFICADobbiamo ora definire l’aspetto grafico della nostra applicazione. Inseriamo le label necessariee un bottone, per ricreare un aspetto grafico come questo:




Le label con il testo “---” sono quelle che poi conterranno le informazioni sul contatto selezio-nato dall’utente. Dobbiamo ora collegare gli elementi definiti in precedenza con quelli che ab-biamo appena inserito nella vista.

Tramite il pannello dei documenti selezioniamo “File’s Owner”, e apriamo il “Connections In-

spector”. Potremo vedere i componenti che abbiamo dichiarato:

Ora dobbiamo collegarli nella maniera corretta, ovviamente in base al nome con cui li abbiamochiamati: “labelNome”, quindi, andrà collegata con la label a fianco di “Nome” e così via.L’azione “getContatto”, invece, sarà da collegare al bottone, scegliendo come sempre “TouchUp Inside” tra le azioni disponibili. Ecco il risultato finale dei collegamenti:

Possiamo salvare tutto e chiudere Interface Builder.

SCRIVIAMO IL CODICE NECESSARIODobbiamo ora implementare i metodi necessari per far funzionare l’applicazione. Iniziamo conla definizione del metodo “getContatto”, ovvero l’azione collegata alla pressione del bottone.

Apriamo il file “AccessContactViewController.m” e inseriamo il seguente codice:




1

2

3

4

5

6

7

8

9

10

-(IBAction)getContatto {

//Crea l’oggetto necessario

ABPeoplePickerNavigationController *picker = [[ABPeoplePickerNaviga-

tionController alloc] init];

//Il delegato dell’oggetto è definito nella classe stessa

picker.peoplePickerDelegate = self;

//Visualizza l’app Contatti

[self presentModalViewController:picker animated:YES];

//Rilascia l’oggetto

[picker release];

}

Come si può leggere dai commenti, questo metodo istanzia un oggetto chiamato “picker”, checi permetterà di aprire l’applicazione nativa “Contatti”. Alla riga 5 definiamo il delegato di tale

oggetto: impostando “self”, comunichiamo che sarà la stessa classe(

ovvero “AccessCon-

tactViewController” ) a definire gli altri metodi necessari, che definiremo tra poco. Alla riga 7,infine, inseriamo tale oggetto come vista principale della nostra applicazione: l’utente vedrà così comparire l’applicazione nativa “Contatti” all’interno della nostra applicazione “Ac-cessContact”.Dobbiamo ora implementare i metodi richiesti dal delegato. Ecco il codice da inserire:

1

2

3

4

5

6

7

8

9

10

1112

13

14

15

16

17

18

- (BOOL)peoplePickerNavigationController: (ABPeoplePickerNavigationControl-

ler *)peoplePicker shouldContinueAfterSelectingPerson:(ABRecordRef)person {

//Settiamo il nome

labelNome.text = (NSString *)ABRecordCopyValue(person, kABPerson-FirstNameProperty);

//Settiamo il cognome

labelCognome.text = (NSString *)ABRecordCopyValue(person, kABPerson-

LastNameProperty); //Settiamo il numero di telefono

ABMultiValueRef multi = ABRecordCopyValue(person, kABPersonPhoneProper-

ty);

labelTel.text = (NSString*)ABMultiValueCopyValueAtIndex(multi, 0);

//Rimuove il controller "Contatti"

[self dismissModalViewControllerAnimated :YES]; return NO;}

-

(void)peoplePickerNavigationControllerDidCancel:( ABPeoplePickerNavigationCo

ntroller *)peoplePicker {

// facciamo tornare il controller alla vista principale

[self dismissModalViewControllerAnimated :YES];

}

Il primo metodo legge le informazioni del contatto selezionato, e le setta nelle apposite label.

L’unico inconveniente è dato dalle righe 7 e 8, che si occupano della lettura del numero di tele-




fono: viene letto il primo numero presente ( in quanto potrebbero anche esserci più numeri ). Ese non vi fosse nessun numero associato al contatto? In tal caso l’applicazione crasha. Questoavviene perché non abbiamo eff ettuato nessun controllo, ma potete semplicemente risolvere

questo problema tramite un opportuno ciclo if.Il metodo che inizia alla riga 15, infine, si occupa di chiudere l’applicazione “Contatti” quandol’utente sceglie di uscire senza selezionare nessun contatto ( ovvero quando clicca su “Cancel” ).Potete notare che l’istruzione di tale metodo è uguale a quella presente alla riga 10, che è ugualea sua volta a quella presente alla riga 7 del primo metodo implementato.

Cliccate su “Build and Go!” e testate la vostra applicazione!




Capitolo 8: Creiamo un mini browser con le UIWebView

Una delle caratteristiche principali dell’iPhone è la sua connettività, sia essa tramite WiFi, 3G o

EDGE. Internet, quindi, ricopre un ruolo fondamentale nell’utilizzo di questo dispositivo. Ec-co che sorge spesso necessario implementare una sorta di browser nelle nostre applicazioni, perpoter visualizzare delle pagine web. Anche in questo l’SDK si rivela molto potente, in quanto cimette a disposizione un componente praticamente già pronto: le UIWebView. Questo compo-nente è una sorta di “Safari lite”, in quanto ci permette di visualizzare pagine web tramite lostesso motore che è alla base di Safari.Nel tutorial vedremo come utilizzare le UIWebView, per realizzare un nostro mini-browser,con tre semplici pulsanti: avanti, indietro e ricarica. Certo, non potremo competere con Safari,ma potrebbe tornarvi molto utile nei vostri programmi.

CREIAMO LA STRUTTURA GRAFICAIniziamo creando un nuovo progetto di tipo “Window -Based Application” e chiamiamolo“MyBrowser”. Apriamo il file “MainWindow.xib” per avviare Interface Builder.La prima cosa da fare è inserire una UIView, che sarà, come sempre, la base della nostra fine -stra. Inseriamo nella parte bassa della vista un componente di tipo UIToolbar e inseriamoci trebottoni ( UIBarButtonItem, quelli utilizzati nel capitolo 5 ), separando gli ultimi due tramite un“Flexible Space” ( anche questo già visto ). I primi due bottoni ci serviranno per muoverci tra le

pagine visitate(

i classici “Avanti” e “Indietro” )

, mentre il terzo servirà a ricaricare la pagina. Ec-

co come appare la barra appena definita:

Ora dobbiamo inserire la WebView. Dalla libreria scegliamo un componente “UiWebView” einseriamolo nella nostra finestra. Ecco il risultato finale:




DEFINIAMO I COMPONENTI E COLLEGHIAMO LE AZIONI Abbiamo già concluso con la definizione dell’interfaccia grafica. Dobbiamo ora definire i com-

ponenti che ci serviranno e collegare le relative azioni. Vedrete che si rivelerà tutto molto sem-

plice, in quanto troveremo già tutto pronto.Dal pannello dei documenti espandiamo il componente Window e selezioniamo la UIView ( ovvero al vista che abbiamo inserito inizialmente ):

Dopo aver selezionato la vista, apriamo l’”Identity Inspector” e inseriamo come nome della

classe “MainView”. Inseriamo poi un oggetto “webView” di tipo “UIWebView”, avendo così unrisultato come questo:




Abbiamo così definito l’unico componente necessario. Andiamo poi in “Connections Inspec-tor” e colleghiamo l’oggetto “webView” con la UIWebView che abbiamo inserito nella nostra applicazione. Ecco il risultato finale:

Possiamo salvare la classe creata, tramite il menù “File -> Write Class Files...” e inserirla nel no-stro progetto.

Non chiudiamo Interface Builder, ma continuiamo cliccando sulla “UIWebView” e aprendo il“Connections Inspector”. Noteremo che ci sono già delle azioni definite ( “goBack”, “go-Forward”, etc. ). Dovremo solo collegare le azioni con i bottoni adeguati. Ecco le associazionida fare:

• “ goBac k ” con il bottone “<“, ovvero per tornare alla pagina precedente;• “ goForward ” con il bottone “>”, ovvero per andare alla pagina successiva ( della cronologia );• “ reload ” con il bottone “Ricarica”, per ricaricare la pagina web.

Se avete eseguito tutto correttamente avrete un risultato come questo:

Tutto molto semplice!Salviamo tutto e chiudiamo Interface Builder.




SCRIVIAMO IL CODICE PER APRIRE LA PAGINA DESIDERATAIniziamo aprendo il file “MainView.h” e completando la definizione della classe:

1

23

4

5

6

7


IBOutlet UIWebView *webView;}

@property (nonatomic, retain) IBOutlet UIWebView *webView;

@end

Abbiamo fatto la solita definizione, che ormai abbiamo imparato a conoscere.

Dobbiamo ora inserire il codice che ci carica la pagina desiderata e la mostra nella UIWebView.Utilizziamo un metodo che abbiamo già visto in un tutorial precedente: “awakeFromNib”, che,come vi ricorderete, viene eseguito all’avvio dell’applicazione.

Aprite il file “MainView.m” e inserite il seguente codice:

1

2

3

4

5

6

7

89

10

11

@synthesize webView;

- (void)awakeFromNib{

//indirizzo web da caricare

NSString *indirizzo = @"http://www.bubidevs.net";

//crea un oggetto URL

NSURL *url = [NSURL URLWithString:indirizzo];

NSURLRequest *requestObj = [NSURLRequest requestWithURL:url]; // visualizza la pagina nella UIWebView

[webView loadRequest:requestObj];

}

Come potete vedere si tratta solo di quattro istruzioni!Definiamo, alla riga 5, l’indirizzo che vogliamo aprire, mentre alle righe 6 e 7 inizializiamo icomponenti necessari per poter visualizzare la pagina ( non preoccupatevi troppo, sono semprequesti da utilizzare ). All’istruzione 10, infine, settiamo i componenti che abbiamo appena crea -to nella UIWebView, in modo che venga mostrata la pagina web all’utente.

E se volessimo caricare dei file HTML che abbiamo in locale? Semplice, basta usare il suffisso“file://” nel percorso. Ad esempio, utilizzando “file://pagina1.html” caricheremmo il file“pagina1.hmtl” che si dovrebbe trovare, però, nella stessa cartella in cui viene seguita l’applica -zione. Semplice vero?

Cliccate su “Build and Go!” e provate il vostro personalissimo browser!






Capitolo 9: UITableView, gestiamo le tabelle

Abbiamo fino ad ora abbiamo analizzato dei componenti base, molto semplici sia da impostare

che da utilizzare. Il componente più utilizzato, però, è sicuramente quello che gestisce le tabel-le, ovvero la UITableView. In moltissime applicazioni, infatti, esse vengono utilizzate per mo-strare delle informazioni all’utente, che può anche interagire con questi dati.In questo capitolo vedremo come definire una tabella, come inserire al suo interno dei valori ecome definire dei comportamenti ( ad esempio la cancellazione delle righe ), necessari per ren-derla utilizzabile dall’utente.Questo capitolo è suddiviso in tre parti:

1.Creazione e definizione de # a tabe # a;2. Inserimento di alcune funzionalità;

3.Implementazione de # a ricerca. Analizzeremo queste parti una alla volta, passo per passo, in modo da comprendere bene ognisingola cosa che andremo a realizzare.

PARTE 1: CREIAMO E DEFINIAMO LA TABELLALa prima parte di questo tutorial è dedicata alla creazione della struttura dell’applicazione: nedefiniremo la grafica, la lista degli elementi da visualizzare e come mostrarli all’interno delle

celle. Il tutto sarà fatto con la solita semplicità, sfruttando tutte le caratteristiche che XCode el’SDK ci mettono a disposizione, semplificando il nostro lavoro.

CREIAMO UN NUOVO PROGETTOIn XCode, creiamo un nuovo progetto di tipo “View -Based Application” e chiamiamolo “ta -bleTutorial”.Prima di definire la struttura grafica, apriamo il file “tableTutorialViewController.h” e definia -mo l’oggetto tabella che ci servirà fra poco:

1

2

3

4

5

6

7


@interface tableTutorialViewController : UIViewController {

IBOutlet UITableView *tabella;

}

@end

Abbiamo già visto questo modo di procedere nel primo tutorial, in cui abbiamo definito glielementi via codice collegandoli poi tramite Interface Builder. Ora abbiamo fatto la stessa cosa.




Possiamo salvare il file, e fare doppio clic su “tableTutorialViewController.xib”, che ci aprirà come al solito Interface Builder. Sarà in questo file ( che ha creato per noi XCode ) che andremoa definire l’aspetto grafico della nostra applicazione.

DEFINIAMO LA STRUTTURA GRAFICAInseriamo nella vista un componente di tipo “UITableView”, in modo che occupi tutta la no -

stra vista. Ecco il risultato:

Iniziamo subito impostando le due proprietà fondamentali di questa tabella. Clicchiamo sulla tabella e apriamo il “Connections Inspector”. Vedremo due oggetti già definiti:

• “ dataSource ”, ovvero i dati che devono essere visualizzati nella tabella;• “ delegat e ”, ovvero il delegato di tale classe, concetto che abbiamo già visto nei capitolo pre-

cedenti.Colleghiamo entrambi con il “File’s Owner” ( che troviamo nel pannello dei documenti ), in

modo da avere un risultato come questo:




Eseguire questo collegamento significa “delegare” alla classe “tableTutorialViewController” la gestione di questi due aspetti. In tale classe, quindi, dovremo definire tutti i metodi che il pro-tocollo ci obbliga ad implementare. Ma di questo ci occuperemo tra poco.

Colleghiamo, ora, il componente “tabella” che abbiamo definito all’inizio di questo tutorial. Perfare ciò, clicchiamo sul “File’s Owner” dal pannello dei documenti e apriamo il “ConnectionsInspector”. Tra i vari oggetti presenti vedremo “tabella”, che dobbiamo collegare con la UITa -bleView che abbiamo inserito inizialmente. Colleghiamola e, se avremo eseguito tutto corret-tamente, avremo un risultato come questo:

Possiamo salvare tutto e chiudere Interface Builder

INSERIAMO IL CODICE NECESSARIOOra dobbiamo iniziare ad inserire il codice che definisce le proprietà e il comportamento della nostra tabella. Iniziamo aprendo nuovamente il file “tableTutorialViewController.h” e comple-tandolo nel seguente modo:

1

2

3

4

5

67

8

9

10

11

12


@interface tableTutorialViewController : UIViewController <UITableViewDele-

gate, UITableViewDataSource>{


NSMutableArray *lista;}

@property (nonatomic, retain) IBOutlet UITableView *tabella;

@property (nonatomic, retain) NSMutableArray *lista;

@end

Come potete notare abbiamo inserito due istruzioni particolari, racchiuse tra <>. Questi sono idue protocolli che la nostra classe deve implementare per poter gestire la tabella.

Alla riga 6, inoltre, abbiamo definito un array in cui inseriamo tutti gli elementi che devono poiessere visualizzati nella tabella. Notate che abbiamo utilizzato un NSMutableArray, questo




perché dovremo avere la possibilità di poter modificare gli elementi che lo compongono ( ana -lizzeremo meglio questo aspetto quando sarà necessario ). Alle righe 9 e 10 abbiamo definito leproprietà degli oggetti, che utilizzeremo fra poco.

Spostiamoci ora nel file “tableTutorialViewController.m” e iniziamo inseriamo questi metodi:1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

#import "tableTutorialViewController.h"

@implementation tableTutorialViewController

@synthesize tabella, lista;

- (void)viewDidLoad{

//elementi da visualizzare nella tabella

lista = [[NSMutableArray alloc] initWithObjects:@"iPhone", @"iPod",

@"iPod Touch", @"iMac", @"iBook", @"MacBook", @"MacBook Pro", @"Mac Pro",@"PowerBook", nil];

}

//setta il numero di righe della tabella

- (NSInteger)tableView:(UITableView *)tableView

numberOfRowsInSection:(NSInteger)section{

return [lista count];

}

Analizziamoli ora uno alla volta. Il primo metodo è “viewDidLoad” ( che funziona analogamen-

te ad “awakeFromNib” ), in cui definiamo l’array che contiene gli elementi da visualizzare. Nel-l’esempio abbiamo inserito alcuni prodotti della Apple, semplicemente utilizzando un metodoche ci permette di inserirli in fase di inizializzazione.

Alla riga 13 abbiamo implementato un metodo che definisce il numero di righe della nostra ta -bella. Avremmo potuto anche inserire come istruzione “return 9”, in quanto gli elementi delnostro array sono 9. Con l’istruzione che abbiamo utilizzato, però, rendiamo il nostro codicepiù flessibile, e nel caso volessimo variare il numero di elementi nel nostro array non dovrem-

mo modificare anche questo metodo. Questa, quindi, è la soluzione migliore da adottare sem-

pre.

Ci manca un ultimo metodo, quello che si occupa di inserire questi elementi all’interno dellesingole celle. Inseriamo, quindi, questo metodo:




1

2

3

4

5

6

7

8

9

10

11

1213

14

//settiamo il contenuto delle varie celle

- (UITableViewCell *)tableView:(UITableView *)tableView

cellForRowAtIndexPath:(NSIndexPath *)indexPath{

UITableViewCell *cell = [tableView

dequeueReusableCellWithIdentifier :@"cellID"];

if (cell == nil){

cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero

reuseIdentifier:@"cellID"] autorelease];

//setta lo stile con cui vengono selezionate le righe

cell.selectionStyle = UITableViewCellSelectionStyleNone ; }

//inseriamo nella cello l'elemento della lista corrispondente

cell.text = [lista objectAtIndex:indexPath.row]; return cell;

}

Questo è il metodo ( fondamentale ed obbligatorio ) che si occupa di settare in maniera corretta le celle della tabella. Alla riga 4 troviamo la dichiarazione di una cella, che viene poi allocata alla riga 7. Con l’istruzione presente alla riga 9 definiamo come deve essere l’aspetto delle righequando vengono selezionate dall’utente. Con questa istruzione l’utente non potrà selezionarenessuna riga, se invece la togliamo avremo la classica selezione con sfondo blu.

Alla riga 12, infine, settiamo il valore contenuto nella cella: esso deve essere letto dall’array, nella

posizione uguale a quella della riga ( ricordatevi che sia la numerazione dell’array che delle celleparte da zero ).Cliccate ora su “Build and Go!”: la nostra tabella inizia a prendere forma!




PARTE 2: INSERIAMO ALCUNE FUNZIONALITÀ Abbiamo visto come definire una tabella. In questa seconda parte vedremo come aggiungeredue funzionalità davvero molto importanti: la cancellazione delle singole celle e la possibilità di

renderle selezionabili. Vedrete che per entrambe le caratteristiche dovremo inserire davveropoco codice, in quanto è già tutto definito.

AGGIUNGIAMO LA BARRA DI NAVIGAZIONEIniziamo aprendo nuovamente il file “tableTutorialViewController.xib” e inserendo nella vista una barra UINavigationBar. Ecco il risultato che dovete ottenere:

Dobbiamo ora definire un oggetto che si riferisca a questa barra. Dal pannello dei documentiselezioniamo “File’s Owner” e apriamo il “Connections Inpsector”. In precedenza abbiamo già collegato l’elemento “tabella”, ora dovremo collegare “navigationItem” con la UINavigationBarche abbiamo appena inserito. Ecco come appare il pannello dopo il collegamento:




Questo “navigationItem” è un oggetto già incluso in ogni vista, che quindi possiamo sfruttaresenza problemi. Avremmo potuto definire un nuovo oggetto ( come abbiamo fatto per la tabel-la ), ma sfruttare questo è più elegante e ci permette un risparmio di memoria.

Salviamo e chiudiamo Interface Builder.

PERMETTIAMO LA CANCELLAZIONE DI UNA RIGAPer prima cosa, dobbiamo inserire il bottone che permetta all’utente di attivare la possibilità dimodificare la tabella. Per fare ciò, sfrutteremo un altro componente già presente nelle classiUIViewController. Apriamo, quindi, il file “tableTutorialViewController.m” e inseriamo il se-

guente codice:

1

2

34

5

6

7

8

9

10

11

12

13

14

15

16

17

18

#import "tableTutorialViewController.h"

@implementation tableTutorialViewController

@synthesize tabella, lista;

- (void)viewDidLoad{

// aggiungiamo il bottone per modificare la tabella

self.navigationItem.rightBarButtonItem = self.editButtonItem;

//elementi da visualizzare nella tabella

lista = [[NSMutableArray alloc] initWithObjects:@"iPhone", @"iPod",

@"iPod Touch", @"iMac", @"iBook", @"MacBook", @"MacBook Pro", @"Mac Pro",

@"PowerBook", nil];

}

- (void)setEditing:(BOOL)editing animated:(BOOL)animated {

[super setEditing:editing animated:animated];

[tabella setEditing:editing animated:animated];

}

La prima cosa che abbiamo fatto è stata quella di aggiungere l’istruzione alla riga 9 nel metodo“viewDidLoad”. Abbiamo inserito il bottone “editButtonItem”, che è proprio il componente

che l’SDK ci mette a disposizione. La particolarità di questo elemento consiste nel fatto chequando è attiva la modifica della tabella, il bottone ha sfondo blu e riporta la scritta “Done”,mentre se la tabella non è modificabile lo sfondo è del solito colore e la scritta è “Edit”. Volen-do, potete inserire questo bottone a sinistra, semplicemente usando “leftBarButtonItem” al po-sto di “rightBarButtonItem”.

Alla riga 14 abbiamo invece implementato il metodo che si occupa della modifica della tabella.Le istruzioni da utilizzare sono sempre queste due: la prima richiama lo stesso metodo ma della superclasse ( questo è un aspetto classico della programmazione ad oggetti ), mentre la seconda richiama il metodo stesso sulla nostra tabella ( è una funziona ricorsiva quindi ). Ovviamente,




sarà il metodo della superclasse che si occuperà di abilitare o disabilitare la possibilità di elimi-nare le righe, rendendo il nostro lavoro molto più veloce.

I due metodi che abbiamo appena definito permettono all’utente di cancellare una riga qualsia -

si. Tuttavia, se provate ad eseguire l’applicazione, noterete che cancellando una riga essa non viene rimossa dalla tabella. Questo avviene perché non abbiamo ancora concluso di implemen-tare questa funzionalità.Inseriamo quindi questo metodo:

1

2

3

4

5

6

7

8

9

10

11

12

// Elimina l'elemento dalla tabella e dalla lista

- (void)tableView:(UITableView *)tableView

commitEditingStyle:(UITableViewCellEditingStyle)editingStyle

forRowAtIndexPath:(NSIndexPath *)indexPath {

//controlla se l'azione compiuta è un'eliminazione

if (editingStyle == UITableViewCellEditingStyleDelete ) {

//elimina l'elemento dalla lista

[lista removeObjectAtIndex:indexPath.row];

//elimina le'elemento dalla tabella

[tabella deleteRowsAtIndexPaths:[NSArray

arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];

}

}

Come possiamo notare dalla struttura un po’ complicata, questo è un metodo del protocolloUITableView, proprio come quello che abbiamo implementato nella prima parte.Il costrutto if ( riga 5 ) esegue un controllo che, come spiega il commento, controlla se l’azioneeseguita sulla tabella è di cancellazione di una riga. Direte voi: “Cosa posso fare d’altro?” Perora niente, perché la nostra tabella supporta solo l’eliminazione di una riga, ma volendo si po-trebbe implementare anche l’inserimento di una nuova riga, oppure altre azioni. È sempre que-sto metodo che si occupa di gestire tutte le azioni sulla tabella. Ecco spiegata la necessità diquesto controllo. Tornando al codice, all’interno dell’if possiamo notare due istruzioni, cheeliminano l’elemento sia dalla lista ( riga 7 ) che dalla tabella ( riga 9 ). In questo modo la cancella -zione di una riga è davvero implementata.

R ENDIAMO LE CELLE SELEZIONABILIVediamo ora di implementare un’altra funzione. Vogliamo che quando l’utente seleziona una cella appaia un pop-up che contenga il nome dell’elemento selezionato. Ovviamente questa azione non ha una grande utilità, ma vi permetterà di imparare come gestire le selezioni del -l’utente e vedrete, inoltre, come creare un pop-up.Prima di implementare il metodo necessario, eliminate dal metodo

tableView:(UITableView*)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath;




la seguente istruzione ( vi ho spiegato nella prima parte a cosa serviva ):

1 cell.selectionStyle = UITableViewCellSelectionStyleNone;

altrimenti le celle non saranno selezionabili.

Nel solito file “tableTutorialViewController.m” inserite ora questo metodo:

1

2

3

4

56

// Se selezioniamo una riga appare un pop-up con l'elemento in questione


didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

UIAlertView *popUp = [[UIAlertView alloc] initWithTitle:@"Hai selezio-

nato:" message:[lista objectAtIndex:indexPath.row] delegate:self

cancelButtonTitle:@"OK" otherButtonTitles:nil];

[popUp show];

[popUp release];}

Questo è il metodo che si occupa di eseguire una certa azione quando l’utente seleziona una cella. Alla riga 3 possiamo notare la definizione del pop-up, che conterrà un messaggio con ilnome della cella selezionata. È possibile creare pop-up con diversi bottoni o più messaggi, vibasterà guardare la documentazione per trovare tutte le varianti possibili.

Alla riga 6, infine, viene mostrato il pop-up appena definito.

Cliccate ora su “Build and Go!” e testate la nuova tabella!




PARTE 3: IMPLEMENTIAMO LA RICERCANella terza e ultima parte di questo lungo tutorial dedicato alle tabelle, vedremo come aggiun-

gere un box di ricerca. Il comportamento sarà del tutto simile a quello della ricerca presente

nell’applicazione nativa “Contatti”.Non sarà un compito semplicissimo, però vi potrà tornare utile in moltissime applicazioni,quindi cercate di capire il più possibile!

AGGIUNGIAMO IL BOX DI RICERCAPrima di lavorare con Interface Builder, apriamo il file “tableTutorialViewController.h” e di-chiariamo il seguente elemento:

1 IBOutlet UISearchBar *barraRicerca;

Salviamo il file e facciamo doppio clic su “tableTutorialViewController.xib” per aprire IB, in cuiinseriremo l’elemento grafico necessario: una “UISearchBar”, ottenendo un risultato come que-sto:

Ovviamente questa è la soluzione più semplice, volendo potreste inserire un bottone che,quando premuto, fa apparire la barra, oppure integrare il box di ricerca direttamente nella UI-NavigationBar principale.Ora dobbiamo definire questo elemento e le sue proprietà. Dal pannello dei documenti sele-zioniamo il “File’s Owner” e apriamo “Connections Inspector”. Nella sezione “Outlets” colle-




ghiamo l’elemento “barraRicerca” con la UISearchBar che abbiamo appena inserito; in “Refe-rencing Outlets” colleghiamo “delegate” con la barra.Se avrete eseguito tutto correttamente avrete un risultato come questo:

Salviamo tutto e chiudiamo Interface Builder.

MODIFICHIAMO I METODI GIÀ ESISTENTIPrima di implementare la ricerca vera e propria, dobbiamo fare delle piccole modifiche ai me-todi già presenti nel nostro progetto.Iniziamo aprendo il file “tableTutorialViewController.h” e completiamo così la definizione del-la classe:

1

2

3

4

5

6

7

8

9

1011

12

13

14

15

16

17

18

19


@interface tableTutorialViewController : UIViewController <UITableViewDele-

gate, UITableViewDataSource>{


IBOutlet UISearchBar *barraRicerca;

NSMutableArray *lista;

NSMutableArray *filteredListContent;}

@property (nonatomic, retain) IBOutlet UITableView *tabella;

@property (nonatomic, retain) NSMutableArray *lista;

@property (nonatomic, retain) UISearchBar * barraRicerca;

@property (nonatomic, retain) NSMutableArray *filteredListContent;

@end




Alla riga 6 c’è la definizione della barra di ricerca che abbiamo inserito all’inizio di questo terzotutorial. Alla riga 10, invece, abbiamo dichiarato una nuova lista, che conterrà gli elementi “fil-trati”, ovvero quelli che corrispondono al criterio di ricerca.

Ora dobbiamo modificare i metodi che si occupano dell’inizializzazione della tabella. Iniziamodal metodo “viewDidLoad” e dalla funzione @synthetize:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

@synthesize tabella, lista, barraRicerca, filteredListContent;

- (void)viewDidLoad {

// aggiugiamo il bottone per modificare la tabella

self.navigationItem.rightBarButtonItem = self.editButtonItem;

// elementi da visualizzare nella tabella

lista = [[NSMutableArray alloc] initWithObjects: @"iPhone", @"iPod",

@"iPod Touch", @"iMac", @"iBook", @"MacBook", @"MacBook Pro", @"Mac Pro",

@"PowerBook", nil];

// crea la lista filtrata, inizializzandola con il numero di elementi

dell'array "lista"

filteredListContent = [[NSMutableArray alloc] initWithCapacity: [lista

count]];

//inserisce in questa nuova lista gli elementi della lista originale

[filteredListContent addObjectsFromArray: lista];

// disabilita l'autocorrezione (nel box di ricerca)

barraRicerca.autocorrectionType = UITextAutocorrectionTypeNo;

// disabilita la prima lettera maiuscola (nel box di ricerca)

barraRicerca.autocapitalizationType = UITextAutocapitalizationTypeNone ;

// nasconde il bottone per uscire dalla ricerca

barraRicerca.showsCancelButton = NO;

}

Alla riga 10 e 11 abbiamo inizializzato il nuovo array, che ci servirà nell’algoritmo di ricerca. Ini-zialmente questa lista coinciderà con quella degli elementi iniziali, mentre poi verrà modificata mentre l’utente inserisce la stringa di ricerca.Nelle righe 15, 17 e 19 abbiamo definito dei comportamenti per il nostro box di ricerca, come

potete capire dai commenti.Il secondo metodo da modificare è “numberOfRowsInSection”. Ecco il nuovo codice:

1

2

3

4

5

//setta il numero di righe della tabella

- (NSInteger)tableView:(UITableView *)tableView

numberOfRowsInSection:(NSInteger)section{

//il numero di righe deve corrispondere al numero di elementi della li-

sta

return [filteredListContent count];

}

Questa modifica va eseguita in quanto la tabella ora non è più composta dagli elementi della




lista originale, ma da quelli della lista filtrata, ovvero di quegli elementi selezionati mediante la ricerca. Ovviamente se l’utente non esegue nessuna ricerca, gli elementi della lista filtrata corri-sponderanno agli elementi della lista originale.

Se vi è chiaro questo ragionamento, è facile intuire quali saranno i prossimi due metodi da mo-

dificare: il primo è “cellForRowAtIndexPath:”, ovvero il metodo che si occupa di inserire i valo -ri nelle celle. Modificate l’ultima istruzione al suo interno nella seguente maniera:

1

2

//inseriamo nella cella l'elemento della lista corrispondente

cell.text = [filteredListContent objectAtIndex:indexPath.row];

L’altro metodo da modificare, invece, sarà “didSelectRowAtIndexPath:” e anche in questo casol’unica modifica riguarda proprio la lista di riferimento.

1

2

3

4

5

6

// Se selezioniamo una riga appare un pop-up con l'elemento in questione


didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

UIAlertView *popUp = [[UIAlertView alloc] initWithTitle:@"Hai selezio-

nato:" message:[filteredListContent objectAtIndex:indexPath.row]

delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil];

[popUp show];

[popUp release];

}

Abbiamo così eseguito tutte le modifiche necessarie!

IMPLEMENTIAMO LA RICERCAÈ arrivato il momento di implementare la ricerca vera e propria. Prima di mostrarvi i passagginecessari, devo premettere che il codice non è stato scritto da me, ma l’ho preso da un esempiorealizzato dalla stessa Apple. I commenti, quindi, saranno davvero pochi, anche perché non èfondamentale capire come funziona tale algoritmo, in quanto lo stesso codice si può utilizzarein qualsiasi altra applicazione che necessiti di una ricerca.Iniziamo con due metodi “accessori”, ovvero non legati direttamente all’algoritmo di ricerca.Ecco i due metodi da inserire nel file “tableTutorialViewController.m”:

1

2

3

4

5

6

7

8

9

10

11

12

// metodo chiamato quando l'utente inizia ad inserire la chiave di ricerca

- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar{ // visualizza il bottone per uscire dalla ricerca

barraRicerca.showsCancelButton = YES;

// disattiviamo la possibilità di modificare le celle della tabella

self.navigationItem.rightBarButtonItem. enabled = FALSE;

}

// metodo richiamato quando l'utente ha terminato la ricerca

- (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar{

// nascondiamo il bottone "Cancel" del box di ricerca

barraRicerca.showsCancelButton = NO;

}




Il primo metodo viene richiamato quando l’utente inizia ad inserire la chiave di ricerca: mo -striamo il bottone per annullare la ricerca e disattiviamo il bottone per modificare le celle ( que-sto per non creare strani comportamenti ). Il secondo metodo, invece, viene richiamato quando

la ricerca è terminata.Eccovi altri due metodi da aggiungere:

1

2

3

4

5

6

7

8

910

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

// metodo richiamato quando il bottone "Cancel" viene premuto

- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar{

/* se l'utente esegue una ricerca valida, ma poi la annulla

dobbiamo inserire i valori originali nella tabella*/

if (barraRicerca.text.length > 0){

[filteredListContent removeAllObjects];

[filteredListContent addObjectsFromArray: lista];

}

// ricarichiamo la tabella [tabella reloadData];

[barraRicerca resignFirstResponder];

//azzeriamo il box di ricerca

barraRicerca.text = @"";

//riabilitiamo il tasto per la modifica della tabella

self.navigationItem.rightBarButtonItem. enabled = TRUE;

}

// metodo richiamato quando il bottone "Done" viene premuto

- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar{

// se il box di ricerca è vuoto abilitiamo la modifica della tabella

if ([filteredListContent count] == [lista count])

self.navigationItem.rightBarButtonItem. enabled = TRUE;

else

self.navigationItem.rightBarButtonItem. enabled = FALSE;

[barraRicerca resignFirstResponder];

}

Il primo metodo viene richiamato alla pressione del tasto “Cancel” che appare quando l’utenteinizia ad inserire la sua chiave di ricerca. Questo metodo dovrà ripristinare la tabella al suo sta -

to originale, ovvero con gli elementi della lista di partenza, e settando in maniera corretta tuttele caratteristiche desiderate.Discorso simile vale per il secondo metodo, che viene richiamato quando si preme “Done” sulla tastiera virtuale.I commenti presenti nei due metodi dovrebbero rendere tutte le istruzioni comprensibili.Quello che manca ora è l’algoritmo di ricerca vero e proprio, che è il seguente:




1

2

3

4

5

6

7

8

9

10

11

12

1314

15

16

// algoritmo di ricerca

- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString

*)searchText{

// azzeriamo la lista con gli elementi filtrati

[filteredListContent removeAllObjects];

// search the table content for cell titles that match "searchText"

// if found add to the mutable array and force the table to reload

NSString *cellTitle;

for (cellTitle in lista){

NSComparisonResult result = [cellTitle compare:searchText

options:NSCaseInsensitiveSearch range:NSMakeRange(0, [searchText length])];

if (result == NSOrderedSame){

[filteredListContent addObject:cellTitle];

}

}

[tabella reloadData];

}

Per questo algoritmo non voglio spendere parole, in quanto, come detto in precedenza, è statoscritto da Apple, quindi non posso permettermi di fare modifiche!

Cliccate ora su “Build and Go!”, se avete eseguito tutto correttamente si aprirà la vostra appli-cazione!




Capitolo 10: XML

Dopo aver visto molti componenti, in questo capitolo vedremo come integrare una tecnologia

molto utilizzata, specialmente in ambito web: stiamo parlando di XML.Vedremo, quindi, come leggere un file XML, da cui ricaveremo delle informazioni che abbiamosalvato. Questa operazione verrà eseguita in locale ( ovvero il file xml sarà all’interno del nostroprogetto ), ma nulla vieta di avere il file caricato su un server web da cui accediamo tramite la nostra applicazione.

COSA È XML?XML è un metalinguaggio ( in quanto non è un linguaggio di programmazione vero e proprio ) di markup, ovvero un linguaggio che consente di estendere o controllare il comportamento dialtri linguaggi. Il linguaggio di markup più famoso è sicuramente l’HTML, che ha molte analo-

gie con l’XML.XML è l’acronimo di eXtensible Markup Language, da cui possiamo capire la caratteristica fondamentale di questo linguaggio: ci permette di creare tag personalizzati, in base alle proprieesigenze.

Sarà più semplice comprendere come funziona questo linguaggio mediante un esempio:

La prima riga definisce la versione di XML in uso e la codifica utilizzata ( secondo le normeISO ). Dalla seconda riga in poi, invece, troviamo dei tag personalizzati, che vanno a modellaredei dati a nostro piacimento.Possiamo vedere come abbiamo definito un tag generale “studenti”, che viene iniziato alla se -conda riga e concluso all’ultima. Nel mezzo troviamo, invece, altri tag, che riportano le infor-mazioni che vogliamo memorizzare, per poi utilizzarle a nostro piacimento.

Ci sono alcune piccole regole da rispettare nella struttura XML:




1. I tag non possono iniziare con numeri o caratteri speciali e non possono contenere spazi.Corretti : <nome>, <cognome>, <dataDiNascita>

Errati : <&soldi>, <12peso>, <anno di nascita>

2. I tag devono essere bilanciati(

ogni tag aperto deve essere chiuso )

Corretto: <nome>Andrea</nome> Errato: <nome>Andrea

3. I tag non devono contenere errori di annidamento.Ecco alcuni esempi errati:

4. Si possono inserire degli attributi all’interno dei tag; la struttura sarà quindi la seguente:<nometag attributo1=”valore1″ attributo2=”valore2″ > Valore </nometag>

I nostri elementi, quindi, potranno essere scritti anche nella seguente maniera:

Questa struttura è del tutto uguale a quella precedente. Notate che in questo caso non ab-biamo usato il tag di chiusura, ma abbiamo inserito “/” all’interno del tag stesso proprio perindicare che quel tag non ha elemento di chiusura. Quello che cambierà sarà solamente ilmodo di leggere i valori via codice.




XML NEL SDK DI IPHONEPer ora abbiamo fatto una panoramica su XML in generale, presentando gli aspetti fondamen-tali di tale linguaggio. Ma come possiamo integrarlo con le nostre applicazioni?L’oggetto che si

occupa di recuperare i dati da un file XML viene detto parser.

Esistono vari tipi di parser ( diversi per linguaggi e tecnologie ), noi andremo ad utilizzare SAX.La caratteristica di questo parser sta nel fatto che processa i documenti linea per linea: dati a cui si è acceduto in precedenza non possono essere riletti senza la rielaborazione dell’interodocumento. Può essere uno svantaggio, ma è l’unico parser disponibile nel SDK per iPhone!!

CREIAMO LA STRUTTURA GRAFICAIniziamo ora a creare la nostra applicazione. Creiamo un nuovo progetto di tipo “Window -Ba -

sed Application” e chiamiamolo “xmlTutorial”.Prima di definire l’aspetto grafico, però, dichiariamo i componenti che ci servono. Apriamo ilfile “xmlTutorialViewController.h” e modificatelo così:

1

2

3

4

5

6

78

9

10

11


@interface xmlTutorialViewController : UIViewController {

IBOutlet UITextView *textArea;

NSString *path;

}

-(IBAction)avviaParsing;

@end

Abbiamo dichiarato una TextView in cui inseriremo i dati letti dal file xml, un’azione, che an-drà collegata ad un bottone ( tale azione farà iniziare il processo di parsing ) e una stringa checonterrà il percorso del file xml. Possiamo salvare il file e dedicarci alla struttura grafica dell’ap-plicazione.

Apriamo ora il file “xmlTutorialViewControlle.xib”, che avvierà Interface Builder. Nella nostra applicazione, inseriamo un bottone e una TextView, di dimensioni abbastanza ampie, in quantodovrà contenere tutti i valori letti dal file xml. Dovreste ottenere un risultato come questo:




Ora, selezionando la UITextView, entriamo in “Attributes Inspector” e togliamo la spunta a “Editable”:

questo perché non vogliamo che l’utente possa modificare i valori presenti nella TextView ( ov - vero deve essere di sola lettura ).

Dal pannello dei documenti ( ”Tools -> Reveal in Document Window” ) selezioniamo “File’s

Owner”, ovvero la classe che gestisce il nostro file.




Apriamo il “Connections Inspector” e potremo vedere alcuni elementi, più i due che abbiamodefinito noi all’inizio del nostro progetto. Colleghiamo “textArea” con la UITextView presentenella nostra vista, e l’azione “avviaParsing” con il bottone: quando apparirà il menù con tutte leazioni disponibili, scegliamo “Touch Up Inside”. Se avrete eseguito tutto correttamente avreteun pannello che si presenterà così:

Abbiamo terminato la creazione della struttura grafica. Possiamo salvare tutto e chiudere In-terface Builder.

SCRIVIAMO IL CODICE NECESSARIOPrima di procedere con il codice necessario, dobbiamo inserire all’interno del progetto il file

xml con i nostri dati. Se avete capito la struttura di tali file, potete creare uno a vostro piaci-mento ( fate attenzione a salvarlo con estensione .xml ), altrimenti copiate quello presentato nelprimo capitolo.

Apriamo ora il file “xmlTutorialViewController.m” e definiamo il seguente metodo:




1

2

3

4

5

6

7

// Metodo eseguito all'avvio della vista

- (void)viewDidLoad {

[super viewDidLoad];

// definiamo il percorso del file xml

NSString *pathProgetto = [[NSBundle mainBundle] bundlePath];

path = [[NSString alloc] initWithString:[pathProgetto

stringByAppendingPathComponent:@"dati.xml"]];

}

Questo metodo viene eseguito all’avvio della vista, e ci permette di definire dei comportamentiche devono essere eseguiti prima di ogni altra cosa. Con le due istruzioni che abbiamo inseritodefiniamo il percorso del nostro file “dati.xml”: esso viene cercato all’interno della cartella delnostro progetto. Queste istruzioni sono molto importanti, in quanto non viene definito unpercorso assoluto ( soluzione sempre sconsigliabile e spesso errata ), ma viene definito il percor-

so eff ettivo in cui si trova il file.

Dobbiamo ora definire l’azione che viene eseguita quando premiamo sul pulsante. Ecco il codi-ce da inserire:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

1617

18

-(IBAction)avviaParsing{

//Bisogna convertire il file in una NSURL altrimenti non funziona

NSURL *xmlURL = [NSURL fileURLWithPath:path];

// Creiamo il parser

NSXMLParser *parser = [[ NSXMLParser alloc]

initWithContentsOfURL:xmlURL]; // Il delegato del parser e' la classe stessa (self)

[parser setDelegate:self];

//Effettuiamo il parser

BOOL success = [parser parse];

//controlliamo come è andata l'operazione

if(success == YES){

//parsing corretto

} else {

//c'è stato qualche errore...

}

// Rilasciamo l'oggetto NSXMLParser [parser release];

}

Le istruzioni alle righe 3 e 5 ci permettono di definire il parser, partendo dal percorso del no -stro file. Alla riga 9 avviamo il processo di parsing, salvando il risultato in una variabile boolea -na: se essa vale YES la conversione si è conclusa senza errori ( riga 12 ), altrimenti c’è stato unerrore ( che potrebbe essere dovuto ad errori nella struttura del file xml oppure ad errori discrittura del codice ).Come potete vedere non si tratta di codice complesso, sono poche istruzioni che dovrebbero

risultarvi chiare.




La parte che viene ora è quella che si occupa di leggere i dati dal file xml. Iniziamo inserendoquesto metodo:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

- (void)parser:(NSXMLParser *)parser didStartElement:(NSString *)elementNa-me namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)quali-

fiedName attributes:(NSDictionary *)attributeDict {

if ([elementName isEqualToString:@"studenti"]){

[textArea setText:[[NSString alloc] initWithFormat:@"%@\nInizio

studenti",textArea.text]];

}

else if([elementName isEqualToString:@"studente"]){

[textArea setText:[[NSString alloc] initWithFormat:@"%@\nNuovo

studente",textArea.text]];

}

else if([elementName isEqualToString:@"matricola"]) {

[textArea setText:[[NSString alloc]

initWithFormat:@"%@\nMatricola: ",textArea.text]];

}

else if([elementName isEqualToString:@"cognome"]) {


initWithFormat:@"%@\nCognome: ",textArea.text]];

} else if([elementName isEqualToString:@"nome"]) {

[textArea setText:[[NSString alloc] initWithFormat:@"%@\nNome:",textArea.text]];

}

}

Come potete osservare, vi sono una serie di controlli if, che vanno a testare l’elemento corren -te, per riconoscerlo e per scrivere una stringa adeguata nella textArea che abbiamo predisposto.Questo processo è possibile perché conosciamo a priori la struttura del file xml: questo è quasisempre vero, in quanto sarebbe quasi impossibile leggere un file xml di cui non conosciamo la struttura interna.

Il metodo viene, ovviamente, richiamato ogni volta che il parser incontra un nuovo elemento,cioè l’apertura di un tag.

Per completare il nostro programma mancano solo due metodi:




1

2

3

4

5

6

7

- (void)parser:(NSXMLParser *)parser foundCharacters:(NSString *)string {


initWithFormat:@"%@%@",textArea.text,string]];

}

- (void)parser:(NSXMLParser *)parser didEndElement:(NSString *)elementName

namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName {

[textArea setText:[[NSString alloc] initWithFormat:@"%@\nFine elemento:

%@",textArea.text,elementName]];

}

Il primo viene richiamato quando il parser incontra un valore racchiuso tra due tag ( l’informa -zione vera e propria ). Nel nostro caso ci limitiamo a inserirla nella textArea, però potreste faredelle operazioni più o meno complesse sulle informazioni che leggete dal file.

L’ultimo metodo, invece, viene richiamato quando il parser incontra un tag di chiusura. Anchein questo caso l’unica azione che faremo sarà quello di inserire una stringa nella textArea.

Possiamo finalmente cliccare su “Build and Go!” e testare la nostra applicazione funzionante!




Capitolo 11: Gestire più viste create con IB

In questo capitolo a ff ronteremo un argomento abbastanza ostico di XCode, ovvero la gestione

di più viste create con Interface Builder. Questo è uno strumento davvero ottimo che ci per-mette di creare la parte grafica della nostra applicazione senza grossi sforzi, ma a volte diventa problematico gestire tutte le viste create graficamente via codice. In questo tutorial vedremocome creare due viste distinte, e come passare da una all’altra mediante un semplice bottone.Un’operazione semplice, che però vi farà capire il meccanismo che sta alla base.

CREIAMO LA VISTA PRINCIPALEIniziamo come sempre creando un nuovo progetto di tipo “View -Based Application” e chia -miamolo “viewTutorial”. Prima di fare qualsiasi altra operazione, selezioniamo eliminiamo ilfile “viewTutorialViewController.xib” presente nella sezione “Resources”. Basterà cliccare con iltasto destro sul file, selezionare “Delete” e poi cliccare su “Also move to Trash”.Una volta eseguite queste semplici operazioni, andiamo a creare l’interfaccia grafica. Facciamodoppio click sul file “MainWindow.xib”, si aprirà così l’Interface Builder, con cui ormai abbia -mo già preso conoscenza.Selezioniamo la vista della nostra applicazione, e apriamo l’Attribute Inspector. Nel campo“NIB Name” eliminiamo la voce “viewTutorialViewController” ( semplicemente cancellando iltesto ), ovvero il file che abbiamo cancellato in precedenza.

Se premiamo poi invio e torniamo a selezionare la vista vedremo che essa ha mutato la scritta centrale, ed ora apparirà così:




Ora, dalla libreria selezioniamo un componente di tipo “View” e trasciniamolo nella nostra ap -plicazione. Andiamo poi in “Identity Inspector” e in “Class” scriviamo “MainView”:

Abbiamo creato la vista principale della nostra applicazione. In questo tutorial questa vista non

ci servirà a molto, ma avrà solo il compito di ospitare le altre viste, che verranno richiamate da apposite azioni.Ora, salviamo subito la classe “MainView” relativa a questa vista, selezionando “File -> WriteClass Files…” e inserendola nella cartella “Classes” del nostro progetto, ricordandoci poi dimettere la spunta nella finestra successiva che apparirà.

CREIAMO LA VISTA (E LA CLASSE) “V ISTAUNO”Iniziamo ora a creando una prima vista, che chiameremo “vistaUno”, e verrà caricata di defaultall’avvio dell’applicazione. Tramite un bottone contenuto in questa vista sarà poi possibile apri-

re una seconda vista, che chiameremo “vistaDue”. Iniziamo, però, a creare la prima.




Inseriamo all’interno del file “MainWindow.xib” una vista ( una UIView ), in modo da avere unpannello dei documenti come questo:

Facciamo ora doppio clic sulla vista appena inserita, si aprirà ( ovviamente ) completamente vuo-ta. Inseriamo i componenti a nostro piacimento, l’importante che ci sia almeno un bottone,avendo un risultato simile a questo:

Ora dobbiamo, come al solito, definire gli elementi e le azioni. Entriamo nel pannello “Identity Inspector”, e inseriamo i seguenti componenti ( dichiarando anche la classe “VistaDue” ):




Come potete vedere abbiamo dichiarato la classe come “VistaUno”, e abbiamo inserito uncomponente “mainView”, che si riferisce alla vista principale, la “MainView”. Abbiamo, inoltre,dichiarato un’azione “vaiAsecondaView”, che dovremo associare al bottone presente in questa

vista.Per fare ciò, andiamo in “Connections Inspector”, e colleghiamo l’azione “vaiAsecondaView” al

bottone, selezionando “Touch Up Inside” quando appare il solito pop-

up.Colleghiamo, infine, l’elemento “mainView” con la vista principale, quella che abbiamo creatoinizialmente, trascinando il solito pallino proprio sulla vista “MainView”. Se abbiamo eseguitotutto correttamente dovremmo avere un risultato come questo:

Abbiamo così configurato correttamente la prima vista da Interface Builder. Salviamo anchequesta classe dal solito menù “File -> Write Class Files…” e assicurandoci che appaia il nome“VistaUno” per la classe ( se non appare significa che avete sbagliato qualcosa ).Salviamo tutto e chiudiamo pure Interface Builder.




FACCIAMO CAR ICARE LA PRIMA VISTA ALL ’AVVIO DELL’APPLICA-

ZIONEOra dobbiamo fare in modo che questa vista ( la “VistaUno” ) venga caricata in automatico al-l’avvio dell’applicazione. Iniziamo a completare la dichiarazione di tale classe entrando nel file“VistaUno.h”. Completiamo il codice presente nel seguente modo:

1

2

3

4

5

6

7

8

910

11

12



@class MainView;

@interface VistaUno : UIView {

IBOutlet MainView *mainView;

}

- (IBAction)vaiAsecondaView;

@end

Abbiamo solamente definito la superclasse alla riga 4, niente di strano.Implementiamo ora il metodo “vaiAsecondaView”. Il codice da inserire nel file “VistaUno.m” èil seguente:

1

2

34

5

6

7

8

9

10

#import "VistaUno.h"

#import "MainView.h"

@implementation VistaUno

- (IBAction)vaiAsecondaView {

[mainView vaiAsecondaView];

}

@end

Come potete notare questo metodo non compie nessuna azione sulle viste, ma richiama un me-todo di “mainView” ( che andremo a definire in seguito ) che si occuperà della gestione di questa

azione.

Torniamo ora nella classe “MainView”, a cui dobbiamo dire di caricare all’avvio la “vistaUno”. Apriamo il file “MainView.h” e, anche in questo caso, completiamo il codice già presente nelseguente modo:




1

2

3

4

5

6

7

8

9

10



@class VistaUno;


IBOutlet VistaUno *vistaUno;

}

@end

Alla riga 7 viene definita un oggetto “vistaUno”, che andrà poi collegata proprio con tale vista.Ma come facciamo a caricarla all’avvio? Come ormai dovreste ben sapere, esiste un metodo che

viene eseguito proprio all’avvio dell’applicazione: si tratta di “awakeFromNib”. Entriamo, quin-

di, in “MainView.m” e inseriamo il seguente codice:1

2

3

4

5

6

7

8

9


@implementation MainView

-(void)awakeFromNib{

[self addSubview:vistaUno];

}

@end

Questo metodo non fa altro che settare la “vistaUno” come “Subview”. Abbiamo finito? Quasi!Ci manca ancora una piccola cosa. Dobbiamo collegare la “vistaUno” che abbiamo appena di-chiarato in “MainView”, con la vista eff ettiva che vogliamo che venga caricata. Questa opera -zione va eseguita, come sempre, in Interface Builder. Salviamo quindi tutti i file ( io preferiscoeseguire un “Build” per essere più sicuro ) ed entriamo in Interface Builder, aprendo il file“MainWindow.xib”.Entrando, ora, in “Connections Inspector” della vista “MainView” vedremo che è comparso unnuovo elemento, ovvero proprio la “vistaUno” che abbiamo appena dichiarato. La nostra fine-stra delle connessioni avrà il seguente aspetto:




Dobbiamo semplicemente collegare questo elemento con la vista che vogliamo far caricare al-l’avvio, ovvero la “VistaUno” che abbiamo creato poco fa ( per intenderci, quella composta dal-l’uno in grande e dal bottone ). Trasciniamo il pallino che troviamo a fianco di “vistaUno” sulla

vista corretta. Se abbiamo fatto le cose in maniera corretta avremo questo risultato:

Chiudiamo Interface Builder salvando tutto. Clicchiamo ora su “Build and Go!” e se abbiamoeseguito tutto in maniera corretta si aprirà la nostra applicazione:




CREIAMO LA VISTA (E LA CLASSE) “V ISTADUE” Abbiamo, fino ad adesso, creato e impostato la prima vista. Dobbiamo creare ora anche una seconda vista, che verrà aperta cliccando sul bottone presente nella nostra applicazione. Il pro-

cedimento è lo stesso che abbiamo appena visto, quindi in questa seconda parte andremo più veloci.

Inseriamo una nuova vista nel nostro file “MainWindow.xib” ( come fatto per la “VistaUno” ) einseriamo gli elementi a nostro piacere, avendo cura di inserire almeno un bottone, che ci ser-

virà per tornare alla “vistaUno”. La nostra vista si presenterà come questa:

I componenti e le azioni da impostare saranno le stesse della “VistaUno”, quindi il vostro pan-nello “Identity Inspector” apparirà così:




Mentre il pannello “Connections Inspector” avrà i seguenti elementi ( che dobbiamo collegareproprio come fatto per “VistaUno” ):

Salviamo la nuova classe “VistaDue” e aggiungiamola come sempre al nostro progetto. Salviamotutto e chiudiamo pure Interface Builder.

IMPOSTIAMO LE AZIONI PER MUOVERCI TRA LE VISTEPrima di procedere all’inserimento del codice che controlla la navigazione tra le viste, dobbia -

mo concludere la dichiarazione della classe “VistaDue” ( come abbiamo già fatto nel punto 4per “VistaUno” ). Aggiungiamo il seguente codice al file “VistaDue.h”:




1

2

3

4

5

6

7

8

9

10

11

12



@class MainView;

@interface VistaDue : UIView {

IBOutlet MainView *mainView;

}

- (IBAction)tornaAvistaUno;

@end

Anche in questo caso abbiamo solo completato l’intestazione di tale classe. Adesso andiamo a scrivere il codice relativo a tutti i metodi che ci servono, e che non abbiamoancora implementato. Iniziamo dal file “VistaDue.m”, in cui delegheremo ancora l’azione alla classe “MainView”, proprio come abbiamo fatto in precedenza:

1

2

3

4

5

6

7

89

10

#import "VistaDue.h"


@implementation VistaDue

- (IBAction)tornaAvistaUno {

[mainView tornaAvistaUno];

}

@end

Tutto come abbiamo già visto per “VistaUno”.

Ora è giunto il momento di impostare la classe MainView, e tutti i metodi che gli abbiamo de-legato. Apriamo il file “MainView.h” e completiamo la dichiarazione della classe nel seguentemodo:




1

2

3

4

5

6

7

8

9

10

11

12

13

14

15



@class VistaUno;

@class VistaDue;


IBOutlet VistaUno *vistaUno;

IBOutlet VistaDue *vistaDue;

}

-(IBAction)vaiAsecondaView;

-(IBAction)tornaAvistaUno;

@end Anche in questo caso non abbiamo fatto niente di particolare. Possiamo notare che abbiamodefinito le due viste ( righe 8 e 9 ), e le due azioni ( righe 12 e 13 ), che ora dobbiamo implementa -re. Apriamo il file “MainView.m” e scriviamo il seguente codice:

1

2

3

4

5

67

8

9

10

11

12

13

14

15

16

1718

19


@implementation MainView

-(void)awakeFromNib{

[self addSubview:vistaUno];}

-(IBAction)vaiAsecondaView{

[vistaUno removeFromSuperview];

[self addSubview:vistaDue];

}

-(IBAction)tornaAvistaUno{

[vistaDue removeFromSuperview];

[self addSubview:vistaUno];

}

@end

Finalmente abbiamo definito i due metodi che si occupano della gestione delle viste. Potete vedere che sono praticamente uguali: prima rimuovono la vista presente ( righe 10 e 15 ) e poiaggiungono quella nuova da visualizzare ( righe 11 e 16 ).

Abbiamo quasi concluso! Salviamo tutti i file ( io consiglio sempre di eseguire un “Build” ) e tor-niamo in Interface Builder, aprendo il file “MainWindow.xib”. Nel “Connections Inspector”

della vista principale ( la “MainView” ) dovreste vedere l’ultimo elemento che non abbiamo an-




cora collegato, ovvero la “vistaDue”: colleghiamola con la seconda vista, proprio come abbiamo già fatto in precedenza con la “vistaUno. Il risultato di tale operazione sarà il seguente:

Ora abbiamo davvero finito! Salviamo tutto, chiudiamo Interface Builder e da XCode selezio-niamo “Build and Go!”.

Godetevi la vostra applicazione funzionante!


Tutorial Pratici Per iPhone Sdk

Documents

Transcript of Tutorial Pratici Per iPhone Sdk