Mika’s land

Introduction

J’ai vraiment bien galéré pour réaliser une IHM avec l’iPhone SDK (beta 4) ! Manque de documentation, manque d’exemple,… et même sur le net, j’ai eu beaucoup de mal à trouver des exemples concrets de réalisation d’IHM.
J’ai donc décidé de réaliser ce tutorial pour que le maximum de personnes puisse accéder au SDK de l’iPhone.
L’objectif de ce tutorial sera de présenter la programmation d’IHM sur l’iPhone SDK mais avec une approche RAD. Pour mener à bien cette approche, j’ai utilisé Xcode bien entendu mais surtout Interface Builder avec son approche bien particulière et surtout : ses bugs !
Soyons clair, un gros travail est nécessaire afin de comprendre l’Objective C et pour manipuler les concepts bizarres du genre la gestion de l’appel des méthodes avec les crochets . Mon tutoriel ne sera utile que si vous prenez le temps d’étudier la doc « iPhone OS Programming Guide ».

Description de l’application
L’application sera très très simple, il s’agit de réaliser une application contenant 3 vues différentes avec une TabBar permettant de passer d’une vue à l’autre. Un screen shot de l’application est présenté ci-dessus.

Pour bien comprendre le fonctionnement, j’ai décomposé les objets utilisés par l’application :

Commençons

XCode
Lancez Xcode, sélectionnez « Cocoa Touch Application » puis cliquez sur « Choose… »
Saisissez « Tuto » comme nom pour votre application.

Vous arrivez sur la fenêtre suivante :

Double-cliquez sur le fichier MainWindow.xib et vous devez arriver sous Interface Builder

Interface Builder

Allez dans le menu Tools et cliquez sur Library et Inspector.
Dans la fenêtre Library, sélectionnez Tab Bar Controller puis « Drag Drop » sur la fenêtre.

Maintenant nous allons ajouter un la gestion des événements ainsi que la gestion du label à notre TabBarController.

En premier, sélectionnez l’item Tab Bar Controller dans la fenêtre principale d’Interface Builder. Dans la fenêtre gérant les attributs, sélectionnez l’onglet information (i). Saisissez « MyTabBarController » comme nom de class. Ajoutez une action nommée « buttonClick : » (attention aux « : ») de type « id » et un Outlet nommé « label » de type « UIlabel ».
Vous devez obtenir quelque chose comme ça :

On va maintenant compléter l’IHM de notre TabBarController.
Double cliquez sur le Tab Bar Controller pour obtenir la fenêtre représentant votre interface :

Cliquez sur le premier bouton Item1 en bas à gauche de la fenêtre, sélectionnez un contrôle UIView dans la library et « Drag drop » sur la fenêtre. Ajoutez également un « Round Rect Button » sur la View.

Maintenant, on va relier l’événement Touch up Inside de notre bouton à notre TabBarController :
Faites un clic droit sur le bouton, une fenêtre s’ouvre. Dans la liste d’événements proposés, reliez à l’aide de la souris l’événement au TabBarControler. Une fenêtre buttonClick vous sera proposée. Acceptez-la.

Ajoutez une view pour le deuxième Item et ajoutez un label.

Reliez également la propriété « New Referencing Outlet » du label au TabBarController :

Retournez dans la fenêtre principale d’ Interface Builder et sélectionnez l’item My Tab Bar Controller. Dans le menu File, cliquez sur « Write Class File… », entrez le nom « MyTabBarController » et cliquez sur le bouton « Enregistrer ». Sélectionnez l’item « tuto » et cliquez sur « Add » dans la fenêtre qui apparaît :

Retour à Xcode
Dans la fenêtre listant les fichiers du projet, vous pouvez constater que deux nouveaux fichiers ont été ajoutés : MyTabBarController.h et MyTabBarController.m.

On va coder un peu quand même
1) dans le .h modifiez la classe mère pour le MyTabBarController : UITabBarController
2) dans le .m on va donner un mettre un petit message dans le label suite à l’événement click.
Voici ce que vous devez avoir une fois les modifications effectuées :

Maintenant, il nous reste à relier notre AppDelegate à notre TabBarViewControler.
Ouvrez le fichier « TutoAppDelegate.h » :

Et modifiez-le comme suit :

Et puis il faut également dire à notre application d’utiliser le TabBarViewControler.
Ouvre le fichier « TutoAppDelegate.m » :

Et modifiez-le comme suit :

N’oubliez pas d’enregistre le tout

Retour à Interface Builder
Maintenant, il nous reste à relier le tout :
Cliquez sur l’item App Delegate et reliez la propriété « tabBarController » à notre « MyTabBarController » :

On enregistre et…

Retour à Xcode
En fait, on a terminé : on build et on lance

Et on doit obtenir l’application du début…

Conclusion
Il est bien évident que ce petit tutoriel n’a aucune application pratique. Par contre, il montre par l’exemple la manière de développer en mode RAD avec le SDK de l’iPhone.
Bien entendu, il faudra pratiquer encore énormément afin de réussir à réaliser de vraies applications, mais je pense que la prise en main est assez rapide. Pour ma part, je n’ai pris en main mon MacBookPro et le SDK de l’iPhone que depuis quatre jours.