CHAPITRE 1 PREMIERS PAS Créer un projet avec XCode... 19 Composer l interface utilisateur... 25 Tester l application... 28 Finaliser l application... 30 Agrémenter l application... 34 Challenge... 36 Check-list... 38 17
Dans ce chapitre, nous créerons notre première application. Comme le veut la tradition, il s agira d un "Hello World". Rien de très spectaculaire donc mais ce sera l occasion de prendre en main les trois outils fondamentaux du SDK : XCode, Interface Builder et iphone Simulator, le simulateur d iphone et d ipad. 1.1. Créer un projet avec XCode Lancer XCode XCode est l application qui va nous permettre de : j gérer nos projets ; j gérer et éditer les fichiers de code source ; j construire et tester nos applications. Un projet est l ensemble des données nécessaires pour construire une application : j code source ; j ressources (images, sons, etc.) ; j liste des frameworks utilisés ; j informations complémentaires (fichier d information, paramétrage de la construction, etc.). Pour créer un projet, il faut d abord lancer l application XCode. L installation standard du SDK place cette application dans le dossier /Developer/Applications. Double-cliquez sur l icône XCode. Figure 1.1 : Localisation de l application XCode 1.1. Créer un projet avec XCode 19
Si c est la première fois que vous lancez XCode, la fenêtre d accueil apparaît à l écran. Vous pouvez fermer cette fenêtre. Figure 1.2 : Fenêtre d accueil de XCode Accéder plus facilement à XCode Vous aurez à vous servir intensément de XCode. Il sera plus pratique d avoir l application à disposition rapidement en la gardant dans le Dock. Créer un projet Procédez ainsi : Figure 1.3 : Garder XCode dans le Dock 1 Sous XCode, activez la commande New Project du menu File. Vous pouvez également cliquer sur Create a new Xcode project dans le panneau d accueil. 20 1. Premiers pas
Figure 1.4 : Création d un projet L Assistant New Project s affiche, vous permettant de choisir le type de projet que vous souhaitez créer. Figure 1.5 : Assistant Nouveau Projet 1.1. Créer un projet avec XCode 21
XCode prend en charge plusieurs types de projet. Lorsqu on crée un projet, il faut choisir le bon modèle. Afin de vous faciliter le choix, la partie gauche de l Assistant présente les groupes de modèles. Dans la suite de l ouvrage, nous choisirons toujours le groupe Application pour iphone OS. 2 Sélectionnez View-based Application, vérifiez que le menu déroulant Product est bien sélectionné sur iphone et cliquez sur le bouton Choose. Les autres modèles d application Nous verrons les autres modèles d applications dans la suite de cet ouvrage. 3 Un panneau s affiche qui vous permet de nommer le projet en cours de création. Saisissez HelloWorld dans la zone de texte Save As puis cliquez sur le bouton Save. Figure 1.6 : Panneau de sauvegarde 22 1. Premiers pas
Le dossier de projet XCode crée un dossier, du même nom que le projet, et y insère les fichiers composant le projet. Ce dossier recevra vos propres fichiers (images, icones, ). Il est créé par défaut dans votre dossier Documents. Vous pouvez choisir un autre emplacement avant de cliquer sur le bouton Save. À ce stade, nous avons créé le dossier de projet et la fenêtre de projet de XCode s affiche. Gérer le projet La fenêtre de projet permet de gérer tous les éléments d un projet. Figure 1.7 : La fenêtre de projet Cette fenêtre est composée des éléments suivants : j une barre d outils en haut ; j j la zone des Groupes et Fichiers (Groups and Files) sur la partie gauche de la fenêtre, qui structure les différentes informations et les fichiers composant le projet ; la Vue Détaillée au centre de la partie droite de la fenêtre, dans laquelle on peut visualiser les attributs principaux de chacun des composants du projet ; 1.1. Créer un projet avec XCode 23
j j une Zone d Édition en bas de la partie droite de la fenêtre qui nous permettra d éditer les fichiers du projet (c est dans cette zone que nous saisirons le code source de l application) ; une Barre d État en bas de la fenêtre ; nous y lirons les messages émis par XCode lors de la construction de l application. Structure mais pas sous-dossiers Les fichiers sont répartis sous XCode en Classes, Autres Sources, Ressources, etc. Cette structuration est indépendante de la façon dont les fichiers sont structurés en sous-dossiers dans le dossier du projet ; par défaut, seul un sous-dossier Classes est créé ; tous les autres fichiers sont "à plat" dans le dossier du projet. Nous verrons l utilisation de ces différentes parties dans la suite du livre. Pour l heure, et si ce n est pas déjà le cas, sélectionnez HelloWorld dans la zone des Groupes et Fichiers pour afficher la liste de tous les fichiers du projet dans la Zone Détaillée. XCode a créé pour nous les fichiers suivants : j Les fichiers de type.framework sont des liens vers les frameworks d iphone OS nécessaires pour notre application HelloWorld : CoreGraphics.framework pour les fonctions de base de l affichage graphique ; Foundation.framework pour les accès aux fonctions de base du système (fichiers, réseau, etc.) ; UIKit.framework qui contient toutes les classes d objet de base pour créer une application sous Cocoa Touch (boutons, champs de texte, etc.). j HelloWorld-Info.plist est le fichier des propriétés de l application ; nous utiliserons bientôt ce fichier. j HelloWorld.app est notre application. Son nom apparaît en rouge pour signaler que l application n est pas encore créée. j Les fichiers de type.pch sont des fichiers intermédiaires dans le processus de construction de l application ; nous ne nous en occuperons pas. j Les fichiers.m (fichier des définitions) et.h (fichiers des déclarations) contiennent les codes source Objective-C de l application : 24 1. Premiers pas
main.m à l instar de main.c en langage C contient le code de la fonction main exécutée au lancement de l application ; nous n aurons généralement pas à modifier ce fichier. HelloWorldAppDelegate.h et HelloWorldAppDelegate.m contiennent le code source du Délégué de l application. HelloWorldViewController.h et HelloWorldViewController.m contiennent le code source du Contrôleur de la Vue principale de l application. Ces fichiers sont créés par XCode car nous avons utilisé le modèle View-based Application à la création du projet. j Les fichiers de type.xib sont des fichiers NIB. Les Délégués et les Contrôleurs sont des motifs de conception (Design Pattern) abondamment utilisés dans la programmation Cocoa Touch et que nous expliquerons très bientôt. Les fichiers NIB contiennent des objets prêts à l emploi, endormis en quelque sorte, qui sont réveillés lorsque le fichier est chargé dans l application. L interface utilisateur en particulier est définie dans les fichiers NIB, c est pourquoi ces derniers sont édités avec l outil Interface Builder. Découvrons sans plus tarder cet outil. 1.2. Composer l interface utilisateur Sous XCode, vérifiez que dans le menu overview de la barre d outils, la valeur Active SDK est bien positionnée sur iphone Simulator 3.1.3. Figure 1.8 : Activation du SDK pour le simulateur d iphone Vous modifierez la valeur du SDK actif pour tester votre application dans différents environnements : 1.2. Composer l interface utilisateur 25
j Simulator 3.1.3 pour tester sur le simulateur d iphone ; j Simulator 3.2 pour tester sur le simulateur d ipad ; j Device 3.1.3 pour tester sur un iphone ou ipod Touch réels ; j Device 3.2 pour tester sur un ipad réel. 1 Sous XCode, double-cliquez sur le fichier HelloWorldViewController.xib dans la Zone Détaillée de la fenêtre de projet ; Interface Builder se lance. Figure 1.9 : Interface Builder 2 Trois fenêtres apparaissent. De gauche à droite : une fenêtre dont le titre est le nom du fichier NIB que l on vient d ouvrir, c est le contenu du fichier NIB ; une fenêtre dans laquelle nous composerons la Vue (View) de notre interface utilisateur ; une fenêtre Library qui contient les objets que nous utiliserons pour composer l interface utilisateur. 3 Cherchez l objet Label dans la fenêtre Library et faites-le glisser sur la Vue de notre projet (voir Figure 1.10). 4 Sélectionnez le Label nouvellement déposé sur la Vue afin de le positionner où vous souhaitez (voir Figure 1.11). 26 1. Premiers pas
Figure 1.10 : Objet Label dans la fenêtre Library Figure 1.11 : Label positionné sur la Vue principale de l application 1.2. Composer l interface utilisateur 27
5 Double-cliquez sur le Label pour sélectionner le texte et saisissez HelloWorld. Enregistrez le fichier (commande Save du menu File), puis revenez dans XCode et cliquez sur le bouton Build and Run de la barre d outils pour construire et lancer l application. 6 Il est possible qu une boîte de dialogue apparaisse pour signaler que nous n avons pas enregistré tous les fichiers que nous avons modifiés. Cliquez alors sur le bouton Save All. Figure 1.12 : Sauvegarder les fichiers modifiés L application HelloWorld est construite par XCode et lancée dans le simulateur d iphone 1.3. Tester l application iphone Simulator est l outil qui nous permet de tester les applications sur Mac. Il s agit de la première étape de test. Bien sûr, il faudra tester l application sur des appareils réels avant de la diffuser au public. Le test sur simulateur est intéressant ; il permet de déboguer plus facilement l application (voir Figure 1.13). Explorez les menus du simulateur. On peut basculer et même secouer virtuellement l appareil. Une caractéristique intéressante est la possibilité de tester rapidement notre application sur des versions différentes d iphone OS : menu Matériel, sous-menu Version. Explorez également le simulateur, comme si vous utilisiez votre iphone (cliquez sur le gros bouton en bas de l iphone afin de revenir à l écran d accueil). Les applications Photos, Contacts et Safari fonctionnent normalement ; on pourra ainsi tester les applications utilisant les photos et les contacts de l iphone. 28 1. Premiers pas
Figure 1.13 : Simulateur d iphone Gestes avec 2 doigts Les gestes avec 2 doigts sont simulés en maniant la souris tout en pressant la touche [Alt] du clavier. Essayez avec l application Safari. Vous pouvez aussi lancer votre application sur le simulateur d ipad en sélectionnant le SDK iphone Simulator 3.2 sous XCode. Figure 1.14 : Simulateur d ipad En explorant le simulateur, vous verrez que le logo permettant de lancer notre application HelloWorld est un carré blanc. Nous améliorerons cela immédiatement. 1.3. Tester l application 29
Figure 1.15 : Application sans logo 1.4. Finaliser l application Nous allons maintenant ajouter un logo à notre application HelloWorld. Revenez dans l application XCode et choisissez sur votre ordinateur l image que vous souhaitez utiliser comme logo. Il est recommandé de choisir une image carrée au format PNG. Changer d application Sur Mac OS X, on peut changer rapidement d application par la combinaison de touches X+[ ]. L ajout du logo se fait en deux temps : 1 Ajoutez l image au projet. 2 Déclarez cette image comme étant le logo de l application. Ajouter un fichier au projet 1 Dans XCode, sélectionnez Resources dans HelloWorld dans la zone Groupes et Fichiers de la fenêtre du projet et activez la commande Add to project du menu Project. Le panneau standard de Mac OS X permettant de choisir un fichier s affiche. 2 Recherchez l image désirée à l aide de ce panneau et cliquez sur le bouton Add. 30 1. Premiers pas
Figure 1.16 : menu Project de XCode Un panneau s affiche pour que vous puissiez préciser la façon dont vous souhaitez ajouter le fichier au projet. Figure 1.17 : Ajout d un fichier au projet Lorsque la case Copy items into destination group s folder de ce panneau est cochée, le fichier sélectionné est copié dans le dossier du projet et rangé dans le groupe sélectionné (en l occurrence Resources). 1.4. Finaliser l application 31