Desenvolupant sobre iPhone (5): la nostra primera aplicació (III)

En nostre anterior article havíem inclòs a la interfície de la nostra aplicació un Label, un TextField i un Button. Preteníem que el contingut del Label s'actualitzés amb allò introduït al TextField en prémer sobre el Button. Havíem (pas 1) creat el projecte, i (pas 2) utilitzat InterfaceBuilder per definir la pantalla. Ara continuarem amb la resta de passes per deixar l'aplicació funcionant.

Pas 3. Crear variables al ViewController.

Disposem de la nostra interfície correctament. De fet, si féssim Build & Go podríem veure com ens va quedant:

Però òbviament no passa res prémer el botó, perquè no hem realitzat els desenvolupaments mínims imprescindibles. En aquest pas 3 introduirem les variables i mètodes al HelloWorldViewController, tant a la interfície (fitxer .h) com a la implementació (fitxer .m). Per això, segons indiquem al final del post anterior, hem de saber que el TextField es correspon amb una classe UITextField, i el Label amb una classe UILabel. Aquestes 2 classes són dins del framework UIKit.

Si no hem tancat i gravat Interface Builder, ho fem ia XCode obrim el fitxer HelloWorldViewController.h. El codi ara mateix tindrà una cosa així:

Ja estem veient una mica de Objective-C. En aquest codi veiem una declaració d'importació de la llibreria UIKit, on hi ha les classes UILabel i UITextField. Veiem com es declara la interfície, i que aquesta s'estén de la genèrica UIViewController de UIKit.

Dins del codi de la interfície incloem el codi següent:

Podem explicar ara què hem fet:

• Hem declarat dins del bloc @interface 2atributs de tipus UILabel i UITextField, amb 2 noms de variables label i textField respectivament. Per davant apareix IBOutlet. Què és tot això? Ens expliquem. IBOutlet no és un tipus de variable; és una directiva que us ajuda a Interface Builder a conèixer l'existència d'aquestes variables de tipus UILabel i UITextField. Per cert, recordeu que a l'anterior article us havíem donat un truc per conèixer els tipus de variable dels objectes de control (botons, label, text field, etc.) a Interface Builder. D'altra banda, el tema dels * davant del nom de variable pot sorprendre els programadors Java, no tant els de C… però apreneu que així escriureu a Objective-C les variables d'instància.
• Es declaren les propietats UILabel i UITextField. nonatomic i retain no ho veurem ara com ara, està relacionat amb la gestió de memòria.
• Veiem que declarem un mètode, updateText. Té un signe davant, indicant que és un mètode d'instància, i no de classe (per a ells s'explica un signe +). No podem entrar a explicar-ho perquè això és programació bàsica orientat a objectes… Aquest mètode no torna res (és a dir, void) i rep un paràmetre de tipus id. Bàsicament fa referència a l'identificador de l'objecte que provocarà la crida al nostre mètode updateText, que actualitzarà el valor del label. Podem endevinar ja que aquest control serà el propi botó…

Un cop fet això, hem acabat amb el pas 3.

Pas 4. Enllaçar controls de la vista amb variables del controlador.

Si repassem, per una banda hem desenvolupat la nostra interfície amb Interface Builder, i de l'altra disposem de les variables relacionades amb aquests controls a HelloWorldViewController.h (interfície de la classe controladora HelloWorldViewController.m). Tot i això, encara no existeix una relació entre la vista i el controlador, és a dir, no hem donat cap instrucció per relacionar, per exemple, el camp de text que dissenyem a Interface Builder amb la variable de tipus UITextField que hem ficat a la classe . Ara farem aquesta tasca. Obrim novament Interface Builder polsant sobre HelloWorldViewController.xib, polsem sobre la caixa de text, ia la paleta Inspector marxem a la segona pestanya (Text Field Connections). Veiem que hi ha un apartat anomenat Referencing Outlets, sense que hi hagi res marcat. Això significa que en aquests moments Interface Builder no coneix cap relació entre aquest camp de text i un IBOutlet (Interface Builder Outlet) d'una classe… però tenim un IBOutlet UITextField al nostre HelloWorldViewController, així que l'enllaçarem.

Per això, com veiem a la figura, polsant sobre el petit cercle al costat de New Referencing Outlet, arrosseguem fins al File's Owner de la finestra anomenada HelloWorldViewController.xib. Ens deixarà triar 2 opcions, view (la vista completa) i textField (la nostra variable). Òbviament escollim textField, i així relacionem la nostra caixa de text amb la variable del tipus UITextField. Per cert, el File'sOwner o amo del fitxer és ni més ni menys que la nostra classe controladora…

Repetim l'operació amb el label, relacionant-la amb la nostra variable del controlador label. I amb el botó, és diferent. En aquest cas ho relacionarem amb la nostra operació updateText, però per a un esdeveniment en concret. Feu aquesta operació amb l'esdeveniment 'Touch Up Inside', i trieu el nostre mètode updateText:

I d'aquesta manera ja sí que tenim relacionats els controls que havíem definit amb Interface Builder i les variables que hem ficat al controlador. Tanquem Interface Builder gravant-ho tot i anem a l'últim pas tornant a XCode.

Pas 5. Últims desenvolupaments.

A XCode obrim el HelloWorldViewController.my fiquem el codi següent perquè la nostra classe ens quedi així:

Si ens fixem bé hem ficat simplement el bloc @synthesize, i la implementació del mètode declarat a la interfície .h, updateText. Sota aquest codi tindreu molt de codi comentat.

La línia de @synthesize fa una cosa semblant a generar els típics getter/setter (accessors/mutadors) típics en els llenguatges OO (encapsulació). Els necessitem perquè al controlador arribi el contingut, per exemple, de la caixa de text.

El mètode updateText, com veieu, simplement actualitza el text del nostre label amb el contingut del camp de text. Hem acabat.

Ara, simplement fem Build & Go, i veureu que en ficar una cadena de text i prémer el botó, el contingut del label s'actualitza. Al següent article introduirem millores a la nostra aplicació.