SI RICORDA CHE SI PUO’ FARE UNA DONAZIONE TRAMITE IL PULSANTE PAYPAY!

COSì CI AIUTERETE A CONTINUARE A SCRIVERE SU QUESTO SITO!

PANORAMICA SUL SDK

Dopo aver scaricato e installato l’SDK (un’immagine dmg di circa 2 GByte), troverete tutto il necessario per sviluppare nella cartella “/Developer/Applications”. Gli strumenti (davvero mol- to potenti) che Apple mette a disposizione sono i seguenti:

• Dashcode, è 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, agli sviluppatori più esperti.

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

• Quartz Composer, è un tool che permette di creare animazioni ed effetti grafici, da utilizzare poi in altri programmi.

• XCode, è 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 Interface Builder, che utilizzeremo di più.

XCODE

Analizziamo, ora, come si presenta XCode. Aprendo un progetto (si vedrà successivamente come creare uno nuovo)

Potete notare tre sezioni principali: a sinistra troviamo “Groups & Files”, in cui abbiamo tutti i file che compongono il nostro progetto. Troveremo, quindi, le classi, le immagini inserite, i framework utilizzati. A destra, invece, possiamo vedere l’editor del codice, che ci assisterà e ci permetterà di scrivere il nostro codice. La barra in alto, infine, ci offre la possibilità di compila- re ed installare la nostra applicazione, sul dispositivo che preferiamo: il nostro iPhone (solo nel caso 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 sul nostro iPhone).

Particolare importanza ha il menù a tendina presente a sinistra della barra. Se lo apriamo tro- viamo le seguenti voci (che ovviamente variano a seconda della versione di SDK che avete in- stallato nel vostro Mac):

Nella prima parte, denominata “Active SDK” andremo a selezionare la versione del firmware con cui vogliamo che sia compatibile la nostra applicazione. Questo è necessario in quanto spesso, con il rilascio di nuovi firmware, vengono aggiunte anche nuove funzioni al SDK (le API). Quindi, un’applicazione scritta e compilata per il firmware 3.1 potrebbe non funzionare con una versione inferiore del firmware (spesso è proprio impossibile installarla, in quanto l’AppStore controlla questa compatibilità in fase di installazione). Al contrario, se compiliamo l’applicazione per la versione 3.0 funzionerà sicuramente (a meno che non utilizziate delle API con alcuni bug) sulla 3.1. È importante, quindi, scegliere con cura la versione da utilizzare, per non escludere parte di utenza dall’utilizzo della nostra applicazione. È possibile, inoltre, sce- gliere se eseguirla sul simulatore (e in tal caso ci basta scegliere quelle con prefisso “Simulator”) oppure sul 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ù leggera 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 finestra: new project

Potete notare che XCode ci fornisce vari template, ovvero delle strutture già pronte, che ci permetteranno di creare applicazioni sullo stile di quelle native. Non dovremo perdere tempo, quindi, per replicare lo stile delle altre applicazioni, perché è Apple stessa che ce li mette a di- sposizione.

Analizziamo, ora, i vari template che ci vengono forniti. • N avigation-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: avete una barra in alto che visualizza il titolo della sezione corrente, e vi permette, tramite un bottone, di tornare alla sezione precedente. Questa barra viene chiamata “Navigation Bar”. Utile per creare applicazioni con tabelle, in cui vogliamo mostrare anche le informazioni sui 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 principalmente per realizzare videogiochi o animazioni grafiche complesse. In questo libro non analizze- remo questa tipologia di applicazioni.

• T ab 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 implementazione particolare. 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”).

CREARE UN NUOVO PROGETTO

In 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 pro- getto. Finito!

INTERFACE BUILDER

Scorrendo la sezione “Groups & Files” possiamo vedere tutti i file che XCode ha già inserito per 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.

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.

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, come

bottoni, label di testo, viste, barre e molto altro. Tutti questi elementi potranno essere utilizzati nelle nostre applicazioni. Per inserirli basta trascinare un compo- nente nella schermata dell’applicazione, e c

• Inspector, è sicuramente la parte più importante di Interface Builder, in quanto ci permette di 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 di codice).

L’Inspector è composto da 5 parti: !Attributes, qui possiamo variare gli attributi generici dei nostri oggetti, ad esempio il

colore, la dimensione del font, ed altre proprietà che impareremo poco alla volta. !Connections, è uno dei pannelli principali. Qui andremo a collegare le azioni agli og- getti. Cosa significa? Ve lo spiego con un esempio. Supponiamo di avere un bottone nella 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 il bottone, viene eseguito il comportamento desiderato. Vedrete che con i prossimi tu-

torial 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 sono presenti alcune voci relative al progetto e al file che stiamo modificando. Noi non utilizzeremo mai questo pannello, quindi potete anche non considerarlo.

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. In pochissimo tempo, non riuscirete più a fare a meno di Interface Builder!

ollocarlo a proprio piacere (questo è vero per tutti i componenti tranne 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à molto

utile per ritrovare tutti i componenti della vostra finestra.

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 i passaggi, in modo da non avere lacune su queste cose basilari.

CREIAMO LA STRUTTURA GRAFICA

Iniziamo 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 UIT extField in cui l’utente potrà inserire il proprio nome; 2.una UIButton, con la scritta “Saluta!”, che l’utente dovrà premere per far apparire il 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 saluto in 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”: “N o” (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 R esponder, 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 AZIONI

Dobbiamo ora definire gli elementi e le azioni necessarie. Il procedimento sarà sempre questo, ovvero definire gli elementi via codice e poi collegarli ad oggetti di Interface Builder. Salviamo tutto e chiudiamo Interface Builder, tornando così in XCode.

Nella cartella “Classes” noteremo quattro file: due con estensione “.h” e due con estensione “.m”. I file “.h” stanno ad indicare le classi di intestazione, ovvero dove vengono definiti i me

todi e i componenti necessari, ma non vi è alcuna implementazione dei metodi. Saranno i file con estensione “.m” a contenere tutte le implementazioni dei metodi, ovvero il codice delle va- rie funzioni. Iniziamo, quindi, aprendo il file “H e”oWorldViewContro”er.h”, in cui dovremo definire gli ogget- ti che ci serviranno. Nel nostro esempio, saranno due gli elementi da definire: la UITextField in cui l’utente inserisce il proprio nome (e da cui noi dobbiamo leggerne il valore), e la UILabel in cui scriveremo il saluto. Dovremo, poi, definire un’azione, quella che verrà richiamata alla pres- sione del bottone.

Ecco il codice da inserire:

#import <UIKit/UIKit.h>

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

} -(IBAction)saluta;

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

@end

Abbiamo dichiarato una UITextField e una UILabel, proprio i due componenti che ci servono. Possiamo notare che entrambe le dichiarazioni sono precedute dalla clausola “IBOutlet”, che indica ad Interface Builder che è possibile collegare questo metodo ad un elemento grafico. Questo è necessario perché, come vedrete fra poco, ci permetterà di collegare l’oggetto creato tramite Interface Builder con quello dichiarato in XCode.

Dopo queste due dichiarazioni, trovate l’intestazione del metodo “saluta”, e anche in questo caso trovate una clausola ”IBAction”: anche questa sta a significare che l’azione è collegata ad un componente di Interface Builder. Le due property, poi, servono per poter utilizzare senza problemi le proprietà degli oggetti che abbiamo definito.

Ora salviamo il file (Cmd + S) e riapriamo “HelloWorldViewController.xib”. Dobbiamo collega- re questi componenti con quelli effettivamente inseriti nella nostra vista. Dal pannello dei documenti selezionate il componente “File’s Owner”. Aprendo il “Connec- tions Inspector” dovreste vedere un pannello.

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 “fieldN o- 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 che trovate qui a fianco.

Sono tutte le azioni che può gestire un bottone. Noi selezioniamo “T ouch Up Inside”, ovvero un azione di click e rialscio (un singolo tap insomma). Volendo potremmo scegliere di avviare l’azione quando il bottone viene rila- sciato, 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 tutto e chiudiamo Interface Builder.

SCRIVIAMO IL CODICE NECESSARIO

Dobbiamo 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:

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 facciamo altro che leggere il nome inserito dall’utente (tramite “fieldNome.text”, che ci restituisce la stringa contenuta nella UITextField) e assegnarlo alla variabile “nome” (riga 11). Tramite una costrutto “if” (dalla riga 13 alla 19) andiamo poi a controllare se tale stringa è vuota (e quindi l’utente ha premuto il tasto senza inserire nessun nome) oppure se vi è un valore. Ovviamente inseriamo due messaggi di saluto diversi a seconda del caso.

Particolare attenzione merita parte dell’istruzione alla riga 18, ed in particolare questo pezzo di codice: “@”Ciao %@”,nome”.

• “@”, la prima chiocciola sta ad indicare che ciò che segue è una stringa. La sintassi è 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 prossimi tutorial.

Il metodo “deall 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 che avete utilizzato, richiamando per ognuno il metodo “dealloc”. Nell’esempio potete vedere che liberiamo dalla memoria gli oggetti “labelSaluto” e “fieldN ome”.

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 TASTIERA

Se 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 quanto non abbiamo implementato niente che chiuda tale tastiera. Per sistemare questo problema, apriamo il file “HelloWorldViewController.h” e modifichiamo l’intestazione nella seguente maniera:

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

Questo metodo si occuperà della chiusura della nostra tastiera. Non soffermiamoci sul codice, in quanto è così in qualsiasi occasione voi vogliate implementarlo. Salvate entrambi i file e apri- te “HelloWorldViewController.xib”. Cliccate sulla UITextField e aprite il “Connections In- spector”: vedrete nella sezione “Outlets” un elemento chiamato “delegate”, prendete il pallino e trascinatelo sul “File’s Owner” nel pannello dei documenti. Se avrete eseguito correttamente questa operazione il vostro pannello.

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!

BUON DIVERTIMENTO,GUADAGNO!

Spero di esservi stato utili con questa guida creata da me!

Popularity: 6%