iSpazio Developer Program #8 - Come creare una tabella (Parte I)

Dopo un periodo di assenza, rieccoci con un tutorial dell’iSpazio Developer Program! Purtroppo in questi ultimi tempi sia per gli impegni personali, che per la nuova versione di iSpazio non siamo riusciti ad offrire il consueto appuntamento con i tutorial sulla programmazione per iPhone, quindi scusateci. Quella di oggi è la prima parte di un grosso capitolo che riguarda la creazione e la gestione di UITableView, ovvero le tabelle (per intenderci, come quella in cui visualizzate i vostro contatti). Vedremo come crearla e come gestire la configurazione base. Nei successivi tutorial, invece, amplieremo le funzionalità, sino ad estenderle alla ricerca all’interno della tabella stessa. Quindi, tornate spesso a trovarci per nuovi tutorial!

TUTORIAL:

Creiamo un nuovo progetto
Creare l’interfaccia grafica dell’applicazione
Creiamo gli oggetti necessari
Aggiungiamo il codice necessario

1. Creiamo un nuovo progetto

Aprimo Xcode, selezioniamo “File -> New Project”. Nel menù che ci appare selezioniamo “ViewBased Application”, clicchiamo su “Choose…” e immettiamo come nome “tableViewTutorial” e fate clic su “Save”. Abbiamo così creato il nostro nuovo progetto.

Prima di fare qualsiasi altra operazione, selezioniamo nell’editor Xcode la cartella “Resources” del nostro progetto ed eliminiamo il file “tableViewTutorialViewController.xib”. Basterà cliccare con il tasto destro sul file, selezionare “Delete” e poi cliccare su “Also move to Trash”.

2. Creare l’interfaccia grafica dell’applicazione

Una volta eseguite queste semplici operazioni, andiamo a creare l’interfaccia grafica della nostra applicazione. Facciamo doppio click sul file “MainWindow.xib”, si aprirà così l’Interface Builder, con cui ormai abbiamo già preso conoscenza.
Selezioniamo la vista della nostra applcazione, e apriamo l’Attribute Inspector. Nel campo “NIB Name” eliminiamo la voce “CountRotateAppViewController” (semplicemente cancellando il testo), 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 (”Tools -> Library”) selezioniamo un componente di tipo “View” e trasciniamolo nella nostra applicazione. Andiamo poi in “Identity Inspector” e in Class scriviamo “MainView”.

Abbiamo creato la vista principale della nostra applicazione che, se vogliamo, possiamo personalizzare a nostro piacere (ad esempio impostando un colore di sfondo diverso dal classico bianco).

Ora prendiamo un componente “Table View” e inseriamolo nella nostra vista, in modo che occupi tutta la schermata (oppure ridimensioniamolo a nostro piacere). Avreme un’applicazione come questa:

3. Creiamo gli oggetti necessari

Torniamo in “Main View Identity”, nella sezione “Class Outlets” inseriamo in nuovo elemento come mostrato in questa immagine:

Adesso dobbiamo eseguire le connessioni. Dobbiamo stare molto attenti perchè sarà un’operazione da eseguire con attenzione. Andiamo in “Connections”, prendiamo il pallino a fianco di “myTable” e trasciniamolo sul componente UITableView che contiene la tabella. Avremo una finestra così:

Facciamo, ora, ben attenzione. Clicchiamo sulla tabella della nostra applicazione, il pannello “Connections” diventerà così:

Dobbiamo collegare i due elementi “dataSource” e “delegate”. Tutti e due vanno collegati con la parte “Main View”: per fare ciò basterà trascinare il solito pallino nella vista, fate però attenzione! Non trascinatelo sulla tabella, ma sopra, dove c’è la status bar grigia: in fondo alla vista vedrete la scritta “Main View”, sarà quella la conferma che avete eseguito il collegamento esatto. Se avete fatto tutto in maniera corretta avrete un pannello “Connections” come questo:

Ora non ci resta che salvare le proprietà che abbiamo appena impostato in un file di classe. Andiamo nel menù “File -> Write Class Files…” e salviamo la classe “MainView” nella cartella Classes del nostro progetto.

Clicchiamo su “Save” e nella schermata successiva selezioniamo il nostro progetto prima di cliccare su “Add”.

Possiamo ora chiudere l’Interface Builder cliccando su “Save” nell’avviso che ci comparirà.

4. Aggiungiamo il codice necessario

Ora passiamo alla scrittura del codice in Xcode. Iniziamo spostando i due file (”MainView.m” e “MainView.h”) all’interno della cartella “Classes”:

Iniziamo aprendo il file “MainView.h”, in cui dobbiamo dichiarare i componenti che ci servono. Il codice da aggiungere è il seguente:

Come possiamo leggere nei commenti del codice, abbiamo un componente (che ci metterà in automatico XCode) che rappresenta la nostra tabella (myTable), mentre il secondo è un array (lista), che avrà il compito di contenere gli elementi da visualizzare nella nostra tabella. Le due righe successive sono le proprietà degli oggetti che abbiamo appena definito, e che ci serviranno in seguito.

Dopo aver scritto il codice appena proposto, spostiamoci nel file “MainView.m”, e inseriamo questo codice, che poi vi descriverò:

Analizziamo i tre metodi che abbiamo appena scritto. Chi ha già un pochino di esperienza con la programmazione per iPhone conoscerà certamente il metodo “awakeFromNib“: questo viene eseguito subito dopo il caricamento del file nib (ovvero della grafica dell’applicazione), e ci permette di settare tutte le variabili e tutti i parametri all’avvio. Qui, infatti, andremo ad istanziare la nostra lista (che è un oggetto NSArray), inserendoci i vari elementi.
Il secondo metodo che incontriamo è “numberOfSectionsInTableView“. Il codice da usare è sempre questo, in tutte le tabelle che creerete. Se provate a modificare questo valore, vedrete che (quando eseguirete l’applicazione) la lista degli oggetti sarà ripetuta più volte. Provare per credere!
L’ultimo metodo è “numberOfRowsInSection“, che in questo caso setta il numero di righe che deve contenere la nostra tabella. Notiamo che il valore di tale funzione è [lista count], ovvero il numero di elementi contenuti nella nostra lista. Avremmo potuto anche inserire direttamente il valore 9 (ovvero il numero di elementi), ma se poi avessimo voluto modificare gli elementi di “lista”, avremmo dovuto anche variare questo valore. In questa maniera non dovremo preoccuparci di niente.

L’ultimo metodo da inserire (sempre in “MainView.m”) è il seguente:

Questo metodo inserisce i vari elementi all’interno della lista (ovviamente nell’ordine con cui compaiono in essa). Vedremo nei prossimi tutorial come aggiungere altre funzionalità, per ora limitatevi ad osservare l’istruzione

Questa definisce come deve essere l’aspetto delle righe quando vengono selezionate dall’utente. Con questa istruzione l’utente non potra selezionare nessuna riga, se invece la togliete avrete la classica selezione, con lo sfondo della cella blu.

Nota teorica: gli utenti più smaliziati (e i più “preparati”) avranno sicuramente notato una cosa: i metodi che abbiamo inserito servono ad implementare i protocolli <UITableViewDelegate, UITableViewDataSource>, che ci permettono di utilizzare senza grandi sforzi le UITableView. Ci sono anche altri metodi che è possibile implementare, ma li vedremo nei prossimi tutorial.

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