Cet article suit la description des concepts de base permettant d’appréhender le développement d’une application pour iPhone.
Il présente les outils de développement utilisés pour faire une application pour iPhone en analysant rapidement un projet de base proposé avec le SDK iPhone.
Il ne parle pas de la syntaxe de développement Objective-C.

Je vous suggère vivement si vous n’avez pas lu l’article ou si vous ne connaissez pas encore grand chose au développement sous iPhone de vous y intéresser pour mieux aborder cette suite…

Une dernière chose avant de démarrer : massez-vous les tempes, faites-vous un petit café…
Prêt ?

Installer le SDK iPhone

A l’heure ou j’écris ces lignes, Apple en est à la version 2.2 du SDK iPhone.
L’installation vous mettra à disposition tous les outils dont je vais parler ici.

Ouvrir un projet d’exemple pour se familiariser avec la structure d’un projet iPhone

Je considère à présent que vous avez déjà un Mac (bah oui…), et le SDK iPhone installé dessus.

1. Ouvrez XCode.
   
2. Faites Fichier > Nouveau projet…
   
3. Choisissez “View-Based Application”
4. Entrez le nom de projet “LaFabrick” puis choisissez un emplacement, vous arrivez alors sur l’interface principale d’Xcode.

Voyons maintenant les fichiers que nous avons :

Nous sommes en Objective-C, donc pour chaque classe, vous trouverez un fichier .h définissant l’interface et un fichier .m contenant l’implémentation (amis du C bonjour !).
Ouvrons “LaFabrickAppDelegate.h”

On constate dans cette interface les déclarations d’un objet fenêtre (objet de base utilisé pour l’affichage) et le contrôleur LaFabrickViewController que nous étudierons rapidement après.
L’implémentation est simple :

Lorsque l’application vient d’être démarrée applicationDidFinishLaunching, on demande l’affichage de la vue contrôlée par notre LaFabrickViewController dans la fenêtre [window addSubview:viewController.view];.
Notez enfin la notation à crochet pour appeler une méthode d’un objet : oui oui, c’est relou.

Jetons maintenant un oeil à LaFabrickViewController (.h et .m) : il est quasiment vide ! C’est effectivement là qu’on doit travailler un peu…
Quelques questions se posent :

• Où est la vue ?
• Comment est-elle associée au contrôleur ?

Nous allons voir cela avec l’interface builder.

Utilisation de l’Interface Builder pour gérer la vue

Première réponse : notre vue est ici créée à partir d’un fichier de description d’interface géré par l’interface builder : LaFabrickViewController.xib. Double-cliquez dessus, l’interface suivante s’affiche alors :

On constate notamment dans la fenêtre centrale, les éléments suivants :

• File’s owner : LaFabrickViewController
• View : UIView

OK, donc le .xib permet de dire que la vue est associée au contrôleur LaFabrickViewController, voilà la deuxième réponse !

Sélectionnez à présent la ligne View : UIView puis sélectionnez le second onglet dans la fenêtre de droite.
Note : si cette fenêtre n’est pas visible, faites Tools > Identity Inspector

Vous pouvez visualiser l’association entre la vue View et la propriété view du contrôleur LaFabrickViewController.

Cette partie est primordiale pour que l’affichage de la vue soit effectif : souvenez-vous que dans LaFabrickAppDelegate, on charge la propriété “view” de LaFabrickViewController, aussi sans l’association effectuée dans l’Interface Builder, il serait impossible d’afficher quoi que ce soit !

D’une manière générale, chaque élément ajouté depuis l’Interface Builder devra être lié à une propriété du contrôleur (ou d’un délégué) via l’Interface Builder afin que vous puissez interagir avec depuis le code.
La propriété en question est alors nommée “Outlet” côté Interface Builder, soit “Sortie” si l’on traduit litéralement : c’est effectivement un paramètre de sortie de votre interface.

Personnaliser un peu l’interface

Depuis l’Interface Builder, ajoutez deux champs texte, deux labels et un bouton histoire d’obtenir à peu près ça :

Si vous faites Tools > Reveal in Document Window… vous verrez l’arborescence de contrôles de la vue mise à jour.

Il est maintenant temps de contrôler ces éléments depuis notre LaFabrickViewController.
Pour cela deux méthodes :

1. Directement depuis Interface Builder (cf. vidéo de démonstration)
   • Sélectionnez LaFabrickViewController depuis le Document Window
   • Dans “l’Inspector” (fenêtre de droite) choisissez le dernier onglet (i) puis ajoutez les propriétés via la section “Class Outlets”
     
   • Ceci fait vous devez enregistrer les modifications dans le fichier LaFabrickViewController.m. Pour cela, vous devez utiliser la fonction File > Write class files…
   • Faites alors “Save”
   • L’outil vous demande si vous souhaitez fusionner ou écraser : choisissez Merge (fusionner)
   • Le fichier .m n’est pas modifié, vous pouvez le fermer, en revanche vous constaterez que le .h peut être modifié comme suit :
     
     sous réserve que vous choisissiez l’action “Choose left” depuis le menu déroulant du bas
   • Sauvegardez (enfin) votre fichier fusionné
2. Mix XCode et Interface Builder
   • Déclarez manuellement les propriétés correspondant aux contrôles que vous souhaitez manipuler dans l’interface (LaFabrickViewController.h) :
IBOutlet UITextField *lastNameField;
IBOutlet UITextField *nameField;
IBOutlet UIButton *validateButton;

   • Compilez le projet
   • Rouvrez l’Interface Builder pour faire les liens

Note : la première méthode a le mauvais goût d’ouvrir l’outil de fusion de fichiers pour que vous validiez que rien n’est écrasé ou ajouté sans votre accord.
J’avoue que, malgré la nécessité de la fusion, je trouve ça très peu pratique voire franchement lourdingue, je m’attendais à mieux venant d’un monstre de l’ergonomie. Mais c’est le prix à payer pour avoir deux outils quasiment indépendants, et enfin, si vous connaissez une meilleure méthode, n’hésitez pas à poster !

– ca se voit tant que ça que je préfère la méthode à l’ancienne ? –

Ce n’est pas encore tout à fait terminé ! (si si je vous jure, c’est long)
Il reste à faire les fameux liens entre les contrôles de la vue et les propriétés que nous avons créé dans LaFabrickViewController. Pour cela, rien ne vaut l’image (et en plein écran tant qu’à faire) :

Voilà ! Vous avez lié les contrôles de votre vue à des propriétés de votre contrôleur.
Nous utiliserons désormais la technique décrite ci-dessus pour gérer nos association vue-contrôleur.

Reprenons Interface Builder pour créer un handler gérant le clic sur le bouton. Pour cela :

1. Sélectionnez LaFabrickViewController depuis la Document Window
2. Dans le dernier onglet de l’Inspector, cliquez sur le bouton + de la section Class Actions en entrez buttonClick:. Laissez le Type sur id
3. Sauvegardez, faites Write class files…, fusionnez les sources et enregistrez
4. Faites un lien entre l’événement Touch up Inside de votre bouton et LaFabrickViewController, l’éditeur vous propose alors votre fonction buttonClick:

Maintenant que votre événement est lié à votre contrôleur, ajoutons un bout de code bateau juste pour valider que l’ensemble fonctionne bien :

1. Retournez sous XCode, et ouvrez LaFabrickViewController.m
2. Modifiez le code pour avoir la méthode buttonClick: sous la forme suivante :
   - (IBAction)buttonClick:(id)sender {
[firstNameField setText:[lastNameField text]];
} 

   Le principe étant simplement de modifier le texte du prénom avec le texte du nom (je vous avais prévenu, c’est un bout de code bateau)

3. Faites Build and Go et testez !

Bien, il ne reste plus qu’à apprendre Objective-C. Pour cela, rien ne vaut quelques ressources dédiée au sujet :

• Passage de C++ à Objective-C
• Passage de Java à Objective-C

Voilà, vous avez à présent les bases nécessaires pour démarrer le développement d’une application iPhone.
A bientôt !

---

Vendredi 16 janvier 2009 à 0:00
Logiciels / extensions / plugins..., [Dev] Flash / Flex / AIR...

Tags: apple, Conseils, iPhone, tips, Tutoriels