Développement sur iPhone (5): notre première application (III)

En notre article précédent Nous avions inclus un Label, un TextField et un Button dans l'interface de notre application. Nous voulions que le contenu de l'étiquette soit mis à jour avec ce qui était entré dans le TextField en cliquant sur le bouton. Nous avions (étape 1) créé le projet et (étape 2) utilisé InterfaceBuilder pour définir l'écran. Nous allons maintenant continuer avec le reste des étapes pour laisser l'application fonctionner.

Étape 3. Créez des variables dans ViewController.

Nous avons notre interface correctement. En fait, si nous faisions Build & Go, nous pourrions voir comment nous faisons:

Mais évidemment rien ne se passe en appuyant sur le bouton, car nous n'avons pas fait le minimum de développements essentiels. Dans cette étape 3, nous allons introduire les variables et les méthodes dans HelloWorldViewController, à la fois dans l'interface (fichier .h) et dans l'implémentation (fichier .m). Pour ce faire, comme nous l'avons indiqué à la fin de l'article précédent, il faut savoir que le TextField correspond à une classe UITextField, et le Label à une classe UILabel. Ces 2 classes sont dans le cadre UIKit.

Si nous n'avons pas fermé et enregistré Interface Builder, nous le faisons et dans XCode nous ouvrons le fichier HelloWorldViewController.h. Le code en ce moment aura quelque chose comme ceci:

Nous examinons déjà certains Objective-C. Dans ce code, nous voyons une déclaration d'importation de la bibliothèque UIKit, où se trouvent les classes UILabel et UITextField. Nous voyons comment l'interface est déclarée et qu'elle s'étend du UIViewController générique d'UIKit.

Dans le code d'interface, nous incluons le code suivant:

Nous pouvons maintenant expliquer ce que nous avons fait:

• Nous avons déclaré dans le bloc @interface 2 attributs de type UILabel et UITextField, avec respectivement 2 noms de variables * label et * textField. Ahead apparaît IBOutlet. Qu'est ce que tout ca? Nous nous expliquons. IBOutlet n'est pas un type de variable; est une directive qui aide Interface Builder à connaître l'existence de ces variables de type UILabel et UITextField. Soit dit en passant, rappelez-vous que dans l'article précédent nous vous avions donné une astuce pour connaître les types de variables des objets de contrôle (boutons, étiquette, champ de texte, etc.) dans Interface Builder. D'un autre côté, le problème de * devant le nom de la variable peut surprendre les programmeurs Java, pas tellement ceux de C ... mais apprenez que c'est ainsi que vous allez écrire des variables d'instance en Objective-C.
• Les propriétés UILabel et UITextField sont déclarées. non atomique et retenu on ne verra pas pour l'instant, c'est lié à la gestion de la mémoire.
• Nous voyons que nous déclarons une méthode, updateText. Il a un signe - devant lui, indiquant qu'il s'agit d'une méthode d'instance, et non d'une méthode de classe (un signe + est expliqué pour eux). Nous ne pouvons pas expliquer cela car il s'agit d'une programmation orientée objet de base ... Cette méthode ne retourne rien (c'est-à-dire void) et reçoit un paramètre de type id. Fondamentalement, il fait référence à l'identifiant de l'objet qui provoquera l'appel à notre méthode updateTexto, qui mettra à jour la valeur de l'étiquette. On peut deviner puisque ce contrôle sera le bouton lui-même ...

Une fois que cela est fait, nous en avons terminé avec l'étape 3.

Étape 4. Liez les contrôles d'affichage aux variables de contrôleur.

Si nous passons en revue, d'une part nous avons développé notre interface avec Interface Builder, et d'autre part nous avons les variables liées à ces contrôles dans HelloWorldViewController.h (interface de la classe de contrôleur HelloWorldViewController.m). Cependant, il n'y a toujours pas de relation entre la vue et le contrôleur, c'est-à-dire que nous n'avons donné aucune instruction pour associer, par exemple, le champ de texte que nous concevons dans Interface Builder avec la variable de type UITextField que nous avons placée dans le classe. Maintenant, nous allons faire cette tâche. Nous ouvrons à nouveau Interface Builder en cliquant sur HelloWorldViewController.xib, en cliquant sur la zone de texte, et dans la palette Inspecteur, nous allons au deuxième onglet (Connexions de champ de texte). Nous voyons qu'il existe une section appelée Référencement des points de vente, sans que rien ne soit marqué. Cela signifie qu'à l'heure actuelle, Interface Builder ne connaît aucune relation entre ce champ de texte et un IBOutlet (Interface Builder Outlet) d'une classe ... mais nous avons un IBOutlet UITextField dans notre HelloWorldViewController, alors lions-le.

Pour ce faire, comme on le voit sur la figure, en cliquant sur le petit cercle à côté de «New Referencing Outlet», on fait glisser vers le File's Owner de la fenêtre nommée HelloWorldViewController.xib. Il nous permettra de choisir 2 options, view (la vue complète) et textField (notre variable). Évidemment, nous choisissons textField, et ainsi nous associons notre zone de texte à la variable de son type UITextField. Au fait, le File'sOwner ou le propriétaire du fichier n'est ni plus ni moins que notre classe de contrôleur ...

Nous répétons l'opération avec l'étiquette, en la reliant à notre étiquette de variable de contrôleur. Et avec le bouton, c'est quelque chose de différent. Dans ce cas, nous allons le relier à notre opération updateTexto, mais pour un événement spécifique. Faites-le avec l'événement 'Touch Up Inside' et choisissez notre méthode updateTexto:

Et de cette manière, nous avons déjà mis en relation les contrôles que nous avions définis avec Interface Builder et les variables que nous avons placées dans le contrôleur. Nous fermons Interface Builder en sauvegardant tout et nous passons à la dernière étape pour revenir à XCode.

Étape 5. Derniers développements.

Dans XCode, nous ouvrons le HelloWorldViewController.my et nous mettons le code suivant pour que notre classe ressemble à ceci:

Si on regarde de près on a simplement mis le bloc @synthesize, et l'implémentation de la méthode déclarée dans l'interface .h, updateTexto. En dessous de ce code, vous aurez beaucoup de code commenté.

La ligne @synthesize fait quelque chose de similaire à la génération du getter / setter typique (accesseurs / mutateurs) typique des langages OO (encapsulation). Nous en avons besoin pour que le contrôleur atteigne le contenu, par exemple, de la zone de texte.

La méthode updateTexto, comme vous pouvez le voir, met simplement à jour le texte de notre étiquette avec le contenu du champ de texte. Nous avons fini.

Maintenant, nous faisons simplement Build & Go, et vous verrez que lorsque vous entrez une chaîne de texte et cliquez sur le bouton, le contenu de l'étiquette est mis à jour. Dans le prochain article, nous présenterons des améliorations à notre application.