Xcode s’installe à partir du DVD d’installation système reçu avec votre Mac. Après installation, il sera rangé par défaut dans le dossier Macintosh HD/Developer/Applications.
En lançant cet outil, vous devriez avoir une fenêtre ressemblant à la Figure 1 :
Figure 1 : La fenêtre d’accueil de Xcode
Comme c’est votre première utilisation de Xcode, la fenêtre Recent projects est vide. Pour vous familiariser avec Xcode, puis avec Interface Builder, vous allez construire votre première application : un Hello iPuP ! Notez que la grande nouveauté de Xcode 4 est l’intégration d’Interface Builder à l’environnement de développement. Auparavant, il fallait ouvrir une deuxième application (assez lente …)
Commençons par créer un nouveau projet : ouvrez File > New project ou cliquez, dans la fenêtre d’ouverture, sur Create a new project (+shift+n). Vous avez le choix entre plusieurs modèles (templates). Ce sont en fait des projets avec une architecture toute prête. Ils sont très utiles lorsque vous débutez, car ils vous aident à comprendre et construire correctement une architecture de vue.
En voici le détail :
Navigation-based Application. Ce projet contient une navigation bar (barre de navigation) déjà mise en place. Une barre de navigation (UINavigationBar gérée par un UINavigationController) est très pratique quand vous utilisez des listes déroulantes (table view), à l’instar de celle du carnet d’adresses sur votre iPhone (UITableView).
OpenGL ES Application. Une vue OpenGL ES déjà configurée, avec un carré rempli d’un dégradé qui tourne sur lui-même.
Tab Bar Application. Un tab bar ou barre d’onglets est une barre située en bas de l’écran vous permettant de choisir parmi plusieurs vues par un simple clic. L’application iPod par exemple en compte un. Un tab bar est géré par un UITabBarController.
Utility Application. Vous aurez très certainement besoin de faire des transitions entre vos vues, et cette base de projet vous propose une solution afin de réaliser une animation de type flip (retour- nement 3D de 140°).
View-Based Application. En commençant par ouvrir un projet de ce type, vous aurez une vue qui s’affichera par-dessus la fenêtre (UIWindow). Cette vue sera gérée par un viewController (UIView- Controller) chargé depuis un fichier .xib (fichier utilisé avec Interface Builder).
Split View-Based Application. Ici, c’est une application spécifique iPad : une split view est l’élément que vous retrouvez dans l’application mail d’Apple. Une table view à gauche, le détail à droite.
Window-based Application. Le projet de base, complètement épuré. Très souvent un bon point de départ pour comprendre ce que l’on fait !
Pour notre part, nous allons créer un projet Window-based Application, que nous nommerons HelloiPuP. Vous arrivez sur la fenêtre de la Figure 3.
Figure 2 : Utiliser Git
Figure 3 : Fenêtre d’accueil du projet Hello iPuP
Examinons la barre de menu (zone 1) :
Run. Permet de choisir le mode de compilation :
– Run : lance l’application sur device ou sur simulateur.
– Test : utilise les tests unitaires
– Profile : lance instruments pour faire des mesures (mémoire, consommation, …)
– Archive : archive l’application en vue de la déployer soit en ad hoc, soit sur l’App Store.
Stop. Arrête le déroulement de l’application.
Scheme. Permet de gérer les schémas de compilations. Permet également de choisir de tester sur simulateur ou device.
Breakpoints. Active le mode debug avec les points d’arrêts.
Console d’historique de la compilation.
Editor. Vous permet de choisir le mode d’affichage parmi : classique, avec assistant, avec gestion des différences entre les versions commitées.
View. Choisit quels onglets vous souhaitez afficher.
Organizer.
Descendez votre regard… mais à quoi correspondent tous ces fichiers (zone 2) ?
CoreGraphics.framework, Foundation.framework, UIKit.framework. Vous vous en doutez peut- être, ce sont les librairies fournies par Apple que vous allez utiliser dans votre application.
HelloiPuP.app. C’est l’application que vous pourrez installer sur l’iPhone, si vous avez payé votre licence..
HelloiPuP_Prefix.pch. C’est un autre fichier include.Vous n’avez cependant pas besoin de l’inclure dans vos fichiers, car il est compilé séparément.
HelloiPuPAppDelegate.h. C’est un fichier d’en-tête très proche de ce que vous trouvez en C ou C++. Il contient toutes les déclarations.
HelloiPuPAppDelegate.m. C’est ici que vous allez commencer. Ce fichier va contenir les instructions de votre programme.
HelloiPuP-Info.plist. Ce fichier contient diverses informations à propos de votre programme. Vous n’allez pas vous en servir avant de compiler votre application sur votre iPhone, iPod Touch ou iPad.
main.m. Comme dans beaucoup de langages, ce fichier contient la fonction main. C’est là où l’exécution du programme débute. Typiquement, ce main lance le programme.Vous ne devriez pas avoir besoin de l’éditer.
MainWindow.xib. Ce fichier contient l’interface graphique de votre fenêtre. En double-cliquant dessus, vous lancerez Interface Builder pour dessiner votre interface.
La zone 3 est l’éditeur, tout simplement. Ici, vous pouvez éditer les propriétés de votre application (Icone, splash screen, version, …). Si vous venez d’Xcode 3, vous remarquerez que ce n’est qu’une mise en valeur du .plist !
Enfin, la zone 4 correspond à l’onglet d’aide. C’est ici que sera affichée l’aide contextuelle, ainsi que les propriétés des différents fichiers que vous éditerez.
Coder quelques éléments simple
Nous allons ajouter le label UILabel à notre vue afin d’afficher le texte HelloiPuP. Pour cela, il faut modifier le fichier HelloiPuPAppDelegate.h :
#import <UIKit/UIKit.h> // 1@interface HelloiPuPAppDelegate : NSObject <UIApplicationDelegate> { // 2IBOutlet UILabel *helloLabel; // 3}@property (nonatomic, retain) IBOutlet UIWindow *window; // 4@end
Attardons-nous un peu sur ce code :
La ligne 1 est l’équivalent de #include.
La ligne 2 déclare la classe HelloiPuPDelegate héritant de NSObject et qui est delegate de UIApplicationDelegate. La structure étant la suivante :
@interface MaClasse : SuperClass <Delegate1, Delegate2, ...>
À la ligne 3, le mot-clé IBOutlet lie votre objet à Interface Builder.
La ligne 4 déclare la première vue dans la pile de vue : votre fenêtre ! Sur cette ligne, un mécanisme très pratique remplaçant les getters et setters facilite l’écriture et clarifie le code. Les nonatomic et atomic sont des paramètres spécifiant le comportement de votre objet en multithreading. Concrètement, utiliser atomic sous-entend que l’accès à cet objet sera bloqué par le thread appelant (aucun autre ne pourra y accéder si l’objet reste verrouillé). Si deux threads veulent modifier l’objet, ils le feront l’un après l’autre. Avec nonatomic, le comportement ne sera pas garanti, mais l’accès sera plus rapide.
Vous pouvez ensuite spécifier le comportement mémoire, en choisissant parmi les paramètres retain, copy ou assign. Nous ne nous y attarderons pas ici, mais je vous invite à vous y pencher le plus rapidement possible. En effet, il n’y a pas de garbage collector sur l’iPhone ! Il faut donc gérer votre mémoire très précisément !
Passons maintenant au fichier .m.
#import "HelloiPuPAppDelegate.h" @implementation HelloiPuPAppDelegate // 1@synthesize window=_window; // 2- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions // 3{[helloLabel setText:@"Hello iPuP"]; // 4// équivalent : helloLabel.text = @"Hello iPuP"; [self.window makeKeyAndVisible]; // 4return YES;}- (void)dealloc // 6{[_window release]; // 7[super dealloc]; // 8}@end // 9
Les lignes 1 à 9 permettent d’implémenter les différentes méthodes de la classe.
2 est obligatoire lorsque vous écrivez @property dans le fichier .h.
3 est une méthode automatiquement lancée lorsque l’application est terminée.
4 signifie que l’on met le texte Hello iPuP dans le label helloLabel.
5 rend la fenêtre (window) visible.
6 à 8 méthode dealloc : méthode appelée lorsque l’objet de classe est release, c’est-à-dire libéré de la mémoire. Par exemple, si vous aviez un objet de la classe Chien alloué par une instance de la classe Ferme avec le mécanisme habituel Chien *unChien = [[Chien alloc] init];, un [unChien release]; appellera automatiquement la méthode dealloc de la classe Chien. Dans cette méthode, il faut donc libérer tous les objets encore en mémoire.
Ici, window est release 7, puis le dealloc de super (la classe dont on hérite, NSObject ici) est appelé en 8.
Premier pas dans Interface Builder
Interface Builder est un outil de développement proposé par Apple pour faciliter les créations d’Interface Homme-Machine (IHM). Bien entendu, vous pouvez tout faire en dur, c’est-à-dire par la programmation. Parfois même, vous n’aurez pas le choix, mais vous vous en rendrez compte le moment venu !
Pour l’instant, affichez MainWindow.xib dans Resources en cliquant dessus.
Figure 4 : Interface builder complètement intégré
En 1, vous découvrez la librairie, qui contient tous les éléments du UIKit que vous pourrez utiliser dans votre application.
Au centre 2, votre vue (ici window) telle qu’elle apparaîtra sur votre iPhone. La fenêtre à gauche 3 contient tout ce dont vous aurez besoin pour faire marcher correctement Interface Builder :
File’s owner (propriétaire du fichier). Est un objet qui établit la communication entre les fichiers xib et les éléments de votre application. L’avantage de la substitution, c’est que les connections et configurations faites dans le File’s owner sont appliquées à l’objet réel quand on le charge…
First responder. Lorsque votre objet est first responder, il sera le premier à intercepter les événements, tels que copier/coller, manipulations de texte, actions que vous avez créées, etc. Le First responder est changé dynamiquement en fonction de la hiérarchie des vues notamment. Si la vue qui est first responder ne répond pas à un événement, alors cet événement traversera la hiérarchie des vues jusqu’à être intercepté.
Enfin, à droite 4, c’est l’Inspecteur, avec 4 onglets : Identity (identité) A, Attributs B, Size (taille) C, Connections D. Non, petits coquins, ce ne sont pas des tailles de bonnet … 
Plaçons notre label en faisant un glisser-déposer depuis la librairie. Puis centrez-le, comme à la Figure 5.
Figure 5 : Positionnement du label par un glisser déposer.
Centrons le texte en hauteur en choisissant Align Centers pour l’option Baseline dans l’onglet Attributs de l’Inspecteur ainsi qu’en choisissant center dans Alignement (voir Figure 6).
Figure 6 : Configurer le label
Enfin, pour connecter le label qui est sur la vue au helloLabel qui appartient à votre delegate, cliquez sur Hello iPuP App Delegate puis rendez-vous sur l’onglet Connections dans l’Inspecteur. Repérez helloLabel, et cliquez sur le rond à côté. Maintenez et glissez-le jusqu’au label présent dans la vue. Relâchez, sauvegardez et quittez !
Figure 7 : Relier le label !
Faites un Build/Build and Run ( + R) et…Tadamm !
Figure 8 : Votre première application !
Les sources !!
À bientôt !