Voici un article que j’ai publié sur différents blogs, je le reprends maintenant sur le mien. Je vais essayer au fur et à mesure, de vous faire découvrir le sdk et de vous faire développer votre première application. Si vous avez des questions sur les devs, n’hésitez pas à poser vos questions via les commentaires ou sur mon twitter. Je vous invite également à vous référer à la documentation qui accompagne le SDK et qui grouille d’informations utiles.

Comme je vous l’avais promis hier soir, voici le nouveau tutoriel pour débuter avec le SDK. Il fait suite à l’étape précédente sur la présentation des concepts.

Ce tutoriel débute par l’installation du SDK. Si vous ne l’avez pas déjà installé, rendez-vous sur le Dev Center. Le temps du téléchargement, reprenez le tuto précédent, faites un tour sur le blog, prenez un café… Bref, patientez.

Voila le SDK est installé et téléchargé, lancez maintenant XCode. Cliquez ensuite sur File–> New Project. Sélectionnez le template View-Based Application.

Entrez le nom de projet “iPodTutoFast” puis choisissez un emplacement, vous arrivez alors sur l’interface principale d’Xcode.

Pour les connaisseurs du C, on retrouve le .h pour définir l’interface et .m pour l’implémentation des méthodes.
Ouvrez le fichier iPodTutoFastAppDelegate.h. On y retrouve un objet Window qui est l’objet de base, utilisé pour l’affichage ainsi que le iPodTutoFastViewController. Vous vous souvenez du contrôleur ? Non ! Pas de panique, je vais reprendre cette notion par la suite.

Au tour du iPodTutoFastAppDelegate.m. Comme vous pouvez le voir, l’implémentation est très simple, une fois l’application démarrée avec la méthode applicationDidFinishLaunching, la vue contrôlée par notre iPodTutoFastViewController est affichée par l’action : [window addSubview:viewController.view];. Au passage, notez comment il faut procéder pour appeler une méthode d’un objet : il faut utiliser les crochets ! Je sais c’est déroutant au début, mais on s’y fait très vite.

Revenons à notre iPodTutoFastViewController, il est presque vide ! Et c’est là que vous allez travailler, vous allez définir la vue, l’associée au contrôleur.

C’est fait ? Non ? Bon je vais vous montrer comment procéder avec un autre outil Interface Buider

Comment est créée la vue ?
Une vue est ici créée à partir d’un fichier de description d’interface géré par l’interface builder : iPodTutoFastViewController.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 : iPodTutoFastViewController
View : UIView
Donc le .xib permet de dire que la vue est associée au contrôleur iPodTutoFastViewController

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 iPodTutoFastViewController.

Soyez attentif maintenant. Vous vous souvenez que dans iPodTutoFastAppDelegate, on charge la vue du contrôleur et c’est grâce à l’association effectuée dans l’interface buider que l’affichage est possible.

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.

Créons maintenant notre première application

Dans interface builder, ajoutez deux champs texte, trois labels et un bouton. Essayez d’obtenir le même rendu que moi, histoire de ne pas être perdu ;).

Dans Tools > Reveal in Document Window… vous pourrez voir les objets créés dans l’interface et associés à la vue.

Il est maintenant temps d’ajouter les contrôles associées à ces éléments depuis notre iPodTutoFastViewController.

Pour cela deux méthodes :

1- Directement depuis Interface Builder
Sélectionnez iPodTutoFastViewController 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 iPodTutoFastViewController.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)
Comme vous pouvez le voir, le fichier .m n’est pas modifié, et vous pouvez donc le fermer, en revanche vous constaterez que le .h est 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
Il s’agit de déclarer manuellement les propriétés correspondant aux contrôles que nous allons manipuler dans l’interface.
Dans iPodTutoFastViewController.h, insérez les lignes suivantes :
IBOutlet UITextField *lastNameField;
IBOutlet UITextField *nameField;
IBOutlet UILabel *outputField;
IBOutlet UIButton *validateButton;
Compilez maintenant le projet.
Rouvrez l’Interface Builder pour faire les liens

Personnellement, je préfère cette seconde méthode, qui est plus pratique et plus rapide. Et surtout, on maîtrise mieux ce que l’on fait.

La manière de procéder est simple. Cliquez sur le File’s Owner et dans l’inspector sélectionnez la flèche pour voir apparaître le menu suivant :
Magie, on retrouve les 4 objets que l’on créé dans le .h. Il suffit de cliquer sur le rond à coté d’un objet et de déplacer la croix vers l’objet qui doit lui être lié :

Répétez l’opération pour les autres objets et sauvegardez.

Nous avons maintenant tous les objets disponibles pour l’opération. Mais vous allez me dire que ca ne fait rien du tout cette application… Et vous n’avez pas tord. On va ajouter une méthode pour afficher le nom vers la sortie.

Pour cela dans nterface Builder, nous allons créer un handler gérant le clic sur le bouton. Pour cela :

Sélectionnez iPodTutoFastViewController depuis la Document Window
Dans le dernier onglet de l’Inspector, cliquez sur le bouton + de la section Class Actions en entrez buttonClick:. Laissez le Type sur id.

Sauvegardez, faites Write class files…, fusionnez les sources et enregistrez
Faites un lien entre l’événement Touch up Inside de votre bouton et iPodTutoFastViewController, l’éditeur vous propose alors votre fonction buttonClick:
Maintenant que votre événement est lié à votre contrôleur, ajoutons le bout de code pour afficher le résultat :

Retournez sous XCode, et ouvrez iPodTutoFastViewController.m
Modifiez le code pour avoir la méthode buttonClick: sous la forme suivante :

- (IBAction)buttonClick:(id)sender {
[outputField setText:[lastNameField text]];
}


Faites Build and Go et testez !

Bien, il ne reste plus qu’à apprendre l’Objective-C. Pour cela, je vous renvoie vers les liens:

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.

Dans la suite, je vous montrerai des exemples de codes pour faire des applications sympas.

So Stay Tuned !

PS: si vous voulez tester votre application sur votre iPhone/iTouch, il faut le configurer comme outil de dev. Je vous renvoie vers ce tuto pour savoir comment faire