Vous êtes sur la page 1sur 357

Dveloppez des applications originales pour

iPhone et iPod Touch


Revendez z io ons vos crations es sur iTunes re e App Store

Jean-Marc Delprato

Pearson Education France a apport le plus grand soin la ralisation de ce livre afin de vous fournir une information complte et fiable. Cependant, Pearson Education France nassume de responsabilits, ni pour son utilisation, ni pour les contrefaons de brevets ou atteintes aux droits de tierces personnes qui pourraient rsulter de cette utilisation. Les exemples ou les programmes prsents dans cet ouvrage sont fournis pour illustrer les descriptions thoriques. Ils ne sont en aucun cas destins une utilisation commerciale ou professionnelle. Pearson Education France ne pourra en aucun cas tre tenu pour responsable des prjudices ou dommages de quelque nature que ce soit pouvant rsulter de lutilisation de ces exemples ou programmes. Tous les noms de produits ou marques cits dans ce livre sont des marques dposes par leurs propritaires respectifs.

Publi par Pearson Education France 47 bis, rue des Vinaigriers 75010 PARIS Tl. : 01 72 74 90 00 www.pearson.fr Avec la contribution de Fabien Schwob

Collaboration ditoriale et mise en pages : Digit Books (Dominique Buraud) ISBN : 978-2-7440-4127-3 Copyright 2010 Pearson Education France Tous droits rservs

All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education, Inc. Aucune reprsentation ou reproduction, mme partielle, autre que celles prvues larticle L. 122-5 2 et 3 a) du code de la proprit intellectuelle ne peut tre faite sans lautorisation expresse de Pearson Education France ou, le cas chant, sans le respect des modalits prvues larticle L. 122-10 dudit code.

Sommaire

Prface 1. Le SDK de liPhone et de liPod Touch 2. Vue densemble du dveloppement pour iPhone 3. la dcouverte du SDK de liPhone 4. Interactions avec vos applications

1 7 29 45 75

5. Les vues de votre application 6. Les contrles spcifiques 7. Lire et crire des donnes 8. Le multimdia 9. Ragir aux gestes de lutilisateur 10. Publication et marketing Index

107 153 207 245 287 317 343

Table des matires

Prface Organisation de cet ouvrage Prrequis Conventions typographiques Remerciements propos de lauteur Chapitre 1. Le SDK de liPhone et de liPod Touch Les lments runir Installer le SDK Avant daller plus loin : prparer votre projet tablir un cahier des charges sommaire Les types dapplications de liPhone : faites jaillir toutes sortes dides ! Les bonnes ides dapplications et les projets viter Concevoir et designer son application sur papier

1 2 4 5 5 6

La filiation entre liPhone et Mac OS X Une premire approche de Cocoa Le langage de programmation Objective-C Les couches technologiques de liPhone OS et lintgration de Cocoa Touch Les spcificits et les limites de liPhone En route vers Xcode Chapitre 3. la dcouverte du SDK de liPhone Crer votre premier projet pour iPhone Matriser Xcode Structure gnrale de tous les projets pour iPhone Matriser Interface Builder Ajouter des objets avec Interface Builder Les objets de la bibliothque dInterface Builder Tester et dboguer votre premier projet Compiler votre projet Ajouter licne de votre application Pour aller plus loin : importer des projets officiels dApple En route vers le dialogue avec lutilisateur

32 34 35 37 39 43

7 8 13 17 18 19 23 24

45 46 46 49 52 54 58 62 63 66 68 72

Chapitre 2. Vue densemble du dveloppement pour iPhone 29 30 Les outils votre disposition la dcouverte de Cocoa Touch et de lObjective-C 32

VI Dveloppez des applications originales pour iPhone et iPod Touch

Chapitre 4. Interactions avec vos applications Le schma Modle-Vue-Contrleur Dvelopper la vue et associer des actions aux contrles Le concept doutlets et dactions Associer les outlets et les actions au projet Dessiner linterface et associer des mthodes aux objets Les vnements associs liPhone Les accesseurs et les mutateurs La logique interne de lObjective-C Les proprits en Objective-C Le dlgu de lapplication Finaliser notre projet de quiz Pour aller plus loin Chapitre 5. Les vues de votre application Hirarchiser les vues de votre application Choisir un systme de navigation Organiser une application multivues La navigation par onglets La navigation par boutons Modifier lanimation de transition MultiConvertisseur, une application multivues compose dactions et doutlets Le design des vues de votre application Les tendances du design dapplications Du papier Photoshop : la refonte de MultiConvertisseur Pour aller plus loin Chapitre 6. Les contrles spcifiques Interagir avec des contrles spcifiques : la cration dun utilitaire Le modle Utility Application Le cahier des charges et lbauche prliminaire La logique interne des contrleurs Lhabillage de linterface et la liaison des outlets et actions

75 78 80 81 84 91 96 98 98 98 99 101 106 107 109 111 116 116 121 127 131 143 144 147 150 153 154 154 158 160 169

Interagir avec des rglettes, des alertes, des contrles segments et des sous-vues 173 Ajouter une rglette 173 Afficher une alerte lutilisateur 177 Ajouter un contrle segment et une sousvue 179 184 Intgrer une roulette lapplication Les roulettes de temps 185 Intgrer une roulette personnalise 190 Dfinir des lments dpendants dans une liste de proprits 199 206 Pour aller plus loin Chapitre 7. Lire et crire des donnes Lire des donnes Crer une liste simple partir de contenu externe Mettre en forme les cellules Ragir au contact de lutilisateur Crer un lecteur de flux RSS Enregistrer des donnes Sauvegarder les Prfrences Systme crire un fichier Pour aller plus loin Chapitre 8. Le multimdia Les images et les photographies Afficher des images Adapter les dimensions de la vue dimage Charger une image depuis une source externe Charger des images et des PDF avec la classe UIWebView Charger la photothque de lutilisateur Laudio et la vido Dclencher un son Lire une vido Le dessin et les animations Pour aller plus loin 207 209 209 215 221 223 231 232 237 244 245 248 248 253 258 261 264 275 275 280 282 286

Table des matires

VII

Chapitre 9. Ragir aux gestes de lutilisateur Grer la rotation de laffichage Contrler la manipulation de lcran Dplacer un lment du bout des doigts Grer la navigation partir de gestes Interagir avec lacclromtre de liPhone Pour aller plus loin

287 289 297 300 304 311 316

Chapitre 10. Publication et marketing 317 Adhrer au programme de dveloppeur iPhone 318 322 Dployer une application iPhone Crer un certificat de dveloppeur 322 Associer des iPhones enregistrs 324 Crer un identifiant dapplication 325 Crer un profil de provisionnement 326 Tester une application sur votre iPhone 327 328 Soumettre votre application Apple 335 Populariser votre application 341 Pour aller plus loin Index 343

Prface
"Design is not just what it looks like and feels like. Design is how it works." Steve Jobs, 30 novembre 2003, New York Times San Francisco, janvier 2007. Devant un parterre de journalistes largement acquis sa cause, Steve Jobs a la voix empreinte dun ton plus solennel qu laccoutume. En coulisses, lquipe technique dApple pressent que la grand-messe de cette anne marquera coup sr un virage spectaculaire dans lindustrie de linformatique et des loisirs numriques, bien au-del du simple sort rserv la marque la pomme. Une pointe dexcitation gagne les premiers rangs de la salle du MacWorld, alors que Steve Jobs entame son discours inaugural. "De temps autre, un produit rvolutionnaire apparat sur le march et change toute la donne. On peut sestimer vraiment chanceux de travailler sur un seul produit de cette trempe au cours de sa carrire. Aujourdhui, Apple sapprte lever le voile sur trois produits limportance aussi capitale. Trois produits en un : liPhone". Vous connaissez la suite : la fivre iPhone a gagn lensemble de la plante, en dpassant allgrement les prvisions les plus folles et en faisant exploser tous les compteurs. Par son ergonomie si intuitive, sa facilit daccs, ses fonctionnalits riches et ltendue des services quil offre, le mobile dApple a redfini lusage du tlphone. Cest un appareil de communication au sens large, qui vous permet dinterroger les services les plus modernes tout en profitant des fonctions tlphoniques de base. Mais cest aussi un formidable terrain de jeu pour tout type de loisirs numriques, du visionnage de squences vidos la lecture de votre audiothque personnelle. Et un outil de productivit sans commune mesure avec les tlphones antrieurs. Inutile de poursuivre linventaire des services quil rend : liPhone

Dveloppez des applications originales pour iPhone et iPod Touch

rvolutionne lusage du mobile et saffirme comme la plateforme par excellence de lutilisateur nomade. Figure de proue de ces nouveaux usages aux innombrables aspects, lApp Store diTunes introduit un mode de distribution original. Sacralisant lapplication comme la brique essentielle de tout usage mobile, la boutique en ligne diffuse directement les crations de ses propres utilisateurs. Modeste utilitaire rendant de fiers services au quotidien, jeu vido spectaculaire ou lecteur multimdia spcialis dans un domaine : vous adaptez librement votre tlphone vos usages, en lui greffant toutes les applications dont vous avez besoin. Une fonction manque lappel ? Dveloppez-la vous-mme et venez enrichir le catalogue commun ! Au-del du plaisir de simpliquer dans cet effort global, vous dcouvrez un nouveau moyen de rtribuer votre passion et vous pouvez ainsi prtendre des revenus rguliers. LiPhone est bien cette hydre aux cent mille ttes. Cent mille applications qui exploitent chacune de ses possibilits dans leurs derniers retranchements. Cent mille ides originales, qui se compltent mutuellement et offrent un panorama dune richesse incroyable. Et cent mille dveloppeurs, la passion et linventivit contagieuses, qui regorgent de crativit. Cent mille dveloppeurs dont vous ! Grce cet ouvrage, vous pntrez dans les coulisses de liPhone et vous dcouvrez toute la richesse de ses rouages. Dcryptez son systme, profitez de ses contrles originaux et modernes et rinventez votre tour lusage mobile. De lcran multi-touch lacclromtre en passant par laccs aux services web ou lutilisation du capteur photo/vido, vous disposez dun arsenal trs riche de fonctions qui laissent libre cours tous vos projets. Apple vous offre un kit de dveloppement complet qui, une fois matris, donne naissance dinnombrables applications aux multiples talents. Si le dveloppement web a profondment marqu le monde de linformatique depuis les annes 90, la programmation pour plateformes mobiles en prend naturellement la succession et complte son approche. Prenez part votre tour cette rvolution et figurez parmi ces pionniers qui redfinissent nos usages quotidiens. Ludique et intuitif, le dveloppement pour iPhone est accessible tous et vous mnera vers des terres encore inexplores. Et si vous commenciez ds aujourdhui ?

Organisation de cet ouvrage


Cet ouvrage se compose de 10 chapitres, qui vous offrent un panorama complet du dveloppement pour iPhone et iPod Touch. De la cration de vos premiers projets leur publication sur iTunes, en passant par laccs des mdias externes ou lintgration de vidos et de fichiers audios vos applications, vous avez toutes les cls en main pour devenir un dveloppeur professionnel et briller sur lApp Store.

Prface

vv

Le Chapitre 1, Le SDK de liPhone et de liPod Touch, prsente ltendue de vos possibilits. Vous y apprendrez installer tous les lments ncessaires pour amorcer la programmation. Vous travaillerez sur papier en amont, afin de poser toutes vos ides initiales et dentamer le cycle de dveloppement dans les meilleures conditions, en rflchissant au cadre et lintrt de vos applications. Le Chapitre 2, Vue densemble du dveloppement pour iPhone, pose les bases de votre environnement de programmation. Vous dcouvrirez par le dtail lensemble des outils qui constituent larsenal du dveloppeur, en particulier Xcode et Interface Builder. Les principales rgles et syntaxes de lObjective-C nauront plus de secrets pour vous ! Le Chapitre 3, la dcouverte du SDK de liPhone, vous accompagne dans vos premiers pas sous Xcode et Interface Builder. Vous y apprendrez crer votre premier projet, utiliser le Simulateur diPhone et profiter des modles prdfinis pour offrir un cadre idal lensemble de vos ides dapplications. Le Chapitre 4, Interactions avec vos applications, expose lensemble des solutions votre disposition pour interagir avec lutilisateur de votre application. Cration de boutons dclenchant des fonctions, modifications de linterface de votre application, gestion des vnements Cet examen en profondeur du dialogue qui stablit entre votre application et ses utilisateurs sachve par un exemple concret : un quiz auquel on rpond par de simples pressions du bout des doigts. Le Chapitre 5, Les vues de votre application, vous prsente tous les outils permettant de dfinir les interfaces de vos applications. Vous y apprendrez crer des applications riches sarticulant autour de systmes de navigation complets qui donnent accs de multiples crans. Onglets, barres doutils et sries de boutons : hirarchisez le contenu de votre application et soignez les transitions entre chaque cran laide deffets danimation. Vous y apprendrez galement tout lart du design dinterfaces pour iPhone, en travaillant minutieusement les crans de votre application du papier Photoshop. Le Chapitre 6, Les contrles spcifiques, sattarde sur tous les lments dinterface plus complexes, comme les rglettes, les interrupteurs ou les roulettes manipuler du bout des doigts. Vous y apprendrez btir des projets plus complexes, du cahier des charges limplmentation de tous les contrleurs et des lments dinterface, en tirant partie de lensemble des composants exclusifs du mobile dApple. Vos applications gagneront ainsi en ergonomie et en ractivit. Le Chapitre 7, Lire et crire des donnes, passe en revue lensemble des solutions permettant dinteragir avec du contenu externe. Vous prparerez ainsi le contenu de votre application dans un fichier annexe, facile mettre jour, ou vous le rcuprerez directement travers la connexion WiFi ou 3G de liPhone. Cration dun lecteur de flux RSS, sauvegarde des paramtres spcifiques une application dans les rglages de liPhone,

vv

vv

vv

vv

vv

vv

Dveloppez des applications originales pour iPhone et iPod Touch

enregistrement de champs saisis par lutilisateur Enrichissez votre application et laissez lutilisateur ladapter ses besoins ! Les tableaux et listes dlments, manipuler au doigt, constituent un socle idal pour hberger les informations lies votre application.
vv

Le Chapitre 8, Le multimdia, voque toutes les possibilits les plus avances de liPhone et de liPod Touch. Affichage et retouche de photos personnelles, utilisation du capteur photo/vido de liPhone, lecture de fichiers audio ou de squences vido : enrichissez vos applications dun contenu multimdia trs divers ! En marge de ces solutions, vous apprendrez galement dessiner sur lcran de liPhone laide de fonctions avances du kit de dveloppement. Le Chapitre 9, Ragir aux gestes de lutilisateur, vous livre tous les secrets des capteurs intgrs liPhone et liPod Touch. Dtection du mouvement, gestion de lcran multitouch, raction aux gestes de lutilisateur, prise en compte de linclinaison et de lacclromtre du mobile Composez des applications au comportement riche et intuitif, afin daccompagner lutilisateur dans tout type de situations. Le Chapitre 10, Publication et marketing, vous assiste dans lultime tape du dveloppement pour iPhone : la commercialisation de tous vos projets sur lApp Store diTunes. Vous y apprendrez investir dans un compte de dveloppeur professionnel grce auquel vous soumettrez vos applications finalises Apple. Soignez la demande de validation et mettez tous les atouts de votre ct afin de rencontrer ladhsion du public.

vv

vv

Prrequis
Nous avons conu cet ouvrage afin de le rendre accessible au plus grand nombre. Vous ne devez pas ncessairement disposer dune exprience antrieure en programmation, ni connatre les rouages du dveloppement orient objet ou de linstanciation de classes. Toutefois, le kit de dveloppement de liPhone et le langage Objective-C sinscrivent dans une longue tradition doutils et puisent leurs racines dans un socle commun de nombreux langages. Les programmeurs Java, par exemple, reconnatront rapidement les principaux traits de leur langage de prdilection et pourront envisager des projets plus complexes. Les dveloppeurs web profiteront de leur exprience et de leur matrise des outils graphiques pour entamer le design dinterfaces ambitieuses et positionner au mieux les objets avec lesquels les utilisateurs interagissent. Il nest pas non plus inutile de disposer dune solide exprience en PHP si vous envisagez de lier votre application un service web ou lune des nombreuses API disponibles sur la Toile (YouTube, Flickr, Google Maps, etc.). linverse, vos connaissances en Objective-C vous seront dune grande aide pour envisager de vous recycler vers dautres langages ou plateformes. Le dveloppement pour iPhone et

Prface

Mac OS X sarticule autour dune mme base et de la mme panoplie doutils. Vous pourrez ainsi naturellement poursuivre lexprience vers la cration de vos propres applications bureautiques.

Conventions typographiques
Cet ouvrage utilise des polices de caractres diffrentes pour distinguer certains lments :
vv

Police fixe. Cette police met en valeur les lments du langage ainsi que les noms de fichiers ou de rpertoires.

vv Police fixe grasse.

Dans les extraits de code, cette police permet de mettre en exergue les modifications apportes aux programmes.

vv

Les noms dapplications ou les termes mis en exergue sont en italique.

Les encadrs Ils prcisent des lments destins attirer votre attention sur un cas particulier.

Remerciements
Ce livre naurait pas t possible sans le soutien indfectible, le savoir-faire et les multiples talents de Dominique Buraud. Son regard professionnel, son attention constante et sa passion, de la premire bauche de cet ouvrage sa ralisation, auront clair lensemble de ce projet. Nombreux sont les auteurs franais lui devoir une fire chandelle pour avoir concrtis leurs souhaits, en uvrant pour la dfense dune littrature technique de grande qualit dans notre langue. Lauteur est fier de pouvoir aujourdhui rejoindre leurs rangs. Ce livre naurait pas non plus t possible sans laide prcieuse et fidle de Fabien Schwob, qui a consciencieusement relu chacune des pages et les a claires de son savoir-faire technique. Si le dveloppement Cocoa vous intresse, nhsitez pas suivre son site web passionnant ddi cet environnement, ladresse http://www.cocoa.fr/. Enfin, les remerciements de lauteur vont naturellement toute lquipe de Pearson France, en particulier Patricia Moncorg. Leur passion et leur talent ont rendu cet ouvrage possible !

Dveloppez des applications originales pour iPhone et iPod Touch

propos de lauteur
Jean-Marc Delprato est journaliste technique spcialis dans la presse informatique depuis 1991. Aprs un DEA de Lettres Modernes la Sorbonne et des tudes dingnieur informatique, il collabore de nombreux magazines (Player One, Code(r), PC Team, Windows News, Computer Arts, Joystick) et a traduit ou rdig une vingtaine douvrages techniques. Passionn de webdesign et dinfographie, il sintresse notamment PHP et larchitecture de linformation. Avec lapparition de nouvelles plateformes de dveloppement, il a conu des applications pour de multiples services web et API renommes. Vous trouverez notamment ses travaux travers ses ouvrages Intgrer Google Maps une application Ajax, Crer des scripts pour Second Life et Crer des applications pour Facebook. LiPhone lui est apparu comme une extension naturelle de chacune de ces plateformes et comme un terrain de jeu idal pour dployer des interfaces riches et interactives autour dun contenu original.

1
Le SDK de liPhone et de liPod Touch
Au sommaire de ce chapitre
vv vv vv

Les lments runir Installer le SDK Avant daller plus loin : prparer votre projet

Ce nest pas un hasard si le catalogue de liPhone comprend aujourdhui plus de 100 000 applications diffrentes ; limage de son terminal mobile si intuitif et ergonomique, Apple a mis en place un kit de dveloppement (SDK, Software Development Kit) puissant et efficace qui offre un formidable cadre aux programmeurs du monde entier. Quel que soit votre

Dveloppez des applications originales pour iPhone et iPod Touch

niveau dexprience, vous disposez dun environnement riche et accessible, travers lequel vous mettrez en forme vos projets les plus ambitieux. Votre priple travers le dveloppement dapplications pour iPhone commence donc irrmdiablement par son tlchargement et sa prise en main. Tout au long de cet ouvrage, nous utiliserons les trois outils principaux qui composent un tel kit de dveloppement : Xcode, linterface o vous programmerez vos applications, Interface Builder, loutil de design et de conception et le Simulateur diPhone pour tester vos programmes. Retroussez-vous les manches : votre carrire de dveloppeur pour iPhone et iPod Touch commence ds aujourdhui !

Les lments runir


Pour profiter du SDK distribu gratuitement par Apple, vous devez disposer dun Macintosh dot dun processeur Intel et de Mac OS X 10.5.3 ou ultrieur. Les rcents iMac 27 pouces ou les MacBook Pro excutant Snow Leopard sacquittent parfaitement de cette tche et offrent un espace de travail trs confortable pour tirer parti de tels outils. Si vous ntes pas encore quip et si votre budget est plus limit, vous pouvez galement envisager lachat dun Mac mini vous offrirez alors une seconde jeunesse un vieux moniteur. Ouvrez votre navigateur web et rendez-vous ladresse http://developer.apple.com/ iphone. Vous dcouvrez le Centre de dveloppement pour iPhone dApple. Cet espace essentiel dcrit les principales techniques de dveloppement et illustre mme certaines procdures travers une srie de vidos. Nhsitez pas y revenir rgulirement pour dcouvrir les dernires nouveauts et pour vous entretenir avec dautres dveloppeurs aguerris. Sachez toutefois que lensemble des documents est en anglais.
Figure 1.1 La page daccueil du Centre de dveloppement pour iPhone.

Chapitre 1

Le SDK de liPhone et de liPod Touch

Cliquez sur le bouton Log in, au centre de lcran, puis saisissez votre identifiant Apple ID. Vous lutilisez probablement dj pour vous connecter lApp Store diTunes afin dacheter de nouvelles applications. Si vous ne disposez pas encore de ce prcieux ssame, cliquez sur le lien Join now et remplissez le formulaire afin douvrir un compte. Ce nest dailleurs pas une mauvaise ide de crer un second identifiant Apple ID, rserv au SDK et votre compte de dveloppeur.
Figure 1.2 Authentifiez-vous laide de votre identifiant Apple ID ou crez-en un nouveau.

Figure 1.3 Vous vous apprtez tlcharger le kit de dveloppement, cliquez sur le bouton Continue.

Figure 1.4 Vous ne disposez pas encore de compte ? Crezen un gratuitement en quelques secondes.

10

Dveloppez des applications originales pour iPhone et iPod Touch

Si vous envisagez de souscrire une licence payante afin de commercialiser vos propres applications, vous avez tout intrt prendre le temps de soigner les dtails qui vous concernent. Remplissez le formulaire complet, en indiquant votre nom, votre adresse e-mail et votre pays dorigine.
Figure 1.5 Remplissez le formulaire dinscription en dtaillant vos informations personnelles.

Figure 1.6 Apple vous demande demble le type dapplications que vous tes susceptible de programmer.

Chapitre 1

Le SDK de liPhone et de liPod Touch

11

Figure 1.7 Validez les conditions gnrales dutilisation en cliquant sur le bouton I Agree.

Quelques secondes plus tard, vous recevez un e-mail : suivez le lien quil contient puis saisissez le code cinq chiffres dans le champ prvu cet effet. Votre compte est enfin prt et vous accdez nouveau au Centre de dveloppement dApple.
Figure 1.8 Surveillez vos e-mails : vous devez encore valider votre compte.

Figure 1.9 Saisissez le code de vrification pour finaliser votre compte.

12

Dveloppez des applications originales pour iPhone et iPod Touch

Figure 1.10 De retour au Centre de dveloppement dApple, vous dcouvrez les diffrents lments qui composent le SDK.

Sur la page qui apparat lcran, choisissez la version du SDK qui correspond votre systme dexploitation. Vous constatez en effet quil existe des dclinaisons spcifiques Leopard ou Snow Leopard. Armez-vous de patience : lheure o nous mettons ce livre sous presse, la dernire version en date avoisine les 2,73 Go.
Figure 1.11 Slectionnez la version du SDK qui correspond votre systme dexploitation, Leopard ou Snow Leopard.

Signer un contrat de dveloppeur auprs dApple Si le tlchargement du kit de dveloppement est purement gratuit, vous dcouvrez deux formules dabonnement sur la colonne de droite du Centre dApple. Pour 99 dollars, vous pouvez en effet opter pour une vritable licence de dveloppeur. Celle-ci vous permettra de dposer vos projets sur votre propre iPhone et de les commercialiser travers lApp

Chapitre 1

Le SDK de liPhone et de liPod Touch

13

Store diTunes. La licence dentreprise, propose 299 dollars, concerne essentiellement les socits disposant de plus de 500 employs qui envisagent de dvelopper des applications en interne, pour leurs propres besoins. Si lachat dune licence nest absolument pas impratif pour suivre tous les exemples de cet ouvrage, vous devriez lenvisager malgr tout ; cest lunique moyen de rentabiliser votre apprentissage et de commercialiser vos propres applications. Nous reviendrons largement sur cette souscription et sur la vente dapplications travers le Chapitre 10.

Installer le SDK
Vous disposez dsormais dun fichier "iphone_sdk_3.x.x_with_xcode_3.1.x.dmg" sur votre disque dur. Effectuez un double-clic sur son icne afin de monter cette image. Dans la fentre qui apparat lcran, cliquez sur licne "iPhone SDK".
Figure 1.12 Le tlchargement est termin, procdez linstallation du SDK.

Figure 1.13 Linstallation du SDK greffe tous les outils ncessaires Mac OS X.

Validez linstallation du kit de dveloppement, puis cliquez sur le bouton Continuer louverture du programme (voir Figures 1.14 et 1.15). Acceptez ensuite les multiples conditions dutilisation, puis slectionnez les versions du SDK que vous souhaitez installer. Pour suivre les exemples de cet ouvrage, vous pouvez vous contenter des options par dfaut. Toutefois, si vous envisagez de dvelopper pour une version plus spcifique de liPhone OS, vrifiez que vous lavez bien slectionne dans la

14

Dveloppez des applications originales pour iPhone et iPod Touch

liste figurant lcran. Le Simulateur diPhone disposera ainsi de limage approprie du systme (voir Figures 1.16 et 1.17).
Figure 1.14 Cliquez une premire fois sur le bouton Continuer pour lancer linstallation du SDK.

Figure 1.15 Tout est prt, procdez linstallation de Xcode et de ses diffrents outils.

Figure 1.16 Acceptez les conditions dutilisation.

Chapitre 1

Le SDK de liPhone et de liPod Touch

15

Figure 1.17 Slectionnez la version du SDK approprie puis cliquez sur Continuer.

Par dfaut, les outils du SDK sinstallent dans le dossier /Developer de votre disque dur. Vous devez disposer de 7,3 Go despace libre pour profiter de lensemble des outils. Modifiez ventuellement le rpertoire dinstallation, puis cliquez sur Choisir.
Figure 1.18 Choisissez le rpertoire dinstallation et validez.

16

Dveloppez des applications originales pour iPhone et iPod Touch

Figure 1.19 Cliquez enfin sur le bouton Installer pour lancer la procdure.

Figure 1.20 Patientez : dans quelques secondes, tout sera prt !

Figure 1.21 Voil, vous disposez de lensemble des lments du SDK.

Chapitre 1

Le SDK de liPhone et de liPod Touch

17

Quelques minutes plus tard, le SDK est install sur votre Mac. Dposez ventuellement Xcode dans votre Dock ; vous en ferez une utilisation constante travers tous les chapitres de cet ouvrage.
Les autres solutions pour dvelopper Malgr le cadre ludique et convivial offert par le SDK, de nombreux dveloppeurs ont cherch sen affranchir et explorer dautres pistes pour programmer des applications pour iPhone. Parmi de telles solutions alternatives, les frameworks QuickConnect et Phone Gap prsentent un grand intrt. Ils sadressent en priorit aux dveloppeurs web et reposent essentiellement sur du code JavaScript, HTML et CSS pour designer les interfaces de vos applications et interagir avec lutilisateur. Vous pouvez ainsi exploiter la quasi-totalit des contrleurs spcifiques de liPhone sans apprendre lObjective-C pour autant. Nous naborderons pas ces techniques de programmation alternatives au cours de cet ouvrage et nous vous invitons vous reporter au livre Dveloppez des applications pour iPhone avec HTML, CSS et JavaScript de Lee S. Barney, paru aux ditions Pearson. Sachez toutefois que de telles pratiques commencent se rpandre et quelles constituent une solution de choix pour tous les dveloppeurs sous Windows.

Avant daller plus loin : prparer votre projet


Vous avez dsormais runi tous les lments ncessaires au dveloppement de votre premire application pour liPhone. Vous avez galement pris le temps de personnaliser votre environnement de dveloppement afin dacqurir rapidement de nouveaux rflexes. Comme nous le verrons par la suite, vous basculerez sans cesse entre les diffrents outils du SDK : vous devez ainsi vous familiariser avec leur interface pour en exploiter toute la puissance. Mme si Apple a conduit un rel effort pour proposer des outils riches et clairs, vous devez imprativement les apprivoiser et ne pas vous laisser dborder par ces nouvelles possibilits ! Pour lheure, nous vous recommandons ainsi de ne pas foncer tte baisse dans cet environnement nouveau ; linstar de nimporte quel projet de dveloppement, la programmation dune application pour iPhone requiert une solide phase de prparation. Noubliez jamais que, quelle que soit son chelle, votre application entretient des rapports privilgis avec ses utilisateurs non seulement tous ceux qui la jugeront utile lauront sans cesse porte de main ou dans le creux de leur poche, mais ils interagiront aussi directement au doigt sur les contrles que vous avez prvus. Peu de logiciels bnficient dune telle immersion dans lunivers immdiat de leurs adeptes ! Sans pour autant jeter sur le papier des extraits de codes sources ou de scripts, vous devez imprativement passer par une phase initiale de design. La conception de linterface et des interactions de votre application joue un grand

18

Dveloppez des applications originales pour iPhone et iPod Touch

rle sur le dveloppement proprement parler : sans le niveler par le bas et lenclaver de contraintes, cette premire approche va au contraire rvler ltendue de vos possibilits et prparer la phase de dveloppement. LiPhone requiert une approche trs naturelle et instinctive : il est difficile de concevoir des interactions riches et ergonomiques en se lanant directement dans la programmation. Vous tes, par exemple, motiv lide de programmer une application de recettes de cuisine ? Songez que les utilisateurs nauront peut-tre pas toujours les deux mains libres pour manipuler votre logiciel. Vous devez ainsi prvoir une solution pour naviguer rapidement et intuitivement travers vos menus et vos recettes, sans multiplier les gestes pour autant. Mettez-vous dans la peau de vos utilisateurs et revenez, lespace dun instant, vers deux outils qui valent tout fait le SDK dApple : le papier et le crayon !

tablir un cahier des charges sommaire


Du point de vue du dveloppeur, le mobile tactile dApple offre un formidable terrain de jeu au potentiel quasi infini. Pour vous en convaincre, prtez-vous une petite exprience. Runissez plusieurs amis qui utilisent un tlphone portable traditionnel. Prsentez-leur une premire srie dapplications que vous avez glanes sur lApp Store, dont une poigne dutilitaires et de jeux. Faites-leur ensuite part de votre projet de dvelopper votre tour des applications. Les ides les plus originales vont automatiquement fuser dans lassemble, des interfaces les plus loufoques et novatrices jusquaux ambitieux projets censs rendre de colossaux services au quotidien. Cest une source inestimable dides. LiPhone et liPod Touch sont deux terminaux trs intuitifs, qui deviennent rapidement des extensions naturelles du bon vieux carnet et de lagenda. Grce leur interface tactile, leurs possibilits de communication (WiFi et 3G) et lacclromtre quils embarquent, on envisage immdiatement des dclinaisons infinies de tous les logiciels auxquels nous sommes habitus. L encore, faites preuve de patience ! En revenant au papier et au crayon et en prparant votre projet en amont, vous ne devez pas partir dans tous les sens pour autant. Ne bridez pas votre imagination, mais concentrez-vous sur une ou deux ides principales pour bien dbuter. Organisez une sance de brainstorming au cours de laquelle vous relverez une srie de pistes : imaginez avant tout les applications qui manquent encore lappel, ou celles que vous rvez de perfectionner. Lorsque la silhouette gnrale de votre projet vous apparat, passez la phase de design. Esquissez les diffrents crans que parcourront les utilisateurs et imaginez un systme de navigation. Clarifiez le contenu que vous souhaitez leur prsenter, puis dressez la liste complte de tous les lments qui constitueront votre application. Vous btissez ainsi rapidement un cahier des charges, dont vous pourrez ventuellement vous carter par la suite si une meilleure ide ou un systme de navigation plus ergonomique vous venaient durant la programmation proprement parler !

Chapitre 1

Le SDK de liPhone et de liPod Touch

19

Quel que soit votre niveau en programmation, cette phase initiale est incontournable. Au fur et mesure de vos progrs, lexprience vous apprendra viser plus juste et ne retenir que les lments rellement impratifs pour mener bien le dveloppement. Mais gardez cet adage lesprit : si votre application tient la route sur le papier et se voit soutenue par de solides fondations, vous avez dj accompli la moiti du chemin.

Les types dapplications de liPhone : faites jaillir toutes sortes dides !


Vous rvez de rencontrer le succs sur lApp Store diTunes et de voir votre application intronise sur sa page daccueil ? Vous navez pas encore dide bien prcise et vous souhaitez vous inspirer de projets aurols de prestige ? Commencez votre phase de conception initiale par une petite visite sur le centre de tlchargement dApple ! Vous y puiserez systmatiquement de nouvelles ides et vous saurez rapidement o se situe votre projet vis-vis de la "concurrence". La communaut des utilisateurs a-t-elle rellement besoin dune millime version de la calculatrice, par exemple ? Ou bien votre projet est-il suffisamment innovant et ergonomique pour mriter de figurer parmi toutes ces dclinaisons dores et dj disponibles ? Vous serez rapidement en mesure destimer le succs potentiel de votre propre projet ! Voici les diffrentes catgories dapplications pour iPhone et iPod Touch, tries par popularit. En les envisageant sous laspect de leur programmation et non de leur utilisation, leur parcours fera probablement jaillir dinnombrables ides ! Divertissement / Jeux. Indniablement la catgorie la plus populaire de lApp Store, les jeux figurent aussi parmi les applications les plus onreuses. Elles prsentent donc un fort rendement potentiel ! On distingue essentiellement trois types de jeux : les adaptations de grands classiques, menes par de prestigieux studios (Resident Evil, Crash Bandicoot, Need for Speed, Myst), les jeux de physique qui tirent partie de lacclromtre de liPhone (Topple, Labyrinth) et les petits jeux indpendants, conus autour dun principe nouveau et accrocheur (casse-ttes, nigmes, puzzles). moins de tomber dans la dernire catgorie, votre projet ne devra souffrir daucune faiblesse sur le plan visuel et sonore. Certains studios indpendants se sont mme constitus en vue de noffrir que des jeux pour liPhone : cest notamment le cas des franais dAgharta Studio (1112 Episode 01), qui reprennent les principes fondateurs du jeu vido avec ses corps de mtiers soigneusement cloisonns. Sil restera toujours de la place pour des projets de moindre ampleur mens par des programmeurs indpendants, le dveloppement dun jeu pour liPhone est une activit ambitieuse : comptez plusieurs semaines ou mois de programmation. Cest toutefois lun des secteurs les plus lucratifs et pour lequel le bouche--oreille fonctionne le mieux, comme en tmoigne laventure dEthan Nicholas le dveloppeur du jeu iShoot. Vendu 2,99 dollars

20

Dveloppez des applications originales pour iPhone et iPod Touch

et dclin dans une version gratuite, son titre sest rapidement arrach sur lApp Store au point de faire de son auteur lun des premiers millionnaires diTunes ! Sans prtendre une telle audience, votre application sera forcment sous les feux des projecteurs si vous lintroduisez dans cette catgorie, consulte quotidiennement par des centaines de milliers dutilisateurs. Utilitaires/Productivit. Deuxime catgorie la plus populaire, les utilitaires constituent lapproche la plus originale de liPhone et la plus salue par Apple. La plupart de ces applications tirent parti des outils exclusifs au terminal dApple, en particulier son interface tactile et son acclromtre. Cest aussi une catgorie qui tolre les applications minimalistes et moins visuelles, si elles remplissent leur rle et offrent de vritables services au quotidien ! Cest dailleurs le seul critre lorigine de leur succs : si vous dveloppez un utilitaire pour iPhone, vous ne devez jamais formuler des promesses sans les tenir. Combien dapplications se targuent de remplacer votre dictaphone ou votre bote outils avant de se rvler de bien pitres compagnons ? Noubliez pas que si vous fixez un prix de dpart votre projet, les utilisateurs ne seront pas en mesure de lessayer sans saisir leur numro de carte bancaire : les attentes vis--vis de vos promesses nen sont que dcuples. Nous y reviendrons, mais il est trs intressant de dcliner votre projet en une version gratuite et une version payante si vous envisagez de dvelopper un utilitaire. Parmi les utilitaires les plus populaires, on distingue essentiellement les outils de type "couteau-suisse" (niveau bulle, altimtre, tlcommande universelle, lampe de poche), les calculatrices ou utilitaires spcialiss (conversion, finances, accordeur de guitare, etc.) et les adaptations doutils de bureautique traditionnels (transformation de lappareil photo de liPhone en webcam, dictaphone numrique, radio-rveil). Actualits. Gnralement constelle dapplications gratuites, cette catgorie constitue avant tout une "vitrine" pour de nombreux sites dinformations qui prtendent ainsi une plus large audience en sinvitant sur le tlphone de leurs utilisateurs rguliers ! Prenez lapplication du Monde, par exemple. Elle noffre pas un contenu fondamentalement diffrent du portail de ce quotidien, mais elle prsente une ergonomie savamment tudie, qui en fait un meilleur outil de consultation que le navigateur intgr liPhone. Avec son "zapping" et ses images qui apparaissent en plein cran, on accde bien plus rapidement linformation qu travers le site web officiel du journal. De trs nombreux sites web ou mdias traditionnels dclinent actuellement leur contenu liPhone. Si vous possdez un blog WordPress, vous avez probablement dj remarqu le plug-in permettant de transformer laffichage de votre site afin quil pouse les dimensions de liPhone. Il sagit ici doffrir une exprience plus riche encore vos lecteurs : votre source est clairement identifie travers sa propre icne et bnficie dune consultation autonome, au mme titre que le parcours des derniers e-mails ou SMS. Cest un moyen idal daccompagner votre propre blog et de renforcer sa visibilit et sa popularit ! Comme vous pouvez limaginer, ce type dapplications tire

Chapitre 1

Le SDK de liPhone et de liPod Touch

21

essentiellement parti des fonctions de communication de liPhone : vous profitez de votre flux RSS pour rapatrier automatiquement vos derniers billets, que vous mettez en forme laide du SDK. Par ailleurs, cest galement lune des catgories que vous devez le mieux matriser si vous souhaitez devenir un dveloppeur iPhone professionnel : de nombreuses socits sont actuellement la recherche de programmeurs capables dadapter leur contenu ce terminal et vous pouvez envisager de rpondre ces missions. Photographie/Musique. Mme si lappareil photo intgr liPhone ne figure pas parmi les plus performants du march, de trs nombreuses applications permettent den amliorer le rendu et de retoucher rapidement ses photos. Succs garanti ! Cest notamment le cas de PhotoEffect, une application que lon doit au dveloppeur japonais Kyosuke Takahashi. travers une srie de plug-ins et de filtres inspirs de Photoshop, les utilisateurs modifient les clichs quils ont pris en flagrant dclic dans leur photothque. Lapplication Photo Collage emprunte le mme cheminement : elle runit vos plus belles photos autour de compositions originales, calcules automatiquement. Attention toutefois : le dveloppement de filtres visant modifier des images nest pas ais et ne devrait pas constituer votre premire approche du SDK de liPhone. Retenez toutefois quil est possible dinteragir travers une application avec des fichiers stocks sur la mmoire Flash de votre mobile et de charger/ enregistrer des donnes. Dans un premier temps, vous pouvez vous contenter de proposer une srie de cadres et de bordures que les utilisateurs apposeront sur leurs photos prfres. Si le principe vous parat minimaliste, sachez quil existe un rel public pour ce type dapplications simples dont le seul but est dtendre les possibilits offertes par liPhone et de mettre en scne la vie de tous les jours. LiPhone et liPod Touch ne sont pas en reste du ct de la musique, baladeur numrique oblige ! L encore, il sagit dapplications trs ambitieuses qui se dclinent en des synthtiseurs ou des squenceurs. Plus prcisment, on distingue deux types dapplications musicales : les "initiations" un instrument, que lon manipule aux doigts (MiniPiano, PocketGuitar), et les applications de cration qui enregistrent de vritables fichiers. La premire sous-catgorie partage de nombreux titres avec les applications de jeux et de divertissement : les applications sont ludiques et ne prtendent pas vritablement la rigueur dun conservatoire de musique ! Lautre sous-catgorie ne contient que des applications trs ambitieuses, qui tirent avantage de toutes les fonctions les plus avances du SDK : chargement de donnes, enregistrement de fichiers, interface ergonomique Nayez crainte : vous serez en mesure de dvelopper de tels utilitaires lissue de la lecture de cet ouvrage. Navigation. Dans sa dernire version en date, liPhone intgre un GPS performant. De nombreuses applications sappuient sur cet outil et sur une varit de services en ligne afin de cartographier vos dplacements ou de prparer vos trajets. Cest lun des domaines o le dveloppement web et la programmation pour iPhone pousent la mme direction : vous tirez gnralement partie dAPI trs bien rfrences sur Internet (Google Maps, analyse

22

Dveloppez des applications originales pour iPhone et iPod Touch

du trafic en temps rel, flux RSS contenant la liste de stations Vlib par exemple) et vous dclinez ainsi des services en ligne au terminal dApple. Prenez garde cependant : ce type dapplications ne tolre pas les inexactitudes et vous tes souvent tributaire de donnes dont la publication vous chappe vous devrez probablement surveiller la validit des liens et des informations intervalles rguliers. Rseaux sociaux. Facebook, Twitter et MySpace ont le vent en poupe et simposent comme les fers de lance du Web 2.0 : tous ces services se dclinent donc naturellement liPhone, qui se rvle un compagnon idal pour en profiter pendant tous vos dplacements ! Bien entendu, les maisons mres de chacun de ces services ont dores et dj dclin plusieurs outils pour se connecter et accder leurs rseaux sociaux. Mais limage des utilitaires de navigation, il vous reste une confortable marge de manuvre pour tendre leurs capacits et profiter dAPI disponibles sur le Web. Vous souhaitez afficher rapidement le statut de tous vos amis sur votre mobile, tel quil apparat sur Facebook ? Pas de problme ! Des fonctions spcialement ddies ce type dactivits existent. Votre vritable travail consiste ainsi imaginer une interface attractive, qui amliore considrablement lergonomie des outils dj existants. Inspirez-vous des applications disponibles sur lApp Store afin de dcouvrir les options qui manquent encore lappel. Il sagit toutefois dune catgorie trs largement balise sur le circuit de distribution dApple : il est difficile de proposer des applications payantes dans cette catgorie, moins de rvolutionner fondamentalement les possibilits dinteractions. Enseignement. Vous vous sentez lme dun pdagogue et vous pouvez vous prvaloir dtre le spcialiste dun domaine ? Envisagez de btir une application encyclopdique, qui se manipule la manire dun dictionnaire. Comme nous le verrons par la suite, ce type dapplications est soumis de nombreuses contraintes, en particulier au niveau de la ractivit et du stockage des informations. Si vous rpondez prcisment une demande, vous pouvez toutefois prtendre une forte adhsion de la part des utilisateurs auprs de qui vous deviendrez une rfrence incontournable. Cest aussi une catgorie dapplications qui exige des mises jour moins rgulires : sitt votre fonds encyclopdique organis, son actualisation ne vous accaparera pas durant de longs mois. Mais en vous spcialisant autour dun domaine trs prcis, vous rduisez dautant plus votre audience potentielle. Toutefois, le prix que vous fixez est gnralement suprieur aux simples utilitaires. Il vous revient de prparer soigneusement le terrain en compulsant demble une solide base de donnes, afin de rentabiliser au mieux votre investissement en temps ! Forme et sant/Mdecine/Sports. On ne simprovise pas mdecin ou entraneur professionnel, mais la demande concernant les applications de "surveillance" ou "dinitiation sportive" est trs forte. Si vous jouez la carte de la transparence, en prcisant que vous ntes pas un spcialiste, mais plutt un passionn, vous veillerez la curiosit de tous les utilisateurs partageant vos gots. Calculatrices de poids, conseils dittiques, outils visant

Chapitre 1

Le SDK de liPhone et de liPod Touch

23

optimiser une pratique sportive : imaginez les utilitaires qui vous aident vivre au mieux votre passion ou qui amliorent votre propre hygine de vie ! L encore, le bouche--oreille fonctionne particulirement bien avec ce type dapplications, que lon chrit au mme titre quun compagnon.

Les bonnes ides dapplications et les projets viter


Ce rapide tour dhorizon des applications disponibles sur lApp Store diTunes devrait vous donner de premires pistes pour laborer votre propre projet. Sachez distinguer les applications voues lchec des projets les plus prometteurs : cest justement en travaillant sur papier que vous identifierez rapidement les cueils et les pertes de temps inutiles. Analysez galement votre niveau de comptences actuel : certes, le dveloppement dune application ambitieuse pourrait largement amliorer votre matrise du SDK et de la programmation pour iPhone, mais lampleur de la tche pourrait aussi vous rebuter au point dabandonner votre projet. Dans un premier temps, vous devez absolument bannir toute estimation de la rentabilit de votre application. Vous mettez bien en place un projet afin de vous adresser une large audience, mais celle-ci ne doit pas peser sur vos choix conceptuels. Par exemple, vous savez que les cadres et les bordures ajouter automatiquement des photos sont trs populaires mais si vous navez pas de comptences particulires pour les dessiner et proposer des modles originaux et si vous tentez malgr tout dimposer vos crations, vous risquez bien de dcevoir vos utilisateurs. Sur le papier, nenvisagez que les applications qui vous tiennent rellement cur et nessayez pas purement de copier des projets dj aurols de succs. En revanche, ne ngligez pas lestimation du temps ncessaire au dveloppement de votre application. Si vous tes encore dbutant et que vous ne matrisez pas les rouages du SDK de liPhone sur le bout des doigts, vous avez tout intrt entamer votre premire approche par un projet simple qui ne vous tiendra pas en haleine de longs mois. Par ailleurs, gardez lesprit que deux valeurs principales font et dfont le succs dune application : son ergonomie et son originalit. Reportez-vous la Figure 1.22 pour dcouvrir le parfait mlange de ces deux valeurs. En rgle gnrale, on retiendra quune application trs originale tolre certains dfauts dergonomie puisquelle prsente une forte valeur ajoute. linverse, une application peu originale (comme une nime calculatrice) ne pourra souffrir daucun souci ergonomique cest prcisment votre choix de systme de navigation et darborescence qui en fera tout le succs !

24

Dveloppez des applications originales pour iPhone et iPod Touch

Figure 1.22 Le rapport entre lergonomie et loriginalit dans le succs dune application.

Si votre projet appartient la catgorie des jeux vido, veillez clarifier trs prcisment son cadre et son interface, en reprenant votre sauce les grandes recettes de cette industrie. Scnario, ergonomie, interactions, intrt : ne ngligez aucun aspect. Dans la mesure du possible, constituez-vous en quipe et dclinez diffrentes responsabilits aux intervenants. Pour garantir un vritable plaisir de jeu, vous avez tout intrt demander lassistance dun graphiste ou dun illustrateur sonore moins que vous ne cumuliez dj tous les talents ou que votre projet nappelle pas deffets visuels spcifiques ! Rflchissez deux fois avant dentamer le dveloppement dune telle application : on dcouvre gnralement de nombreuses contraintes en cours de route, comme le chargement dimages ou la ncessit dvoluer avec le matriel de liPhone ou de liPod Touch. Mises part ces quelques recommandations, il ny a pas rellement de projets viter. Tout du moins, toute ide mrite dtre tudie sur le papier. Cest prcisment cet exercice qui va rvler tous les dfauts de conception et les faiblesses de votre projet : vous identifierez rapidement les cueils et vous dresserez un solide plan de travail afin de vous consacrer pleinement au dveloppement de votre application.

Concevoir et designer son application sur papier


Vous avez runi une srie dides et la silhouette gnrale de votre application sesquisse dj dans votre esprit. Sans plus attendre, jetez sur papier toutes vos pistes ! Nhsitez pas emprunter certains outils aux mthodes conceptuelles traditionnelles, comme Merise par exemple1. Dans un premier temps, relevez tous les objectifs de votre application. Vous dfinissez ainsi rapidement un premier cahier des charges, qui vous servira de main-courante tout au long du dveloppement. Triez tous ces buts par ordre dimportance, afin didentifier

1. Pour plus de dtails concernant les mthodes conceptuelles, reportez-vous louvrage Processus dingnierie du logiciel de Claude Pinet, paru aux ditions Pearson.

Chapitre 1

Le SDK de liPhone et de liPod Touch

25

des fonctions qui pourraient ventuellement tre corriges ou modifies par la suite. Lenjeu consiste tablir rapidement un plan de dveloppement, avec des tapes clairement identifies. Comme vous le verrez par la suite, notre premier exemple est un simple quiz autour du cinma. Une rapide analyse sur papier rvle les objectifs et aspects suivants :
vv vv

Enchaner une srie de questions prpares lavance. Offrir aux utilisateurs la possibilit de rpondre en pressant lune des propositions au doigt (type QCM). Vrifier les rponses soumises par les utilisateurs. Calculer un score total en fin de questionnaire. Sauvegarder ce score pour le comparer des essais ultrieurs ou aux rsultats des amis. Envisager des mises jour des questions.

vv vv vv vv

Cette premire liste dobjectifs est encore vague et ne fait limpasse sur aucun aspect du quiz. Procdez de mme en identifiant clairement les actions de votre application. Dans le cas de dveloppements plus complexes, vous pouvez mme faire appel dautres outils des mthodes de conceptualisation, comme le Modle Conceptuel de Traitement par exemple. Ce dernier vise dfinir les donnes qui rgissent votre application, tablir les relations qui sexercent entre les diffrents blocs de contenu et modliser les interactions des utilisateurs. Vous dclinerez ensuite ce large schma en autant de scripts et de fonctions au sein de votre application. Le travail sur papier (voir Figure 1.23) vous encourage galement imaginer linterface de votre application. L encore, noubliez pas que liPhone introduit de nouveaux concepts que vous devez pleinement exploiter. Votre projet ne doit pas donner limpression dtre une modeste adaptation dun outil de Windows ou de Mac OS X : envisagez toutes les possibilits que vous offrent lacclromtre et linterface tactile. Noubliez pas non plus que liPhone et liPod Touch ont la possibilit de basculer leur affichage en mode Paysage ou Portrait. Comme nous le verrons par la suite, il est possible de programmer deux interfaces distinctes, pour chacun de ces cas de figure. Dessinez galement sur papier toutes les interactions avec lutilisateur. quels moments est-il invit saisir une requte ? Sous quelle forme ? laide de quels contrles ? Comment va-t-il manipuler linterface ? Avez-vous prvu des boutons ou des onglets simples facilitant la navigation ? Multipliez les esquisses de votre application sans toutefois imaginer des effets visuels trop ambitieux. Pour lheure, rflchissez en termes de "blocs" et de "contrleurs", en dessinant des zones rectangulaires que vous remplacerez par le contenu et les boutons de votre application. Noubliez jamais quun utilisateur de

26

Dveloppez des applications originales pour iPhone et iPod Touch

tlphone portable dispose dun temps plus court pour manipuler une application que face un ordinateur, la souris en main : vitez de multiplier les niveaux darborescence et faites en sorte quil accde rapidement au contenu recherch !
Figure 1.23 Lbauche prliminaire dune application sur papier.

Figure 1.24 Travaillez en amont le dialogue homme-machine.

Chapitre 1

Le SDK de liPhone et de liPod Touch

27

Figure 1.25 Certaines applications de liPhone misent sur une interface rellement originale pour offrir un usage trs intuitif !

Vous tes fin prt et vous estimez que votre application tient la route sur le papier ? Il est grand temps de dcouvrir le SDK de liPhone dans le dtail et de le confronter votre bauche !

2
Vue densemble du dveloppement pour iPhone
Au sommaire de ce chapitre
vv vv vv

Les outils votre disposition la dcouverte de Cocoa Touch et de lObjective-C En route vers Xcode

30

Dveloppez des applications originales pour iPhone et iPod Touch

Vous avez install le kit de dveloppement pour iPhone dApple et vous avez jet sur papier les bases de votre premire application. Vous voil bien parti pour entamer la programmation de votre projet ! Mais avant dentrer dans le vif du sujet, attardons-nous sur tous les aspects gnraux du dveloppement pour iPhone. Si lergonomie et le design si particuliers du mobile dApple sont de prcieux atouts qui vont contribuer au succs de votre application, ils vous obligent conserver en mmoire un certain nombre de limites et de contraintes. Ny voyez pas un carcan qui bride votre imagination : adoptez plutt ces rgles afin doptimiser au maximum votre application !

Les outils votre disposition


En tlchargeant, puis en installant le SDK dApple, vous greffez une srie doutils nouveaux Mac OS X. Parmi ceux-ci, deux pices matresses vont rapidement vous devenir indispensables : linterface de dveloppement Xcode et lmulateur diPhone. Le premier est un riche environnement de dveloppement (IDE, Integrated Development Environment), capable de supporter des scripts dans de nombreux langages. Lapplication runit un grand nombre doutils facilitant la cration, le dbogage et la compilation de votre code source, mais visant galement optimiser votre application afin damliorer ses performances et de respecter au mieux les contraintes matrielles du mobile dApple.
Figure 2.1 Xcode devient votre environnement de dveloppement privilgi.

Sachez par ailleurs que Xcode figure aujourdhui parmi les rares applications optimises pour les processeurs multicurs. Certes, nous ne pousserons pas cet outil dans ses retranchements en dveloppant des projets pour iPhone au point de mettre mal la plus grosse configuration de Mac Pro, mais sachez-le : si vous disposez dune machine puissante, Xcode saura lexploiter au mieux. Il soutient mme les curs "virtualiss" dont hritent les

Chapitre 1

Vue densemble du dveloppement pour iPhone

31

processeurs de nouvelle gnration, comme les Xeon de srie 5500 ou plus gnralement larchitecture Nehalem dIntel, qui se dcline actuellement tous les modles de Mac Pro, MacBook et iMac. La plonge dans le dveloppement pour liPhone suscitera peut-tre des vocations pour dcouvrir plus largement lAPI Cocoa et le langage de programmation Objective-C : si vous aspirez par la suite des projets de plus grande envergure, vous disposez dores et dj de loutil idal afin de poursuivre votre carrire de dveloppeur ! En installant le SDK de liPhone, vous hritez galement dun mulateur du mobile dApple (voir Figure 2.2). Trs pratique pour tester rapidement vos applications, il constitue dailleurs le seul moyen dexcuter vos projets si vous ne disposez que dun compte gratuit de dveloppeur. L encore, il vous faudra investir dans une vritable licence afin de transfrer vos programmes vers un vritable iPhone ou iPod Touch et dentamer la vente de vos applications travers liTunes App Store. mulation logicielle oblige, cet outil ne gre donc pas lacclromtre de liPhone et ne permet pas non plus de capturer des photos. Rassurez-vous : il vous sera tout fait possible dintgrer ces deux lments vos projets, comme nous le verrons par la suite. Cet mulateur nous sera essentiel lors de la compilation de nos projets et des phases de test ; il sintgre pleinement au cycle de dveloppement de vos applications et constitue un lment central pour valider vos codes sources.
Figure 2.2 Grce lmulateur intgr au SDK, Mac OS X embarque un iPhone.

Au-del de cette premire panoplie indispensable, vous devez naturellement complter ces outils par quelques applications dont vous ferez un usage ponctuel. L encore, reportezvous au plan que vous avez esquiss sur papier. Votre projet implique-t-il de nombreux effets visuels et sonores ? Vous aurez besoin dun diteur graphique (comme Photoshop CS4 ou The Gimp) et dun synthtiseur/squenceur afin de produire les images, pictogrammes et enregistrements audios lis votre projet. Heureusement, la rputation de Mac OS X dans ce domaine nest plus faire et le systme dexploitation dApple est livr avec une batterie de logiciels qui uvrent dans ce sens, la suite iLife en tte.

32

Dveloppez des applications originales pour iPhone et iPod Touch

Compltez-les par vos propres rfrences : vous voil fin prt pour entamer le dveloppement de votre premire application. Mis part la cration de licne de votre application et les lments graphiques lis nos exemples, nous naurons hlas pas le loisir de nous attarder sur la prise en main de tous ces outils. Sils ne vous sont pas particulirement familiers, nhsitez pas vous reporter sur les innombrables sites dexperts, toujours de bon conseil pour se former en autodidacte ! Nous vous accompagnerons toutefois dans les principales dmarches lies liPhone, comme la cration dune icne associe votre application par exemple (voir Figure 2.3).
Figure 2.3 Chaque application pour liPhone sidentifie par sa propre icne : prparezla laide dun logiciel de retouche dimage.

la dcouverte de Cocoa Touch et de lObjective-C


La filiation entre liPhone et Mac OS X
Lors de sa confrence inaugurale la convention MacWorld 2007, o liPhone a t prsent pour la premire fois, Steve Jobs sest fendu dune rplique qui a fait frmir denthousiasme lassemble : "Les logiciels pour tlphones portables sont gnralement de simples ersatz lergonomie limite. Avec liPhone, nous proposons des logiciels qui ont dores et dj cinq annes davance sur nimporte quel autre terminal mobile. Comment avons-nous atteint un tel rsultat ? Tout simplement en articulant liPhone autour dune base solide : notre mobile excute Mac OS X". Cette architecture nest pas le fruit du hasard : aprs des annes de recherche et de dveloppement, Mac OS X regorge de fonctions et de services dont la plupart correspondent trs prcisment aux besoins des utilisateurs diPhone. Connexions rseau, synchronisation, options dconomie dnergie, scurit renforce, support de la vido, bibliothques

Chapitre 1

Vue densemble du dveloppement pour iPhone

33

graphiques et sonores Le champ daction de liPhone sinscrit parfaitement dans tous ces domaines dapplication, ce qui vite aux ingnieurs dApple de "rinventer la roue". Sans cder au proslytisme pour autant ni se faire les dithyrambes dApple, on conviendra que ce lien de parent entre liPhone et Mac OS X se traduit pour lutilisateur final par une ergonomie singulire et surtout une grande intgration entre le mobile et les systmes avec lesquels il se synchronise (voir Figure 2.4).
Figure 2.4 Les paramtres systme de liPhone dcrivent le fonctionnement du systme dexploitation embarqu et sapparentent ceux de Mac OS X vous dfinissez notamment les fonctionnalits Bluetooth et WiFi.

En tant que dveloppeur et designer, vous pouvez surfer sur cette tendance ds lbauche sur papier de votre application. Certes, comme nous le verrons par la suite, liPhone est dot dune srie de contrleurs qui voquent dj largement les outils intgrs Mac OS X (champs, boutons, fentres de rglages, clavier virtuel). Mais de manire fine et discrte, vous avez tout intrt concevoir votre application en songeant lergonomie des logiciels les plus populaires pour les machines dApple, afin de renforcer encore ce lien de parent. Mac OS X bnficie dune interface trs intuitive et nous pousse contracter des rflexes qui chappent encore au monde Windows : en dclinant ces concepts et ces systmes de navigation vos propres applications, vous avez toutes les chances de captiver un plus large public votre application sera loue pour son ergonomie et sa prise en main intuitive. Sans compter quApple voit dun bon il les dveloppeurs qui sinspirent de tous ces jalons poss au fil des annes ! ce titre, nous vous invitons consulter le guide officiel des interfaces homme-machine de liPhone, ladresse http://tinyurl.com/iphoneIHM. Particulirement clair et complet, ce guide dcrit en dtails toutes les bonnes pratiques aboutissant une application intuitive et ergonomique. Vous dcouvrirez ainsi quel point lemplacement de vos boutons et contrleurs ne doit jamais tre le fruit du hasard. Plus intressant encore vis--vis de la tche qui nous occupe aujourdhui : la parent entre liPhone et Mac OS X se prolonge jusquau noyau du systme et son environne-

34

Dveloppez des applications originales pour iPhone et iPod Touch

ment de dveloppement. Si vous avez dj dvelopp des applications pour le systme dApple, vous tes familier de Cocoa et de son langage de programmation de prdilection, Objective-C. Sachez que tous ces lments se dclinent liPhone et que vous serez rapidement en mesure dadapter vos comptences au terminal dApple. Si vous navez encore jamais programm dapplications pour Mac OS X, pas de panique : ce nest absolument pas un passage oblig pour dvelopper vos projets pour liPhone ou liPod Touch et vous pourrez facilement partir dun bon pied en dclinant les grands concepts que vous matrisez dj travers dautres langages de programmation. Si liPhone est la toute premire plate-forme pour laquelle vous allez dvelopper, nayez crainte. limage de son interface ergonomique et intuitive, les outils de dveloppement demeurent clairs et efficaces. Reportez-vous ventuellement la fin de ce chapitre pour dterminer votre profil de dveloppeur et estimer votre niveau de comptence.

Une premire approche de Cocoa


Si le parallle entre Mac OS X et liPhone est vident, il faut tout de mme garder lesprit les spcificits du terminal dApple. Il sagit avant tout dun appareil nomade, que lon exploite lors de ses dplacements : les utilisateurs ne le manipulent pas la souris et liPhone introduit plusieurs fonctionnalits indites, comme le Multi-Touch et lacclromtre. Pour toutes ces raisons, Apple ne qualifie pas explicitement le systme de liPhone de "Mac OS X" mais plutt "diPhone OS". Mais le fort rapprochement entre les deux systmes persiste malgr tout : pour vous en convaincre, vous pouvez parcourir les longues conditions dutilisation (dans Rglages > Gnral > Informations > Mention lgale sur votre iPhone) o figure le nom de toutes les bibliothques et sources utilises. Les applications pour Mac OS X et pour iPhone partagent ainsi les mmes racines, autour de lenvironnement de dveloppement Cocoa. Cette pure plate-forme de dveloppement pour Mac sinscrit dans lhritage du systme NeXTSTEP, cr en 1989 par la socit NeXT de Steve Jobs et rachet par Apple en dcembre 1996. Avant daller plus loin, retenez que cet environnement est trs largement orient objet et quil constitue lun des socles de Mac OS X, en tirant parti de la puissance des outils de dveloppement dApple comme Xcode. Sous Mac OS X, Cocoa est partie prenante du systme et constitue la fois un environnement dexcution dapplications (comme Safari par exemple) et de dveloppement, autour dun ensemble de frameworks orients objets. La plupart des applications sexcutant sous Mac OS X sont ainsi des applications Cocoa ! Du ct de liPhone, il sagit mme du seul environnement disponible : des applications intgres au systme, comme Mail ou Safari par exemple, sont des applications Cocoa. En manipulant Xcode pour dvelopper vos applications pour iPhone, vous vous inscrivez donc pleinement dans cet environnement. Cocoa est un colossal ensemble de composants

Chapitre 1

Vue densemble du dveloppement pour iPhone

35

orients objet (des classes), que vous pouvez directement exploiter ou adapter vos besoins afin de construire toutes les "briques" de votre application. La quasi-totalit des comportements du systme, des interactions avec lutilisateur, de linterface graphique et de la lecture/criture de donnes sont couverts par cette large bibliothque de classes. Un environnement si riche est une vraie aubaine pour les programmeurs : la politique de dveloppement dApple est clairement norme et Cocoa automatise de nombreux aspects du dveloppement dune application. Nous le verrons trs rapidement dans la suite de cet ouvrage : si un domaine prcis chappe sa juridiction, vous pouvez trs facilement crer une sous-classe afin dlargir son champ daction. Dans la mesure o liPhone introduit justement de nombreux comportements indits, en particulier linterface tactile mais aussi le GPS et lacclromtre, Cocoa a t revu et corrig afin de disposer demble des classes adquates. Dans le cadre du dveloppement pour iPhone et iPod Touch autour du SDK dlivr par Apple, on parle ainsi de lAPI "Cocoa Touch" afin de marquer cette diffrence.
Ouvrages consulter Le dveloppement d'applications Cocoa vous intresse et vous souhaitez largir votre apprentissage de l'Objective-C l'ensemble de plate-forme Mac OS X ? N'hsitez pas vous reporter l'ouvrage Programmation Cocoa sous Mac OS X d'Aaron Hillegass, paru aux ditions Pearson (http://www.pearson.fr/livre/?GCOI=27440100726260). Pour une exploration en dtails du langage Objective-C, nous ne saurons que vous recommander la lecture de ObjectiveC 2.0, le langage de programmation iPhone et Cocoa sur Mac OS X, de Pejvan Beigui, galement paru aux ditions Pearson (http://www.pearson. fr/livre/?GCOI=27440100024070). Ces deux ouvrages compltent le prsent manuel et vous permettent de prolonger votre apprentissage au-del du seul cadre de l'iPhone.

Le langage de programmation Objective-C


Dans la mesure o les environnements de dveloppement Cocoa et Cocoa Touch sont intgralement crits dans le langage Objective-C, celui-ci devient le langage de rfrence pour le dveloppement dapplications Cocoa. Vous lutiliserez constamment lorsque vous mettrez au point votre application pour iPhone ! Un bref rappel historique simpose avant daller plus loin. la fin des annes 1970, le langage C connat une immense popularit : Brian Kernighan et Denis Ritchie, du Laboratoire AT&T Bell, lont mis en place quelques annes plus tt et il est mme devenu la pierre angulaire des systmes dexploitation UNIX, totalement crits dans ce langage. Au dbut des annes 80, les pratiques de gnie logiciel voluent et donnent naissance la programmation structure : les larges programmes sont diviss en de plus petits sous-ensembles, plus faciles dboguer et excuter de manire autonome. Mais en conservant laspect traditionnel du C, une telle pratique noptimise pas lcriture du code pour autant ; les programmes gagnant en complexit, il est de plus en plus

36

Dveloppez des applications originales pour iPhone et iPod Touch

difficile de rutiliser du code et il faut prvoir de larges structures de contrle afin de lier les diffrentes "parties" dun programme. Cest cette poque que les premires extensions du C vers lorient objet apparaissent : Bjarne Stroustrup dveloppe le C++ en 1979. La notion de classes et dobjets rutilisables rsout les problmes voqus prcdemment et les dveloppeurs peuvent envisager des programmes effectuant des traitements trs complexes sans crire des millions de lignes de code pour autant. LObjective-C est une approche parallle, initie par Brad Cox la mme priode. L encore, il sagit dune couche supplmentaire au C visant lautoriser crer et manipuler des objets. Si vous navez encore jamais eu la moindre exprience avec un langage orient objet, sachez quObjective-C constitue une formidable approche pour sinitier aux concepts de classes, dobjets et dhritage. Grce un nombre de types rduit et sa grande intgration avec Cocoa, Objective-C savre relativement intuitif lusage tout en produisant des programmes rigoureux, btis autour de classes et sous-classes automatiquement hirarchises. Comme nous le verrons par la suite, il sapproche davantage de Java que de C++. En tant que surcouche du C, il respecte de manire trs stricte sa syntaxe. Toutefois, toutes les oprations lies lorient objet pousent une forme originale et intuitive : en Objective-C, on "nappelle" pas une mthode comme en C++, on "envoie un message" un objet. L encore, nous aurons tout le loisir de dtailler cette spcificit autour dexemples concrets, mais retenez ce concept gnral : le traitement de ces "messages" est trs largement automatis et vous autorise une grande souplesse dans la programmation de votre code. Lobjet destinataire a ainsi la possibilit de dcliner le message ou de le traiter et il nest donc pas ncessaire dimplmenter toutes les mthodes dfinies dans le code source. Une autre particularit dObjective-C que vous devez retenir tient au systme de "catgories de classes". Il est trs facile de runir et de trier les classes et sous-classes sous une mme bannire : travers linterface de dveloppement Xcode, vous "visualisez" trs prcisment vos morceaux de code et vous facilitez leur dbogage ou leur mise jour. Idal pour sinscrire parfaitement dans le systme des "mises jour" propos par liTunes App Store, qui permet aux utilisateurs dune application de profiter rapidement des derniers changements imagins par ses dveloppeurs ! En 2007, Objective-C a connu une srieuse volution qui apporte son lot de nouveauts, en particulier lintroduction de proprits. Apple lvoque sous le nom "dObjective-C 2.0" et cest devenu le langage de programmation par excellence des applications Cocoa depuis Mac OS X 10.5. Lorsque vous dveloppez des programmes pour liPhone et liPod Touch, vous utilisez ainsi le langage de programmation Objective-C 2.0 sous lenvironnement de dveloppement Cocoa Touch.

Chapitre 1

Vue densemble du dveloppement pour iPhone

37

Les couches technologiques de liPhone OS et lintgration de Cocoa Touch


Vous connaissez dsormais laspect thorique des deux pices centrales du dveloppement pour iPhone. Voyons prsent de manire schmatique comment ces deux composants simbriquent dans iPhone OS. Reportez-vous la Figure 2.5 qui prsente les diffrentes couches technologiques du systme de liPhone.
Figure 2.5 Les couches technologiques de liPhone OS.

Quatre couches successives se superposent afin de runir toutes les fonctions de liPhone. Les couches infrieures, Core OS et Core Services, correspondent aux interfaces et lments fondamentaux, notamment le noyau du systme, la gestion des fichiers, les accs rseau et les options dalimentation. Les couches suprieures sont largement crites en Objective-C et runissent toutes les technologies propres liPhone. La couche Media comprend ainsi la gestion du dessin (OpenGL ES, Quartz, Core Animation), mais aussi le support de la vido et de laudio (Core Audio). La dernire couche contient lenvironnement de Cocoa Touch. Elle se divise en deux frameworks complmentaires, qui constituent le socle de toutes les applications pour iPhone : UIKit et Foundation. Comme son nom lindique, UIKit contient tous les objets apparaissant dans linterface utilisateur dune application et dlivre aux programmeurs de nombreux outils pour reprsenter des lments lcran. De nombreuses classes prdfinies vous permettent de grer les fentres, les vues et les contrleurs de votre application. Le framework Foundation gre notamment le comportement des objets, lcriture et la lecture de fichiers et les oprations rseau. Cest aussi ce niveau que se trouvent toutes les classes permettant daccder aux contacts et aux informations de lutilisateur, ainsi quaux technologies exclusives de liPhone, comme lacclromtre ou le GPS par exemple. La couche Cocoa Touch et les deux frameworks UIKit et Foundation constituent ainsi le socle du dveloppement pour iPhone. En rgle gnrale, vous trouverez systmatiquement une mthode ou une fonction dans lun de ces deux frameworks capables de prendre en charge la plupart des oprations du terminal dApple ; vous avez dailleurs tout intrt les exploiter directement afin dviter de faire appel aux couches infrieures diPhone OS.

38

Dveloppez des applications originales pour iPhone et iPod Touch

Toutefois, nous aurons ponctuellement besoin dutiliser un framework situ un niveau sous-jacent afin dexercer un plus grand contrle sur le comportement dune application. Le framework UIKit vous permet dafficher simplement du texte lcran : comme vous le verrez travers certains exemples de cet ouvrage, il est parfois prfrable de le suppler par un framework de la couche Media afin de mieux personnaliser lintgration de tels objets. Reportez-vous la Figure 2.6 pour visualiser de manire plus dtaille limbrication des frameworks dans la couche Cocoa Touch.
Figure 2.6 Les frameworks de la couche Cocoa Touch.

Cette vue densemble vous permet de dcouvrir tous les rouages internes de la couche Cocoa Touch. Ds le chapitre suivant, nous plongerons dans les bases dObjective-C 2.0 travers lutilisation de Xcode et nous mettrons ce canevas gnral en application !
Tirer partie de ses connaissances dautres langages Dans la suite de cet ouvrage, nous partons du principe que vous navez pas encore dexprience particulire dans le dveloppement dapplications pour iPhone et iPod Touch. Il nest pas non plus ncessaire de se familiariser avec Cocoa et le dveloppement sous Mac OS X pour partir dun bon pied : les outils du SDK sont clairs et intuitifs, de plus, liPhone prsente un certain nombre de spcificits par rapport aux applications Mac OS X. Toutefois, comme nous lavons vu, le dveloppement dapplications pour iPhone sarticule autour dun langage orient objet. Vous devez disposer de connaissances gnrales autour du concept dobjets et de classes pour mieux apprhender toutes les subtilits dObjective-C 2.0 et de Cocoa Touch. ce titre, sachez que des expriences comparables dans dautres langages de programmation peuvent tout fait se transposer et vous feront gagner un temps prcieux. Les frus de Java et de C++ sont choys et devraient rapidement trouver leurs marques, audel dune priode dinitiation la nomenclature et la syntaxe particulires dObjective-C. La programmation na jamais couvert un champ aussi large quaujourdhui. Il existe des dizaines de langages, adapts des domaines trs spcifiques comme le dveloppement web par exemple. Tous les langages de programmation structure trouvent un cho travers Objective-C. Ainsi, si vous avez dj dvelopp en ActionScript 3.0 ou en PHP 5, vous tes familier avec le concept des classes et de lhritage. Le dveloppement pour iPhone

Chapitre 1

Vue densemble du dveloppement pour iPhone

39

est relativement spcifique, dans la mesure o le programmeur endosse bien souvent le rle de designer dinterface et quil doit travailler avec un cadre limit. L encore, une exprience en dveloppement web (o il faut bien souvent prendre en compte les feuilles de style et dautres lments de nature ergonomique, comme le placement de boutons ou dimages !) est un srieux atout : cest en multipliant les casquettes que vous parviendrez rapidement aux rsultats les plus aboutis, sans lsiner sur le moindre aspect comportemental ou esthtique de votre application. Comme nous lavons vu au chapitre prcdent, il existe galement deux frameworks puisant leurs racines dans JavaScript : QuickConnect et PhoneGap. Ils permettent de dvelopper des applications ambitieuses sans ncessairement passer par du code en Objective-C. Dans la mesure o ces frameworks nexploitent pas le SDK de l'iPhone, nous ne les passons pas en revue au cours de cet ouvrage et nous vous invitons vous reporter au livre Dveloppez des applications pour iPhone avec HTML, CSS et JavaScript de Lee S. Barney, paru aux ditions Pearson.

Les spcificits et les limites de liPhone


Nous avons dj voqu au chapitre prcdent le caractre singulier de liPhone et les nombreuses implications de cette ergonomie sur le design de votre application. Maintenant que vous disposez dune connaissance plus approfondie de larchitecture diPhone OS, vous devez retenir que votre application accapare totalement le systme lors de son excution. Tlcharge sur le terminal dun utilisateur, elle est reprsente par son icne individuelle, aux cts des applications livres en standard avec liPhone ; si lutilisateur clique sur cette icne, votre application sexcute et occupe totalement lcran. Lorsque lutilisateur presse le bouton principal, votre application se termine et le systme saffiche nouveau. Mis part quelques dmons et services de bas niveau (comme la possibilit de basculer automatiquement vers un appel tlphonique, lorsque vous excutez une application), votre application dispose dun contrle total des ressources logicielles et matrielles du systme, y compris les priphriques intgrs comme lappareil photo ou lacclromtre. Noubliez jamais que vous programmez une application pour un priphrique mobile. Aussi moderne soit-il, il sinscrit dans des limites matrielles trs strictes : mme si vous disposez dun environnement dexcution tout entier rserv votre application, vous devez vous borner respecter un certain cadre. Parcourons tous ces aspects ensemble. Une taille daffichage limite. Cest indniablement lun des atouts de liPhone et de liPod Touch : ils sont affubls dun superbe cran, clair et lumineux. Au moment de leur sortie respective, cet cran dpassait largement la qualit et la rsolution de la plupart des terminaux mobiles. Mais lheure o la vido en haute dfinition connat un fort engouement, vous devez toutefois inscrire votre application dans un cadre plus limit : la rsolution de lcran de liPhone est de 480 320 pixels. Plus prcisment, votre application dispose dun cadre

40

Dveloppez des applications originales pour iPhone et iPod Touch

de 460 320 pixels : 20 pixels de hauteur sont rservs au menu suprieur qui affiche le nom de loprateur, le niveau de batterie actuel et la porte du signal WiFi. Autant dire que vous devrez rivaliser dingniosit et profiter au mieux du framework UIKit pour mettre en place un systme de navigation ergonomique, qui sarticule autour donglets et de fentres successives ! LiPhone dispose toutefois dun mode "dauto-rotation" qui vous permet de profiter dun espace de 480 300 pixels en mode Paysage (l encore, les informations sur loprateur sont prservs dans une barre de 20 pixels de hauteur). Nous y reviendrons.
Figure 2.7 Lapplication du quotidien Le Monde dispose dun systme de navigation original, qui exploite au mieux lespace disponible sur lcran de liPhone.

Une seule fentre la fois. Contrairement aux applications bureautiques, les applications pour iPhone ne disposent que dune seule "fentre" pour sexcuter. L encore, cette limite pse avant tout sur vos choix en matire de design et dinterface utilisateur. Une seule application la fois. Comme nous lavons vu, votre application dispose dun contrle quasi total des ressources de liPhone au moment de son excution. Si lutilisateur presse le bouton principal, celle-ci sarrte : vous ne pouvez donc pas envisager de prolonger ses traitements en "tche de fond", pendant que lutilisateur manipule dautres applications ou services. Il sagit toutefois dune limite que les ingnieurs dApple cherchent remettre en cause et qui pourrait tre vince lors dune prochaine mise jour du systme, avec des terminaux disposant dune plus grande quantit de mmoire vive par exemple (vous avez dit iPhone 4 ?). Une ractivit limite. Dans le mme ordre desprit, sachez quApple a voulu prserver cote que cote la ractivit et la souplesse de liPhone : dans la mesure o il sagit avant tout dun tlphone portable, les utilisateurs doivent tre en mesure de basculer rapidement dune activit lautre. Lorsquils pressent licne de votre application, celle-ci doit se char-

Chapitre 1

Vue densemble du dveloppement pour iPhone

41

ger immdiatement. linverse, lorsquon appuie sur le bouton principal, on revient instantanment lcran daccueil du systme. Si votre application est conue pour enregistrer et charger des paramtres personnaliss (profil de lutilisateur, donnes, etc.), sachez quelle ne dispose que de cinq secondes au maximum pour sacquitter de ces tches. Nous y reviendrons, mais vous devrez vous efforcer doptimiser au mieux les oprations de sauvegarde afin de vous assurer quaucune donne nest perdue lorsque lutilisateur quitte promptement votre application. La Figure 2.8 illustre ce type dapplications.
Figure 2.8 La sauvegarde automatique du circuit parcouru avec Crash Bandicoot Nitro Kart 3D.

Des ressources systme limites. Lun des intrts de la programmation pour un terminal mobile comme liPhone est de connatre lavance le matriel exploit par les utilisateurs : vous savez quoi vous attendre et vous ntes pas en droit dexiger une "configuration minimale" puisque vous la connaissez dj ! La principale limite rside dans la quantit de mmoire vive disponible pour votre application. Toutes les dclinaisons actuelles de liPhone embarquent 128 Mo de RAM : une quantit tout fait raisonnable pour envisager des applications riches sur le plan visuel, comme le dmontrent les projets dditeurs traditionnels du jeu vido (Need For Speed, Episode 1112). Mme si les applications sexcutent de manire individuelle, sachez que le systme accapare environ la moiti de ces ressources pour fonctionner. Vous disposez ainsi dune marge confortable de 64 Mo de mmoire vive pour excuter votre application. Par ailleurs, liPhone nest pas en mesure dcrire un fichier dchange (swap) lheure actuelle. Vous ne disposez ainsi que de la mmoire physique du terminal et vous ne pouvez donc pas exploiter les 8, 16 ou 32 Go despace de stockage pour gonfler artificiellement cette valeur. Il sagit toutefois dune valeur qui risque dtre remise en cause lors de la sortie de la prochaine version de liPhone. Heureusement, Cocoa Touch et Objective-C 2.0 sont dots de nombreuses classes et de plusieurs mcanismes visant limiter les fuites de mmoire et grer au mieux les ressources du systme.

42

Dveloppez des applications originales pour iPhone et iPod Touch

Figure 2.9 Malgr ses ressources plutt limites, liPhone est en mesure dafficher de vibrantes animations en 3D !

Un accs limit aux donnes. Cest lun des chevaux de bataille dApple avec liPhone et liTunes App Store : la marque la pomme veille scrupuleusement prserver les donnes personnelles de ses utilisateurs. Votre application ne peut lire et crire des donnes que dans une portion de lespace de stockage qui lui est spcifiquement rserve (quon qualifie gnralement de sandbox, ou bac sable). Vous ne pouvez donc pas envisager de rdiger des "virus" qui viendraient effacer le carnet dadresses des utilisateurs !
Figure 2.10 Lenregistrement des paramtres de lapplication Facebook dans sa zone ddie.

Fort heureusement, toutes ces limites ont t soigneusement dfinies et anticipes par Apple et le SDK de liPhone. Sous Xcode et travers lmulateur, vous serez ainsi en mesure de tester prcisment le comportement de votre application et vous ne pourrez pas mettre en vente un projet qui viendrait faire planter liPhone. Par ailleurs, de nombreuses mthodes et procdures prdfinies vous permettent de grer automatiquement les ressources du systme, en particulier la mmoire vive disponible, sans multiplier les lignes de code. Vous pouvez ainsi vous focaliser sur le comportement de votre application, sans vous arracher les cheveux sur toutes ces conditions !

Chapitre 1

Vue densemble du dveloppement pour iPhone

43

En route vers Xcode


Installez-vous confortablement face votre Mac et lancez Xcode : nous entrons de plainpied dans le vif du sujet et nous allons dcouvrir Objective-C et le dveloppement pour iPhone par la pratique ! Avant daller plus loin, prtez-vous une petite exprience : lancez lune de vos applications ftiches sur votre iPhone et essayez de "deviner" do proviennent les comportements et classes utiliss. Le jeu trs populaire Labyrinth de Carl Loodberg constitue un bon exemple. Gratuit dans une version comprenant dix niveaux, ce jeu de plateau sappuie sur lacclromtre de liPhone pour envoyer une bille dun point A un point B, sur un parcours sem de trous.
Figure 2.11 Lcran de jeu de Labyrinth.

Voici les diffrents lments qui le composent :


vv

Laspect visuel. Une icne de 57 57 pixels pour identifier lapplication, une srie darrire-plan de 320 480 pixels et des "sprites" leffigie de la bille, des trous et de la ligne darrive. Seul le mode Portrait est autoris et il ny a pas dauto-rotation de lcran. Laspect audio. Dans cette version gratuite, il ny a que quatre "bruitages" employs le rebond de la bille sur les parois, le bruit de sa chute, le son de la bille sur le "plancher" de bois et le signal sonore qui accompagne la victoire. Le comportement. Grce au framework Foundation, le jeu Labyrinth tire rapidement parti de lacclromtre de liPhone. Les coordonnes de la bille sont donc sans cesse rvalues en fonction de linclinaison du terminal. Lapplication prvoit en plus un rebond sur les parois du jeu. Dun point de vue fonctionnel, les coordonnes de la bille se rinitialisent si elle vient chuter dans un trou (qui correspond un rectangle dont les coordonnes sont fixes) et on charge le niveau suivant si la bille atteint lobjectif (dont les coordonnes sont galement fixes et connues).

vv

vv

44

Dveloppez des applications originales pour iPhone et iPod Touch

vv

Linterface. Au lancement de lapplication, un premier cran vient faire patienter lutilisateur pendant deux secondes le temps de charger ses paramtres (les niveaux dj russis apparaissent alors griss). Une barre de menus permet de basculer entre trois "crans" : laire de jeu, les paramtres et les crdits. Les auteurs optimisent ainsi lespace tout en offrant un accs rapide aux fonctions essentielles.

Figure 2.12 Lcran des paramtres du jeu, enregistrs dans la sandbox de Labyrinth.

Le concept vous sduit et suscite des vocations ? Passons sans plus tarder la phase pratique !

3
la dcouverte du SDK de liPhone
Au sommaire de ce chapitre
vv vv

Crer votre premier projet pour iPhone Tester et dboguer votre premier projet

Aprs cette premire dcouverte des lments fondamentaux du dveloppement pour liPhone, vous avez probablement trs envie de passer la phase pratique. Faites chauffer Xcode et Interface Builder, les deux outils indispensables du SDK : nous allons les parcourir sous toutes les coutures jusqu mettre en place notre premire application iPhone ! Comme vous le constaterez travers ce premier exercice, ce sont les deux faces dune mme pice ;

46

Dveloppez des applications originales pour iPhone et iPod Touch

vous effectuerez des allers-retours incessants entre ces deux applications de dveloppement, en vous arrtant rgulirement au Simulateur diPhone afin de valider chaque tape. Sachez par ailleurs quil nest pas ncessaire, ce stade, de disposer dun compte de dveloppeur auprs dApple : vous pouvez parfaitement vous contenter de manipuler des objets, dcrire du code source et de tester le rsultat sous Mac OS X. Comme nous le verrons par la suite, le prcieux ssame octroy par Apple vous offre essentiellement une option supplmentaire : le dpt immdiat de votre application compile sur votre propre iPhone depuis Xcode. Mais ce stade, il est encore inutile de manipuler votre premier projet dans des conditions relles ; focalisez-vous essentiellement sur la dcouverte de linterface de ces deux logiciels et sur les techniques gnrales de dveloppement. Au cours de ce chapitre, vous apprendrez crer toutes sortes de projets pour iPhone sous Xcode et grer lensemble des fichiers fondamentaux qui composent une application. Grce Interface Builder, vous crerez la "vue" de votre application en profitant dune bibliothque riche de composants et vous mettrez en application tous les enseignements gnraux propos dObjective-C et de Cocoa Touch jusqu manipuler votre premier projet sur le Simulateur diPhone. Vous profiterez enfin de la large bibliothque dapplications gratuites disponibles sur le site dApple pour parfaire cette premire approche et dcouvrir tous les outils de dbogage intgrs Xcode. Et si le dveloppement des applications les plus ergonomiques et fonctionnelles de lApp Store ne reposait que sur une judicieuse srie de clics travers Interface Builder ? Retroussez vos manches : nous allons le vrifier immdiatement !

Crer votre premier projet pour iPhone


Au cours du premier chapitre, vous avez install le SDK de liPhone et vous disposez de tous les outils ncessaires au dveloppement de votre premire application. Commencez par lancer Xcode en ouvrant une fentre du Finder, puis en droulant larborescence Developer > Applications et en effectuant un double-clic sur Xcode. Cest dailleurs dans ce rpertoire que se trouvent les autres outils lis au SDK de liPhone, en particulier Interface Builder et Instruments. En parallle, profitez-en pour agencer les rpertoires de votre disque dur et crer un dossier spcifiquement li votre premier projet. Son emplacement de stockage importe peu : vous aurez en revanche besoin de runir tous les lments constituant un mme projet dans le dossier de votre choix.

Matriser Xcode
Xcode vous accueille par un cran de bienvenue qui vous offre un accs direct aux sections emblmatiques du centre des dveloppeurs dApple : cration dune application, construc-

Chapitre 3

la dcouverte du SDK de liPhone

47

tion de linterface utilisateur, stockage des donnes, optimisation de votre code Tous ces sujets sont traits travers une srie de vidos, que vous avez tout intrt visionner si vous vous sentez perdus ! De trs nombreux articles techniques issus de liPhone Dev Center compltent galement cette premire approche. Si vous vous sentez en confiance, nhsitez pas dcocher la case Show at launch pour ne plus tre importun par la suite.
Figure 3.1 Lcran de bienvenue de Xcode.

La liaison avec votre propre iPhone Si vous avez connect votre iPhone votre Mac pendant le lancement de Xcode, vous tes susceptible de rencontrer un message vous demandant si ce priphrique doit tre utilis dans le cadre du dveloppement de votre application. Si vous avez souscrit au programme de dveloppement dApple, reportez-vous plutt la procdure dcrite aprs le paiement, sur le site des dveloppeurs : elle dtaille prcisment lactivation de votre propre iPhone et vous bnficierez ainsi dune meilleure intgration avec les outils de dveloppement. Pour lheure, il est inutile de tester le rsultat de notre application sur un vritable terminal : cliquez sur le bouton Ignore et fermez la fentre.

Droulez le menu File et cliquez sur New Project. Lassistant de cration de projet apparat lcran. Comme nous lavons vu prcdemment, Xcode permet aussi bien de raliser des applications Cocoa pour Mac OS X que pour iPhone/iPod Touch : ces deux plates-formes figurent ainsi dans le volet gauche de lassistant. Cliquez sur lintitul Application, en dessous de la rubrique iPhone, pour dcouvrir les six modles (templates) associs ce type de dveloppement. linstar des modles de documents dun traitement de texte par exemple, ils reprsentent six projets types prpars par Xcode. Leur utilisation vous fait ainsi gagner un temps prcieux et vous bnficiez directement de tous les lments dont votre application a besoin. Voici quoi ils correspondent (ils sont illustrs Figure 3.2) :

48

Dveloppez des applications originales pour iPhone et iPod Touch

Navigation-Based Application. On utilise ce modle pour les applications sarticulant autour dune srie de listes et de contrles de navigation, o les diffrentes vues simbriquent sous la forme darborescences. Cest le modle gnral des options de rglage de liPhone ou de votre liste de contacts, par exemple. OpenGL ES Application. Ce modle prpare tous les lments ncessaires aux applications graphiques, en particulier celles qui lancent des animations ou des effets visuels. Tab Bar Application. Ce modle cre rapidement une application dote dun systme de navigation par onglets avec une vue prdfinie pour les deux premiers dentre eux. Utility Application. Comme son nom lindique, ce modle correspond en particulier aux utilitaires : il met automatiquement en place une vue avec un bouton Info permettant de configurer lapplication et un systme de navigation offrant un raccourci direct pour revenir la vue principale du programme. Sans crire la moindre ligne de code, vous disposez ainsi dun canevas de base pour votre application : en cliquant sur ce bouton Info, un petit effet visuel travers lequel laffichage "se tourne" comme une feuille pour cder la place un second cran est automatiquement ajout votre projet. View-Based Application. Cest le modle le plus simple propos par Xcode : il cre une vue de base sur laquelle vous dposerez tous les lments depuis Interface Builder. Window-Based Application. Il sagit dun modle vierge, qui ne dispose que dune instance de la fentre principale de liPhone. Privilgiez-le si vous souhaitez dmarrer dun canevas pur, dans lequel il reste encore tout faire.
Figure 3.2 Les diffrents modles associs la cration dun nouveau projet pour iPhone sous Xcode.

Chapitre 3

la dcouverte du SDK de liPhone

49

Notre premier projet consiste afficher un texte sur lcran de liPhone et dposer une srie de contrleurs : cliquez sur le modle View-Based Application, puis sur le bouton Choose. Vous tes ensuite invit baptiser votre nouveau projet et choisir un rpertoire denregistrement. Le nom du projet a une influence majeure sur la cration de tous les fichiers de base : choisissez-le avec soin et vitez surtout les doublons si vous enregistrez plusieurs projets dans le mme rpertoire. Dans notre exemple, nous lappelons "Bienvenue" et nous le stockons dans le dossier /Documents. Cliquez ensuite sur le bouton Save pour valider votre saisie. La fentre principale de Xcode apparat lcran ; commencez par parcourir les fichiers automatiquement gnrs et associs votre projet. Sur le volet gauche de la fentre figurent tous les groupes et les fichiers correspondant votre application. Vous pouvez le confirmer en parcourant le dossier de stockage de votre projet dans le Finder : il sagit ici dune vue logique qui ne correspond pas larborescence exacte des fichiers lis votre application sur votre disque dur. la manire dune fentre du Finder, vous parcourez une srie de groupes et de raccourcis que vous tendez loisir et dont la racine correspond au nom de votre application "Bienvenue" dans notre exemple. En cliquant sur lun des fichiers, son contenu apparat dans la fentre centrale de Xcode : cest cet emplacement que vous saisirez directement le code source de votre projet.
Figure 3.3 La fentre principale de Xcode aprs la cration de notre premier projet.

Structure gnrale de tous les projets pour iPhone


Cliquez sur le petit triangle prcdant le nom de votre application, dans le volet gauche de Xcode : vous dcouvrez les cinq dossiers indispensables votre projet. Passons leur rle en revue.

50

Dveloppez des applications originales pour iPhone et iPod Touch

Classes. Il sagit du groupe essentiel de votre application : il contient toutes les classes en Objective-C que vous avez dveloppes. Cest dailleurs le seul groupe de Xcode qui correspond rellement un dossier physique stock sur votre disque dur, dans le rpertoire associ votre projet. Vous pouvez librement y crer des sous-dossiers afin dagencer au mieux votre application et dy voir plus clair au cours du dveloppement et du dbogage. Other Sources. Ce groupe runit tous les scripts et codes source qui ne correspondent pas des classes en Objective-C. Par dfaut, Xcode cre automatiquement deux fichiers indispensables :
vv

Bienvenue_Prefix.pch. Lextension de ce fichier dsigne un "en-tte prcompil" (precompiled-header, .pch), soit la liste exhaustive de toutes les bibliothques et des frameworks sur lesquels sappuie votre projet. En prcompilant ces lments immuables constituant votre application, Xcode vous fait gagner un temps prcieux au moment de la compilation de votre projet : il ne se proccupera plus que des classes que vous avez cres vous-mmes. Par dfaut, cet en-tte importe les deux frameworks essentiels du dveloppement sous Cocoa Touch : Foundation et UIKit. main.m. Noubliez jamais quObjective-C est une surcouche du langage C ; ce fichier dfinit ainsi la mthode principale main() de votre application. L encore, vous navez pas intervenir sur ce fichier moins de modifier les arguments de cette mthode. Nous ne nous y attlerons que dans les projets de plus grande envergure, qui ncessitent un traitement particulier.

vv

Resources. Ce groupe contient tous les lments indispensables votre application qui ne correspondent pas du code source. Vous y grefferez notamment les images, sons, vidos, textes et fichiers de configuration associs votre projet, commencer par licne qui lui est propre. L encore, vous pouvez librement agencer ce groupe comme bon vous semble et crer des sous-dossiers associs chaque type de fichiers. Dailleurs, si vous dplacez lun de ces lments dans la fentre de Xcode, le fichier correspondant stock sur votre disque dur nest pas modifi pour autant : Xcode dispose de son propre systme de classement interne et vous vite de vous proccuper de lemplacement de stockage de toutes vos ressources. Trois lments indispensables y figurent dores et dj :
vv

BienvenueViewController.xib. Il sagit du fichier dfinissant linterface graphique de votre application (sa "vue"), compos par Interface Builder. Il nest pas possible de lditer manuellement dans Xcode mais vous pouvez en revanche louvrir dans un diteur de texte, comme TextEdit : vous dcouvrez alors quil sagit dun fichier XML dcrivant linterface travers une srie de balises propritaires. Nous y reviendrons largement dans la suite de ce chapitre.

Chapitre 3

la dcouverte du SDK de liPhone

51

vv

MainWindow.xib. Dans le mme ordre dide, ce fichier dcrit la vue de la fentre principale de votre application. L encore, il sagit dun fichier li Interface Builder, que vous modifierez directement travers cet utilitaire. Info.plist. Cette extension dsigne une liste de proprits (Property List, .plist) associe votre projet. Vous pouvez la modifier manuellement travers Xcode : elle regroupe tous les paramtres gnraux de votre application, comme lemplacement de son icne, son numro de version ou sa langue par dfaut. Nous personnaliserons ce fichier au cours de ce chapitre.

vv

Frameworks. Ce dossier regroupe tous les frameworks sur lesquels sappuie votre application. Par dfaut, trois frameworks sont chargs : UIKit, Foundation et CoreGraphics. Envisagez-les comme de grandes bibliothques regroupant des lments spcifiques certaines facettes du dveloppement (le traitement des effets visuels, les interactions avec lutilisateur, etc.). Les grands studios crent gnralement leurs propres frameworks afin doptimiser et dacclrer le dveloppement de tous leurs projets, en reprenant rgulirement des lments dj crs auparavant sans avoir rinventer la roue. Comme nous le verrons par la suite, vous avez galement la possibilit dimporter des frameworks libres de droits glans sur le Web, qui seront ainsi lis votre application. Dans tous les cas, cette architecture permet de nimporter que les frameworks dont votre application a besoin et ainsi de limiter les ressources quelle consomme. Products. Le dernier groupe runit tous les fichiers crs au moment de la compilation, en particulier Bienvenue.app qui correspond votre application compile. Comme vous pouvez vous en rendre compte, ce fichier apparat en rouge dans linterface de Xcode ; cest le signe quil manque encore lappel. Rien de plus normal : nous navons pas compil le moindre code pour linstant et Xcode sest content de prparer le terrain.

Comme nous lavons vu, les fichiers indispensables votre projet ont t crs automatiquement en reprenant son nom pour les identifier clairement. Cest l tout lintrt dun tel environnement de dveloppement, articul autour du concept de modles : vous vous pargnez les tches rbarbatives et vous entamez directement la cration de votre projet. Par ailleurs, ce systme de classement propre Xcode tmoigne de la puissance dune architecture o les vues, les contrleurs et les modles sont spars. Vous pouvez ainsi vous proccuper de la programmation de votre application tout en important une interface que vous avez dj prpare, ou au contraire vous consacrer uniquement au design de votre application. Cest dailleurs prcisment ce que nous nous apprtons faire : enfilez votre blouse de designer, nous allons raliser linterface de notre premier projet.

52

Dveloppez des applications originales pour iPhone et iPod Touch

Matriser Interface Builder


Dans le volet gauche de Xcode, droulez larborescence en face du groupe Resources et effectuez un double-clic sur le fichier BienvenueViewController.xib. Comme nous lavons vu, il sagit de la description de linterface de votre application travers Interface Builder ; le logiciel souvre dailleurs automatiquement en arrire-plan. Au lancement dInterface Builder, trois fentres prennent place sur votre cran : BienvenueViewController, le panneau Library et le canevas View (voir Figure 3.4).
Figure 3.4 Linterface View de notre projet, louverture dInterface Builder.

La premire fentre dresse linventaire de tous les lments prsents laffichage : chaque icne correspond ainsi linstance dune classe Objective-C. Comme nous le verrons par la suite, toutes ces instances sont tries et laissent ainsi apparatre les dpendances entre les sous-classes. Vous manipulez cette fentre la manire du Finder et vous "droulez" larborescence dune classe afin de dcouvrir les ventuelles sous-classes quelle hberge. La fentre Library contient prcisment tous les lments dinterfaces disponibles dans le SDK de liPhone. Par un simple jeu de glisser-dposer vers la fentre View, vous crez ainsi des instances de chaque objet correspondant. Par dfaut, vous dcouvrez pour le moment trois icnes dans la fentre BienvenueViewController : Files Owner, First Responder et View. Les deux premiers lments sont indispensables et ne peuvent dailleurs pas tre supprims (voir Figure 3.5). Comme son nom lindique, Files Owner correspond au "propritaire" du fichier nib : en modifiant ses paramtres, vous pouvez ainsi lier plusieurs classes ou sous-classes entre elles. Nous aurons tout le loisir de parcourir plus en dtails ces notions de chargement et de liaisons de classes autour dun exemple concret. Retenez pour linstant que ce paramtre essentiel

Chapitre 3

la dcouverte du SDK de liPhone

53

associe un fichier nib spcifique linstance dune classe ou sous-classe. La sous-classe BienvenueViewController a t cre automatiquement par Xcode en chargeant ce premier template ; son instance recherche immdiatement un fichier BienvenueViewController. xib, le charge en mmoire puis en devient naturellement le propritaire. Cest prcisment ce type dassociations que vous pourrez modifier par la suite, travers licne Files Owner. Licne First Responder correspond lobjet dinterface avec lequel lutilisateur interagit. Ce "rpondeur" volue sans cesse au cours de ses manipulations : il peut donc sagir alternativement dun champ de texte, dun bouton, dun onglet et ainsi de suite. Lintrt dun tel systme est doffrir un lien direct au programmeur pour communiquer avec cet objet et en rcuprer les donnes, sans prvoir de multiples mthodes "surveillant" chaque contrleur ou vue dune application. L encore, nous aurons largement loccasion de dtailler ce concept autour dexemples concrets, ds le chapitre suivant. Au-del de ces deux icnes indispensables, notre interface ne comprend pour linstant quune seule instance dobjet : View. Plus prcisment, il sagit dune instance de la classe UIView, qui dfinit de manire globale une zone daffichage lcran, avec laquelle lutilisateur interagit. Vous comprenez ainsi mieux le nom du modle de base de Xcode pour liPhone ("View-Based Application"). Tous les lments dinterface, comme les boutons, les libells, les rglettes ou les images correspondent des instances de sous-classes dUIView. Comme nous le verrons par la suite, il est naturellement possible de dfinir plusieurs vues au sein dun mme projet ; on parle alors "dapplication multivues". Cest dailleurs le cas de limmense majorit des applications pour iPhone, o lon bascule entre plusieurs vues prpares avec Interface Builder, au gr des interactions. Un systme de navigation par onglets permet prcisment de passer dune vue lautre, par exemple.
Figure 3.5 La fentre BienvenueViewController dtaille le contenu du fichier nib.

54

Dveloppez des applications originales pour iPhone et iPod Touch

Des fichiers nib aux fichiers xib : lvolution du format dInterface Builder Nous lavons vu au Chapitre 2 : la plupart des outils de dveloppement de Mac OS X, en particulier lenvironnement Cocoa, ont t mis en place lorigine par les ingnieurs de NeXT. Dirige par Steve Jobs avant son rachat par Apple, cette socit a ainsi dfini de nombreux standards qui ont persist travers les annes. Parmi les produits phares de la firme, Interface Builder a t mis en place en 1988. Il a servi denvironnement de prdilection pour dvelopper des applications pour des gnrations de systme, dont NextSTEP, OpenSTEP, Mac OS X et aujourdhui iPhone OS. Ainsi, les lments dcrivant linterface graphique dune application Mac OS taient stocks lorigine dans un fichier .nib pour "NeXT Interface Builder". Dans la version la plus rcente dInterface Builder, cette extension a t revue et corrige et on utilise dsormais des fichiers .xib (XML Interface Builder). Sans entrer dans des dtails trop techniques, sachez toutefois que ce nouveau format ne supplante pas totalement son auguste prdcesseur : il sagit essentiellement dun standard plus clair et plus facile lire, qui est finalement recompil en fichier .nib lors de lempaquetage de votre application. Mais sachez que par coutume et habitude, la plupart des dveloppeurs continuent de parler de "fichiers nib" pour voquer les lments dinterface du SDK de liPhone. Mme la documentation officielle na pas envisag de corriger ce rflexe !

Ajouter des objets avec Interface Builder


Tout lintrt dInterface Builder rside dans son mode de cration intuitif et cohrent : vous visualisez simplement les instances de vos classes et vous manipulez une bibliothque riche dobjets. Nous lavons vu : tous les lments dinterface sont des instances de sous-classes dUIView ; si vous avez naturellement la possibilit dinstancier de tels objets par des lignes de code, sous Xcode, il devient vite pnible de personnaliser leurs moindres attributs de cette manire. Imaginez un simple bouton disposer sur la vue de votre application. En une ligne dObjective-C, vous pouvez crer une instance de la classe UIButton, elle-mme sous-classe dUIView. Mais comment parviendrez-vous placer prcisment le bouton sur linterface, au pixel prs, et rgler ses dimensions travers le code source, sans multiplier les essais successifs ? La fentre View dInterface Builder rsout ce problme : elle correspond la reprsentation graphique de linstance View apparaissant dans le fichier nib (voir Figure 3.6). Par de simples jeux de glisser-dposer depuis la bibliothque, vous crez ainsi des instances de tous les objets Cocoa Touch supports par Interface Builder avant de les redimensionner ou de modifier leurs proprits.

Chapitre 3

la dcouverte du SDK de liPhone

55

Plus prcisment, les objets figurant dans la bibliothque proviennent tous du framework UIKit, qui est associ votre projet ds sa cration (voir Figure 3.7). Rappelez-vous : ce framework est mentionn dans le volet gauche de Xcode, aprs la cration de notre projet.
Figure 3.6 La fentre View correspond la reprsentation visuelle de linstance View. Vous y dfinissez directement linterface de votre projet.

Figure 3.7 La bibliothque dobjets du framework UIKit de liPhone.

Mieux encore : Interface Builder gre de manire naturelle les imbrications et hritages de classes et dobjets. Dans de nombreux cas de figure, il est enfin impossible de crer linstance dune sous-classe si vous navez pas instanci la classe mre au pralable. Par exemple, vous ne pouvez pas crer un onglet spcifique au sein de votre application sans

56

Dveloppez des applications originales pour iPhone et iPod Touch

avoir dpos une "barre donglets" auparavant, prte lhberger. Puisque View correspond la vue de notre interface utilisateur, les objets sous-jacents sappellent des "sous-vues". linverse de notre exemple, certains objets ne tolrent pas de sous-vues. Dans tous les cas, il est donc impossible de commettre de telles erreurs avec Interface Builder ; lapplication empche tout simplement de glisser-dposer certains objets si lopration est interdite. Interface Builder supervise automatiquement lhritage entre les instances de classes et dobjets.
Figure 3.8 Tous les crans de liPhone sont constitus dlments accessibles dans la bibliothque dobjets dInterface Builder, limage des Rglages gnraux, qui runissent des listes, des libells et des icnes.

Pour comprendre le fonctionnement gnral dInterface Builder, dposons un premier objet sur la fentre View. Parcourez la bibliothque figurant sur la droite de lcran et recherchez lobjet Label. Il sagit dun simple "libell", soit un texte statique apparaissant sur lcran de liPhone et nappelant pas la moindre interaction avec lutilisateur (voir Figure 3.9).
Figure 3.9 On dpose directement notre libell sur la vue principale de notre application, travers Interface Builder.

Chapitre 3

la dcouverte du SDK de liPhone

57

Slectionnez cet objet, maintenez le bouton gauche de la souris enfonc et relchez-le audessus de la fentre View : un simple champ encadr de poignes apparat sur linterface utilisateur. Effectuez un double-clic sur lobjet pour modifier le texte apparaissant par dfaut et redimensionnez llment ou dplacez-le comme bon vous semble. Pour rsumer, nous avons ainsi cr en quelques secondes une instance de la classe UILabel ; elle devient une sous-vue de View et vous apercevez son icne dans la fentre BienvenueViewController. xib, en droulant larborescence View. Bravo : votre premier projet prend forme ! Tout lintrt de ce type de design consiste simplifier au maximum les tapes ncessaires. Vous bnficiez ainsi dun diteur wysiwyg1 et vous visualisez directement linterface utilisateur, telle quelle apparatra sur liPhone de vos "clients". Pour vous en persuader, droulez le menu Tools et cliquez sur Inspector, aprs avoir slectionn le libell. Dans la fentre qui apparat, vous reconnaissez les options traditionnelles dun diteur de texte (voir Figure 3.10).
Figure 3.10 On dfinit simplement les proprits de notre libell, laide de loutil Inspector dInterface Builder.

Vous pouvez ainsi changer la couleur et la taille du texte, son alignement, la porte de son ombre ou son opacit par exemple. Multipliez les essais afin daboutir au rsultat escompt. Vous pouvez invoquer loutil Inspector pour chaque objet figurant sur linterface utilisateur,
1. Acronyme de what you see is what you get : ce que vous voyez lcran correspond au rsultat obtenu.

58

Dveloppez des applications originales pour iPhone et iPod Touch

y compris linstance View en elle-mme (voir Figure 3.11). Dans ce cas, vous avez essentiellement la possibilit de modifier la couleur darrire-plan.
Figure 3.11 Loutil Inspector prend en charge tous les objets de linterface utilisateur, mme la vue principale.

Ce premier essai vous a convaincu de la puissance dInterface Builder ? Parcourez tous les objets du framework UIKit figurant dans la bibliothque et essayez de les dposer sur la vue principale de votre interface. Vous vrifiez ainsi la faisabilit de votre projet, tel que vous laviez esquiss sur papier au Chapitre 1. Selon toutes vraisemblances, de trs nombreuses ides nouvelles jailliront spontanment au cours de lexprience.

Les objets de la bibliothque dInterface Builder


On distingue essentiellement trois catgories dobjets UIKit, tries dans la bibliothque dInterface Builder : les conteneurs de donnes (Data Views), les objets de saisies (Input & Values) et les fentres et systmes de navigation (Windows, Views & Bars). Voici les principales classes correspondantes : Les conteneurs de donnes. Tableaux puisant leur contenu depuis une base de donnes, images, intgration du navigateur web ou vues dfilant automatiquement : tous ces objets servent agencer au mieux les donnes de votre application.
vv

Table View. La vue "Table" met en place un tableau visant accueillir des informations, la manire du carnet de contacts de liPhone par exemple.

Chapitre 3

la dcouverte du SDK de liPhone

59

vv

Table View Cell. Aprs avoir cr un tableau, vous ajoutez des cellules individuelles afin de soutenir les donnes. Image View. Cet objet sert charger des images, dans des formats standard. Si liPhone supporte de multiples formats, notamment le JPEG, privilgiez dans la mesure du possible les images au format PNG : Xcode parvient les compresser au maximum au moment de la compilation. Scroll View. Cette vue cre un large conteneur qui supporte la navigation "au doigt" si son contenu dpasse la hauteur dun cran. Cest notamment le cas des conditions gnrales auxquelles vous accdez dans les rglages de votre iPhone : le texte stend sur des centaines de lignes, que vous parcourez librement en mimant le comportement dun ascenseur au doigt. Web View. Cette vue intgre un navigateur web au sein de votre interface utilisateur : il supporte mme les boutons Prcdent et Suivant. Text View. Cette vue permet dafficher un simple champ de texte multilignes. Picker View. Cet objet cre une "roulette" que vous compltez par des donnes qui vous sont propres. Cest notamment le cas de lhorloge ou du rveil de liPhone. Date Picker. Cet objet reprend la vue prcdente en linitialisant avec des dates et des calendriers. Idal pour mettre rapidement en place une application dagenda.

vv

vv

vv

vv vv

vv

La saisie de valeurs. Que vaut une application pour iPhone si vous ne pouvez pas interagir avec elle ? Sur le terminal mobile dApple, la saisie de donnes revt des formes trs diverses, du simple champ de texte faisant apparatre un clavier virtuel loriginale "roulette" o des valeurs dfilent et se slectionnent du bout des doigts. En crant linstance de telles classes, vous dfinissez des objets qui renvoient des donnes lapplication ; l encore, Interface Builder vous fait gagner un temps prcieux en facilitant la configuration de tels mcanismes.
vv

Segmented Controls. Il sagit dun simple bouton permettant de basculer entre deux vues. Chaque "ct" du bouton peut contenir du texte ou des images, afin dindiquer lutilisateur les options sa disposition. En revanche, il nest pas possible de superposer les deux types de donnes. Label. Cet objet est un simple champ de texte statique, gnralement trs court. Nous lavons dj utilis dans notre premier projet. Round Rect Button. Cet objet cre un bouton rectangulaire que lutilisateur peut presser au doigt. TextField. Cet objet correspond un champ de texte saisissable par lutilisateur : aprs lavoir slectionn, un clavier virtuel apparat lcran.

vv

vv

vv

60

Dveloppez des applications originales pour iPhone et iPod Touch

vv

Switch. Cet objet cre un interrupteur visant activer ou dsactiver une option. On en retrouve de nombreuses occurrences dans les rglages de liPhone ou de la plupart des applications. Slider. Il sagit dune "rglette" permettant lutilisateur de choisir une valeur travers une barre horizontale, quil manipule au doigt. Attention toutefois : noubliez pas que lutilisateur ne peut pas forcment choisir une valeur trs prcise par son biais. En revanche, cest un outil idal pour moduler le niveau dun paramtre. Progress View. Cet objet cre un indicateur de progression : il affiche ltat davancement dune opration en cours, comme le chargement ou lenregistrement de paramtres par exemple. Activity Indicator View. Dans le mme ordre dide, cet "indicateur dactivit" renvoie lutilisateur un signal lui indiquant quune opration est en cours. Page Control. Cet objet ajoute une srie de "points blancs", en bas de lcran, permettant de basculer dune "page" lautre. Cest llment qui figure en bas de lcran de liPhone et qui vous permet de naviguer parmi les applications que vous avez installes.

vv

vv

vv

vv

Les systmes de navigation. Sobre et pur, lcran de liPhone nest pourtant jamais dpourvu dun systme de navigation, commencer par la barre dinformations en haut de laffichage, qui grne des dtails sur votre oprateur tlphonique, le niveau de batterie ou la puissance du signal WiFi. Barres doutils, onglets et menus : vous avez la possibilit de reproduire un tel systme pour soutenir votre application.
vv

Window. Il sagit de llment de plus grand ensemble parmi les classes dUIKit. Une telle "fentre" regroupe plusieurs vues et votre application peut elle-mme compter plusieurs fentres. View. Cest llment cr par dfaut laide de notre template : vous dposez des objets sur une vue, qui deviennent alors des sous-vues. Les applications "multivues" basculent ainsi entre plusieurs vues prpares lavance sous Interface Builder. Search Bar. Spcifique certaines applications, cette "barre de recherche" apparat en haut droite et permet lutilisateur dexcuter des requtes en faisant apparatre un clavier virtuel. Navigation Bar. Signifiant littralement "barre de navigation", cet objet soutient plusieurs sous-lments qui dcrivent ainsi le systme de navigation de votre application. Navigation Item. Cet objet simbrique dans une barre de navigation et correspond lune des options offertes lutilisateur. Toolbar. La barre doutils figure en bas de lcran et comprend plusieurs lments permettant dexcuter des comportements spcifiques. Bar Button Item. Il sagit de lun des lments de la barre doutils.

vv

vv

vv

vv

vv

vv

Chapitre 3

la dcouverte du SDK de liPhone

61

vv

Flexible Space Bar Button Item. Lorsque vous associez plusieurs lments au sein dune barre doutils, cet objet correspond un espace format automatiquement entre deux icnes. Cest un objet essentiel pour grer les modes dorientation en Portrait ou Paysage : les icnes sagencent harmonieusement, sans dcaler laffichage pour autant. Fixed Space Bar Button Item. Similaire llment prcdent, cet objet correspond un espace inscable entre deux options de la barre doutils. Cest un objet important pour designer une barre doutils de manire prcise : vous pouvez ainsi dcaler une option de quelques pixels vers la droite, et la maintenir cet emplacement quelle que soit lorientation de liPhone. Tab Bar. Il sagit du conteneur hbergeant plusieurs onglets, dans le cadre dun systme de navigation. Tab Bar Item. Associ lobjet prcdent, cet lment correspond lun des onglets de la barre.

vv

vv

vv

Figure 3.12 Un systme de navigation simple et sobre, laide donglets.

Essayez de dposer sur la fentre View un ou plusieurs de ces lments, puis ouvrez loutil Inspector afin den parcourir les proprits. Vous crez ainsi trs facilement des instances de classes du framework UIKit et vous toffez simplement linterface de votre application. Comme nous lavons vu prcdemment, Xcode supporte indiffremment le dveloppement dapplications pour iPhone ou Mac OS X dans ce dernier cas, ce sont des objets du framework AppKit qui figurent dans la bibliothque. Le principe est toutefois le mme : si lexprience vous sduit, vous serez en mesure de dvelopper rapidement des applications Cocoa pour Mac OS X... ou tout du moins leur interface graphique, laide dun logiciel aussi clair et complet quInterface Builder.

62

Dveloppez des applications originales pour iPhone et iPod Touch

Figure 3.13 Linterface graphique de notre premier projet, aprs avoir ajout dautres lments de la bibliothque.

Figure 3.14 Lorsque vous crez des interfaces complexes, votre rle de designer consiste veiller la cohrence de l'interface.

Tester et dboguer votre premier projet


Retournez dans la fentre principale de Xcode, partir de laquelle vous aviez ouvert le fichier BienvenueViewController.xib. Vous retrouvez tous les fichiers qui composent votre projet. Jusqu prsent, nous avons essentiellement ralis linterface graphique de notre application en ajoutant un libell qui fera office dcran douverture pour un projet de plus grande envergure, que nous complterons au chapitre suivant. Sachez que dans le jargon des dveloppeurs, on voque ce type dcran sous le nom de "Splash Screen" ; il sagit dun affichage en plein cran, qui prsente rapidement lapplication et son intrt. Nous verrons que

Chapitre 3

la dcouverte du SDK de liPhone

63

vous pourrez utiliser ce bref message pour faire patienter lutilisateur pendant le chargement de lapplication en elle-mme ! Sachez par ailleurs que plusieurs applications pour iPhone ne reposent que sur la conception dune interface graphique soigne. Cest notamment le cas des nombreuses "lampes de poche", souvent gratuites sur lApp Store. En manipulant Interface Builder, vous avez perc jour leur grand secret de fabrication : ces applications ne sarticulent quautour dune simple instance de lobjet View dont larrire-plan a t rgl en blanc avec une luminosit maximale. Chut : ne le rptez pas ! Il est maintenant lheure de vrifier la cohrence de notre interface et de nous assurer de son succs grce au Simulateur diPhone. Droulez le menu File et cliquez sur Save pour enregistrer vos modifications.

Compiler votre projet


Comme nous lavons vu, Xcode facilite largement la compilation de votre projet, notamment grce "len-tte prcompil" associ votre application qui rsume toutes les bibliothques et les frameworks qui lui sont associs. Cest un choix heureux : dans le cadre du dveloppement dapplications plus ambitieuses, o vous programmez des comportements et des vnements prcis, vous recompilerez inlassablement votre projet des dizaines de fois. Cest en effet absolument ncessaire pour tester la raction de votre programme dans des conditions relles ! Droulez le menu Build de Xcode et cliquez sur Build and Run ("compiler et excuter").
Figure 3.15 Le rsultat aprs la premire compilation de Xcode, avec le Simulateur diPhone.

64

Dveloppez des applications originales pour iPhone et iPod Touch

Si vous naviez pas enregistr les modifications apportes au fichier .xib, Xcode vous le propose ce moment. Quelques secondes plus tard, le fichier Bienvenue.app est prt et le rsultat apparat dans le Simulateur diPhone. Notre libell figure bien lendroit dsir et le rendu est exactement identique la fentre View que nous manipulions sous Interface Builder. Si vous avez cr des champs supplmentaires, notamment des champs de saisie, cest le moment o jamais de vrifier leur comportement dans le Simulateur. Vous avez ainsi la possibilit de tester le fonctionnement de la plupart des objets issus du framework UIKit.
Modifier les paramtres linguistiques du Simulateur diPhone Par dfaut, le Simulateur diPhone est en anglais mme si ses menus gnraux apparaissent en franais, dans la barre suprieure de Mac OS X. Sil est tout de mme intressant de visualiser le comportement de votre application pour un public anglophone (nous voquerons par ailleurs lintrt de programmer directement une application dans cette langue, afin dlargir votre audience potentielle), vous avez tout intrt choisir dautres paramtres linguistiques : vous profiterez ainsi dun clavier virtuel AZERTY et non QWERTY. Pour cela, procdez comme si vous manipuliez un vritable iPhone. Cliquez sur le bouton principal afin de revenir lcran gnral de liPhone, puis cliquez sur licne Settings. Parcourez ensuite les menus et cliquez sur General, puis sur International et enfin Language. Choisissez le franais dans la liste propose (voir Figure 3.16). Figure 3.16 Le changement des paramtres linguistiques dans le Simulateur diPhone.

Sachez au passage quil sagit dun "tableau de donnes", comme nous lavions vu prcdemment dans la bibliothque dobjets UIKit. Cliquez enfin sur le bouton Done, en haut droite de lcran, afin de valider vos changements. Linterface du Simulateur est dsormais en franais. Et si un utilisateur azerty en valait deux ?

Chapitre 3

la dcouverte du SDK de liPhone

65

Par ailleurs, nhsitez pas charger un autre firmware de liPhone en droulant le menu suprieur du Simulateur, dans la barre doutils de Mac OS X. Vous pouvez ainsi "muler" plusieurs configurations de liPhone et vous assurer du rendu de votre projet dans de multiples cas de figure. Un argument idal faire valoir dans la description de votre application sous lApp Store.

Effectuer un changement, recompiler le projet et vrifier le rsultat dans le Simulateur


Afin dillustrer une raction qui vous paratra rapidement bien naturelle, plaons-nous dans le contexte suivant : alors que vous tiez si fier de votre interface graphique ou du comportement de votre application, le test travers le Simulateur diPhone a rvl un gros problme. Vous devez le corriger au plus vite. Si le dfaut concerne linterface graphique, ouvrez nouveau le fichier BienvenueViewController.xib, en effectuant un double-clic sur son icne, dans le volet gauche de Xcode. Vous basculez ainsi vers Interface Builder et vous retrouvez la fentre View que nous avons mise en place auparavant. Effectuez un changement, en lanant ventuellement loutil Inspector aprs avoir cliqu sur lobjet concern, puis sauvegardez le rsultat en droulant le menu File et en cliquant sur Save. De retour sous Xcode, droulez nouveau le menu Build et cliquez sur Build and Run. Le Simulateur diPhone apparat au premier plan et vous visualisez immdiatement le changement. En fonction de la diagonale de votre cran, il peut tre trs intressant dagencer les fentres de Xcode, dInterface Builder et du Simulateur diPhone selon vos propres gots, afin de basculer rapidement de lune lautre. Comme vous lavez constat, il sagit en effet de trois applications distinctes, dont Xcode reprsente la "passerelle. Si ces trois outils de dveloppement ne sont pas particulirement gourmands en ressources dans le cadre de la cration dune application pour iPhone, leur manipulation change du tout au tout entre un iMac 24 pouces et un MacBook Pro 13 pouces. Profitez au mieux du large espace qui vous est accord sur les modles hauts de gamme du catalogue dApple : vous acclrez dautant plus la phase de dveloppement ! Comme nous le verrons par la suite, il sera trs intressant de laisser la fentre du dbogueur visible pour vrifier les performances et le comportement de votre application, tout en manipulant le Simulateur diPhone.

66

Dveloppez des applications originales pour iPhone et iPod Touch

Figure 3.17 Nhsitez pas agencer au mieux les fentres de vos outils de dveloppement, en particulier si vous disposez dune rsolution trs large comme sur les iMac ou les MacBook Pro 17 pouces.

Ajouter licne de votre application


Vous le constatez en manipulant le Simulateur diPhone : en cliquant sur le bouton principal afin de revenir au menu gnral, votre application "Bienvenue" ne dispose que dune icne blanche. Ce nest pas trs vendeur, nest-ce pas ? Mme si vous nenvisagez pas dentamer une carrire de dveloppeur professionnel, vous avez tout intrt personnaliser cette icne. Non seulement le procd est simple et confre un certain cachet votre application, mais il nous permet galement dillustrer la modification de la liste des proprits associe aux projets pour iPhone. Dans votre diteur graphique ftiche, crez un nouveau fichier de 57 57 pixels. Contrairement ce que lcran principal de liPhone laisse penser, vous navez pas besoin de prparer vous-mme un rectangle aux bords arrondis avec un fin liser de lumire en son centre. Ces lgres retouches cosmtiques sont directement appliques votre icne carre, afin duniformiser les icnes de toutes les applications. Un guide exhaustif sur la cration dune icne et le message "implicite" quelle vhicule dans lesprit des utilisateurs dpasse largement le cadre de cet ouvrage. Si vous manquez dinspiration, commencez par parcourir les icnes de vos applications prfres. quoi tient leur succs ? Le plus souvent, il sagit dun subtil jeu de suggestion et dvocation, en restant le plus sobre possible. Licne de Facebook, par exemple, sinscrit sur le fond bleu caractristique et ne reprend que la premire lettre du service : tout le monde comprend de quoi il sagit. Si vous ne jouissez pas encore de la mme popularit, pas de panique ; il vous suffit pour linstant de rester simple et de rflchir au message principal que vhicule votre application. Partez dun fond uni et ajoutez un simple titre dans une police trs lisible. vitez dimporter de trop grands lments ou de vritables photographies, dont la lecture serait pnalise ces faibles dimensions.

Chapitre 3

la dcouverte du SDK de liPhone

67

Figure 3.18 La cration de licne de lapplication sous Adobe Photoshop.

Vous tes fin prt ? Ouvrez une fentre du Finder et dplacez directement votre icne vers le rpertoire Resources de Xcode correspondant votre projet. Vous avez galement la possibilit de drouler le menu Project de Xcode puis de cliquer sur Add to project et de slectionner votre icne dans le navigateur. Loutil vous demande ensuite sil doit copier le fichier dans le rpertoire de votre projet ou sil doit se contenter dune rfrence au fichier dorigine. Cochez la case Copy items into destination groups folder, puis cliquez sur le bouton Add ; vous disposez ainsi dune copie associe au projet et vous navez pas besoin de vrifier si le fichier est toujours prsent dans un autre rpertoire de votre disque dur. Le nom de votre image importe peu : nous allons la dfinir dans la liste de proprits. Toujours dans le rpertoire Resources de votre projet Xcode, slectionnez le fichier Info. plist. Son contenu apparat sous la forme dun tableau, sur la droite de lcran. Parmi les champs disponibles, slectionnez Icon file et effectuez un double-clic sur le champ vierge sa droite. Saisissez alors le nom de votre icne (icone.png par exemple) et pressez la touche Entre pour valider (voir Figure 3.19). Nous aurons tout le loisir de complter les autres champs par la suite : sachez quils dfinissent entre autres le nom du dveloppeur, la version de lapplication ou sa langue dorigine. Licne est dsormais associe notre application : sauvegardez le projet, puis droulez le menu Build et cliquez sur Build and Run. Le Simulateur diPhone apparat nouveau lcran : pressez la touche centrale afin de revenir au menu gnral ; lapplication "Bienvenue" dispose dsormais de sa propre icne (voir Figure 3.20). Vous constatez au passage que votre icne carre revt maintenant des coins arrondis et quun lger effet de surbrillance sapplique sur sa partie suprieure. Il est donc inutile dessayer de mimer un tel effet avec

68

Dveloppez des applications originales pour iPhone et iPod Touch

votre logiciel de cration graphique ; le compilateur de Xcode sen charge automatiquement votre place.
Figure 3.19 Lajout de licne notre projet, sous Xcode.

Figure 3.20 Notre application dispose dsormais de sa propre icne et on lidentifie au premier coup dil.

Pour aller plus loin : importer des projets officiels dApple


Notre premier exemple est dsormais fin prt et fera office dcran de bienvenue pour notre projet de plus grande envergure, que nous complterons au chapitre suivant. Mais avant daller plus loin, que diriez-vous de tester des applications professionnelles, disponibles sur le Dev Center dApple ? Cest loccasion idale de vous familiariser avec lagencement de nombreux fichiers au sein de Xcode et surtout de dcouvrir les outils de dbogage votre disposition. Pour cela, vous devez disposer dun compte Apple ; il sagit gnralement du

Chapitre 3

la dcouverte du SDK de liPhone

69

compte que vous utilisez dores et dj sous iTunes ou lors du tlchargement du SDK de liPhone. Avec votre navigateur Internet prfr, rendez-vous ladresse http://developer.apple.com/ iphone, puis cliquez sur le lien Sample Code, la section Resources for iPhone OS 3.1. Le Centre de dveloppement officiel de liPhone comprend de nombreuses vidos, des articles techniques ainsi que le guide de programmation exhaustif, o toutes les classes sont dcortiques la loupe. Sur la colonne de gauche, cliquez nouveau sur le lien Sample Code. Vous tes alors invit saisir le prcieux ssame associ votre compte Apple. Une longue liste comptant plusieurs centaines de projets complets apparat lcran. Parcourez les derniers ajouts et cliquez ventuellement sur les colonnes "Topic" et "Framework" afin de choisir un projet spcifique, relatif aux bibliothques graphiques ou audio par exemple. Vous pouvez galement utiliser le moteur de recherche, en haut de la liste, pour slectionner une application prcise. Cliquez enfin sur llment de votre choix. Dans notre exemple, nous choisissons BubbleLevel, une application gratuite faisant office de niveau bulle. Pour chaque projet, le centre de dveloppement vous indique le framework principalement concern du SDK : ici, il sagit dUIKit et cet exemple sattarde donc essentiellement sur linterface graphique. Sur la nouvelle page qui apparat, cliquez sur le lien Download Sample Code. Le tlchargement dune archive au format .zip dmarre. Au passage, vous remarquez la version de liPhone OS concerne par cette application. Dans cet exemple, il sagit de la version 2.0 et vous devrez ainsi modifier les proprits de Xcode pour pouser un tel systme. Dans la fentre principale de lapplication, droulez le menu Simulator et choisissez Simulator iPhone OS 2.0.
Figure 3.21 La liste des projets gratuits sur le Dev Center dApple.

lissue du tlchargement, effectuez un double-clic sur larchive pour lextraire. Retournez enfin sur Xcode, droulez le menu File et cliquez sur Open. Vous devez ensuite slec-

70

Dveloppez des applications originales pour iPhone et iPod Touch

tionner le fichier associ au projet : il est prsent dans larchive que vous avez tlcharge et sachve par lextension .xcodeproj (BubbleLevel.xcodeproj dans notre exemple).
Figure 3.22 Le projet de "niveau bulle" charg dans Xcode : vous remarquez le nombre important de fichiers et de classes qui lui sont associs.

Vous retrouvez ainsi la disposition habituelle de Xcode et tous les groupes et les fichiers correspondants figurent dans le volet gauche de lapplication. Premier constat : le rpertoire Resources est beaucoup plus toff que dans notre premier exemple et vous constatez ainsi quil est possible de crer autant de sous-dossiers que ncessaire. Vous dcouvrez galement que de nombreuses classes personnalises ont t ajoutes par lauteur du projet, comme SoundEffect.h ou CalibrationView.h dans cet exemple de niveau bulle. Enfin, des frameworks indits sont imports, en fonction des besoins de chaque application : ici, cest AudioToolbox.framework qui est charg au-del des frameworks habituels.

Dcouvrir les outils de dbogage


la manire dun projet que vous auriez cr vous-mme, vous avez parfaitement la possibilit de compiler cette application dexemple : droulez le menu Build et cliquez sur Build and Run afin de lancer le Simulateur diPhone. Mieux encore : compte tenu du nombre important de variables, de classes et de ressources exploites dans ce projet dexemple, pourquoi nen profiterions-nous pas pour parcourir les outils de dbogage de Xcode ? Droulez le menu Build, puis cliquez sur Build and Debug afin de lancer cet outil principal. Un "enregistrement" de toutes les interactions et des entres/sorties de lutilisateur dbute alors. Lorsque vous fermez le Simulateur diPhone, un compte-rendu exhaustif vous est prsent. Vous constatez dailleurs que la barre dtat de Xcode indique "GDB:Running", ce qui indique que le dbogueur est en cours denregistremen (voir Figure 3.23). lissue de vos manipulations, droulez le menu Run de Xcode et cliquez sur Debugger. Une nouvelle fentre apparat au premier plan et dresse la liste de toutes les variables, des

Chapitre 3

la dcouverte du SDK de liPhone

71

classes et des objets qui ont volu au fil de lexcution de lapplication. Certes, le projet cr par le Dev Center dApple nexploite pas ncessairement des objets que vous connaissez dj, mais vous dcouvrez ainsi quil est possible de valider le comportement de nimporte quelle application travers ce puissant outil de dbogage.
Figure 3.23 Lexcution du programme dexemple dans le Simulateur diPhone.

Figure 3.24 Le dbogueur principal de Xcode : les objets chargs figurent en bas gauche de la fentre.

Il existe de nombreux outils supplmentaires visant valider un aspect spcifique dune application pour iPhone. Droulez le menu Run de Xcode puis cliquez sur Start with Performance Tool. Parmi les outils disponibles, essayez en priorit Activity Monitor (moniteur dactivit), Leaks (fuites mmoire) ou Object Allocations (chargement et cration des instances de classes et dobjets).

72

Dveloppez des applications originales pour iPhone et iPod Touch

Figure 3.25 Parmi les outils de dbogage, lActivity Monitor vous renseigne sur la charge du systme quengendre votre application.

sa manire, chaque outil vous renseigne sur la complexit de votre programme et sur les ventuelles erreurs que vous avez commises. Nous aurons tout le loisir de les exploiter au maximum travers nos projets plus ambitieux, ds le chapitre suivant !
Figure 3.26 Loutil Leaks indique clairement les failles de votre application au niveau de la mmoire : rappelez-vous que vous travaillez sur un terminal relativement limit et que vous ne disposez pas ncessairement de ressources infinies !

En route vers le dialogue avec lutilisateur


Vous matrisez dsormais les lments essentiels du SDK et vous connaissez sur le bout des doigts les coulisses de nimporte quelle application pour iPhone. Xcode, Interface Builder et le Simulateur diPhone sont les trois pierres angulaires du dveloppement ; vous savez maintenant comment basculer rapidement dun lment lautre, en profitant de toutes les ressources mises votre disposition. Continuez de tester des projets supplmentaires depuis le Dev Center dApple : ils constituent autant dexercices pour vrifier vos connaissances et mettre en application tous les enseignements de ce chapitre. Testez ventuellement les outils de dbogage ; vous constaterez que les rsultats diffrent largement en fonction du

Chapitre 3

la dcouverte du SDK de liPhone

73

contexte et que les applications les plus ambitieuses consomment des ressources hautement plus importantes que notre modeste exemple. Inspirons-nous de ces augustes dveloppeurs et augmentons dun niveau notre parcours dObjective-C et de Cocoa Touch. Si notre premier projet est bien fonctionnel et constitue une premire "vitrine" de vos possibilits, il nautorise pour linstant aucune interaction avec lutilisateur. Cest pourtant lun des plus grands intrts des applications pour iPhone et iPod Touch ; conservez les fichiers que vous avez dvelopps jusqu prsent : ils vont servir douverture notre premire application complte, un quiz visant tester les connaissances des utilisateurs.

4
Interactions avec vos applications
Au sommaire de ce chapitre
vv vv vv vv vv vv

Le schma Modle-Vue-Contrleur Dvelopper la vue et associer des actions aux contrles Les accesseurs et les mutateurs Le dlgu de lapplication Finaliser notre projet de quiz Pour aller plus loin

76

Dveloppez des applications originales pour iPhone et iPod Touch

lissue de notre premire exploration dObjective-C et des outils composant le kit de dveloppement de liPhone, nous avons abouti une application parfaitement fonctionnelle. Son icne figure sur lcran principal du terminal dApple et vous pouvez la lancer pour afficher notre message de bienvenue. Mais voil : quoi sert une application aussi statique, qui naccepte pas la moindre interaction de la part de lutilisateur ? Vous lavez constat travers votre propre exprience : les applications les plus russies se manipulent aux doigts et vous offrent un contrle riche, travers une srie de boutons et dlments personnaliss qui dclenchent des actions. Lergonomie de liPhone offre un accs immdiat linformation et vous permet de plonger littralement dans tout type dapplications ; limpressionnante diversit des contrles multi-touch participe ainsi largement au succs de lApp Store et au charme des applications les plus originales. Mieux encore : cest un formidable terrain de jeux pour les dveloppeurs, dont la crativit et limagination ne sont plus brids ! Il est de leur ressort dinventer tout type dinteractions face un projet, non seulement pour faciliter son utilisation mais aussi pour accrotre son intrt au quotidien. Reprenons notre exemple de niveau bulles (BubbleLevel), introduit au chapitre prcdent. Son principe est simple : afficher lcran une valeur, correspondant linclinaison de liPhone sur un plan. Pour aboutir ce rsultat, on peut envisager de multiples solutions. Outre le calcul de linclinaison proprement parler, on pourrait imaginer un simple bouton que lutilisateur presserait pour dcouvrir cette valeur. Cette mthode nest toutefois ni trs originale ni ergonomique ; elle oblige lutilisateur valider un niveau darborescence supplmentaire, aprs avoir lanc lapplication, pour obtenir linformation dsire. La solution retenue privilgie donc la simplicit et laccs immdiat au rsultat : la valeur de linclinaison saffiche en permanence dans un libell et on peut ainsi relever toutes les variations en fonction du dplacement de liPhone. Il aura suffi au dveloppeur "dhabiller" ce libell autour dune interface qui mime le comportement dun vritable niveau bulles pour rendre linterface plus ergonomique et intuitive.
Figure 4.1 Comparez linterface simple et pure du niveau bulles avec celle, beaucoup plus complexe, de cette liste de tches personnalises.

Chapitre 4

Interactions avec vos applications

77

Dans le cadre de vos propres projets, vous devez travailler de la mme manire. En revenant au bon vieux papier et crayon, posez-vous sans cesse les questions : "les contrles de mon application sont-ils simples et immdiatement comprhensibles par tous ?" et "existe-t-il une manire plus rapide daboutir au mme rsultat, en vitant lutilisateur de se perdre dans les menus ?". Le dialogue homme-machine et la cration dinterfaces graphiques sont deux sujets prpondrants depuis les balbutiements de la programmation informatique. Si les interactions ont volu et que les contrles revtent aujourdhui dinnombrables aspects, le fond du problme est rest sensiblement le mme : vous devez apprendre servir au mieux lutilisateur en lui offrant un accs immdiat et intuitif aux mcanismes qui dgagent tout le potentiel de votre application. Face liPhone, un tel enjeu est particulirement enthousiasmant. Comme vous lavez constat travers votre premire dcouverte dInterface Builder, les dveloppeurs disposent dun trs large arsenal de contrles (boutons, onglets, ascenseurs, roulettes) permettant dinteragir avec lutilisateur et liPhone offre lui-mme un support trs souple pour rinventer lergonomie de votre application. Certains utilitaires vendus sur lApp Store sarticulent ainsi autour de contrles jamais vus dans le dveloppement logiciel et vous permettent de valider une action en "secouant" le tlphone, par exemple. Nous allons explorer toutes ces possibilits autour dun exemple concret : le dveloppement dun petit quiz auquel les utilisateurs pourront se prter entre deux stations de mtro.
Figure 4.2 Linterface principale de notre quiz choix multiple, avec ses libells et ses quatre boutons de rponse.

78

Dveloppez des applications originales pour iPhone et iPod Touch

Le schma Modle-Vue-Contrleur
Mais avant de passer la pratique, un petit point thorique simpose. Le dveloppement pour iPhone sinscrit dans une logique Modle-Vue-Contrleur (MVC), un clbre type darchitecture qui se dcline de trs nombreux langages de programmation (C++, Java, Perl, PHP, Python, Ruby). Il sagit dune mthode de conception visant organiser linterface homme-machine dune application. Elle la divise en trois domaines distincts, qui se rpondent en permanence :
vv

Le modle correspond aux donnes vhicules par lapplication. Il assure leur gestion et offre des mthodes pour les rcuprer, les insrer ou les modifier sans se proccuper de leur prsentation. Dans le cas de liPhone, il sagit de lensemble des classes contenant les donnes de votre application. La vue regroupe tous les lments graphiques (fentres, contrleurs, etc.) avec lesquels lutilisateur interagit. Son rle principal est de prsenter les donnes renvoyes par le modle, sans effectuer le moindre traitement. La vue met ainsi en place linterface soutenant les actions de lutilisateur en les associant des vnements : ces derniers sont alors envoys au contrleur. Le contrleur correspond la gestion des vnements et des mcanismes qui rgissent votre application : il combine le modle et la vue en les mettant jour afin de grer les interactions de lutilisateur. Si une action implique un changement de donnes, le contrleur demande cette modification au modle et avertit ensuite la vue que les donnes ont chang pour quelle se mette jour.

vv

vv

Lintrt dune telle architecture est de sparer trs distinctement ces trois "facettes" du dveloppement, en individualisant les donnes, la prsentation et les traitements. Vous pouvez ainsi plus facilement rexploiter des portions de codes ou mettre jour votre application. Par exemple, un objet contenant un bouton ne doit pas, en thorie, intgrer le moindre code permettant de grer les donnes une fois quil a t press. linverse, le code qui gre un enregistrement dans une base de donnes ne doit pas se proccuper de laffichage du rsultat. Dans le cas de notre quiz dexemple, le modle correspond lensemble des questions et des rponses, la vue contient les boutons que presse lutilisateur et le contrleur vrifie la pertinence des rponses en affichant ventuellement la question suivante en cas de succsLes trois traitements sont nettement spars et on peut envisager de remettre jour la srie de questions ou la prsentation de lapplication, sans rcrire entirement notre code source.

Chapitre 4

Interactions avec vos applications

79

On doit ce type de mthode logique Trygve Reenskaug1, qui la mise au point en 1979 dans les laboratoires de recherche Xerox PARC. Plus de trente ans plus tard, cette mthode prsente toujours le mme intrt dans le cadre du dveloppement avec Cocoa Touch. Vous crez essentiellement les vues laide dInterface Builder et vous dveloppez vos modles travers les classes Objective-C rdiges dans Xcode. Les contrleurs correspondent galement des sries de classes : il sagit le plus souvent de sous-classes de contrleurs gnriques compris dans le framework UIKit, comme UIViewController par exemple. L encore, Apple a pens aux dveloppeurs et le SDK fourmille de classes prtes lemploi qui vous vitent de rinventer en permanence la roue.
Figure 4.3 Les interactions entre le modle, la vue et le contrleur au sein de larchitecture MVC.

Le concept vous parat encore un peu abstrait ? Pas de panique : nous aurons tout le loisir dillustrer toutes les ramifications de cette mthode autour dexemples concrets. Sachez par ailleurs quInterface Builder facilite la prise en charge de cette architecture, en vous permettant de relier de manire intuitive votre contrleur la vue et au modle. Puisque le dveloppement dapplications pour iPhone implique des mises jour rgulires afin de contenter votre public, vous avez tout intrt souscrire une telle mthode : non seulement votre code gagne en clart, mais vous avez aussi la possibilit de mettre jour plus facilement votre application.

1. N en 1930, Trygve Reenskaug est lune des figures de proue de la POO : non seulement il a mis au point le motif de conception MVC, mais il a galement dvelopp une srie doutils de dveloppement autour de ce concept et activement particip llaboration du langage de modlisation UML. Sa page personnelle est accessible ladresse http://folk.uio.no/trygver.

80

Dveloppez des applications originales pour iPhone et iPod Touch

Dvelopper la vue et associer des actions aux contrles


Mme si notre premier essai au chapitre prcdent stait conclu par un succs, nous avons tout intrt crer un nouveau projet pour dvelopper notre quiz. Comme vous le savez dj, la cration dun nouveau projet sous Xcode enregistre automatiquement une srie de fichiers autour du nom que vous avez choisi ; vous tes ainsi assur disoler vos nouveaux lments dans une structure unique, qui reflte parfaitement votre projet et dont les classes de base sont prpares votre place.
Figure 4.4 La cration de notre projet de Quiz sous Xcode.

Lancez Xcode, droulez le menu File, puis slectionnez New Project et choisissez nouveau le modle "View-Based Application". Saisissez "Quiz" en guise de nom de projet et validez. Vous dcouvrez sur le volet gauche de Xcode une srie de sous-dossiers et de fichiers prts lemploi. Droulez en premier lieu le dossier Classes o figurent quatre fichiers essentiels : QuizAppDelegate.h et .m, puis QuizViewController.h et .m. Commencez par cliquer sur QuizViewController.h afin de dcouvrir son contenu dans la fentre principale de Xcode :
# import <UIKit/UIKit.h> @ interface QuizViewController : UIViewController { } @end

Selon la nomenclature de lObjective-C, QuizViewController est ici une sous-classe dUIViewController, lune des classes gnriques visant dfinir le comportement du contrleur de votre application. La sous-classe ne comprend pas pour linstant le moindre traitement ; il vous reste dfinir les actions de votre application entre la srie daccolades.

Chapitre 4

Interactions avec vos applications

81

Rflchissons plus en dtails notre projet. Dans le cadre dun quiz, nous souhaitons prsenter lutilisateur une question et une srie de rponses possibles. Toutes ces rponses sont reprsentes visuellement par quatre boutons, la manire dun clbre jeu tlvis. Lutilisateur indique sa rponse en pressant lun de ces boutons : notre contrleur doit donc interagir avec ces lments, en dduire la rponse du candidat et vrifier si elle est bien correcte. Vous lavez dj devin : on disposera les boutons sur linterface laide dInterface Builder, en travaillant sur le fichier nib. La sous-classe QuizViewController devra pointer vers ces objets afin de relever le choix de lutilisateur et de mettre jour la vue en consquence. Ce concept de pointeur, absolument essentiel dans la programmation oriente objet, revt deux aspects en Objective-C : les outlets et les actions.
Figure 4.5 Les fichiers associs par dfaut notre projet, sous Xcode.

Le concept doutlets et dactions


Les outlets (littralement des "issues" ou des "sorties") sont des pointeurs qui servent dsigner un objet figurant dans le nib. Il sagit dun simple lien cr entre le contrleur et lobjet en question. Imaginons que lon ajoute sous Interface Builder un simple libell contenant le score du joueur, par exemple. Sil rpond correctement une question, on souhaite mettre jour ce libell : en crant un outlet pointant vers cet objet, on est en mesure de modifier depuis le code source la valeur quil affiche. linverse, les lments composant linterface du fichier nib peuvent dclencher des mthodes spcifiques dans notre classe contrleur. On parle alors dactions pour dsigner ce type de mcanismes. Par exemple, vous pouvez indiquer sous Interface Builder que lorsque lutilisateur presse un certain bouton, on excute une mthode bien prcise de notre code source. Les outlets et les actions se rpondent donc mutuellement et constituent le principal moyen de dvelopper une application dans le cadre dune architecture MVC.

82

Dveloppez des applications originales pour iPhone et iPod Touch

Envisageons un exemple de plus grande ampleur, issu du monde de la bureautique, pour synthtiser cette premire approche. Un traitement de texte "coute" en permanence les interactions de lutilisateur. Il associe une action au bouton Quitter, FermerApplication par exemple. En dveloppant linterface du traitement de texte, on a cr une liaison entre ce bouton et le contrleur de lapplication. Ce dernier contient la mthode FermerApplication qui effectue une srie de traitements successifs : lenregistrement des paramtres de lutilisateur puis la fermeture du logiciel. linverse, le code du contrleur a besoin "dcouter" les objets prsents sur linterface de lapplication, comme une case cocher ou un champ de texte par exemple. Pour vrifier quun champ est rempli, il faut y faire rfrence depuis le code du contrleur : on cre ainsi un outlet dans le contrleur, ChampTexte par exemple. Cette fois, la liaison seffectue du contrleur vers lobjet dinterface ; tout moment, on est en mesure de relever la valeur du champ de texte depuis le code du contrleur. Cet exemple illustre aussi lintrt de la mthode MVC : on peut librement modifier lallure du bouton Quitter sans retoucher les traitements qui lui sont associs ou linverse ! Lapplication Facebook pour liPhone sinscrit parfaitement dans ce schma. Les diffrents boutons de linterface ont volu au gr des mises jour du service web. Dans ses premires versions, lapplication ne permettait que de changer le statut de son compte Facebook. Elle senrichit aujourdhui de nombreux contrleurs supplmentaires, qui visent ajouter des photos personnelles ou consulter le statut de ses amis directs (voir Figure 4.6).
Figure 4.6 Linterface de lapplication Facebook fourmille de contrles : ils dclenchent des vnements, pris en charge par la logique du contrleur de lapplication.

Le motif de conception MVC a permis aux dveloppeurs dajouter progressivement ces contrleurs et de les lier de nouvelles actions, sans pour autant rcrire la logique fondamentale de lapplication, comme lauthentification auprs des serveurs de Facebook par exemple.

Chapitre 4

Interactions avec vos applications

83

En Objective-C, on dfinit un outlet de la manire suivante :


IBOutlet UIButton *monBouton; IBOutlet UILabel *monLibelle;

Ici, les variables dinstance monBouton et monLibelle pointent directement vers des objets appartenant respectivement aux classes UIButton et UILabel, que lon aura disposs sur la vue laide dInterface Builder. Comme vous le verrez par la suite, la cration de ce type de liaisons est trs intuitive : il vous suffit de manipuler la souris pour voir apparatre toutes les possibilits associes vos objets dans Interface Builder. Les actions se dfinissent dans la classe du contrleur. Elles visent "couter" les interactions de lutilisateur et dclencher des mcanismes. Elles correspondent donc des mthodes que lon dfinit laide du mot-cl IBAction :
- (IBAction)maMethode:(id)sender;

Le mot-cl IBAction indique que la mthode maMethode ne va pas renvoyer la moindre valeur et quelle effectue un traitement ( la manire de void, dans dautres langages de programmation). Comme le suggre son prfixe, IBAction indique galement que la mthode associe est accessible depuis Interface Builder. Il est possible de passer des arguments la mthode et dindiquer le nom de lobjet qui a dclench laction : cest le rle de la seconde portion de cette dfinition, (id)sender. Par exemple, vous pouvez imaginer quun bouton spcifique a t press et quil a lanc une action : cet argument final vous sert reprer le bouton en question et personnaliser ventuellement le traitement qui suit dans le code du contrleur (voir Figure 4.7).
Figure 4.7 Le clavier virtuel de cette application se dclenche en pressant le champ de texte. Une fois la saisie acheve, l'utilisateur renvoie une action vers le contrleur de l'application.

84

Dveloppez des applications originales pour iPhone et iPod Touch

Si vous navez pas besoin de connatre lobjet qui a dclench laction, vous pouvez simplifier la dclaration et vous passer de cette portion de code. Ainsi, le code suivant fonctionne parfaitement :
- (IBAction)maMethode;

Comme vous le constaterez en testant les diffrents projets gratuits disponibles sur le Centre de dveloppement dApple (reportez-vous au chapitre prcdent), de nombreux dveloppeurs ont pris lhabitude de mentionner cet argument sender sans parfois lutiliser en retour. Il sagit dun lointain hritage de Cocoa, o les mthodes associes aux actions devaient imprativement prsenter un tel argument. Sil sagit de votre premire exprience de programmation avec Cocoa Touch, prenez plutt lhabitude de ne mentionner cet argument que lorsque cest ncessaire : votre code sera dautant plus facile dchiffrer.

Associer les outlets et les actions au projet


Revenons la fentre de Xcode. Dans notre premier exemple, nous allons crer le squelette de notre quiz pour iPhone. Outre un titre et des lments graphiques visant habiller linterface, cette dernire comprend quatre boutons et deux champs de texte. Il sagit respectivement des quatre possibilits de rponses, de la question et du rsultat affich par lapplication ("Bonne rponse" et "Dommage ! Vous vous tes tromps !"). Les actions sont associes aux boutons et dclenchent une mthode qui vrifie la rponse du joueur. Les outlets pointent vers les champs de texte afin de les mettre jour partir du code du contrleur : on affiche ainsi le rsultat de chaque question. Ouvrez nouveau le fichier QuizViewController.h et compltez-le en saisissant les lignes qui apparaissent en gras :
#import <UIKit/UIKit.h> @interface QuizViewController : UIViewController {
IBOutlet UILabel *reponseTexte; // un simple champ de texte } @property (retain, nonatomic) UILabel *reponseTexte; //dclaration des prorits - (IBAction)choixReponse:(id)sender; // dclaration de laction

@end

Nous avons tout dabord dfini loutlet reponseTexte pointant vers un simple champ de texte (UILabel). La ligne dbutant par @property dclare les proprits de cet lment. Concrtement, le compilateur va automatiquement gnrer plusieurs lignes de code permettant daccder lobjet point : les attributs retain et nonatomic correspondent au type de

Chapitre 4

Interactions avec vos applications

85

lecture de lobjet et sont indirectement lis la gestion de la mmoire. Nous reviendrons de manire plus dtaille sur ce concept si important dans le cadre limit de liPhone, mais retenez quil sagit ici de la nomenclature de base que vous utiliserez dans la dclaration de quasiment toutes vos proprits. Par dfaut, le code gnr par le compilateur pour les proprits est accessible depuis plusieurs tches la fois. Le compilateur dfinit ainsi un mcanisme de synchronisation visant mettre en permanence jour les proprits et grer leur accs. Lattribut nonatomic indique que vous souhaitez vous passer dun tel procd, souvent superflu dans le cadre du dveloppement pour iPhone. Vous amliorez ainsi les performances de votre application. Lattribut retain indique que lobjet assign la proprit doit tre "retenu" : la rfrence lobjet nest ainsi jamais perdue au cours du traitement. Pour des applications plus complexes qui exigent des ressources considrables, il est primordial de "librer" ce type de rfrences lorsquelles deviennent superflues afin de dgager de la mmoire. la dernire ligne du code, nous dclarons laction choixReponse que lon va associer aux diffrents boutons permettant lutilisateur de rpondre la question du quiz (voir Figure 4.8).
Figure 4.8 La modification de linterface du contrleur de notre application, sous Xcode.

Profitez de la frappe prdictive de Xcode Il sagit ici des toutes premires lignes de code en Objective-C que vous saisissez dans la fentre de Xcode. Comme vous le constatez, lditeur est trs souple et intuitif : il complte naturellement les mots-cls, les classes et les attributs que vous saisissez en vous proposant ventuellement des suggestions en cours de frappe. Cest un procd particulirement utile lorsque vous multipliez les variables et que vous dfinissez un trs grand nombre dobjets. Dans notre exemple, le nom de notre outlet est automatiquement rfrenc : lorsque vous devez nouveau le saisir au moment de dclarer ses proprits, laissez Xcode le complter automatiquement. Vous avez ainsi lassurance de ne pas vous tromper et vous ne commet-

86

Dveloppez des applications originales pour iPhone et iPod Touch

tez pas lerreur de saisir ReponseBouton au lieu de BoutonReponse, par exemple. Par ailleurs, nhsitez pas profiter de la coloration syntaxique en droulant le menu View, puis en cliquant sur Syntax Coloring et sur Objective-C++. Vous noterez au passage que Xcode supporte la coloration syntaxique de plusieurs dizaines de langages. Vous pouvez ainsi lexploiter pour vos prochains scripts PHP, JavaScript ou Perl ! Figure 4.9 Profitez des suggestions de Xcode pour saisir rapidement vos instructions et ne pas vous tromper dans la dclaration de vos outlets ou actions.

Passons prsent au fichier dimplmentation de notre classe, QuizViewController.m. Slectionnez-le dans la fentre principale de votre projet et consultez son tat par dfaut dans Xcode :
#import "quizViewController.h" @implementation QuizViewController /* // The designated initializer. Override to perform setup that is required // before the view is loaded. - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle * nibBundleOrNil { if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) { // Custom initialization } return self; } */ /* // Implement loadView to create a view hierarchy programmatically, //without //using a nib. - (void)loadView { } */ /* // Implement viewDidLoad to do additional setup after loading the view,

Chapitre 4

Interactions avec vos applications

87

//typically from a nib. - (void)viewDidLoad { [super viewDidLoad]; } */ /* // Override to allow orientations other than the default portrait // orientation. - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation interfaceOrientation { // Return YES for supported orientations return (interfaceOrientation == UIInterfaceOrientationPortrait); } */ - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesn't // have a superview // Release anything that's not essential, such as cached data } - (void)dealloc { [super dealloc]; } @end

Comme vous le constatez, ce fichier se contente dimporter le contrleur de notre projet (QuizViewController.h) et dfinit une srie de mthodes commentes, figurant entre les signes /* et */. Elles prvoient des traitements spcifiques que lon retrouve dans la plupart des applications, comme la prparation de certaines actions aprs avoir charg la vue principale ou la gestion de lautorotation de laffichage.
Figure 4.10 Limplmentation du contrleur de notre projet, avant sa modification.

88

Dveloppez des applications originales pour iPhone et iPod Touch

Nous nen avons pas besoin pour le moment : vous pouvez les supprimer. En revanche, nous avons besoin de dfinir laction associe aux boutons de rponse, choixReponse. En guise de premier essai, nous allons nous contenter de relever le titre associ chaque bouton et de lafficher dans le champ de texte reponseTexte. Nous illustrons ainsi le comportement essentiel de notre application : ragir aux choix de lutilisateur et entreprendre un traitement en consquence. Modifiez le fichier QuizViewController.m en ajoutant les lignes figurant en gras afin quil contienne le code suivant (nous vous en expliquerons le sens juste aprs) :
#import "QuizViewController.h" @implementation QuizViewController @synthesize reponseTexte; -(IBAction)choixReponse:(id)sender { NSString *reponse = [sender titleForState:UIControlStateNormal]; NSString *nouveauStatut = [[NSString alloc] initWithFormat:@"Vous avez
choisi la rponse : %@.", reponse]; reponseTexte.text = nouveauStatut; [nouveauStatut release];

} - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation) interfaceOrientation { // Return YES for supported orientations return (interfaceOrientation == UIInterfaceOrientationPortrait); } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesn't // have a superview // Release anything that's not essential, such as cached data } - (void)dealloc {
[reponseTexte release];

[super dealloc]; } @end

Saisir des caractres spciaux Que les puristes et les frus de la marque la pomme nous pardonnent : nous devons prendre le temps dexposer deux raccourcis-clavier essentiels pour saisir du code dans votre projet. Comme vous le constatez, les dclarations de classes et de mthodes sont toujours encadres par des accolades linstar de nombreux langages de programmation. Lenvoi de messages seffectue laide de crochets. Si vous disposez du clavier standard livr avec liMac, ces diffrents caractres ny figurent pas ! Pas de panique : vous allez rapidement adopter des raccourcis-clavier. Vous saisissez des accolades en pressant simultanment les touches Alt+( et Alt+). Pour les crochets, appuyez sur les touches Alt+Maj+( et Alt+Maj+). L encore, profitez de la frappe prdictive de Xcode pour complter automatiquement vos lignes de code et vrifier que les dclarations sont bien termines.

Chapitre 4

Interactions avec vos applications

89

Figure 4.11 Nous avons redfini la logique interne du contrleur de notre application.

Pour lheure, notre code est encore relativement simple et accessible. Nous commenons le fichier dimplmentation par la ligne :
@synthesize reponseTexte;

Cette simple ligne demande au compilateur de crer automatiquement les accesseurs et les mutateurs notre place dans limplmentation de la classe QuizViewController. Nous y reviendrons dans un instant, mais retenez quil sagit dun prcieux gain de temps pour accder en toute simplicit aux proprits de lobjet reponseTexte et interagir avec lui. Deux mthodes "invisibles" sont donc cres en arrire-plan : reponseTexte et setReponseTexte. Le code de la mthode associe laction choixReponse vient ensuite. Il est dclench ds que lutilisateur presse le moindre bouton apparaissant dans linterface :
-(IBAction)choixReponse:(id)sender { NSString *reponse = [sender titleForState:UIControlStateNormal]; NSString *nouveauStatut = [[NSString alloc] initWithFormat:@"Vous avez choisi la rponse : %@.", reponse]; reponseTexte.text = nouveauStatut; [nouveauStatut release]; }

En Objective-C, les chanes de caractres sont encapsules dans des objets NSString vous remarquez au passage le lien de parent avec NeXTStep, repris dans le prfixe de ces objets ! On dfinit ici deux objets de ce type : reponse, contenant le titre du bouton press, et nouveauStatut qui correspond au formatage de la rponse afficher dans lun des libells de notre application. Souvenez-vous : le paramtre sender associ laction choixReponse contient systmatiquement une rfrence lobjet qui a dclench cette mthode. Ainsi, chaque fois que lon excute choixReponse, on dispose dun accs direct au bouton qui a t press. On distingue ainsi le contrle ayant appel la mthode et il nest donc pas ncessaire

90

Dveloppez des applications originales pour iPhone et iPod Touch

de prvoir quatre mthodes diffrentes pour nos quatre boutons. La mthode dinstance titleForState renvoie le titre de llment sender. Elle exige le paramtre UIControlState qui dfinit ltat de lobjet (ici, normal). La ligne suivante cre la nouvelle chane de caractres nouveauStatut, en la formatant selon la nomenclature dfinie par initWithFormat. Le message pouse ainsi la forme "Vous avez choisi la rponse X", o X est remplac par le titre du bouton press. On assigne enfin la proprit text de lobjet reponseTexte avec le contenu de la chane de caractres nouveauStatut. Ce dernier objet nest alors plus utile et on le libre de la mmoire laide de la mthode release. Vous notez au passage lune des particularits de lObjective-C : il est possible daccder aux proprits dun objet laide de la notation point (reponseTexte.text par exemple) sans faire appel une mthode spcifique. En dernier lieu, nous modifions la mthode dealloc prpare par Xcode, en librant la mmoire rfrence par lobjet reponseTexte.
Consulter la documentation en cas de doute Comme nous lavons vu, la dclaration de nos mthodes sappuie sur de nombreux paramtres et attributs lis aux diffrents types de donnes. Il nest pas toujours facile de mmoriser cette nomenclature exacte et de ne rien oublier. Si le compilateur saura vous expliquer la nature de vos erreurs travers le dbogueur, nhsitez pas anticiper ces problmes et vrifier que vous avez correctement dclar vos mthodes. Pour cela, la mthode la plus simple consiste maintenir la touche Alt du clavier enfonce : votre pointeur se transforme en une croix. Effectuez alors un double-clic sur un terme, une proprit, un attribut, une mthode ou une classe sur lequel vous avez un doute. Vous accdez automatiquement au guide de rfrence de lObjective-C et vous parcourez la dfinition prcise du terme slectionn (en anglais). Pratique pour ne rien oublier et pour sinstruire en cours de route en parfaisant sa matrise du langage ! Figure 4.12 Un doute ? Une question ? Plongez dans la documentation officielle, accessible partir de n'importe quel terme de la syntaxe d'Objective-C !

Chapitre 4

Interactions avec vos applications

91

Cest parfait : nous avons envisag tous les comportements de notre application ce premier stade et nous avons dfini au sein du contrleur une srie dobjets et de mthodes effectuant des rfrences directes la vue de notre application. Il ne nous reste plus qu dessiner cette interface et raliser manuellement les connexions entre les objets et le contrleur, afin de dclencher les bonnes actions !

Dessiner linterface et associer des mthodes aux objets


Retournez dans la fentre principale de Xcode et effectuez prsent un double-clic sur le fichier QuizViewController.xib. Comme vous en avez maintenant lhabitude, vous basculez automatiquement vers Interface Builder et la vue principale de votre application apparat lcran. Dans le cadre de notre premier exemple, nous devons disposer les lments suivants sur linterface de notre projet :
vv

Un libell point par loutlet reponseTexte. Il contient la chane formate par notre mthode choixReponse. Dans un premier temps, il affiche la phrase "Vous avez choisi la rponse X", mais il peut contenir tout type de chanes de caractres, comme le score du joueur ou une raction gnrale ("Bravo !", "Dommage !", etc.). Il sagit dun lment de type Label, appartenant la classe UILabel. Quatre boutons rectangulaires permettant lutilisateur dexprimer un choix. Dans la bibliothque dInterface Builder, il sagit des objets Round Rect Button, des instances de la classe UIButton. Dautres lments graphiques visant habiller linterface. Il peut sagir dun champ de texte supplmentaire affichant la question ou dattributs associs la vue (couleur darrire-plan, opacit du fond, etc.).

vv

vv

Si ce nest pas dj fait, ouvrez la bibliothque dobjets en droulant le menu Tools et en cliquant sur Library. Commencez par dposer le libell, en effectuant un simple glisserdposer depuis la fentre de la bibliothque vers la fentre View (voir Figure 4.13). Vous notez au passage que des repres bleus apparaissent sur linterface. En tant que designer, ils vous sont trs utiles pour aligner les lments au sein de votre application : vous pouvez ainsi facilement vous "caler" sur les autres objets figurant dj dans votre interface et le rendu est souple et ergonomique. Nhsitez pas saisir les poignes encadrant votre libell pour ltendre sur toute la largeur de linterface. Ouvrez ensuite la fentre de linspecteur dattributs, en droulant le menu Tools et en cliquant sur Attributes Inspector ou en pressant simultanment les touches Cmd+1 (voir Figure 4.14). Face au champ Layout, cliquez sur licne permettant de centrer le texte. Quelle que soit la longueur de la chane de caractres figurant dans ce libell, vous serez ainsi assur quelle est bien aligne au centre de lcran. Effectuez enfin un double-clic sur ce libell afin de supprimer son texte : il sera remplac automatiquement et nous navons pas besoin dafficher quoi que ce soit ds louverture

92

Dveloppez des applications originales pour iPhone et iPod Touch

de lapplication. Toutefois, en auscultant nouveau linterface, aucun signe ne semble rvler la prsence de ce libell. Si vous multipliez ces lments, vous risquez ainsi de les superposer maladroitement et den perdre le contrle. Prenez ds prsent lhabitude de vous rfrer la fentre QuizViewController.xib, qui dresse la liste de tous les lments imbriqus dans lobjet View. En effectuant un double-clic sur chacun dentre eux, vous les slectionnez sous Interface Builder et vous tes en mesure de les redimensionner ou de les adapter librement. Pratique pour ne rien oublier !
Figure 4.13 On dpose un premier libell sur l'interface de notre application.

Figure 4.14 Le panneau de l'inspecteur d'attributs vous permet notamment de modifier l'alignement du texte de votre libell.

Dplacez ensuite un premier lment Round Rect Button depuis la bibliothque dobjets vers linterface. L encore, vous avez la possibilit de redimensionner cet objet et vous

Chapitre 4

Interactions avec vos applications

93

profitez des repres de couleurs pour laligner vis--vis des autres lments. Ajoutez trois autres boutons en les positionnant sur la mme ligne horizontale et verticale que les autres objets. Les repres bleus se croisent et les boutons se verrouillent dans leur position idale (voir Figure 4.15). Effectuez un double-clic sur chaque bouton et saisissez les valeurs A, B, C et D : ce sont les titres des boutons.
Figure 4.15 Dposez les quatre boutons aux coins arrondis et profitez des repres pour les aligner correctement les uns par rapport aux autres.

Il ne vous reste plus qu associer les outlets et les actions ces diffrents lments dinterface. La manipulation est simple et intuitive, mais exige une certaine dextrit. En arrireplan, ct de la fentre View, vous retrouvez la fentre QuizViewController.xib (voir Figure 4.16).
Figure 4.16 Gardez ouverte la fentre

QuizViewController. xib afin daccder au Files


Owner de votre projet.

La fentre comprend une srie dicnes, dont Files Owner que nous avons dj vu au chapitre prcdent. Pour rappel, il sagit de la classe responsable du chargement du fichier nib.

94

Dveloppez des applications originales pour iPhone et iPod Touch

Comme nous lavons vu, une instance dUIViewController ou de ses sous-classes charge automatiquement le fichier nib qui lui est associ. Par exemple, notre classe QuizViewController recherche automatiquement le nib QuizViewController.xib. Xcode nous a cr un tel fichier et nous venons dailleurs de lditer : au lancement de notre application, une instance de QuizViewController se charge en mmoire, ouvre QuizViewController. xib et en devient le "propritaire" (Files Owner). Licne "Files Owner" symbolise ainsi linstance du contrleur de notre application. Maintenez la touche Ctrl enfonce et cliquez sur licne Files Owner de la fentre QuizViewController.xib. Tout en laissant le bouton de la souris enfonc, dplacez-la vers votre libell, dans la fentre View. Une flche bleue relie les deux fentres : relchez la souris au-dessus du libell. Un menu contextuel vous prsente alors tous les outlets accessibles : slectionnez reponseTexte en cliquant sur son intitul. Vous venez dassocier loutlet reponseTexte au libell figurant sur votre interface (voir Figure 4.17).
Figure 4.17 On associe notre outlet au libell de linterface.

Vous lavez compris : ce procd trs intuitif vous permet de connecter en toute simplicit un grand nombre doutlets des lments dinterface trs divers. Vous pouvez vrifier les outlets rfrencs en droulant le menu Tools dInterface Builder, puis en cliquant sur Connections Inspector. Slectionnez ensuite le libell : vous avez la confirmation que loutlet reponseTexte est bien associ Files Owner. Vous supprimez ventuellement une telle liaison en cliquant sur la croix, dans le champ Referencing Outlets de linspecteur de connexions. Trs important : noubliez surtout pas dassocier licne Files Owner lobjet View afin que ce dernier soit bien li au contrleur de votre application et apparaisse sur lcran de liPhone (voir Figure 4.18). Cest une tape absolument ncessaire dans la composition de toutes les applications, qui prendra tout son sens lorsque vous dvelopperez des projets mettant en scne plusieurs vues. La manipulation est heureusement trs simple : pressez la touche Ctrl en cliquant sur licne Files Owner et relchez la souris au-dessus de licne View puis slectionnez loutlet view.

Chapitre 4

Interactions avec vos applications

95

Figure 4.18 Vrifiez les outlets et les actions associes l'objet File's Owner : la vue, le libell et les boutons doivent figurer dans l'inspecteur de connexions.

Lassociation dactions obit au principe inverse : vous devez partir des lments de votre interface pour les lier linstance Files Owner. L encore, vous avez parfaitement le droit de maintenir la touche Ctrl enfonce et de tisser une flche vers licne de Files Owner. Mais liPhone prsente de nombreuses mthodes pour dclencher des actions ! Lutilisateur peut presser un bouton, mais aussi effectuer des rotations avec plusieurs doigts, dplacer un lment en maintenant la pression sur un lment, etc. Pour choisir prcisment le type dinteraction qui vous intresse, retournez linspecteur de connexions. Slectionnez un premier bouton : une liste de quatorze vnements spcifiques figure sous le champ Events. Cest lvnement Touch Up Inside qui nous intresse ici ; il correspond au cas de figure o lutilisateur a press le bouton puis a relch la pression au-dessus de celui-ci. Il se diffrencie de lvnement Touch Up Outside, qui ne se proccupe que de la pression de lutilisateur sur un bouton, quel que soit lemplacement o il a relch son doigt. Il est trs important de prter attention cette diffrence, en particulier pour une application qui exige des actions mesures et rflchies, comme un quiz par exemple. Combien de fois avez-vous press un bouton, avant de vous rendre compte que ce ntait pas laction entreprendre ? Dans ce type de cas, un rflexe nous pousse sortir le doigt hors du cadre du bouton puis relcher la pression : lvnement Touch Up Inside ne se dclenche pas et cest lvnement Touch Up Outside qui est concern. Cliquez sur le petit cercle droite de lvnement Touch Up Inside et maintenez le bouton enfonc, sans presser la touche Ctrl cette fois. Dplacez le pointeur vers licne de Files Owner et relchez la souris lorsque la flche bleue apparat. Interface Builder vous propose de slectionner laction entreprendre, choixReponse dans notre exemple (voir Figure 4.19). L encore, vous constatez que la liaison sest bien effectue et vous pouvez ventuellement la supprimer en cliquant sur la croix dans linspecteur de connexions. Par ailleurs, vous pouvez tout fait enchaner les vnements, en associant plusieurs dentre eux cette action, ou au contraire associer plusieurs actions un mme vnement.

96

Dveloppez des applications originales pour iPhone et iPod Touch

Figure 4.19 Linspecteur de connexions dresse la liste de tous les vnements associs vos contrles.

Tout est oprationnel : linterface est dessine, les contrles sont prts et les liaisons ont t cres (voir Figure 4.20). Sauvegardez le rsultat en droulant le menu File et en cliquant sur Save, puis retournez la fentre principale de Xcode. Droulez le menu Build, puis cliquez sur Build and Run. Aprs quelques secondes de compilation, votre programme apparat dans le Simulateur diPhone. Vous pouvez librement cliquer sur chacun des boutons : le texte du libell se modifie automatiquement en consquence. Votre souris mime le comportement des doigts de lutilisateur vous avez cr votre premire application permettant dinteragir avec lui !
Figure 4.20 On a associ les actions et les outlets de notre projet aux lments correspondants : des flches apparaissent sur la fentre d'Interface Builder.

Les vnements associs liPhone


En tissant un lien vers laction de notre projet, vous avez remarqu une liste de quatorze vnements grs par liPhone. Vous pouvez naturellement remplacer les boutons par nimporte quel autre objet de la bibliothque. Pour satisfaire pleinement votre curiosit, voici la liste de tous ces vnements :

Chapitre 4

Interactions avec vos applications

97

Did End On Exit. On associe traditionnellement cet vnement au bouton "retour" associ au clavier virtuel. Il indique alors quune opration a t termine. Editing Changed. Cet vnement surveille la mise jour dun champ (par exemple, la saisie dun mot laide du clavier virtuel) en cours de frappe. On lutilise notamment pour crer des listes de suggestion partir des premiers caractres saisis par lutilisateur. Editing Did Begin. Un champ vient dobtenir le focus et lutilisateur sapprte le modifier. Editing Did En. Cest linverse : le champ perd le focus et lutilisateur a termin sa saisie. Touch Cancel. Lutilisateur a annul sa pression sur lcran de liPhone. Touch Down. Lutilisateur a press lcran de liPhone mais na pas encore relev le doigt. Vous devez absolument distinguer cet vnement de "Touch Up", qui correspond une squence plus longue et ne se dclenche que lorsque lutilisateur retire son doigt de lcran. Touch Down Repeat. Lutilisateur a press (au moins) deux fois daffile lcran, mimant ainsi le comportement dun double-clic. Touch Drag Enter. Lutilisateur a press lcran de liPhone, puis a dplac son doigt tout en maintenant la pression. Dans un jeu, cet vnement permet de dplacer un objet lcran en suivant les coordonnes exprimes par lutilisateur. Touch Drag Exit. Il sagit de lvnement qui achve le prcdent : lutilisateur a finalement relev son doigt, aprs lavoir dplac sur lcran de liPhone. Le contrle perd alors le focus. Touch Drag Inside. Lutilisateur a pos son doigt sur le contrle considr puis la dplac sur linterface en restant au-dessus de la zone dfinie. Touch Drag Outside. Lutilisateur a pos son doigt sur le contrle considr puis la dplac sur linterface en sortant du cadre dfini lorigine. Touch Up Inside. Cest lun des vnements principaux de Cocoa Touch : lutilisateur a press un contrle puis a relev le doigt, tout en restant dans la zone considre. Cet vnement confirme gnralement le choix de lutilisateur, lorsquil clique sur un bouton par exemple. Touch Up Outside. la manire de Touch Up Inside, cet vnement se dclenche lorsque lutilisateur presse un contrle puis relve le doigt. Mais il ne vrifie pas que la pression a t relche au-dessus de la zone considre. Faites attention : en rgle gnrale, lorsquun utilisateur se trompe et souhaite annuler sa saisie, il dplace son doigt au-del du bouton et relche la pression. Cest ce que dfinit cet vnement.

98

Dveloppez des applications originales pour iPhone et iPod Touch

Value Changed. Un champ ou un lment vient de voir sa valeur changer.

Nous aurons tout le loisir dexploiter ces vnements au cours de nos prochains projets ! Pour lheure, retenez comment tisser des liens entre ceux-ci et le Files Owner : le principe reste rigoureusement le mme, quel que soit lvnement.

Les accesseurs et les mutateurs


La logique interne de lObjective-C
travers ce premier exemple, vous constatez quel point lObjective-C est un langage dynamique et souple. Parmi les principales subtilits de la syntaxe de ce langage, vous avez retenu que les interactions entre les objets seffectuent par lenvoi de messages. Tous ces messages scrivent entre crochets ; le premier lment correspond lobjet auquel il est destin et le second est le message en lui-mme. Ainsi, la ligne :
[nouveauStatut release];

indique que lobjet nouveauStatut reoit le message release, cest--dire quon le libre de la mmoire. LObjective-C est aussi un langage rigoureux : lorsquon dclare une classe, on distingue son interface de son implmentation. Le premier dfinit le comportement de la classe et le second sa logique interne. Le projet automatiquement prpar par Xcode nous en donne un exemple immdiat. La classe QuizViewController est dclare dans deux fichiers que nous avons modifis prcdemment : QuizViewController.h (linterface) et QuizViewController.m (limplmentation). Reportez-vous au code prcdent : linterface dbute par le mot-cl @interface et sachve par le mot-cl @end. Entre accolades, vous dfinissez toutes les variables dinstance (notre outlet reponseTexte) et avant le mot-cl @end se trouvent les mthodes associes (notre action choixReponse). Limplmentation nappelle pas de commentaires particuliers : elle se contente de dresser la liste successive de toute la logique interne de la classe.

Les proprits en Objective-C


Comme dans bien dautres langages de programmation, les variables dinstance dune classe ne sont pas accessibles par les autres classes et lui sont bornes. Traditionnellement, les dveloppeurs devaient dfinir une srie de mthodes permettant de rcuprer et dassigner les valeurs aux variables dinstance dune classe. On dsigne ces mthodes sous le nom daccesseur et de mutateur, ou travers les anglicismes getters et setters. Pour viter de surcharger le code, lObjective-C a introduit le concept des proprits. Celles-ci crent

Chapitre 4

Interactions avec vos applications

99

automatiquement un accesseur aux variables dinstance et se dclarent laide du mot-cl @property.


@property UILabel *reponseTexte;

Cette ligne figure dans la dclaration de linterface de votre classe principale. Dans la mesure o il sagit bien dune mthode, elle napparat pas entre les accolades initiales et se voit ravale juste avant le mot-cl @end. linverse, nous crons automatiquement un mutateur dans limplmentation de la classe :
@synthesize reponseTexte;

La variable dinstance reponseTexte est donc librement accessible et on a la possibilit de modifier ses valeurs par la simple notation point, comme nous lavons vu :
reponseTexte.text = nouveauStatut;

Si lon devait employer les mthodes traditionnelles daccesseur et envoyer un message lobjet, il faudrait alors crire :
[reponseTexte setText:nouveauStatut];

en ayant naturellement pris le soin de dfinir la mthode setText. LObjective-C est ainsi un langage trs intuitif, qui vous permet de rdiger du code de manire souple et claire. Vous devez imprativement garder lesprit ces concepts de proprits, de variables dinstance, daccesseurs dclars implicitement et de notation point : vous en ferez un usage constant travers toutes vos applications.

Le dlgu de lapplication
Lors de la cration de notre dernier projet, nous avons constat que Xcode avait prpar quatre fichiers dans le dossier Classes. Nous venons de dtailler le concept rgissant la classe contrleur principale, QuizViewController. Intressons-nous prsent au dernier fichier, QuizAppDelegate. Il sagit du dlgu de lapplication : une classe qui, comme son nom lindique, prend en charge certaines actions la place dun autre objet. Concrtement, le dlgu vous permet dexcuter des traitements spcifiques des moments-cls du cycle de vie dune application, dfinis par la classe principale UIApplication. L encore, la dclaration de la classe QuizAppDelegate se dcompose en une interface (le fichier .h) et une implmentation (le fichier .m). Commencez par ouvrir le fichier QuizAppDelegate.h et consultez son contenu :

100

Dveloppez des applications originales pour iPhone et iPod Touch

#import <UIKit/UIKit.h> @class QuizViewController; @interface QuizAppDelegate : NSObject <UIApplicationDelegate> { IBOutlet UIWindow *window; IBOutlet QuizViewController *viewController; } @property (nonatomic, retain) UIWindow *window; @property (nonatomic, retain) QuizViewController *viewController; @end

La seule particularit rside dans la dclaration de linterface :


@interface QuizAppDelegate : NSObject <UIApplicationDelegate>

Le terme figurant entre les signes < et > correspond un protocole en Objective-C. Les protocoles regroupent des mthodes qui peuvent tre implmentes par nimporte quelle classe. Ici, le dlgu sinscrit dans le protocole UIApplicationDelegate, qui dfinit une srie de mthodes sexcutant des moments spcifiques du cycle de vie de lapplication : son excution, sa fermeture, des avertissements o la mmoire vient manquer, une notification adresse par le tlphone (rception dun SMS ou dun appel), etc. Ouvrez le fichier QuizAppDelegate.m pour dcouvrir la dclaration de lune de ces mthodes :
#import "QuizAppDelegate.h" #import "QuizViewController.h" @implementation QuizAppDelegate @synthesize window; @synthesize viewController; - (void)applicationDidFinishLaunching:(UIApplication *)application { // Override point for customization after app launch [window addSubview:viewController.view]; [window makeKeyAndVisible]; } - (void)dealloc { [viewController release]; [window release];

Chapitre 4

Interactions avec vos applications

101

[super dealloc]; } @end

La mthode applicationDidFinishLaunching est appele lorsque la classe UIApplication a charg la vue principale de votre application (voir Figure 4.21). En ajoutant des traitements entre les accolades, vous pouvez ainsi envisager tout type dactions grer avant le dmarrage de lapplication. Chargement dun contenu externe grce la connexion 3G ou WiFi, ouverture de vues secondaires, lecture dune base de donnes : cest ici que vous dfinissez tous ces types de traitement. Par dfaut, on envoie le message suivant :
[window makeKeyAndVisible];

Lobjet window reoit le message makeKeyAndVisible, ce qui affiche la fentre de votre application. Dans la mesure du possible, vitez toutefois dajouter de trop nombreux traitements ce stade : le dmarrage de votre application sen trouverait retard et elle perdrait de lintrt aux yeux des utilisateurs. Mais gardez ce concept lesprit : il est possible deffectuer des actions spcifiques des moments-cls de la vie de votre application, que ce soit pour sauvegarder des rglages juste avant de la clturer ou pour mettre un traitement en pause lorsque vous recevez un appel. Nous mettrons ce concept en uvre autour dun exemple concret au chapitre suivant.
Figure 4.21 Vous pouvez consulter et adapter le code du dlgu de l'application partir de la fentre principale de Xcode.

Finaliser notre projet de quiz


Vous bnficiez dsormais dune meilleure matrise des principes fondamentaux de lObjective-C : il est grand temps de retourner notre projet et de finaliser le quiz. lheure actuelle, notre application regroupe quatre boutons qui effectuent un simple traitement ils mettent jour le texte dun libell. Nous devons les adapter pour servir notre objectif pre-

102

Dveloppez des applications originales pour iPhone et iPod Touch

mier et poser une relle question. Par ailleurs, nous devons modifier la logique de notre contrleur afin quil vrifie que la bonne rponse a t donne. Cette fois, nous allons procder de manire inverse en mettant tout dabord jour la vue de notre application. Commencez par ajouter un libell contenant la premire question du quiz. Dans le cadre de notre exemple, nous ne mettons pour linstant en scne quune simple question. Si vous souhaitez enchaner les vues ou prparer un plus grand nombre de questions, reportez-vous au chapitre suivant pour dcouvrir comment basculer dune vue lautre. En effet, chaque bonne rponse conduira au chargement de la vue suivante, jusqu atteindre la dernire question du quiz. Il sera galement plus judicieux darticuler un vritable quiz autour dune base de donnes : vous stockerez ainsi toutes les questions et les rponses dans un espace spcifique, facile mettre jour. Dans notre exemple, notre nouveau libell contient la question "En quelle anne Mickey Mouse est-il n ?". Effectuez un double-clic sur chaque bouton et remplacez les mentions A, B, C et D par les diffrentes rponses que vous proposez lutilisateur il sagit ici de quatre dates parmi lesquelles figure la solution : 1928. Au besoin, tendez les dimensions des boutons ou choisissez loption Scale To Fill au champ View du panneau des attributs (droulez le menu Tools et cliquez sur Attributes Inspector). Il existe plusieurs solutions pour vrifier si lutilisateur a choisi la bonne rponse :
vv

Vous pouvez crer deux mthodes, reponseCorrecte et reponseFausse, et associer manuellement ces actions aux boutons. La premire nest donc lie qu un seul bouton (celui correspondant la bonne rponse !) et la seconde est associe aux trois autres boutons. Cette logique est un peu fastidieuse, dans la mesure o vous devrez rpter plusieurs lignes de code entre les deux mthodes ; Vous pouvez aussi vous contenter dadapter notre mthode choixReponse et dy intgrer une boucle conditionnelle qui compare la rponse exprime par lutilisateur une chane de caractres "statique" contenant la solution. Si les deux chanes sont quivalentes, lutilisateur a bien rpondu. Dans le cas contraire, il sest tromp. Noubliez pas que lattribut sender vous permet de reprer prcisment le bouton press et donc de dcliner cette mme mthode lensemble des boutons accessibles lutilisateur ;

vv

Pour lheure, nous choisissons la seconde solution. Vous constaterez par la suite quil existe des mcanismes plus prcis, mais ceux-ci sarticulent autour dune base de donnes. Sous Xcode, ouvrez le fichier QuizViewController.m et remplacez son contenu pour quil corresponde la structure suivante :
#import "QuizViewController.h" @implementation QuizViewController @synthesize reponseTexte;

Chapitre 4

Interactions avec vos applications

103

-(IBAction)choixReponse:(id)sender { NSString *reponse = [sender titleForState:UIControlStateNormal]; if([reponse isEqualToString:@"1928"]) { NSString *nouveauStatut = [[NSString alloc] initWithFormat:@"Vous avez trouv la bonne rponse : %@.", reponse]; reponseTexte.text = nouveauStatut; [nouveauStatut release]; } else { NSString *nouveauStatut = [[NSString alloc] initWithFormat:@"Vous avez choisi la rponse %@.", reponse]; reponseTexte.text = nouveauStatut; [nouveauStatut release]; } } - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation) interfaceOrientation { // Return YES for supported orientations return (interfaceOrientation == UIInterfaceOrientationPortrait); } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesn't // have a superview // Release anything that's not essential, such as cached data } - (void)dealloc { [reponseTexte release]; [super dealloc]; } @end

Comme vous le constatez, nous avons opt pour un systme extrmement simple. Aprs avoir rcupr le titre du bouton press, la mthode choixReponse ouvre la boucle conditionnelle if(). Celle-ci sarticule autour dun simple envoi de message :
[reponse isEqualToString :@" "]

La mthode isEqualToString compare deux chanes de caractres et renvoie un boolen. Si les deux valeurs correspondent, lutilisateur a donn la bonne rponse et on affiche ainsi un message de flicitations dans le libell. Dans le cas contraire, on lui indique quil sest tromp laide de la boucle else(). Il ne vous reste plus qu habiller votre interface pour la rendre la plus sduisante et intuitive possible (voir Figure 4.22). Sous Xcode, ouvrez nouveau le fichier QuizViewController.xib et slectionnez chaque lment de linterface. laide de linspecteur de proprits, vous tes en mesure dassocier

104

Dveloppez des applications originales pour iPhone et iPod Touch

un arrire-plan votre objet View (cliquez sur le champ Background) ou de mettre en forme chaque libell. L encore, slectionnez un objet figurant dans la fentre View puis utilisez linspecteur de proprits (Cmd+1) pour modifier sa couleur (Color), son ombre porte (Shadow) ou son opacit (Alpha). Vous pouvez galement saisir les poignes qui encadrent chaque libell et les agrandir en hauteur. Dans ce cas-l, noubliez pas dautoriser Interface Builder tronquer votre texte afin de laligner automatiquement sur plusieurs lignes. Saisissez une valeur correspondant au nombre de lignes dont vous avez besoin au champ # Lines et tendez loisir la hauteur de chaque libell. Au chapitre suivant, vous dcouvrirez comment remplacer chaque bouton par une image et comment remplacer la couleur darrire-plan par llment graphique de votre choix.
Figure 4.22 Aprs quelques retouches cosmtiques et une modification de la logique du contrleur, notre quiz est pleinement fonctionnel et pose de relles questions.

Pour lheure, noubliez pas de crer une icne de 57 57 pixels laide de votre diteur graphique prfr et de lenregistrer sous le nom "icon.png" (voir Figure 4.23).
Figure 4.23 On ralise une icne leffigie de notre quiz sous Photoshop, avant de lenregistrer au format PNG.

Chapitre 4

Interactions avec vos applications

105

Droulez le menu Project de Xcode, slectionnez loption "Add to Project" puis choisissez licne que vous venez de crer. Slectionnez ensuite le fichier Info.plist associ votre projet et effectuez un double-clic dans le champ Icon file. Saisissez enfin le nom de votre image et enregistrez votre projet pour faire apparatre votre icne dans le Simulateur diPhone.
Figure 4.24 Interface Builder permet d'aboutir rapidement des vues plus dynamiques, avec des lments d'interface mieux agencs.

Figure 4.25 En quelques amnagements simples, notre quiz prend de l'ampleur et s'approche d'une application pleinement fonctionnelle, diffuser sur l'App Store !

106

Dveloppez des applications originales pour iPhone et iPod Touch

Pour aller plus loin


Notre quiz est dsormais en place mais il manque encore de saveur ! La question et les rponses sont purement "statiques" et ont t saisies dans Interface Builder. Pour confrer un plus grand intrt votre projet, vous devriez envisager denregistrer une grande srie de questions et de rponses dans une base de donnes associe votre application. Nous nous y consacrerons au Chapitre 7, travers ltude prcise de lenregistrement et de la lecture de donnes. En attendant, vous pouvez perfectionner ce premier exemple en ajoutant des traitements supplmentaires dans la boucle conditionnelle de la mthode choixReponse. Par exemple, vous pouvez mettre jour un score associ un nouveau libell. Vous pouvez galement crer une nouvelle vue si lutilisateur a rpondu correctement et lui prsenter ainsi une nouvelle question sur le mme principe. En enchanant les vues, vous crez une application trs riche qui peut revtir des aspects trs diffrents ! Il sagit prcisment de la tche laquelle nous allons nous atteler au chapitre suivant. Retenez bien les concepts essentiels entrevus au cours de ce chapitre : vous tes prt pour dvelopper votre premire application multivues.

5
Les vues de votre application
Au sommaire de ce chapitre
vv vv vv vv vv vv

Hirarchiser les vues de votre application Organiser une application multivues Modifier lanimation de transition MultiConvertisseur, une application multivues compose dactions et doutlets Le design des vues de votre application Pour aller plus loin

108

Dveloppez des applications originales pour iPhone et iPod Touch

Vous savez dsormais composer vos propres applications pour iPhone ou iPod Touch en profitant de lensemble des contrles de la bibliothque pour interagir avec vos utilisateurs. En articulant votre projet autour de larchitecture modle-vue-contrleur, vous distinguez la logique interne de votre programme de ses donnes ou de leur reprsentation : non seulement votre code gagne en clart, mais il est galement plus facilement rutilisable. Jusqu prsent, nous navons toutefois dvelopp que des applications sappuyant sur une vue unique ; cest en combinant une multitude dcrans et dinterfaces que vous aboutirez aux projets les plus ambitieux et les plus ergonomiques pour lutilisateur final ! Mises part quelques applications spcifiques qui ne remplissent quun rle trs prcis (niveau bulles, lampe-torche, etc.), la plupart des projets pour iPhone sarticulent autour dune succession dcrans qui sadaptent librement au choix de lutilisateur. Observez le comportement de lapplication Rglages, installe par dfaut sur le terminal (voir Figure 5.1). Aprs lavoir lance, vous accdez sa vue principale : une srie dactions sont disposes dans un large tableau que vous manipulez au doigt. En cliquant sur lune des icnes, vous accdez la rubrique de votre choix (Fond dcran, Gnral, Tlphone, Safari, etc.) et vous remplacez cette vue par un cran secondaire qui en dtaille le contenu. Une simple pression sur la barre de navigation suprieure et vous revenez vers la vue principale : linterface de cet utilitaire sorganise de manire hirarchique autour dune srie de vues prdfinies, que lon affiche ou masque selon les desideratas de lutilisateur. Il en va de mme pour lapplication Mail : vous commencez par parcourir la liste de vos comptes de courrier, puis vos diffrentes botes de rception pour accder enfin aux messages en euxmmes. Vous parcourez ainsi une arborescence, qui dtaille vos options au fur et mesure de vos choix.
Figure 5.1 Lapplication Rglages de liPhone sarticule autour dune srie de vues, qui simbriquent de manire hirarchique.

Chapitre 5

Les vues de votre application

109

Les systmes de navigation permettant de basculer dune vue lautre sont trs nombreux. Ainsi, lapplication Horloge sappuie sur une barre donglets pour afficher successivement les heures internationales, lalarme, le chronomtre ou le minuteur (voir Figure 5.2). Ce systme de navigation vous permet de choisir une vue spcifique afin de la rendre active lcran. Lapplication Mto opte pour une seconde approche : les bulletins senchanent dans un mouvement de doigt et vous dfinissez les localits en cliquant sur un bouton "i" dispos en bas droite de chaque vue. Dans tous les cas, retenez que les applications organisent les vues de manire hirarchique et quune srie de contrleurs les permute en fonction des choix de lutilisateur.
Figure 5.2 Comparez le systme de navigation de lapplication Horloge, construit autour dune srie donglets, et de lapplication Mto dont les vues se manipulent du bout des doigts.

Hirarchiser les vues de votre application


Ouvrez nouveau votre dernier projet et accdez au dossier Resources dans le volet gauche de Xcode. En consultant le fichier Info.plist qui dfinit les proprits gnrales de votre application, vous dcouvrez que le fichier nib principal est MainWindow. Comme son nom lindique, il sagit de la fentre principale de votre projet : elle est charge en premier et dfinit llment racine de la hirarchie des vues de votre application. Sous Xcode et Interface Builder, elle correspond au fichier MainWindow.xib et sarticule autour dun objet Window, qui est une instance de la classe UIWindow. Comme nous lavons vu, le dlgu de lapplication initialise alors cet objet et dclare le contrleur principal de votre vue : on charge linterface QuizViewController.xib dans notre exemple prcdent. Celle-ci met en place une instance principale de la classe UIView qui regroupe elle-mme des objets sous-jacents, comme nos libells (UILabel) ou nos boutons (UIButton). Pour schmatiser, on peut ainsi conclure quune application sorganise autour dune fentre unique UIWindow et dune srie dobjets UIView imbriqus qui correspondent aux diffrents crans que lutilisateur manipule. En tant que dveloppeur, envisagez votre application et sa classe principale UIWindow comme une chane de tlvision. Elles sinscrivent dans le

110

Dveloppez des applications originales pour iPhone et iPod Touch

cadre born dun tlviseur lcran de 320 480 pixels de liPhone et obissent une "grille des programmes", que lutilisateur peut librement choisir de suivre ou non. Chacune de vos missions est une instance de la classe UIView. tout moment, lutilisateur peut interrompre leur diffusion, reprendre leur lecture ou teindre le tlviseur. Les missions font intervenir une srie dacteurs ou de personnalits : il sagit des lments dinterface que lutilisateur manipule. Llment UIWindow constitue ainsi le conteneur principal de votre application. Au sommet de la hirarchie de votre projet, il regroupe les diffrents crans prsents lutilisateur (UIView) qui mettent en scne tous les lments visuels (UILabel, UIButton, etc.).
Plusieurs objets UIWindow au sein dune application Cette analogie vise simplifier lorganisation hirarchique de votre application et correspond la plupart des projets diffuss sur lApp Store. Mais comme il est possible de possder plusieurs tlviseurs la maison, sachez quune application peut sorganiser autour de plusieurs instances de la classe UIWindow. Retenez toutefois quune application ne peut afficher quune seule instance de la classe UIWindow la fois, comme on ne peut regarder quun seul tlviseur mme si on en possde plusieurs la maison ! Cest la logique de votre programme qui rgit le basculement dun objet UIWindow lautre. Mais dans la mesure du possible, essayez darticuler votre projet autour dun lment UIWindow unique la racine qui organise la navigation au sein dlments UIView sous-jacents.

Au-del de leur rpercussion sur la programmation, sur laquelle nous reviendrons dans un instant, le design dinterfaces et le choix dun systme de navigation entre les vues dfinissent lun des aspects essentiels de votre application : son ergonomie. En offrant aux dveloppeurs une srie de contrles intuitifs et originaux, le SDK de liPhone assure une grande homognit entre les applications. Pour peu quils aient dj manipuls les utilitaires de base, tous vos utilisateurs connaissent leur rle et leur fonctionnement... sur le bout des doigts ! Un systme donglets leur permet de basculer entre une srie de vues qui correspondent autant dactivits diffrentes. Une barre de navigation suprieure assure le parcours gnral entre les fentres principales de lapplication et leur permet de revenir lcran daccueil. Grce une roulette ou une rglette, ils choisissent une valeur prcise et modifient les vues en consquence. Et ils naviguent entre les fentres travers un lger effet danimation, qui symbolise leur progression au sein dune application. Analysez les applications que vous utilisez : elles saccompagnent rarement dun manuel dutilisation et vous devez les prendre en main de manire intuitive, en retrouvant instantanment lergonomie de liPhone (voir Figure 5.3 pour une exception !). Bien avant de dvelopper vos diffrentes vues sous Xcode et Interface Builder, vous devez donc rflchir sur papier lagencement de vos lments dinterface et votre systme de navigation afin

Chapitre 5

Les vues de votre application

111

quil soit fluide et clair en toutes circonstances. Ne sortez pas envers et contre tout des sentiers battus : on prfrera toujours une application linteraction riche et ergonomique aux projets qui tentent de tout rinventer et qui savrent complexes manipuler. Toutefois, ne bridez pas votre imagination pour autant ; cest en organisant vos vues de manire harmonieuse, autour de contrles simples et logiques, que vous aboutirez des rsultats originaux et novateurs.
Figure 5.3 En adaptant sur iPhone le concept des jeux daventure pointn click, Episode 1112 sarticule autour dun systme de navigation trs original et complexe : un manuel dutilisation est ncessaire pour accompagner lutilisateur. Lexception qui confirme la rgle !

Choisir un systme de navigation


Vos utilisateurs sont en droit dattendre une ergonomie adapte au type dapplication que vous dveloppez. Outre les jeux vido, qui constituent une classe part, on distingue essentiellement deux types dapplications : celles visant manipuler et consulter des donnes et celles faisant office dutilitaires. En fonction de lune ou lautre de ces deux catgories, vous imbriquez vos lments de manire diffrente et vous disposez de systmes de navigation privilgis. Consulter des donnes. La plupart des applications destines afficher du contenu sarticulent autour dun systme de listes pour hirarchiser leurs lments. En rgle gnrale, leur vue principale se manipule verticalement : lutilisateur fait dfiler une succession dlments au doigt jusqu atteindre la fin de la liste. Une srie de contrles leur indique que certains lments constituent des sous-listes imbriques ou disposent de dtails complmentaires. Cest notamment le cas de lapplication Tlphone, la fonction premire de liPhone, dont la liste des derniers appels affiche une flche en regard de chaque entre : chaque lment de la liste agit comme un simple "bouton" qui renvoie vers une seconde vue, dtaillant les coordonnes de chaque appelant (voir Figure 5.4). Songez galement aux listes quaffiche lapplication iPod : les artistes ou les albums apparaissent par ordre alphabtique, avec un index sur la droite permettant dacclrer la navigation. En une pression du doigt sur la pochette dun album, vous basculez vers la liste des morceaux quil contient et vous changez de vue.

112

Dveloppez des applications originales pour iPhone et iPod Touch

Figure 5.4 Le nom des derniers appelants apparat sous forme de liste : vous parcourez les donnes et vous accdez des dtails complmentaires, en changeant alors de vue, en touchant la flche en regard de chaque ligne.

Simple et intuitive, cette disposition offre vos utilisateurs une grande visibilit sur le contenu de votre application. En amont, vous avez tri les donnes auxquelles ils accdent : vous avez donc identifi les principaux lments qui mritent de figurer sur la vue racine et les utilisateurs ont la possibilit daffiner leur navigation, en dtaillant chaque fois dun niveau leur critre de parcours. Autour de ce principe clair et ergonomique, vous pouvez toutefois vous autoriser quelques fioritures. linstar de lcran des rglages de liPhone, il est possible de regrouper certains lments dune liste en sections. Vous runissez ainsi les donnes appartenant au mme groupe dinformations et vous organisez le contenu de manire claire et hirarchise. Vous pouvez galement offrir vos utilisateurs la possibilit de modifier le contenu dune liste. Cest notamment le cas de la fentre de cration dun nouveau contact : des boutons "+" sont disposs au dbut de chaque ligne et vous permettent daccder au clavier virtuel pour saisir le nom ou le numro de tlphone dun ami (voir Figure 5.5).
Figure 5.5 Les longues listes dlments ne sont pas ncessairement figes et voues la pure navigation : limage de la fentre ddition de contacts, elles offrent des possibilits dinteraction et ddition.

Chapitre 5

Les vues de votre application

113

Interagir avec un outil. La seconde grande catgorie dapplications runit des projets trs divers : utilitaires manipuler au quotidien, flux dactualit, accs un service web, outil de cration, etc. En offrant plus dun service lutilisateur, ces applications sarticulent autour dun cran principal et dune srie de vues secondaires, correspondant chaque fonctionnalit. Safari constitue un parfait exemple dune telle disposition. Un bandeau de 320 44 pixels occupe le bord infrieur de lcran (voir Figure 5.6).
Figure 5.6 Le navigateur Safari sarticule autour dune barre doutils en bas de lcran, qui regroupe vos diffrentes possibilits dinteraction et de navigation.

Il sagit dune barre doutils, dont les boutons donnent accs aux fonctions essentielles (page prcdente ou suivante, ajout dun signet, consultation de lhistorique, ouverture dun onglet, etc.). Un tel lment dinterface correspond une instance de la classe UIToolbar et se voit compos dobjets qui sont eux-mmes des instances dUIToolbarItem. La plupart des crans de telles applications arborent galement une barre de navigation leur sommet : on lutilise gnralement pour afficher le titre de la vue actuelle ainsi quun bouton permettant de revenir en arrire. Un espace droite est ventuellement rserv laffichage dun bouton contextuel, vous offrant la possibilit dajouter ou dditer un lment. Loutil Notes dispose dune telle barre de navigation, qui affiche le titre de la note courante, un bouton pour revenir lcran gnral de slection et un bouton + afin de crer une nouvelle note. Cette barre de navigation correspond linstance de la classe UINavigationBar et les lments qui la constituent sont des instances dUINavigationItem. Cest un systme dorganisation commun aux applications grenant du contenu et aux utilitaires : ce type de barre figure gnralement en haut de longues listes, pour revenir facilement au niveau suprieur ou ajouter un lment la liste en cours de lecture (voir Figure 5.7).

114

Dveloppez des applications originales pour iPhone et iPod Touch

Figure 5.7 Lapplication de prise de notes dispose dun double systme de navigation : une barre de navigation, son sommet, permet de qualifier la vue actuelle et daccder au menu principal tandis que la barre doutils, en bas de lcran, offre un accs aux diffrentes fonctions.

Enfin, de nombreux utilitaires sappuient sur une navigation par onglets pour renvoyer lutilisateur vers leurs diffrentes fonctionnalits. Cest notamment le cas de lapplication iPod, dont la classification en Listes, Artistes, Morceaux et Albums correspond autant donglets en bas de lcran (voir Figure 5.8). L encore, cette barre emprunte les dimensions traditionnelles de 320 44 pixels. Il sagit dune instance de la classe UITabBar dont les lments enfants sont des objets UITabBarItem. Vous pouvez ainsi privilgier le systme de navigation de votre choix et mme les combiner pour offrir une meilleure ergonomie votre application. Sachez toutefois quen affichant simultanment une barre de navigation et une barre doutils, la zone principale de votre application ne disposera plus que de 320 416 pixels despace libre (voir Figure 5.9) ou 416 320 pixels en mode paysage.
Figure 5.8 Lapplication iPod dcoupe ses diffrentes vues en autant donglets, accessibles travers une barre en bas de lcran.

Chapitre 5

Les vues de votre application

115

Figure 5.9 Lespace dont dispose le cur de votre application se rduit si vous multipliez les systmes de navigation.

Vous devez ainsi parfois ruser : de nombreuses applications qui nappellent quune simple vue supplmentaire de configuration utilisent un bouton "i" log en bas droite de lcran. En cliquant dessus, lutilisateur fait permuter la vue principale qui semble ainsi se retourner dans un lger effet danimation pour rvler son verso. Il sagit bien du chargement dune nouvelle vue, qui contient une srie de rglages permettant de personnaliser le comportement de lapplication. Au-del du choix du systme de navigation, ce dernier point illustre un second aspect que vous devez prendre en compte au moment de hirarchiser les vues de votre application : les effets danimation et de transition. Le SDK de liPhone vous aide dans cette tche et propose une srie de transitions prtes lemploi, qui se lancent au moment de changer de vue. La solution la plus simple reste la modeste translation dun cran lautre, de manire horizontale. Cest le principe retenu dans le parcours des rglages ou de votre photothque par exemple. Dautres effets plus ambitieux simulent le "tournement" dune page ou un fondu enchan (voir Figure 5.10).
Figure 5.10 Leffet de transition qui apparat en cliquant sur le bouton "i" de lapplication MiniPiano : la vue principale permute pour rvler son "dos", qui est en ralit une seconde vue.

116

Dveloppez des applications originales pour iPhone et iPod Touch

Organiser une application multivues


Toutes les applications multivues reposent sur le mme type de canevas. Lorsque vous crez un nouveau projet sous Xcode, lditeur cre automatiquement un fichier MainWindow.xib qui correspond la fentre principale de votre application. Le basculement entre une srie de vues repose sur la cration dune classe contrleur ; elle gre les autres vues et les affiche en fonction des choix de lutilisateur. Ce contrleur est une instance de la classe UIViewController ou plus prcisment des classes UINavigationController (dans le cas dune barre de navigation) ou UITabBarController (dans le cas dune barre donglets). Ces dernires sont elles-mmes des sous-classes dUIViewController. Lorsque vous instaurez un contrleur de navigation, vous devez bien distinguer le comportement de cet outil de navigation de celui de vos diffrentes vues. Dans une application comportant une barre donglets, par exemple, les pressions sur les onglets interagissent avec le contrleur de la classe UITabBarController : il est responsable de laffichage des diffrentes vues. linverse, chaque vue dispose de son propre contrleur : comme nous lavons vu prcdemment, il est donc possible de dclarer une srie doutlets et dactions permettant lutilisateur dinteragir avec lapplication et de dclencher des traitements. Ainsi, lorsque vous manipulez un bouton figurant sur une vue, il va dclencher un vnement pris en charge par le contrleur de la vue actuelle. Comme nous allons le voir travers cette srie dexemples, il nest pas ncessaire dassocier un fichier .xib chaque vue. Vous pouvez tout fait dposer une srie dobjets UIView dans le fichier MainWindow.xib principal et tisser des liens entre vos boutons et ces vues supplmentaires : votre contrleur gre alors laffichage ou la disparition des diffrentes vues, en ajoutant ventuellement un effet de transition. De manire gnrale, le dveloppement dapplications multivues implique une grande rigueur. Vous allez trs rapidement vous retrouver avec une srie de contrleurs diffrents associs chaque vue, mais aussi avec un contrleur permettant de grer leur basculement et ventuellement des fichiers nib distincts. La cration doutlets et dactions entre toutes ces vues sous Interface Builder peut alors sembler pnible ; mais en agissant pas mesurs et en faisant preuve dorganisation, vous devriez tre en mesure de vous y retrouver sans encombre. Pour ne pas vous perdre, retenez ce concept gnral : lorsque vous crez la classe MonControleur, Xcode charge automatiquement linterface MonControleur.xib. Veillez soigner tout particulirement le nom de vos classes pour gagner en clart.

La navigation par onglets


Puisque vous matrisez laspect thorique de bout en bout, passons la pratique ! Dans ce premier exemple, nous allons organiser une srie de vues autour dun systme de navigation

Chapitre 5

Les vues de votre application

117

par onglets. Vous pouvez ainsi lexploiter pour toffer le quiz du chapitre prcdent : chaque onglet mne vers diffrents niveaux de difficult ou vers des questionnaires sur des sujets distincts. Ouvrez Xcode puis droulez le menu File et cliquez sur New Project. Parmi la liste des modles de projets, slectionnez Tab Bar Application et validez en cliquant sur le bouton Choose (voir Figure 5.11).
Figure 5.11 La cration de notre premier systme de navigation sous Xcode, laide du modle Tab Bar Application.

Baptisez le projet MultiQuiz et cliquez sur le bouton Save. Vous constatez demble sous Xcode que le canevas gnral a chang. En lieu et place du traditionnel fichier MultiQuizViewController.h que vous tiez en droit dattendre, vous dcouvrez des fichiers FirstViewController.h et SecondView.xib. Cette disposition doit vous mettre la puce loreille : en organisant votre application autour dune srie donglets, vous devez dfinir chacune des vues de manire distincte. Linterface MainWindow.xib dfinit le systme de navigation et constitue llment racine de la hirarchie de vos vues. laide donglets, vous pointez alors vers une seconde vue dont linterface est dfinie dans SecondView.xib. Commencez par ouvrir le fichier MainWindow.xib pour lancer Interface Builder et dcouvrir le canevas prpar par Xcode. L encore, les outils de dveloppement de liPhone savrent aussi intuitifs que puissants : il vous suffit de cliquer sur les deux onglets figurant en bas de la fentre principale pour ouvrir directement la seconde vue, charge depuis SecondView. xib. Il est donc inutile de revenir systmatiquement la fentre de votre projet, sous Xcode, pour dessiner vos diffrentes vues. Effectuez un double-clic sur chaque onglet figurant en bas de la fentre pour les renommer. Vous constatez par ailleurs que la barre soutenant les onglets ne peut pas tre redimensionne : elle occupe systmatiquement 44 pixels de haut

118

Dveloppez des applications originales pour iPhone et iPod Touch

et stend sur toute la largeur de lcran. Vous pouvez en revanche lgayer par une srie dicnes au-dessus du texte, que vous dfinissez laide de linspecteur dattributs (Ctrl+1). Revenez sous Xcode, droulez le menu Project et choisissez Add to Project. Slectionnez ensuite vos images, qui doivent dabord tre enregistres au format PNG en niveau de gris laide de votre diteur prfr. Elles sintgrent ainsi aux fichiers sources de votre projet. De retour sous Interface Builder, il vous suffit de slectionner lun des onglets puis douvrir linspecteur dattributs et de drouler le menu Image pour dcouvrir la liste des fichiers que vous avez imports. Basculez vers longlet Item Size, en forme de rgle, pour dfinir leur aspect laide des rglettes Image Inset. Vous avez ainsi la possibilit dafficher des onglets dpourvus de texte et narborant quune image sur toute leur hauteur (voir Figure 5.12).
Figure 5.12 On dfinit la taille des icnes qui illustrent chaque onglet dans linspecteur dattribut dInterface Builder.

Cliquez ensuite sur le second onglet, puis sur le lien SecondView.nib qui apparat au centre de linterface (voir Figure 5.13).
Figure 5.13 Notre application comprend dsormais deux onglets, qui chargent des fichiers nib diffrents.

Chapitre 5

Les vues de votre application

119

Comme nous lavons vu prcdemment, chaque vue est dfinie par une instance de la classe UIView. Par dfaut, Interface Builder a dispos un tel objet et la complt dun libell et dun champ de texte. Vous pouvez alors les supprimer et ajouter tous les lments de votre choix. Libells, boutons de contrle ou champs de texte : libre vous de dfinir lallure et le rle de votre seconde vue !
Tlcharger des images supplmentaires La cration de vos propres icnes pour enrichir votre barre donglets est parfois fastidieuse : non seulement vous devez les enregistrer en niveau de gris, mais elles exigent aussi un certain talent pour les rendre harmonieuses et lisibles ! Si vous ne vous sentez pas en mesure daffronter un tel exercice, reportez-vous sur les nombreuses bibliothques libres de droit. Parmi celles-ci, nous vous conseillons en particulier les crations de Glyphish, auxquelles vous accdez ladresse www.glyphish.com. La bibliothque regroupe plus de 130 lments gratuits et prts lemploi, qui symbolisent de trs nombreuses fonctions. Chaque icne reprsente 30 30 pixels et vous les importez votre projet sous Xcode pour les placer sous Interface Builder dans un second temps.

Vous souhaitez ajouter un troisime onglet ? Cet exercice illustre parfaitement tous les rouages de Xcode et dInterface Builder travers une manipulation que vous effectuerez frquemment. Commencez par ouvrir MainWindow.xib. Dans la fentre principale, vous dcouvrez votre contrle Tab Bar Controller qui dfinit une srie donglets. partir de la bibliothque, dposez un objet Tab Bar Item sur votre barre donglet. Les dimensions des boutons prcdents sadaptent automatiquement pour cder la place ce nouvel lment. Slectionnez cet onglet et ouvrez linspecteur dattributs. Rendez-vous longlet View Controller, figurant en haut gauche, et saisissez TroisiemeVue dans le champ NIB Name. La fentre principale de linterface indique alors, longlet slectionn : Loaded from TroisiemeVue.nib (voir Figure 5.14).
Figure 5.14 On dfinit le fichier nib point par le troisime onglet.

120

Dveloppez des applications originales pour iPhone et iPod Touch

Retournez sous Xcode, droulez le menu File et cliquez sur New File. Dans le volet gauche de la fentre, slectionnez la catgorie User Interfaces sous la section iPhone OS puis cliquez sur Window XIB et sur le bouton Next. Saisissez TroisiemeVue en guise de nom et validez en cliquant sur Finish. Xcode prpare ainsi un fichier .xib vierge, correspondant linterface du troisime onglet. Ouvrez-le sous Interface Builder. Vous constatez quil intgre un objet UIWindow dont nous navons pas besoin. Supprimez-le et remplacez-le par une instance de la classe UIView, en dplaant un objet View sur le canevas. Ajoutez ensuite un libell et des champs de texte ventuels. Avant denregistrer et de compiler le projet, vous devez vrifier les dpendances entre les crans et les classes qui leur sont associes. Par dfaut, le Files Owner de TroisiemeVue.xib est un objet NSObject. Cliquez sur son intitul puis sur le bouton "i" de linspecteur dattributs afin douvrir le panneau Object Identity. Dans le champ Class, saisissez UIViewController, puis cliquez sur le second onglet de linspecteur afin douvrir le panneau View Controller Connections. Cliquez sur le cercle droite du champ view et dplacez la souris jusqu llment View de la fentre TroisiemeVue.xib (voir Figure 5.15).
Figure 5.15 On modifie les proprits de la troisime vue afin de la relier au canevas principal.

Vous faites ainsi pointer loutlet vers la vue de votre interface et vous indiquez Interface Builder que cest le Files Owner qui est responsable du chargement de votre vue. Enregistrez tous les fichiers puis compilez le projet sous Xcode : vos diffrents onglets figurent en bas du Simulateur diPhone et vous basculez de lun lautre au moindre clic (voir Figure 5.16). Comme vous lavez constat, il est trs simple de partir dun modle de fichier nib cr par Xcode et de lintgrer linterface de votre application pour lenrichir sans revoir fondamentalement le code source de votre projet. Vous devez toutefois prter attention aux connexions et vrifier que les classes correspondantes sont correctement dfinies : nous aurons tout le loisir de compliquer lexercice, en ajoutant des contrleurs distincts, dans la suite de ce chapitre.

Chapitre 5

Les vues de votre application

121

Figure 5.16 Aprs avoir compil le projet, nos trois onglets figurent dans la barre en bas du Simulateur diPhone.

La navigation par boutons


Au-del de la navigation par onglets entre une srie dcrans, vous pouvez prfrer disposer des boutons sur votre interface afin daccder des vues supplmentaires. Cest lun des rles essentiels des utilitaires : vous dveloppez une srie de fonctionnalits que lutilisateur lance individuellement en pressant des boutons. tout moment, il revient lcran daccueil laide de la barre de navigation. Nous allons entrevoir la cration dune telle application travers un second exemple. Sous Xcode, droulez le menu File et cliquez sur New Project. Choisissez le modle WindowBased Application et saisissez MultiVues en guise de nom de projet. Dans le cadre de cet exemple, nous allons jongler entre deux vues. Vous devez ainsi prparer les classes qui leur sont associes. Droulez nouveau le menu File et cliquez sur New File. Dans la fentre qui apparat, slectionnez la catgorie Cocoa Touch Classes, puis le type de fichier UIViewController subclass. Cliquez sur le bouton Next puis saisissez RacineViewController. Renouvelez lopration et crez la classe VueDeuxController. Vous disposez ainsi des six fichiers suivants au sein de votre projet :
vv vv vv vv

MultiVuesAppDelegate.h, linterface du dlgu de lapplication ; MultiVuesAppDelegate.m, limplmentation du dlgu de lapplication ; RacineViewController.h, len-tte du contrleur de notre premire vue ; RacineViewController.m, limplmentation du contrleur de notre premire vue ;

122

Dveloppez des applications originales pour iPhone et iPod Touch

v v

VueDeuxController.h, len-tte du contrleur de notre seconde vue ; VueDeuxController.m, limplmentation du contrleur de notre seconde vue.

Nous devons galement ajouter deux chiers dinterface, correspondant chacune des vues. Slectionnez le dossier Resources de votre projet, droulez le menu File et cliquez sur New File. Choisissez la catgorie User Interfaces puis cliquez sur View XIB et sur le bouton Next. Crez successivement les chiers RacineViewController.xib et Vue2.xib par ce biais (voir Figure 5.17).
Figure 5.17 Lallure de notre projet ce stade : on a cr les classes et les chiers dinterface correspondants aux deux vues.

Ouvrez ensuite MultiVuesAppDelegate.h et remplacez son code par le Listing 5.1. Listing 5.1 : MultiVuesAppDelegate.h
#import <UIKit/UIKit.h> @interface MultiVuesAppDelegate : NSObject <UIApplicationDelegate> { UIWindow *window; UINavigationController *navigationController; } @property (nonatomic, retain) IBOutlet UIWindow *window; @property (nonatomic, retain) IBOutlet UINavigationController *navigationController; @end

Cliquez enn sur MultiVuesAppDelegate.m et saisissez le code du Listing 5.2.

Chapitre 5

Les vues de votre application

123

Listing 5.2 : MultiVuesAppDelegate.m


#import "MultiVuesAppDelegate.h" @implementation MultiVuesAppDelegate @synthesize window; @synthesize navigationController; - (void)applicationDidFinishLaunching:(UIApplication *)application { // Override point for customization after application launch [window addSubview:[navigationController view]]; [window makeKeyAndVisible]; }

- (void)dealloc { [navigationController release]; [window release]; [super dealloc]; } @end

travers ces quelques lignes, nous avons instanci un objet de la classe UINavigationController (une barre de navigation) sous la variable navigationController et nous lavons ajout la fentre principale de lapplication lors de son chargement. Nous devons prsent tisser un lien entre les deux vues et prparer une mthode visant basculer de lune lautre. Ouvrez le chier RacineViewController.h et saisissez le code qui suit. Listing 5.3 : RacineViewController.h
#import <UIKit/UIKit.h> #import "VueDeuxController.h"; @interface RacineViewController : UIViewController { VueDeuxController *vueDeuxController; } @property (nonatomic, retain) VueDeuxController *vueDeuxController; - (IBAction)changerVue:(id)sender; @end

Nous venons ici de crer la variable dinstance de VueDeuxController, nous avons dni ses proprits et nous avons dclar la mthode changerVue. Nous devons prsent dnir

124

Dveloppez des applications originales pour iPhone et iPod Touch

la logique de cette mthode, dans le fichier RacineViewController.m. Reportez-vous au Listing 5.4 pour adapter le fichier en consquence. Listing 5.4 : RacineViewController.m
#import "RacineViewController.h" #import "VueDeuxController.h"; @implementation RacineViewController @synthesize vueDeuxController; - (IBAction)changerVue:(id)sender { if(self.vueDeuxController == nil) { VueDeuxController *vueDeux = [[VueDeuxController alloc] initWithNibName:@"Vue2" bundle:[NSBundle mainBundle]]; self.vueDeuxController = vueDeux; [vueDeux release]; } [self.navigationController pushViewController:self.vueDeuxController animated:YES]; } @end

Comme nous lavons vu prcdemment, RacineViewController est le contrleur racine et il est en charge du basculement entre les diffrentes vues. Nous commenons donc par importer la classe VueDeuxController.h et nous profitons des accesseurs et des mutateurs simplifis dObjective-C laide des mthodes @property et @synthesize. Nous dfinissons ensuite notre mthode changerVue, une action qui sera appele en pressant un simple bouton. La boucle conditionnelle du Listing 5.4 vrifie tout dabord si la variable dinstance vueDeuxController est cre. Si ce nest pas le cas, nous linstancions et nous lassocions au fichier Vue2.xib la mthode initWithNibName complte automatiquement la valeur "Vue2" par son extension, selon la tradition de lObjective-C. Nous "poussons" enfin cette nouvelle vue lavant-plan de lapplication, laide de la mthode pushViewController. Nous profitons au passage de lattribut animated, qui attend une valeur boolenne, pour ajouter un effet danimation en guise de transition entre la vue active et celle contenue dans Vue2.xib. Cest prcisment la tche qui nous incombe prsent : dfinissons les diffrentes vues de notre application et ajoutons le bouton permettant de basculer de lune lautre. Commencez par ouvrir le fichier MainWindow.xib en effectuant un double-clic sur son intitul, sous Xcode. Vous accdez Interface Builder. Vous devez tout dabord ajouter un contrleur responsable du changement de vue. Dans cet exemple, dposez llment Navigation

Chapitre 5

Les vues de votre application

125

Controller dans la fentre principale de MainWindow.xib, juste en-dessous de lobjet Window. Droulez larborescence en face de Navigation Controller et slectionnez lobjet View Controller (voir Figure 5.18).
Figure 5.18 On modifie la classe associe au contrleur de navigation.

Ouvrez alors linspecteur didentit (Cmd+4) et changez le nom de la classe en saisissant RacineViewController la place dUIViewController. Interface Builder reconnat automatiquement les classes, les actions et les outlets que vous avez crs et complte le nom que vous saisissez dans le champ. Vrifiez au passage que tous les lments principaux sont bien relis entre eux : les outlets delegate de Files Owner et navigationController de Navigation Controller doivent tous deux pointer vers le dlgu de lapplication. Slectionnez nouveau RacineViewController, basculez ensuite vers le panneau des attributs (Cmd+1) et saisissez RacineViewController dans le champ NIB Name. Vous indiquez Interface Builder quil doit charger le fichier RacineViewController.xib. Le rsultat ne se fait pas attendre : la fentre principale de votre application se voit affuble dune barre de navigation et son contenu principal est charg depuis RacineViewController.xib. Nous devons prcisment le modifier. Enregistrez vos modifications, retournez sous Xcode et effectuez un double-clic sur RacineViewController.xib. Il sagit de la vue principale : modifiez son interface comme bon vous semble, en ajoutant un bouton (Round Rect Button) que lutilisateur devra presser afin de basculer vers la seconde vue (voir Figure 5.19). Cliquez ensuite sur lobjet Files Owner de la fentre RacineViewController.xib, ouvrez nouveau linspecteur didentit et saisissez RacineViewController dans le champ Class. Pressez enfin la touche Ctrl du clavier en cliquant sur Files Owner et maintenez la souris enfonce jusqu lobjet View. Relchez la souris et slectionnez view dans le menu contextuel : vous venez dassocier loutlet correspondant votre vue (voir Figure 5.20). Ouvrez linspecteur de connexions (Cmd+2) et cliquez sur le cercle droite de laction changerVue. Maintenez le bouton de la souris enfonc et glissez-la jusquau bouton que vous avez cr. Slectionnez enfin lvnement Touch Up Inside.

126

Dveloppez des applications originales pour iPhone et iPod Touch

Figure 5.19 On dfinit lallure de notre vue principale, en ajoutant un bouton pour basculer vers la seconde vue.

Figure 5.20 On associe notre action changerVue au bouton cr sur la vue principale.

Sauvegardez vos modifications, puis retournez sous Xcode et ouvrez prsent le fichier Vue2.xib. Il sagit donc de la seconde vue de votre application. L encore, commencez par ajouter tous les lments de votre choix linterface. Cliquez ensuite sur lobjet Files Owner, ouvrez linspecteur didentit et saisissez VueDeuxController dans le champ Class. Cliquez en maintenant la touche Ctrl enfonce sur son icne et dplacez la souris jusqu lobjet View. Enregistrez nouveau le projet et pressez les touches Cmd+R pour compiler le code. Vous dcouvrez alors le rsultat dans le Simulateur diPhone : le bouton sur la vue principale vous permet de charger la seconde vue. Pour revenir lcran daccueil, il suffit de presser lunique bouton de la barre de navigation, en haut du terminal (voir Figure 5.21). Vous remarquez au passage un lger effet danimation, travers lequel les vues basculent de manire horizontale.

Chapitre 5

Les vues de votre application

127

Figure 5.21 Nous changeons de vue volont, en pressant un simple bouton et en matrisant la barre de navigation.

Vous pouvez parfaitement adapter cette application en remplaant le contrleur Navigation Controller par llment de votre choix, comme un objet Tab Bar Controller par exemple. Par ailleurs, vous remarquez que la classe contrleur VueDeuxController.h na pas du tout t modifie. Cest ici que vous dfinirez la logique interne lie la seconde vue et que vous disposerez vos mthodes spcifiques, dans la veine du quiz figurant au chapitre prcdent, par exemple. Ce sera prcisment lobjet de notre prochaine application complte.
La navigation sous forme de listes et de tableaux Le troisime grand type de systme de navigation, bas sur le parcours de tableaux contenant des donnes, est dtaill au Chapitre 7. travers un exemple concret, vous dcouvrirez comment communiquer avec de larges bases de donnes afin den extraire le contenu et de le hirarchiser autour de sections personnalises. Sans dflorer prmaturment le sujet, sachez quun tel systme de navigation sarticule autour dun contrleur UITableViewController, dont le fonctionnement est trs proche des deux contrleurs mis en application travers les exemples prcdents.

Modifier lanimation de transition


Comme nous lavons vu prcdemment, une application multivues charge une srie dcrans dont le basculement est gr par un contrleur racine, qui les affiche ou les masque en fonction des choix de lutilisateur. Les transitions entre ces vues bnficient dun lger effet danimation. Leffet le plus simple correspond lattribut animated de la mthode pushViewController : on "pousse" littralement la vue suivante dans un mouvement hori-

128

Dveloppez des applications originales pour iPhone et iPod Touch

zontal (voir Figure 5.22). Au-del de son aspect sobre et pur, cette animation prsente un suprme avantage : elle nalourdit pas votre code source. Vous pouvez en revanche soigner vos transitions et leur consacrer de plus larges blocs de code, en profitant des mthodes beginAnimations et commitAnimations de la classe UIView.
Figure 5.22 Une simple animation de transition o les vues basculent horizontalement.

Le principe demeure simple : vous dfinissez votre type danimation en profitant de constantes prdfinies (transition de gauche droite, de droite gauche, transition qui "retourne" une vue, etc.), vous dclarez sa dure en secondes et vous grez lapparition ou la disparition des vues. Partons de lapplication prcdente et remplaons la mthode pushViewController. Dans la mesure o nous allons dfinir plusieurs tats en fonction de la vue affiche lcran, vous devez lgrement retoucher le fichier RacineViewController.h, qui correspond au contrleur racine grant vos deux vues. Ouvrez nouveau ce fichier sous Xcode et remplacez son contenu par le code qui figure au Listing 5.5. Listing 5.5 : RacineViewController.h
#import <UIKit/UIKit.h> #import "VueDeuxController.h"; @interface RacineViewController : UIViewController { VueDeuxController *vueDeuxController; RacineViewController *racineViewController; } @property (nonatomic, retain) VueDeuxController *vueDeuxController; @property (nonatomic, retain) RacineViewController *racineViewController;

Chapitre 5

Les vues de votre application

129

- (IBAction)changerVue:(id)sender; @end

Cest toujours laction changerVue qui est responsable de la permutation entre les deux vues. Nous avons ici simplement dclar la variable dinstance racineViewController en lassociant notre contrleur racine. Nous avons ensuite dfini ses proprits. ce titre, noubliez surtout pas dappeler @synthesize dans len-tte du fichier RacineViewController.m, comme suit :
@synthesize vueDeuxController, racineViewController;

Toujours dans le fichier RacineViewController.m, remplacez laction changerVue par la dclaration figurant au Listing 5.6. Listing 5.6 : Modification de laction changerVue dans RacineViewController.m
- (IBAction)changerVue:(id)sender { [UIView beginAnimations:@"ChangementVue" context:nil]; [UIView setAnimationDuration:2.0]; if (vueDeuxController.view.superview == nil) { VueDeuxController *vueDeux = [[VueDeuxController alloc] initWithNibName:@"Vue2" bundle:[NSBundle mainBundle]]; self.vueDeuxController = vueDeux; [vueDeux release]; [UIView setAnimationTransition:UIViewAnimationTransitionFlip FromRight forView:self.view cache:YES]; [vueDeuxController viewWillAppear:YES]; [racineViewController viewWillDisappear:YES]; [racineViewController.view removeFromSuperview]; [self.view insertSubview:self.vueDeuxController.view atIndex:0]; [racineViewController viewDidDisappear:YES]; [vueDeuxController viewDidAppear:YES]; } else { [UIView setAnimationTransition:UIViewAnimationTransitionFlip FromLeft forView:self.view cache:YES]; [racineViewController viewWillAppear:YES]; [vueDeuxController viewWillDisappear:YES]; [vueDeuxController.view removeFromSuperview]; [self.view insertSubview:self.racineViewController. view atIndex:0]; [vueDeuxController viewDidDisappear:YES]; [racineViewController viewDidAppear:YES]; } [UIView commitAnimations]; }

130

Dveloppez des applications originales pour iPhone et iPod Touch

Enregistrez votre projet puis compilez-le. Vous dcouvrez sans plus attendre le rsultat dans le Simulateur diPhone : en cliquant sur le bouton de la vue principale, lcran tourne depuis la droite pour rvler la seconde vue. Renouvelez lopration et la transition seffectue dans le sens inverse, jusqu revenir lcran initial (voir Figure 5.23).
Figure 5.23 Notre nouvelle transition met en scne la rotation des diffrentes vues.

Malgr son apparente lourdeur, cette approche reste simple et logique. Vous commencez par dfinir un bloc danimation laide de lenvoi de message [UIView beginAnimations]. Vous prcisez ensuite sa dure, exprime en secondes dans cet exemple, la transition seffectue en deux secondes. Vous devez enfin prvoir lanimation en fonction de la vue actuellement affiche lcran. Cest prcisment l quinterviennent nos variables dinstance vueDeuxController et racineViewController, qui correspondent aux deux vues et qui permettent de pointer facilement vers chacune delles. Si la seconde vue napparat pas lcran, nous linitialisons et nous dfinissons une transition de droite gauche. Les mthodes viewWillAppear, viewWillDisappear et leurs pendants viewDidAppear et viewDidDisappear attendent des boolens et vous permettent de grer prcisment laffichage et la disparition de vos diffrentes vues. Notez au passage que lattribut cache acclre leffet de transition en ralisant un "clich" aplati de vos vues au dbut de lanimation : on utilise alors ces images pour afficher leffet au lieu de dplacer dun seul bloc tous les contrles prsents sur chaque vue. Les appels aux mthodes viewWillAppear, viewWillDisappear, viewDidAppear et viewDidDisappear jouent un rle prpondrant lorsque vous souhaitez effectuer des traitements juste avant le dbut ou aprs la fin dune animation. Cest souvent le cas lorsque vous traitez des vues qui sont des sous-classes spcifiques dUIView. La seconde portion de la boucle conditionnelle traite le cas contraire : la seconde vue est actuellement affiche

Chapitre 5

Les vues de votre application

131

lcran et on souhaite retourner la premire. Nous inversons alors leffet de transition, en appelant la constante UIViewAnimationTransitionFlipFromLeft. Il existe lheure actuelle quatre constantes diffrentes :
vv vv vv vv

UIViewAnimationTransitionFromLeft, un basculement depuis la gauche ; UIViewAnimationTransitionFromRight, un basculement depuis la droite ; UIViewAnimationTransitionCurlUp, un tournement de page depuis le bas ; UIViewAnimationTransitionCurlDown, un tournement de page depuis le haut.

Nhsitez pas tester ces diffrents effets en remplaant les constantes au Listing 5.6. Aprs avoir dfini le bloc danimation, vous excutez leffet en appelant commitAnimations.
Figure 5.24 Dcomposition de lanimation de gauche droite, avec la constante UIViewAnimationTransitionFromLeft.

MultiConvertisseur, une application multivues compose dactions et doutlets


Afin de clore notre tour dhorizon des systmes de navigation et des applications multivues, attelons-nous un dernier exemple concret. MultiConvertisseur (voir Figure 5.25) est une application complte qui vise illustrer tous les enseignements de ce chapitre. On la manipule travers une barre donglets, qui donne accs autant de vues : chaque contrleur prend en charge une srie doprations et convertit des units de temprature, de mesure et de poids.

132

Dveloppez des applications originales pour iPhone et iPod Touch

Figure 5.25 Notre application MultiConvertisseur, telle quon souhaite la dvelopper.

Plaons-nous dans les conditions relles et commenons par esquisser le cahier des charges de MultiConvertisseur. Le rle de lapplication est plutt simple et nous devons runir les fonctions suivantes :
vv vv

Un contrleur se charge dafficher les diffrents onglets. La barre donglets renvoie automatiquement vers une srie de fichiers nib individuels, associs chaque fonction du convertisseur. On distingue alors les fonctions de conversion de tempratures (degrs Celsius vers Fahrenheit et rciproquement), de longueurs (centimtres en pouces) et de poids (kilogrammes en livres). Lutilisateur saisit ses valeurs dans des champs laide du clavier virtuel et lance la conversion en cliquant sur un bouton. Avec une telle disposition, il sera facile dajouter dautres units convertir, en ne retouchant que les contrleurs et linterface associs la fonction considre.

vv

vv

vv

Le dveloppement parat ainsi plus clair et mieux balis. Pour une application plus ambitieuse, nhsitez pas prendre le temps de rflchir au design des interfaces sur papier et tracer toutes les interactions du dialogue homme-machine. Ouvrez Xcode, droulez le menu File et cliquez sur New Project. Slectionnez le modle Tab Bar Application et saisissez MultiConvertisseur en guise de nom de projet. Nous allons commencer par rarranger les fichiers prpars par Xcode et par crer les classes dont nous avons besoin. La barre infrieure se compose de quatre onglets : Infos (cran daccueil), Tempratures, Longueurs et Poids. Crez les contrleurs associs en maintenant la touche Ctrl enfonce et en cliquant sur le dossier Classes de votre projet. Choisissez ensuite

Chapitre 5

Les vues de votre application

133

Add > New File et slectionnez le modle UIViewController subclass, dans la catgorie Cocoa Touch Classes. Recommencez lopration afin de crer les fichiers suivants :
vv vv vv vv

InfosViewController.h et .m. TempView.h et .m. LongView.h et .m. PoidsView.h et .m.

Procdez de mme en cliquant sur le dossier Resources afin dajouter les fichiers nib correspondants chaque vue. Cette fois, slectionnez le modle View XIB de la catgorie User Interfaces et crez les fichiers InfosView.xib, TempView.xib, LongView.xib et PoidsView.xib (voir Figure 5.26).
Figure 5.26 Lorganisation initiale de notre projet sous Xcode.

Ouvrez le fichier MainWindow.xib et ajoutez deux autres onglets depuis la bibliothque, en glissant des objets Tab Bar Item vers la barre en bas de lcran. Renommez chaque onglet et affichez linspecteur didentit (Cmd+4). Vous devez associer les nouvelles classes vos onglets : dans le champ Class, saisissez InfosViewController pour le premier onglet et ainsi de suite. Dans linspecteur dattributs (Cmd+1), noubliez surtout pas de remplacer le champ NIB Name par le nom du fichier nib associ. Ainsi, longlet Temprature pointe vers la classe et le nib TempView. Sous Interface Builder, vous pouvez basculer dun onglet lautre afin de vrifier que toutes les donnes ont t correctement lies et que vos quatre vues apparaissent (voir Figure 5.27).

134

Dveloppez des applications originales pour iPhone et iPod Touch

Figure 5.27 Les connexions ont t ralises au sein de linterface principale et lapplication bascule dun onglet lautre.

Affichez prsent linterface TempView.xib. Nous vous laissons le soin dagencer les lments comme bon vous semble, mais sachez que vous devrez ajouter au moins quatre champs de texte et deux boutons pour lancer les fonctions escomptes. Cliquez sur Files Owner et associez-lui la classe TempView. Vous pourrez ainsi tisser des liens vers les outlets et les actions dfinis dans TempView.h et .m. Renouvelez lopration pour les trois autres vues de lapplication. Longlet Infos correspond lcran daccueil, charg par dfaut. Il affiche des informations sur lapplication et sur son dveloppeur. Vous pouvez galement lui greffer des boutons renvoyant vers les diffrentes fonctions de conversion, qui agissent alors comme autant de raccourcis pratiques. Passons sans plus tarder au dveloppement ! Saisissez les codes des listings ci-dessous dans les classes correspondantes. Listing 5.7 : MultiConvertisseurAppDelegate.h
#import <UIKit/UIKit.h> @interface MultiConvertisseurAppDelegate : NSObject <UIApplicationDelegate, UITabBarControllerDelegate> { UIWindow *window; UITabBarController *tabBarController; } @property (nonatomic, retain) IBOutlet UIWindow *window; @property (nonatomic, retain) IBOutlet UITabBarController *tabBarController; @end

Chapitre 5

Les vues de votre application

135

Listing 5.8 : MultiConvertisseurAppDelegate.m


#import "MultiConvertisseurAppDelegate.h" @implementation MultiConvertisseurAppDelegate @synthesize window; @synthesize tabBarController; - (void)applicationDidFinishLaunching:(UIApplication *)application { // Add the tab bar controllers current view as a subview of the window [window addSubview:tabBarController.view]; [window makeKeyAndVisible]; } - (void)dealloc { [tabBarController release]; [window release]; [super dealloc]; } @end

Listing 5.9 : InfosViewController.h


#import <UIKit/UIKit.h> #import "TempView.h"; #import "LongView.h"; #import "PoidsView.h"; @interface InfosViewController : UIViewController { TempView *tempView; LongView *longView; PoidsView *poidsView; InfosViewController *infosViewController; } @property @property @property @property (nonatomic, (nonatomic, (nonatomic, (nonatomic, retain) retain) retain) retain) TempView *tempView; LongView *longView; PoidsView *poidsView; InfosViewController *infosViewController;

- (IBAction)changerOnglet:(id)sender; @end

136

Dveloppez des applications originales pour iPhone et iPod Touch

Listing 5.10 : InfosViewController.m


#import #import #import #import "InfosViewController.h" "TempView.h"; "LongView.h"; "PoidsView.h";

@implementation InfosViewController @synthesize infosViewController, tempView, longView, poidsView; - (IBAction)changerOnglet:(id)sender { NSString *reponse = [sender titleForState:UIControlStateNormal]; if([reponse isEqualToString:@"Cest parti !"]) { [UIView beginAnimations:@"ChangementVue" context:nil]; [UIView setAnimationDuration:2.0]; TempView *tempViewa = [[TempView alloc] initWithNibName:@"TempView" bundle:[NSBundle mainBundle]]; self.tempView = tempViewa; [tempViewa release]; [UIView setAnimationTransition:UIViewAnimationTransitionFlip FromRight forView:self.view cache:YES]; [tempView viewWillAppear:YES]; [self.view addSubview:self.tempView.view]; [tempView viewDidAppear:YES]; [UIView commitAnimations]; } } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesnt have a superview // Release anything thats not essential, such as cached data } - (void)dealloc { [infosViewController release]; [tempView release]; [longView release]; [poidsView release]; [super dealloc]; } @end

Nous avons dpos un bouton intitul "Cest parti !" sur la vue InfosView.xib et nous lui avons associ laction changerOnglet. travers un petit effet danimation, lutilisateur per-

Chapitre 5

Les vues de votre application

137

mute ainsi automatiquement vers la premire fonction du convertisseur (voir Figure 5.28). Vous pouvez parfaitement ajouter dautres boutons et exploiter la valeur de sender pour reprer le bouton press : vous renvoyez ainsi lutilisateur vers les diffrentes fonctions de lapplication. vous de dvelopper ces boucles conditionnelles ! Poursuivons prsent le dveloppement de notre convertisseur en ajoutant la logique des autres contrleurs. Il sagit chaque fois de crer des outlets correspondants aux champs de saisie de lutilisateur et des actions associes aux boutons de conversion.
Figure 5.28 On clique sur le bouton affich sur la premire vue : on bascule automatiquement vers une seconde vue, dans un effet danimation.

Listing 5.11 : TempView.h


#import <UIKit/UIKit.h> @interface TempView : UIViewController { IBOutlet UITextField *saisie; IBOutlet UITextField *resultat; IBOutlet UITextField *saisie2; IBOutlet UITextField *resultat2; } @property @property @property @property (retain, (retain, (retain, (retain, nonatomic) nonatomic) nonatomic) nonatomic) UITextField UITextField UITextField UITextField *saisie; *resultat; *saisie2; *resultat2;

- (IBAction)convertTempFC:(id)sender; - (IBAction)convertTempCF:(id)sender; @end

138

Dveloppez des applications originales pour iPhone et iPod Touch

Listing 5.12 : TempView.m


#import "TempView.h" @implementation TempView @synthesize saisie, resultat, saisie2, resultat2; - (IBAction)convertTempFC: (id) sender { float saisieValeur = [[saisie text] floatValue]; float resultatValeur = (saisieValeur - 32.0f) * 5.0f / 9.0f; [resultat setText:[NSString stringWithFormat:@"%3.2f", resultatValeur]]; } - (IBAction) convertTempCF: (id) sender { float saisieValeur2 = [[saisie2 text] floatValue]; float resultatValeur2 = (saisieValeur2 * 1.8f) + 32.0f; [resultat2 setText:[NSString stringWithFormat:@"%3.2f", resultatValeur2]]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesnt have a superview // Release anything thats not essential, such as cached data } - (void)dealloc { [saisie release]; [resultat release]; [saisie2 release]; [resultat2 release]; [super dealloc]; } @end

Listing 5.13 : LongView.h


#import <UIKit/UIKit.h> @interface LongView : UIViewController { IBOutlet UITextField *saisie; IBOutlet UITextField *resultat; } @property (retain, nonatomic) UITextField *saisie; @property (retain, nonatomic) UITextField *resultat;

Chapitre 5

Les vues de votre application

139

- (IBAction)convertLong:(id)sender; @end

Listing 5.14 : LongView.m


#import "LongView.h" @implementation LongView @synthesize saisie, resultat; - (IBAction)convertLong: (id) sender { float saisieValeur = [[saisie text] floatValue]; float resultatValeur = (saisieValeur / 2.4f); [resultat setText:[NSString stringWithFormat:@"%3.2f", resultatValeur]]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesnt have a superview // Release anything thats not essential, such as cached data } - (void)dealloc { [saisie release]; [resultat release]; [super dealloc]; } @end

Listing 5.15 : PoidsView.h


#import <UIKit/UIKit.h> @interface PoidsView : UIViewController { IBOutlet UITextField *saisie; IBOutlet UITextField *resultat; } @property (retain, nonatomic) UITextField *saisie; @property (retain, nonatomic) UITextField *resultat;

140

Dveloppez des applications originales pour iPhone et iPod Touch

- (IBAction)convertPoids:(id)sender; @end

Listing 5.16 : PoidsView.m


#import "PoidsView.h" @implementation PoidsView @synthesize saisie, resultat; - (IBAction)convertPoids: (id) sender { float saisieValeur = [[saisie text] floatValue]; float resultatValeur = (((saisieValeur * 100000.0f) / 0.45359237f) /100000.0f); [resultat setText:[NSString stringWithFormat:@"%3.2f", resultatValeur]]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesnt have a superview // Release anything thats not essential, such as cached data } - (void)dealloc { [saisie release]; [resultat release]; [super dealloc]; } @end

Comme vous le constatez, les fonctions demeurent simples : elles rcuprent la valeur saisie par lutilisateur, procdent un calcul de conversion et affichent le rsultat dans le second champ. Vous pouvez ainsi librement toffer le programme de conversion en ajoutant dautres champs de saisie, comme nous avons commenc le faire avec la classe TempView.m. Passons prsent au design des vues. Chargez successivement les fichiers InfosView.xib, TempView.xib, LongView.xib et PoidsView.xib et agencez-les de manire ce quils ressemblent aux Figures 5.29 5.32.

Chapitre 5

Les vues de votre application

141

Figure 5.29 La vue InfosView.xib, avec son bouton associ laction changerOnglet.

Figure 5.30 La vue TempView.xib pour la conversion de tempratures.

142

Dveloppez des applications originales pour iPhone et iPod Touch

Figure 5.31 La vue LongView.xib pour la conversion de longueurs.

Figure 5.32 La vue PoidsView.xib pour la conversion de poids.

Nous vous laissons le soin de lier les actions et les outlets de chaque vue, comme au chapitre prcdent. Vous devez ainsi associer Files Owner View, les champs de texte saisie et resultat aux deux objets UITextField et le bouton de conversion au dlgu de lapplication et laction de la classe contrleur. Une petite particularit que nous navons pas encore tudie : vous devez associer un vnement Did End On Exit au champ de saisie afin de faire disparatre le clavier virtuel. Cliquez sur lun des champs saisie de vos vues puis basculez vers linspecteur de connexions (Cmd+2). Cliquez ensuite sur le cercle en face de Did End On Exit et maintenez la souris jusqu First Responder. Slectionnez alors laction convertPoids par exemple. Ainsi, ds que lutilisateur fermera le clavier virtuel, la conversion se dclenche : il na mme plus besoin de presser le bouton Convertir !

Chapitre 5

Les vues de votre application

143

Enregistrez toutes vos modifications puis compilez le projet. Le Simulateur diPhone affiche vos quatre onglets et vous permet de procder toutes les conversions de votre choix (voir Figure 5.33).
Figure 5.33 Notre application MultiConvertisseur au grand complet, en plein calcul de conversions.

Le design des vues de votre application


Alors que lApp Store compte plus de 100 000 applications lheure actuelle (http://148apps. biz/app-store-metrics), il devient de plus en plus difficile de se dmarquer de ses "concurrents" directs et doffrir une meilleure visibilit son projet sur la boutique en ligne dApple. Bien entendu, la logique de vos contrleurs et la qualit de votre code jouent un rle prpondrant dans lintrt de votre application : si vous proposez un traitement intelligent et innovant, travers un outil qui rend de rels services au quotidien, la carrire de votre projet a toutes les chances dtre aurole de succs. Toutefois, ne ngligez pas la phase de design initiale. Vous ne disposez que de quelques secondes pour convaincre vos futurs utilisateurs, travers la page consacre votre projet sur lApp Store. Au-del de la pure description de votre application, la capture dcran qui lui est associe doit rapidement convaincre les visiteurs de procder au tlchargement. Il faut donc se rendre lvidence : notre application MultiConvertisseur na rien de "sexy", mme si elle remplit le rle quon lui a fix. Sa srie dcrans blancs tranche trop radicalement avec le design des applications classiques de liPhone et des utilitaires intgrs par dfaut. En la prsentant ainsi sur lApp Store, nous avons toutes les chances dcoper de commentaires ngatifs. Mme si vous ne disposez pas de talents graphiques particuliers, il est inutile daller ainsi Canossa : le travail prliminaire est purement gch par laspect

144

Dveloppez des applications originales pour iPhone et iPod Touch

peu flatteur de linterface. Mais mfiez-vous galement de la tendance inverse : de nombreuses applications ne prsentent aucun intrt, si ce nest leur design tape--lil qui mprend les utilisateurs. Combien de fois avez-vous tlcharg une application avant de vous rendre compte de lesbroufe ? Les applications pour iPhone correspondent un juste quilibre entre les logiciels bureautiques classiques, dont elles empruntent lintrt et la complexit des traitements, et les logiciels des autres plates-formes mobiles, qui partagent la mme accessibilit et simplicit demploi. Cet quilibre sexprime galement au niveau du design : lcran de liPhone autorise tout type de fioritures (couleurs vives, boutons personnaliss, logos hauts en couleurs, etc.) tout en favorisant les vues sobres et soignes. Aprs plus de deux ans dexistence de la plateforme, nous disposons dun certain recul et nous pouvons identifier les bonnes pratiques, les rgles dor et les cueils viter en matire de design.

Les tendances du design dapplications


Commenons demble par mettre fin une ide reue : non, les applications les plus intressantes ne remplacent pas ncessairement tous les lments graphiques officiels du kit de dveloppement de liPhone ! Cest devenu une trop grande habitude : de nombreux dveloppeurs troquent les lments traditionnels (interrupteur, boutons, listes, contrles de navigation, etc.) contre des images personnalises, ralises sous Photoshop. Si linterface conserve toute sa cohrence et son aspect intuitif, le pari est russi : vous innovez et vous proposez une nouvelle manire dinteragir avec le terminal dApple. Si ces remplacements ne prsentent pas dintrt, vous alourdissez au contraire lergonomie de votre application et vous imposez vos utilisateurs lapprentissage dune srie de manipulations (voir Figure 5.34).
Figure 5.34 Linterface de cette application est tellement surcharge dlments spcifiques quelle en devient difficile manipuler.

Chapitre 5

Les vues de votre application

145

En reprenant tels quels les lments de base du kit de dveloppement, vous tes assur de ne pas drouter vos utilisateurs. Dans la mesure du possible, essayez donc de conserver les systmes de navigation standard, utilisez les polices par dfaut et ne surchargez pas linterface de votre application (voir Figure 5.35).
Figure 5.35 Linterface de lapplication Facebook sinscrit au contraire dans le pur canevas des utilitaires de liPhone et prsente une manipulation trs intuitive.

Les utilitaires ont tout intrt arborer un look trs classique, avec un arrire-plan gris-bleu et des boutons blancs, clairement identifis par une srie dicnes. Ny voyez pas ncessairement un nivellement par le bas de la qualit de votre design ; les utilisateurs apprcieront au contraire la sobrit de votre application et la rangeront ds le premier cran de leur iPhone, parmi les utilitaires standard (voir Figure 5.36).
Figure 5.36 Linterface de Top Floor reprend parfaitement les lments traditionnels de liPhone et offre une vision claire de vos possibilits.

146

Dveloppez des applications originales pour iPhone et iPod Touch

Dautres applications qui se fixent un rle unique jouent sur le symbolisme de leur sujet. Ainsi, une bote outils runissant des rgles, altimtres et niveaux bulles peut mettre en scne une mtaphore visuelle et sinscrire sur un fond qui voque le bois ou le mtal. Cet cart vis--vis du design traditionnel de liPhone est parfaitement tolr par les utilisateurs, qui y voient au contraire la marque dune vritable immersion de lapplication dans son sujet. Ny cdez pas cote que cote : toutes les applications ne rsistent pas ncessairement lpreuve darrire-plans clinquants et surchargs. Rflchissez sur papier lintrt dun tel design et identifiez demble les lments visuels associs traditionnellement au rle de votre application (voir Figure 5.37).
Figure 5.37 Avec son interface colore et dessine, Mom Maps scarte du champ traditionnel des applications tout en imposant subtilement des mtaphores visuelles correspondant son sujet : la petite enfance et les loisirs de nos chres ttes blondes.

Si votre application repose sur une srie de listes runies autour dun systme de navigation, ne faites jamais preuve dune originalit dmesure. Le contenu en lui-mme prvaut sur tous les autres aspects de votre application. Vos sections doivent tre clairement identifies et la navigation doit demeurer intuitive et accessible en une pression du doigt. Slectionnez une srie de couleurs que vous dployez lensemble de votre application, afin de reprer immdiatement les informations essentielles. Des icnes bien choisies et de petits pictogrammes facilitent la lecture (voir Figure 5.38). Retenez donc ce principe : il est inutile de remplacer les lments traditionnels du kit de dveloppement sauf si votre sujet sy prte parfaitement. Il suffit parfois daligner les lments de manire harmonieuse et de changer une srie de couleurs pour confrer un look suffisamment original et moderne votre application.

Chapitre 5

Les vues de votre application

147

Figure 5.38 La liste des tches accomplir dans lapplication ToDo : la sobrit est de mise et vous visualisez immdiatement le contenu.

Figure 5.39 En modifiant les couleurs par dfaut des listes et en essayant d'afficher trop d'lments l'cran, cette application est confuse et n'est pas facile piloter au doigt.

Du papier Photoshop : la refonte de MultiConvertisseur


Comme nous lavons vu, MultiConvertisseur sinscrit dans limmense catgorie des utilitaires pour iPhone et essuie une concurrence svre. Figurant parmi ses plus homologues rivaux, Convertbot offre des fonctions quivalentes tout en arborant un look soign et trs original. Ralise par Mark Jardine et Paul Haddad, cette application mime lallure dun pse-personne en runissant toutes ses fonctions de conversion autour dune "roue", qui dclenche autant dactions prpares dans le code source. Du propre aveu de ses dveloppeurs, "il aura fallu cinq esquisses sur papier pour aboutir un tel rsultat : la forme ronde au centre de lcran voque subtilement le design de liPod et nous a offert un canevas de base pour dvelopper lapplication et identifier ses rles principaux". Mark Jardine poursuit son

148

Dveloppez des applications originales pour iPhone et iPod Touch

explication : "notre objectif principal ntait pas doffrir la meilleure application de conversion dunits il existe des dizaines dutilitaires plus prcis, qui vous permettent daboutir un rsultat en un seul clic. Notre objectif tait de rendre lopration amusante et ludique. En distinguant plusieurs tapes dans la conversion, les utilisateurs ressentent une plus grande satisfaction lorsquils aboutissent au rsultat. Le design est ainsi porteur dmotion". Suivez les recommandations de Mark et commencez par travailler sur papier. Une srie desquisses vous aide y voir plus clair et dterminer le rle essentiel de votre application. Reportez-vous ventuellement son blog, ladresse http://tapbots.com/blog/design/designing-convertbot, pour dcouvrir le fruit de ce premier travail (voir Figure 5.40).
Figure 5.40 Les premires esquisses de Convertbot, jusquau rsultat final.

Sous Photoshop ou votre logiciel de cration graphique prfr, crez un nouveau canevas de 320 480 pixels et dposez-y les lments de votre choix. Vous pouvez tlcharger un fichier PSD de 9 Mo contenant la plupart des lments dinterface ladresse http://www. teehanlax.com/blog/?p=1628. En alignant tous ces objets et en les personnalisant, vous aboutissez une premire ide du rsultat escompt (voir Figure 5.41).
Figure 5.41 La cration dune bauche de linterface sous Photoshop CS4.

Chapitre 5

Les vues de votre application

149

Vous avez tout intrt prendre une capture du Simulateur diPhone et ajouter cette image un calque, en jouant sur son opacit. Vous pouvez ainsi mieux vous rendre compte de lemplacement de tous vos contrles et vous crez vos arrire-plans en consquence. Photoshop vous permet galement de dcouper votre interface en "tranches" : vous crez ainsi des zones pousant les dimensions de vos boutons et contrles et vous enregistrez des images destines les remplacer intgralement. Lorsque tout est prt, droulez le menu Fichier de Photoshop CS4 et choisissez Enregistrer pour le Web et les priphriques. Slectionnez le format PNG-24, activez ventuellement la transparence et cliquez sur le bouton Enregistrer. Ouvrez nouveau votre projet dapplication sous Xcode, puis cliquez sur le dossier Resources en maintenant la touche Ctrl du clavier enfonce. Slectionnez Add puis Existing Files, pointez vers limage frachement cre et cliquez sur Add. Renouvelez lopration pour toutes les images que vous souhaitez ajouter votre projet, notamment les icnes figurant dans la barre donglets. Chargez ensuite le fichier nib correspondant la vue que vous souhaitez diter. Disposez un objet de type UIImageView sur votre interface et saisissez les poignes qui lencadrent pour ladapter aux dimensions de limage que vous comptez greffer la vue. Ouvrez ensuite linspecteur dattributs et droulez le menu en face du champ Image ; le nom de votre fichier import doit figurer dans la liste. Slectionnez-le : il apparat dans le conteneur UIImageView. Pour disposer une image en arrire-plan, la solution la plus simple consiste slectionner lobjet puis ouvrir linspecteur de position (Cmd+3). Saisissez 0 dans les champs X et Y, puis 320 et 480 dans les champs W et H. Mme si Interface Builder ne dispose pas dun systme de calques pour matriser la superposition de vos lments, vous avez la possibilit de jouer sur leur empilement. Slectionnez tous vos autres objets (libells, boutons, etc.), droulez le menu Layout et choisissez Send To Front. Si vous avez cr de petites images laide de loutil Tranche de Photoshop CS4, slectionnez les boutons qui doivent les arborer, ouvrez linspecteur dattributs et choisissez le fichier correspondant au champ Image. L encore, vous pouvez jouer sur leur position pour les faire apparatre au-dessus de larrireplan (voir Figure 5.42). Multipliez les essais jusqu aboutir au rsultat escompt. Noubliez pas : vous ne devez pas ncessairement surcharger linterface. vitez ainsi de disposer de vritables photographies en guise darrire-plan.

150

Dveloppez des applications originales pour iPhone et iPod Touch

Figure 5.42 Nous avons modernis linterface de notre application, pour la rendre plus agrable utiliser.

Prcharger la vue de votre application Lorsque vos utilisateurs cliquent sur licne associe votre application, liPhone charge tous les composants ncessaires en mmoire, accde ses ressources puis ouvre la premire vue. Pour les applications les moins complexes, lopration nexcde pas une seconde et vous avez limpression que lutilitaire se charge instantanment travers une petite animation. Mais pour les applications plus ambitieuses, le dlai peut sembler sterniser. Une petite astuce consiste greffer un fichier Default.png la racine des ressources de lapplication ; liPhone le charge par dfaut lors du lancement. En crant une telle image qui reprend lallure de la premire vue de votre application, vous donnez limpression que votre utilitaire se lance immdiatement. Vous pouvez galement utiliser cette image pour crer un splash screen, qui agit comme un cran dintroduction et immerge lutilisateur dans le cadre de votre application. Les studios professionnels de dveloppement sappuient gnralement sur cet cran pour diffuser leur logo.

Pour aller plus loin


Au cours de ce chapitre, vous avez appris dvelopper des applications multivues en isolant chaque interface et chaque contrleur. Vous aboutissez ainsi des projets plus ambitieux, qui combinent une grande srie de fonctionnalits. Au-del de la pertinence de la logique interne de vos contrleurs, vous avez galement compris quel point lergonomie joue un rle majeur dans le dveloppement dapplications pour iPhone et iPod Touch. Un systme de navigation ne se choisit pas au hasard et doit servir lintrt de votre application. Noubliez jamais que vous vous adressez des utilisateurs de tlphone mobile, probablement au cours de leurs dplacements ; dans pareille situation, leur concentration nexcde pas quelques secondes et vous ne devez pas leur imposer un systme trop complexe apprhender.

Chapitre 5

Les vues de votre application

151

Nhsitez pas modifier encore les vues de lapplication MultiConvertisseur en guise dexercice et choisissez un autre agencement. toffez galement le design de chaque vue, en modifiant larrire-plan et en chargeant ventuellement des images en guise de titres ou de boutons. Prtez-vous un tel jeu avant dentamer la lecture du chapitre suivant : nous allons dsormais nous intresser tous les contrles spcifiques liPhone, qui lui confrent son ergonomie si particulire. La conception dapplications autour de telles fonctionnalits exige une plus grande rigueur sur le plan du design. Non seulement vos utilisateurs vont presser des boutons et interagir avec votre application travers toutes sortes de contrleurs de navigation, mais ils vont surtout la vivre de manire "organique", en fonction de leur prise en main... au sens littral ! Lorsquelle entretient de tels rapports avec ses utilisateurs, votre application ne doit pas souffrir du moindre dfaut ergonomique. La clart de linterface joue un rle aussi important que la logique interne de vos classes dans le succs dune application.

6
Les contrles spcifiques
Au sommaire de ce chapitre
vv vv vv vv

Interagir avec des contrles spcifiques : la cration dun utilitaire Interagir avec des rglettes, des alertes, des contrles segments et des sous-vues Intgrer une roulette lapplication Pour aller plus loin

Si certaines applications trs populaires tiennent en une poigne dlments intelligemment agencs dans une fentre unique, la plupart des projets les plus ambitieux reposent sur une multitude de vues qui sadaptent aux attentes des utilisateurs. Il nest pas rare dimbriquer quatre ou cinq fentres diffrentes, elles-mmes constelles de boutons, libells ou champs de texte. Pour prserver un contrle intuitif malgr la multiplication des objets dinterface, le SDK de liPhone dispose dune bibliothque trs riche : rglettes, interrupteurs, roulettes,

154

Dveloppez des applications originales pour iPhone et iPod Touch

etc. Tous ces lments autorisent un contrle minutieux et permettent aux utilisateurs dinteragir avec votre application de manire ergonomique. limage du motif de conception MVC, votre tche ne consiste pas seulement vous focaliser sur la logique interne de vos programmes ; vous devez galement agencer au mieux tous ces lments, sans pour autant cder la facilit de dposer ple-mle tout type dobjets. Votre application doit toujours pleinement justifier lutilisation de tous ces contrles avancs. Nous lavons vu au chapitre prcdent : si lcran de liPhone prsente ncessairement un affichage limit, les systmes de navigation (onglets, boutons, barres doutils, etc.) vous aident regrouper correctement vos lments et ne pas alourdir linterface. Limmense famille des utilitaires gagne sarticuler autour de tels systmes, afin de prserver la lisibilit de lapplication. Au cours de ce chapitre, nous verrons comment aboutir de tels projets autour de ces contrles avancs ; ces derniers vous font gagner un temps prcieux et largissent considrablement le champ de vos possibilits tout en prsentant une interface conviviale aux utilisateurs. Face de tels objectifs, les roulettes jouent un rle prpondrant. Elles constituent lune des interfaces-cls de liPhone : on navigue verticalement parmi leurs lments, en les faisant glisser au doigt. Numros de tlphone, paramtres dune application ou contenu extrait dun service web : il existe de nombreuses manires dagencer les lments quelles contiennent et de les rendre interactives. Elles deviennent alors la colonne vertbrale de toute votre application et donnent accs une immense varit de services et dinformations. Au cours de ce chapitre, nous tudierons leur intrt et nous apprendrons les disposer sur lcran de liPhone travers une srie dexemples concrets.

Interagir avec des contrles spcifiques : la cration dun utilitaire


Le modle Utility Application
Tel que le conoit Xcode, les utilitaires sont des applications mono-tches qui servent un but prcis : ce sont des outils simples que les utilisateurs dclenchent pour rpondre un besoin spcifique (voir Figure 6.1). Bulletin mto, calcul ditinraires, outil de bricolage, etc., tous ces projets sarticulent autour dune vue principale, qui offre un accs direct linformation, et dune vue secondaire accessible laide dun petit bouton "i". Vous lavez probablement dj repr sur vos applications prfres, commencer par le programme Bourse qui est prinstall sur liPhone : ce bouton dclenche une animation de transition qui fait pivoter la vue principale vers cette vue secondaire, travers laquelle on configure sommairement

Chapitre 6

Les contrles spcifiques

155

lutilitaire ou lon accde des informations complmentaires. Vous pouvez rapidement dvelopper une application de ce type grce lun des modles intgrs Xcode.
Figure 6.1 Lapplication GuitarToolkit vous permet daccorder une guitare et daccder une page dinformation consacre au dveloppeur.

Nous allons crer une application de ce type en ajoutant une srie de contrles avancs la vue principale (interrupteurs, boutons, champs de texte, etc.) et en dcrivant le projet dans la vue secondaire. Sous Xcode, droulez le menu File > New Project, puis choisissez le modle "Utility Application". Cliquez ensuite sur le bouton Choose et saisissez "Motdepasse" en guise de nom de projet. Notre utilitaire est un gnrateur de mot de passe : en fonction de critres slectionns par lutilisateur (emploi de majuscules, minuscules, chiffres et/ou signes de ponctuation, longueur du mot de passe, etc.), lapplication propose alatoirement une chane de caractres quon pourra employer lors de la cration dun compte auprs dun service web, par exemple. Contrairement notre exemple de quiz, o lon devait presser directement le seul bouton correspondant notre rponse, il sagit ici de runir tous les critres dfinis par lutilisateur et de les traiter dun seul tenant laide dune action. Aprs avoir cr votre nouveau projet, essayez de le compiler en pressant simultanment les touches Cmd+R. Le Simulateur diPhone prsente cette premire bauche : votre utilitaire sarticule autour de deux vues vides que lon permute en pressant un petit bouton "i" (voir Figure 6.2). Depuis la seconde vue, on revient vers la vue principale en cliquant sur un bouton figurant dans la barre de titre Xcode a donc mis en place une application autour dun systme de navigation sommaire, qui est une instance de la classe UINavigationBar.

156

Dveloppez des applications originales pour iPhone et iPod Touch

Figure 6.2 Le comportement initial dun utilitaire cr sous Xcode.

Auscultez de plus prs les fichiers crs automatiquement. Leur agencement obit au principe suivant :
vv

Comme lindique la liste des proprits Info.plist, le fichier nib par dfaut est MainWindow. Il est ainsi charg en premier. En observant ce fichier, on constate quil intgre une instance de la classe RootViewController. Il sagit dune sous-classe dUIView qui ne dispose que dun outlet, infoButton, et dune action, toggleView. Le premier est un bouton affich par dfaut sur linterface qui dclenche laction : la vue principale permute vers la vue secondaire, selon le principe gnral que nous avons expos au chapitre prcdent. La classe RootViewController gre donc le changement de vue. On lui associe par dfaut deux contrleurs supplmentaires : MainViewController et FlipSideViewController, qui correspondent respectivement la vue principale et secondaire. En parallle, cette classe met en place une instance de la classe UINavigationBar que lon utilise travers laction toggleView pour grer le changement de vue. Comme vous le constatez en ouvrant le fichier RootViewController.m, cest la vue principale qui est charge par dfaut : initWithNibName:@"MainView" indique que la vue MainView.xib saffiche ds louverture de lapplication. Cette vue est pour linstant vide. Elle ne comprend quune instance de la classe MainView, elle-mme sous-classe dUIView. Son contrleur MainViewController est lui aussi vide et sapprte recueillir tous les traitements que vous souhaitez faire figurer sur la vue principale de votre utilitaire.

vv

vv

vv

Chapitre 6

Les contrles spcifiques

157

vv

Laction toggleView de la classe RootViewController gre le chargement de la vue secondaire. Elle commence par vrifier la vue qui figure actuellement sur lcran de liPhone. Sil ne sagit pas de la vue secondaire, on appelle la mthode loadFlipsideViewController et on charge le second fichier nib, FlipSideView.xib. Cette mthode exploite ensuite la barre de navigation instancie dans la fentre principale de lapplication, MainWindow.xib, pour ajouter un titre la seconde vue et permettre le retour la vue principale. Linterface de cette seconde vue est donc dfinie par le fichier FlipsideView.xib. L encore, la fentre est vide et ne comprend quune instance de la classe FlipSideView. Son contrleur FlipsideViewController est galement vide et sapprte hberger toutes les actions dclenches sur la seconde vue de votre utilitaire.

vv

Si tout ceci vous parat encore abstrait, parcourez en dtail le code source et retenez ce concept essentiel : pour personnaliser rapidement votre utilitaire, vous devez retoucher les deux vues successives cres par Xcode (MainView et FlipsideView), adapter leur classe contrleur et ventuellement personnaliser la barre de titre qui soutient leur basculement. Vous avez galement la possibilit dajouter des traitements personnaliss au lancement de votre utilitaire grce au dlgu de lapplication, MotdepasseAppDelegate. Mme sil apparat en anglais, le nom des classes est suffisamment explicite pour mettre rapidement le pied ltrier : vous profitez bel et bien du canevas dune application multivues en quelques clics de souris (voir Figure 6.3).
Figure 6.3 Lagencement initial des classes cres par Xcode dans notre projet dutilitaire.

158

Dveloppez des applications originales pour iPhone et iPod Touch

Le cahier des charges et lbauche prliminaire


Plaons-nous dans le contexte dun projet rel. Avant de mettre les mains dans le cambouis et dajouter nos lments dinterface et nos actions, nous devons rdiger un bref cahier des charges et dfinir les interactions sur papier. Les mots de passe trop vidents sont aujourdhui devenus la cible prfre des pirates, qui en profitent pour accder la quasitotalit de nos activits. Il nest en effet pas rare de dcliner le sempiternel mme ssame lensemble de nos services web (courrier lectronique, rseaux sociaux, services en ligne, etc.), ce qui les expose dangereusement. Notre utilitaire vise gnrer alatoirement des mots de passe beaucoup plus complexes, qui mlent ventuellement des majuscules et des minuscules mais aussi des chiffres et des signes de ponctuation. Lorsquun utilisateur sapprte crer un compte sur un forum ou un service en ligne, il lui suffira de dgainer son iPhone et dutiliser notre application pour sassurer de choisir un mot de passe inviolable. En dgageant ainsi le rle essentiel de notre application, nous avons identifi les principaux contrles que nous devrons disposer sur linterface :
vv vv

un champ de saisie pour indiquer le nombre de caractres composant le mot de passe ; des contrles permettant de complexifier le mot de passe et dy faire figurer des caractres majuscules et minuscules, des chiffres et des signes de ponctuation ; un bouton pour dclencher la cration du mot de passe ; un champ affichant le rsultat ; un bouton "i" pour basculer vers la vue secondaire ; une seconde vue o lon met en garde lutilisateur contre le risque demployer des mots de passe trop vidents et travers laquelle on ralise la "publicit" de notre gamme de produits.

vv vv vv vv

Dans ce type de projet, le dialogue homme-machine est rduit sa plus simple expression : lutilisateur personnalise une srie de valeurs et clique sur un bouton unique afin de lancer le traitement. En retour, notre application affiche le rsultat escompt. Des pressions supplmentaires sur le bouton gnrent de nouveaux mots de passe : lutilisateur peut ainsi rapidement parcourir une srie de propositions et choisir celle qui lui parat la plus efficace. Parmi les lments notre disposition, il nous apparat clairement que les interrupteurs (classe UISwitch) constituent la solution idale pour choisir les lments devant figurer dans les mots de passe. On active ou non lajout de signes de ponctuation, par exemple. Il sagit dun contrle emblmatique de liPhone. Les utilisateurs sy sont habitus ds lcran des rglages principaux et ils comprendront demble son rle et son fonctionnement. Sur papier, nous essayons dagencer au mieux tous ces lments qui figureront dans la vue principale de lapplication. Le premier rsultat apparat la Figure 6.4.

Chapitre 6

Les contrles spcifiques

159

Figure 6.4 Une premire bauche de linterface.

Cette premire esquisse rvle quelques dfauts. En figurant par dfaut sous les contrles, le champ contenant le mot de passe gnr risque dalourdir laffichage. Il sagit de linformation principale renvoye par notre application : elle doit figurer au premier plan. Afin dviter que lutilisateur tente dy saisir quoi que ce soit, nous rglerons sa couche alpha 0 (le champ de texte deviendra ainsi totalement transparent) et nous le ferons apparatre progressivement au moment de gnrer un mot de passe. Les diffrents interrupteurs doivent tre remiss au second plan ; si les utilisateurs vont essayer de combiner des critres distincts lors de leur premire dcouverte de lapplication, il y a fort parier quils vont maintenir la mme nomenclature par la suite. Nous aboutissons ainsi une seconde esquisse sur papier, plus proche du rsultat escompt (voir Figure 6.5).
Figure 6.5 On modifie lagencement des contrles, pour gagner en clart et en lisibilit.

Dans le cadre dapplications complexes, il nest pas futile de rflchir sur papier aux algorithmes mettre en place. Notre gnrateur de mots de passe ne compte quune action :

160

Dveloppez des applications originales pour iPhone et iPod Touch

celle-ci rcupre la valeur des interrupteurs, cre une longue chane de caractres pousant les souhaits de lutilisateur, puis slectionne alatoirement une srie de caractres issus de cette chane. Le rsultat final est ensuite prsent lutilisateur, qui le dcouvre travers un champ de texte apparaissant progressivement. Nous avons ainsi besoin de quatre interrupteurs, correspondant aux diffrents critres, de deux champs de texte pour saisir la longueur du mot de passe et afficher le rsultat, et dun bouton pour lancer lopration.

La logique interne des contrleurs


Comme nous lavons vu, il nest pas ncessaire de retoucher la classe RootViewController pour aboutir un utilitaire fonctionnel : Xcode a prpar tous les fichiers ncessaires et a tiss les liaisons entre les diffrents lments de base. Pour personnaliser la barre de titre figurant au-dessus de la vue secondaire, nous devons toutefois retoucher un aspect de limplmentation de cette classe. Modifiez le fichier RootViewController.m en ajoutant les deux lignes apparaissant en gras au Listing 6.1. Listing 6.1 : RootViewController.m
#import "RootViewController.h" #import "MainViewController.h" #import "FlipsideViewController.h" @implementation RootViewController @synthesize @synthesize @synthesize @synthesize infoButton; flipsideNavigationBar; mainViewController; flipsideViewController;

- (void)viewDidLoad { [super viewDidLoad]; MainViewController *viewController = [[MainViewController alloc] initWithNibName:@"MainView" bundle:nil]; self.mainViewController = viewController; [viewController release]; [self.view insertSubview:mainViewController.view belowSubview:infoButton]; } - (void)loadFlipsideViewController { FlipsideViewController *viewController = [[FlipsideViewController alloc] initWithNibName:@"FlipsideView" bundle:nil]; self.flipsideViewController = viewController; [viewController release];

Chapitre 6

Les contrles spcifiques

161

// Set up the navigation bar UINavigationBar *aNavigationBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 44.0)]; aNavigationBar.barStyle = UIBarStyleBlackOpaque; self.flipsideNavigationBar = aNavigationBar; [aNavigationBar release]; UIBarButtonItem *buttonItem = [[UIBarButtonItem alloc] initWithTitle:@"retour" style:UIBarButtonItemStylePlain
target:self action:@selector(toggleView)];

UINavigationItem *navigationItem = [[UINavigationItem alloc] initWithTitle:@" propos"]; navigationItem.rightBarButtonItem = buttonItem; [flipsideNavigationBar pushNavigationItem:navigationItem animated:NO]; [navigationItem release]; [buttonItem release]; } - (IBAction)toggleView { /* This method is called when the info or Done button is pressed. It flips the displayed view from the main view to the flipside view and vice-versa. */ if (flipsideViewController == nil) { [self loadFlipsideViewController]; } UIView *mainView = mainViewController.view; UIView *flipsideView = flipsideViewController.view; [UIView beginAnimations:nil context:NULL]; [UIView setAnimationDuration:1]; [UIView setAnimationTransition:([mainView superview] ? UIViewAnimationTransitionFlipFromRight : UIViewAnimationTransitionFlipFromLeft) forView:self. view cache:YES]; if ([mainView superview] != nil) { [flipsideViewController viewWillAppear:YES]; [mainViewController viewWillDisappear:YES]; [mainView removeFromSuperview]; [infoButton removeFromSuperview]; [self.view addSubview:flipsideView]; [self.view insertSubview:flipsideNavigationBar aboveSubview:flipsideView]; [mainViewController viewDidDisappear:YES]; [flipsideViewController viewDidAppear:YES]; } else {

162

Dveloppez des applications originales pour iPhone et iPod Touch

[mainViewController viewWillAppear:YES]; [flipsideViewController viewWillDisappear:YES]; [flipsideView removeFromSuperview]; [flipsideNavigationBar removeFromSuperview]; [self.view addSubview:mainView]; [self.view insertSubview:infoButton aboveSubview:mainViewController.view]; [flipsideViewController viewDidDisappear:YES]; [mainViewController viewDidAppear:YES]; } [UIView commitAnimations]; } /* // Override to allow orientations other than the default portrait // orientation. - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation) interfaceOrientation { // Return YES for supported orientations return (interfaceOrientation == UIInterfaceOrientationPortrait); } */ - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesnt have a superview // Release anything thats not essential, such as cached data } - (void)dealloc { [infoButton release]; [flipsideNavigationBar release]; [mainViewController release]; [flipsideViewController release]; [super dealloc]; } @end

Comme vous pouvez le constater, le contrleur racine commence par charger la vue "MainView" (soit MainView.xib) dans laction viewDidLoad qui sexcute automatiquement au lancement de lapplication. Laction loadFlipsideViewController charge la seconde vue lorsque lon presse le bouton "i" figurant en bas droite de lcran. Nous sommes essentiellement intervenus lors de linitialisation de la barre de navigation, en modifiant le titre de la seconde vue et le libell figurant sur le bouton de retour :
UIBarButtonItem *buttonItem = [[UIBarButtonItem alloc] initWithTitle:@"retour" style:UIBarButtonItemStylePlain target:self action:@selector(toggleView)];

Chapitre 6

Les contrles spcifiques

163

UINavigationItem *navigationItem = [[UINavigationItem alloc] initWithTitle:@" propos"]; navigationItem.rightBarButtonItem = buttonItem;

La premire ligne cre un bouton de type UIBarButtonItem que lon positionne en haut droite. Nous changeons son titre : il contient dsormais le mot "retour" (et non "Done" et ses diffrentes versions localises). La ligne suivante dfinit le titre de la seconde vue. Par dfaut, Xcode lui donne le nom du fichier nib qui dfinit son interface. Nous remplaons cette occurrence par le titre " propos" notre seconde vue contient des lments de prsentation gnrale de notre gamme de produits. ce titre, nous ne modifierons pas prcisment cette seconde vue ; nous nous contentons de charger une image en arrire-plan laide de classe UIImageView et dajouter un libell de type UILabel. Pour le fond dcran, noubliez pas de dessiner une image au format PNG pousant les dimensions de 320 460 pixels. La barre de titre occupe en effet 20 pixels de hauteur (voir Figure 6.6).
Figure 6.6 Notre seconde vue prsente des informations dordre gnral.

Intressons-nous prsent la vue principale. Par dfaut, sa classe contrleur est MainViewController et son interface se base sur une instance de la classe MainView. Commencez par retoucher le contrleur principal en y dfinissant loutlet essentiel de lapplication : le bouton dclenchant le calcul dun nouveau mot de passe. Modifiez le fichier MainViewController.h en saisissant le Listing 6.2. Listing 6.2 : MainViewController.h
#import <UIKit/UIKit.h> @interface MainViewController : UIViewController { IBOutlet UIButton *genererMdp;

164

Dveloppez des applications originales pour iPhone et iPod Touch

} @property (nonatomic, retain) UIButton *genererMdp; @end

Vous en avez dsormais lhabitude : modifiez galement limplmentation de cette classe, comme au Listing 6.3. Listing 6.3 : MainViewController.m
#import "MainViewController.h" #import "MainView.h" @implementation MainViewController @synthesize genererMdp; - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *) nibBundleOrNil { if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) { // Custom initialization } return self; } /* // Implement viewDidLoad to do additional setup after loading the view, // typically from a nib. - (void)viewDidLoad { [super viewDidLoad]; } */ /* // Override to allow orientations other than the default portrait // orientation. - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation) interfaceOrientation { // Return YES for supported orientations return (interfaceOrientation == UIInterfaceOrientationPortrait); } */ - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesnt have a superview // Release anything thats not essential, such as cached data } - (void)dealloc {

Chapitre 6

Les contrles spcifiques

165

[genererMdp release]; [super dealloc]; } @end

Nous devons prsent modifier la classe MainView, qui correspond aux diffrents traitements soprant sur la vue principale. Saisissez successivement les Listings 6.4 et 6.5 pour dfinir linterface et limplmentation de cette classe. Listing 6.4 : MainView.h
#import <UIKit/UIKit.h> @interface MainView : UIView { // On dfinit les outlets correspondant aux contrles graphiques IBOutlet UITextField *mdpLongueur; IBOutlet UISwitch *ajoutMin; IBOutlet UISwitch *ajoutMaj; IBOutlet UISwitch *ajoutChiffres; IBOutlet UISwitch *ajoutPonctuation; IBOutlet UITextField *mdp; } @property (nonatomic, retain) UITextField *mdpLongueur; // On dfinit laction responsable de la gnration du mot de passe - (IBAction)genererMdp; @end

Dans ce code, nous avons essentiellement dfini les diffrents outlets correspondant aux interrupteurs (les quatre critres voqus prcdemment) et aux champs de texte (la longueur du mot de passe et laffichage du rsultat). On dfinit galement laction responsable de la cration du mot de passe. Listing 6.5 : MainView.m
#import "MainView.h" #define RANDOM_SEED() srandom(time(NULL)) #define RANDOM_INT(__MIN__, __MAX__) ((__MIN__) + random() % ((__MAX__+1) - (__MIN__))) @implementation MainView @synthesize mdpLongueur;

166

Dveloppez des applications originales pour iPhone et iPod Touch

- (id)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { // Initialization code } return self; } - (IBAction)genererMdp { // Effet danimation du champ contenant le mot de passe // On rinitialise son opacit [UIView beginAnimations:nil context:NULL]; [UIView setAnimationDuration:1]; [mdp setAlpha:0.0]; [UIView commitAnimations]; // On le fait apparatre progressivement [UIView beginAnimations:nil context:NULL]; [UIView setAnimationDuration:1]; [mdp setAlpha:1.00]; [UIView commitAnimations]; NSInteger valMdpLongeur = [mdpLongueur.text intValue]; BOOL boutonMin = ajoutMin.on; BOOL boutonMaj = ajoutMaj.on; BOOL boutonChiffres = ajoutChiffres.on; BOOL boutonPonctuation = ajoutPonctuation.on; NSString* contenuMdp = @""; // Dfinition des chanes de caractres // correspondant aux diffrents critres NSString* dicoMin = @"abcdefghijklmnopqrstuvwxyz"; NSString* dicoMaj = @"ABCDEFGHIJKLMNOPQRSTUVWXYZ"; NSString* dicoChiffres = @"0123456789"; NSString* dicoPonctuation = @"~!?#%^&*()"; RANDOM_SEED(); // Cas o aucun critre nest slectionn if(!boutonMin && !boutonMaj && !boutonChiffres && !boutonPonctuation) { UIAlertView *alerte = [[UIAlertView alloc] initWithTitle:@"Aucune rgle" message:@"Slectionnez au moins lun des critres laide des interrupteurs" delegate:self cancelButtonTitle:@"OK" otherButtonTitles: nil]; [alerte show]; [alerte release]; return; }

Chapitre 6

Les contrles spcifiques

167

NSString* dicoMdp = @""; // On fusionne les diffrentes chanes de caractres // afin den crer une, dicoMDP, qui correspond // exactement aux critres de lutilisateur if(boutonMin) dicoMdp = [NSString stringWithFormat:@"%@%@", dicoMdp, dicoMin]; if(boutonMaj) dicoMdp = [NSString stringWithFormat:@"%@%@", dicoMdp, dicoMaj]; if(boutonChiffres) dicoMdp = [NSString stringWithFormat:@"%@%@", dicoMdp, dicoChiffres]; if(boutonPonctuation) dicoMdp = [NSString stringWithFormat:@"%@%@", dicoMdp, dicoPonctuation]; // On slectionne alatoirement lun des caractres // de cette longue chane, jusqu crer une // nouvelle chane de caractres pousant la longueur dsire. for(NSInteger i=0; i<valMdpLongeur; i++) { int index = RANDOM_INT(0, [dicoMdp length]-1); NSRange range = NSMakeRange(index, 1); NSString *caractereMdp = [dicoMdp substringWithRange:range]; contenuMdp = [NSString stringWithFormat:@"%@%@", contenuMdp, caractereMdp]; NSLog(caractereMdp); } // contenuMdp contient cette chane de caractres // On met jour le champ de texte mdp. mdp.text = @""; mdp.text = contenuMdp; } - (void)drawRect:(CGRect)rect { // Code du dessin } - (void)dealloc { [super dealloc]; } @end

168

Dveloppez des applications originales pour iPhone et iPod Touch

Le principe de laction genererMdp est plutt simple. Nous commenons par relever la valeur du champ de texte mdpLongueur, contenant la longueur dsire du mot de passe. Nous crons ensuite quatre boolens correspondant aux quatre interrupteurs : on relve ainsi les critres choisis par lutilisateur. En parallle, nous dfinissons quatre chanes de caractres reprsentant les diffrentes possibilits (alphabet en minuscules et majuscules, chiffres de 0 9, signes de ponctuation, etc.). Nous devons galement prendre en compte le cas de figure o lutilisateur na pas choisi le moindre critre. La cration du mot de passe est alors impossible et nous lavertissons travers une bote dalerte :
UIAlertView *alerte = [[UIAlertView alloc] initWithTitle:@"Aucune rgle" message:@"Slectionnez au moins lun des critres laide des interrupteurs" delegate:self cancelButtonTitle:@"OK" otherButtonTitles: nil]; [alerte show]; [alerte release];

Ces trois lignes crent une instance alerte de la classe UIAlertView. On linitialise avec un titre ("Aucune rgle"), un message derreur et un bouton de validation permettant de revenir la vue principale (voir Figure 6.7). Nous envoyons ensuite un message pour faire apparatre cette bote de dialogue lcran.
Figure 6.7 La bote dalerte apparat lorsque lutilisateur na slectionn aucun critre.

Notre action genererMdp cre ensuite une longue chane de caractres, en cumulant les "dictionnaires" correspondant aux diffrents critres slectionns par lutilisateur. Ainsi, sil na choisi que lemploi des majuscules et minuscules, la chane dicoMdp comprendra 52 caractres (a-zA-Z). Une boucle for extrait alors alatoirement lun de ces caractres de la chane pour crer une nouvelle chane contenuMdp. La boucle se poursuit tant que cette

Chapitre 6

Les contrles spcifiques

169

dernire variable ne comprend pas le nombre suffisant de caractres, tel que lutilisateur la dcid en premier lieu laide du champ de texte mdpLongueur. On affiche en dernier lieu le rsultat dans le champ de texte mdp travers un lger effet danimation. La couche alpha du champ de texte est tout dabord initialise 0 avant datteindre sa valeur maximale au bout dune seconde. Le champ apparat ainsi progressivement laffichage.

Lhabillage de linterface et la liaison des outlets et actions


Il ne nous reste plus qu dfinir lallure de notre interface principale pour achever notre application. Sous Xcode, slectionnez tout dabord le fichier MainWindow.xib. Vous basculez automatiquement vers Interface Builder. Droulez larborescence face linstance de la classe RootViewController jusqu dcouvrir lobjet UIButton. Il sagit de lun des quatre boutons prdfinis par le SDK de liPhone, Info Light. Cest cet lment qui dclenche laction toggleView responsable du basculement entre nos deux vues. Dans linspecteur dattributs (Cmd+1), vous pouvez modifier son type et choisir une autre apparence, comme Info Dark par exemple. Le bouton apparat alors sur un fond sombre et non bleu clair.
Les boutons prdfinis du SDK de l'iPhone Afin dhomogniser linterface de vos applications et de reprendre les lments typiques de liPhone, nhsitez pas utiliser les quatre boutons prdfinis par le SDK. Lorsque vous ajoutez un objet de type UIButton, ouvrez linspecteur dattributs et droulez le menu Type. La premire option, Custom, vous laisse le champ libre pour dfinir lallure de votre bouton. Loption Rounded Rect correspond un type de boutons que nous avons dj largement utilis et qui figure de manire individuelle dans la bibliothque dobjets. Le type Detail Disclosure reprsente une flche pointant vers la droite, enchsse dans un bouton circulaire. Cest le modle utilis dans la liste des contacts de liPhone afin daccder aux fiches dtailles de tous vos interlocuteurs. Les dclinaisons Info Light et Info Dark correspondent aux boutons "i" que nous utilisons dans le cadre de notre application. Enfin, le type Add Contact est un simple signe +, comme llment figurant en haut de la liste des contacts. Tous ces objet prdfinis vous font gagner un temps prcieux et vous permettent de dvelopper une application plus intuitive, qui reprend des contrles auxquels les utilisateurs sont largement habitus (voir Figure 6.8). Figure 6.8 Les diffrents boutons prdfinis du SDK de liPhone.

170

Dveloppez des applications originales pour iPhone et iPod Touch

Sur cette vue, dplacez ventuellement le bouton dinformations. Retenez ce concept essentiel : il est intgr au contrleur racine de votre utilitaire et figure ainsi en surimpression sur la vue principale. Vous devez veiller ce que linterface de cette dernire ne vienne pas empiter sur son emplacement. Ouvrez prsent linterface MainView.xib correspondant la vue principale. Dposez tous les interrupteurs, libells, champs de texte et boutons dont vous avez besoin. Dans notre exemple, nous essayons de reproduire au mieux notre premire esquisse sur papier. Nous avons ainsi tout intrt ajouter des objets UIImageView pour soutenir un arrire-plan et un logo. Ouvrez votre diteur graphique prfr pour prparer un canevas global, dont vous extrairez chacun des lments. Sous Photoshop CS4, la manipulation nest pas fondamentalement loigne de la cration dune interface web. Commencez par crer un nouveau document de 320 460 pixels (la barre de titres occupant 20 pixels de hauteur sur linterface), puis dposez votre arrire-plan sur un nouveau calque. Notre logo correspond un petit montage intgrant le symbole dun verrou la place de la lettre "O" dans lexpression "mots de passe". L encore, nous crons un nouveau calque pour accueillir ce logo et vrifier son intgration sur larrire-plan. Dans la palette des calques de Photoshop, cliquez sur cet lment en pressant la touche Cmd : le logo est automatiquement dtour (voir Figure 6.9). Effectuez ensuite un copier-coller pour le dposer sur un nouveau document. Droulez enfin le menu Fichier et cliquez sur "Enregistrer pour le Web et les priphriques". Slectionnez le format PNG-24 et activez la transparence en cochant la case associe. Cliquez sur le bouton Enregistrer : vous disposez ainsi dun logo correctement dcoup, sur fond transparent.
Figure 6.9 Le design de notre vue principale sous Photoshop. On isole ici le logo de lapplication.

Sous Xcode, droulez le menu Project et cliquez sur Add to Project. Slectionnez vos images et validez, en cochant ventuellement la case "Copy items into destination groups folder".

Chapitre 6

Les contrles spcifiques

171

Sous Interface Builder, ajoutez un nouvel objet UIImageView pousant les dimensions de votre logo. Ouvrez linspecteur dattributs, puis slectionnez votre image dans le champ Image. Procdez de la mme manire pour larrire-plan, sans oublier de faire figurer lavant-plan tous vos lments dinterface (voir Figure 6.10). Pour cela, cliquez sur leur intitul dans la fentre MainView.xib, droulez le menu Layout et slectionnez Send To Front (voir Figure 6.11).
Figure 6.10 On dispose tous nos contrles graphiques sur la vue principale.

Figure 6.11 Avec Interface Builder, on place correctement le logo dfini prcdemment.

Vous tes satisfait du rsultat ? Il ne vous reste plus qu lier tous les outlets et actions aux diffrents contrles graphiques. Cliquez tout dabord sur Files Owner, maintenez la touche Ctrl du clavier enfonce et dplacez le curseur jusquau bouton qui dclenche laction. Slectionnez llment genererMdp du menu contextuel qui apparat lcran. Cliquez ensuite sur Main View, puis effectuez la mme opration pour chaque interrupteur et les deux champs de texte (voir Figure 6.12). Pour ces derniers, vrifiez que vous avez dsactiv la

172

Dveloppez des applications originales pour iPhone et iPod Touch

saisie de lutilisateur dans le champ affichant le mot de passe (en dcochant la case Enabled la section Control de linspecteur dattributs) et que vous avez permis la disparition du clavier virtuel dans le champ correspondant la longueur dsire du mot de passe. Rappelez-vous : vous devez slectionner ce champ, ouvrir linspecteur de connexions (Cmd+2) et relier lvnement Did End On Exit au First Responder. En dernier lieu, slectionnez le bouton et associez lvnement Touch Up Inside laction genererMdp en cliquant sur le petit cercle figurant droite de linspecteur de connexions et en dplaant votre curseur jusqu Main View. Linspecteur de connexions doit ainsi correspondre la Figure 6.12.
Figure 6.12 Les connexions de notre vue principale.

Enregistrez tous vos fichiers et compilez une premire fois votre projet. Le rsultat correspond nos attentes : lutilisateur manipule une srie dinterrupteurs afin de dfinir ses critres, puis lance la cration dun mot de passe en cliquant sur un bouton au centre de lcran (voir Figure 6.13). Le champ contenant le rsultat apparat progressivement et le bouton "i" permet de basculer rapidement vers la seconde vue.
Figure 6.13 Le rsultat final dans le Simulateur diPhone.

Chapitre 6

Les contrles spcifiques

173

L'intrt de la vue secondaire Dans notre exemple, nous nous sommes essentiellement concentrs sur la vue principale. Vous avez toutefois constat que Xcode prpare un projet complet et gre automatiquement le basculement entre les deux vues laide du bouton dinformations. En guise dexercice, vous avez ainsi tout intrt disposer les interrupteurs sur cette seconde vue. Elle agit alors comme une page de configuration, travers laquelle lutilisateur slectionne lensemble de ces critres. Comme nous lavons vu prcdemment, il est peu probable que ces critres voluent au cours du temps : lutilisateur slectionne une srie de rgles une fois pour toutes et lensemble des mots de passe gnrs ultrieurement obiront la mme nomenclature. Vous dgagez ainsi un espace significatif sur la vue principale et vous confrez un tout autre intrt la vue secondaire.

Interagir avec des rglettes, des alertes, des contrles segments et des sous-vues
La bibliothque des lments du SDK est particulirement riche et il existe de nombreux objets drivs de la classe UIKit qui autorisent un contrle plus minutieux de linformation. Parmi ceux-ci, les rglettes jouent un rle important : elles permettent aux utilisateurs de manipuler minutieusement un lment dinterface jusqu choisir une valeur extrmement prcise. Leur implmentation ncessite une grande rigueur ; dans la mesure o elles se contrlent au doigt, les rglettes ne doivent souffrir daucun dfaut dergonomie, sous peine de multiplier les essais et de rendre linterface laborieuse. Les contrles segments sont des instances de la classe UISegmentedControl. Ils contiennent par dfaut deux tats qui agissent comme autant de boutons. Ils illustrent parfaitement le principe des contrles actifs et passifs : une valeur est actuellement slectionne et seule lintervention de lutilisateur modifie leur tat. Les sous-vues correspondent des objets de type UIView imbriqus dans une vue plus grande. la manire des objets UIImageView, vous pouvez ainsi modifier leur tat, leur visibilit et leurs proprits sans pour autant redessiner la vue principale dans son ensemble. Nous allons passer en revue lensemble de ces concepts autour dun exemple concret.

Ajouter une rglette


Crez un nouveau projet sous Xcode de type "View-Based Application". Saisissez "Slider" en tant que nom de projet, puis validez en cliquant sur le bouton Save. Dans cet exemple, nous allons essentiellement nous concentrer sur lintgration dune rglette et sur les possibilits dinteraction quelle nous offre. Effectuez un double-clic sur le fichier SliderView-

174

Dveloppez des applications originales pour iPhone et iPod Touch

Controller.xib et ajoutez un lment de type Slider sur linterface principale de votre application. Nhsitez pas saisir les poignes encadrant ce nouvel objet afin de ltendre sur toute la largeur de lcran de liPhone : il est trs important que la manipulation soit intuitive et vous devez viter de disposer un lment trop triqu (voir Figure 6.14).
Figure 6.14 Lajout dune rglette au centre de lapplication.

Slectionnez votre rglette et ouvrez linspecteur dattributs. Comme vous le constatez au champ Slider, vous devez choisir les valeurs bornant la rglette ainsi que la valeur affiche par dfaut. Dans ce premier exemple, saisissez 0,00 dans le champ Minimum, 10,00 dans le champ Maximum et 5,00 dans le champ Initial (voir Figure 6.15).
Figure 6.15 Linspecteur dattributs permet de dfinir les valeurs symbolises par la rglette.

Chapitre 6

Les contrles spcifiques

175

Dans un second temps, ajoutez un simple champ de texte en bas de lcran. Nous lutiliserons pour afficher la valeur slectionne par lutilisateur laide de la rglette. ce stade, nous avons besoin de dfinir deux outlets (la rglette et le champ de texte) et une action qui sexcute lorsque lutilisateur manipule la rglette. Ouvrez le fichier SliderViewController.h sous Xcode et saisissez le code figurant au Listing 6.6. Listing 6.6 : SliderViewController.h
#import <UIKit/UIKit.h> @interface SliderViewController : UIViewController { IBOutlet UITextField *champReponse; IBOutlet UISlider *reglette; } @property (nonatomic, retain) UITextField *champReponse; @property (nonatomic, retain) UISlider *reglette; - (IBAction)sliderClic:(id)sender; @end

Modifiez prsent limplmentation de cette classe en saisissant le code suivant dans le fichier SliderViewController.m. Listing 6.7 : SliderViewController.m
#import "SliderViewController.h" @implementation SliderViewController @synthesize champReponse; @synthesize reglette; -(IBAction)sliderClic:(id)sender { NSString *nouveauTexte = [[NSString alloc] initWithFormat:@"%f", reglette.value]; champReponse.text = nouveauTexte; [nouveauTexte release]; } /* // The designated initializer. Override to perform setup that is required // before the view is loaded. - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *) nibBundleOrNil { if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) { // Custom initialization }

176

Dveloppez des applications originales pour iPhone et iPod Touch

return self; } */ /* // Implement loadView to create a view hierarchy programmatically, // without using a nib. - (void)loadView { } */ /* // Implement viewDidLoad to do additional setup after loading the view, // typically from a nib. - (void)viewDidLoad { [super viewDidLoad]; } */ /* // Override to allow orientations other than the default portrait // orientation. - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation) interfaceOrientation { // Return YES for supported orientations return (interfaceOrientation == UIInterfaceOrientationPortrait); } */ - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesnt have a superview // Release anything thats not essential, such as cached data } - (void)dealloc { [champReponse dealloc]; [reglette dealloc]; [super dealloc]; } @end

Le principe de notre action est extrmement simple : lorsque lutilisateur manipule la rglette, on relve sa valeur laide de la notation point (reglette.value) et on la convertit en une chane de caractres. On modifie alors le champ de texte en consquence, en affichant ainsi la valeur slectionne par lutilisateur. Nous avions prcdemment fix les bornes de la rglette sous Interface Builder : le champ de texte renvoie donc une valeur comprise entre 0 et 10 en fonction de la position du curseur.

Chapitre 6

Les contrles spcifiques

177

Il ne nous reste plus qu lier les outlets et laction sous Interface Builder. Ouvrez le fichier SliderViewController.xib, slectionnez Files Owner en pressant la touche Ctrl du clavier, puis relchez la souris au-dessus du champ de texte : slectionnez llment champReponse. Renouvelez lopration jusqu la rglette, en slectionnant cette fois loutlet reglette. Cliquez enfin sur la rglette, ouvrez linspecteur de connexions et cliquez sur le petit cercle droite de lvnement Value Changed. Glissez la souris jusqu licne First Responder, puis slectionnez laction sliderClic. Enregistrez votre interface et compilez le projet : le champ de texte reflte la valeur de la rglette (voir Figure 6.16).
Figure 6.16 La rglette renvoie ici une valeur comprise entre 0 et 10, qui apparat dans le champ de texte.

Afficher une alerte lutilisateur


Nous avions entrevu cette technique au cours de notre premier exemple, lorsque lutilisateur navait pas slectionn le moindre critre pour gnrer un mot de passe : il est possible de lui prsenter toutes sortes de botes de dialogue lcran, afin dafficher une valeur releve ou un message derreur. La solution la plus simple consiste crer une instance de la classe UIAlertView. Parmi ses attributs, vous avez la possibilit dindiquer un titre la bote dalerte, dafficher un message personnalis et dajouter un bouton permettant de la faire disparatre. Modifions notre exemple afin dafficher la valeur de la rglette dans une telle bote dalerte. Pour cela, nous devons commencer par ajouter une action linterface de notre classe prin-

178

Dveloppez des applications originales pour iPhone et iPod Touch

cipale. Mettez jour le fichier SliderViewController.h laide du code figurant au Listing 6.8. Listing 6.8 : SliderViewController.h
#import <UIKit/UIKit.h> @interface SliderViewController : UIViewController { IBOutlet UITextField *champReponse; IBOutlet UISlider *reglette; } @property (nonatomic, retain) UITextField *champReponse; @property (nonatomic, retain) UISlider *reglette; - (IBAction)sliderClic:(id)sender; - (IBAction)alerteClic:(id)sender; @end

Modifiez prsent limplmentation de cette classe travers le fichier SliderViewController.m. Listing 6.9 : SliderViewController.m
#import "SliderViewController.h" @implementation SliderViewController @synthesize champReponse; @synthesize reglette; -(IBAction)sliderClic:(id)sender { NSString *nouveauTexte = [[NSString alloc] initWithFormat:@"%f", reglette.value]; champReponse.text = nouveauTexte; [nouveauTexte release]; } -(IBAction)alerteClic:(id)sender { NSString *msg = nil; msg = [[NSString alloc] initWithFormat:@"Vous avez slectionn la valeur %f", slider.value]; UIAlertView *alerte = [[UIAlertView alloc] initWithTitle:@"Valeur slectionne" message:msg delegate:self cancelButtonTitle:@"Je recommence !" otherButtonTitles:nil]; [alerte show]; [alerte release];

Chapitre 6

Les contrles spcifiques

179

[msg release]; } [] @end

Sous Interface Builder, dposez un bouton sur la vue principale. Slectionnez-le puis ouvrez linspecteur de connexions. Cliquez sur le cercle droite de lvnement Touch Up Inside et reliez-le llment First Responder. Choisissez alors laction alerteClic. Enregistrez votre travail et compilez nouveau le projet. La valeur de la rglette apparat toujours dans le champ de texte, mais lorsque vous cliquez sur le bouton au centre de lcran vous affichez dsormais une alerte contenant cette mme valeur. Il vous suffit de cliquer sur le bouton "Je recommence !" pour faire disparatre lalerte et revenir la vue principale (voir Figure 6.17).
Figure 6.17 Lalerte de base rcupre la valeur de la rglette et laffiche dans une bote de dialogue.

Ajouter un contrle segment et une sous-vue


Mais en labsence du moindre lment contrler, la rglette ne prsente quun intrt trs limit. Certes, lutilisateur choisit une valeur que notre application relve mais celle-ci nest pour linstant daucune utilit. Afin dillustrer le comportement dune rglette, ajoutons une sous-vue notre interface : la rglette jouera sur lopacit de ce nouvel objet. En parallle, nous allons disposer un contrle segment sur notre vue principale. Celui-ci permet de basculer entre deux positions : dans notre exemple, lutilisateur va ainsi choisir la couleur darrire-plan de la sous-vue avant de jouer sur sa transparence.

180

Dveloppez des applications originales pour iPhone et iPod Touch

Sous Interface Builder, dposez un objet de type View sur votre vue principale. Saisissez les poignes qui lencadrent afin de le redimensionner sur lcran. Dans notre exemple, nous souhaitons ajouter un simple rectangle dont la couleur et lopacit se modifient en fonction des choix de lutilisateur. En auscultant la fentre SliderViewController.xib, vous constatez que ce nouvel objet UIView est bien imbriqu dans llment View parent, linstar du champ de texte, du bouton ou de la rglette (voir Figure 6.18). Dposez ensuite un objet de type Segmented Control sur linterface. Effectuez un double-clic sur chaque "versant" de ce contrle afin den changer les libells : la zone de gauche, active par dfaut, permettra dafficher un rectangle rouge et la zone de droite un rectangle vert. Inscrivez clairement ces deux tats sur le contrle afin que lutilisateur comprenne au premier coup dil son rle et son intrt.
Figure 6.18 Linterface de notre application comprend dsormais un contrle segment et une sousvue imbrique dans la vue principale.

Nous devons mettre jour notre classe principale en ajoutant un outlet, correspondant la sous-vue que lon va manipuler, et une action permettant de modifier son opacit. Mettez jour le fichier SliderViewController.h avec le code ci-dessous. Listing 6.10 : SliderViewController.h
#import <UIKit/UIKit.h> @interface SliderViewController : UIViewController { IBOutlet UITextField *champReponse; IBOutlet UISlider *reglette; IBOutlet UIView *sousVue; } @property (nonatomic, retain) UITextField *champReponse; @property (nonatomic, retain) UISlider *reglette; @property (nonatomic, retain) UIView *sousVue; - (IBAction)sliderClic:(id)sender; - (IBAction)alerteClic:(id)sender; - (IBAction)changeCouleur:(id)sender; @end

Chapitre 6

Les contrles spcifiques

181

Dfinissons prsent laction changeCouleur. Nous devons galement modifier laction sliderClic afin de retoucher dynamiquement lopacit de la sous-vue ds que lutilisateur manipule la rglette. Modifiez le fichier SliderViewController.m avec le code figurant au Listing 6.11. Listing 6.11 : SliderViewController.m
#import "SliderViewController.h" @implementation SliderViewController @synthesize champReponse; @synthesize reglette; @synthesize sousVue; -(IBAction)sliderClic:(id)sender { NSString *nouveauTexte = [[NSString alloc] initWithFormat:@"%f", reglette.value]; champReponse.text = nouveauTexte; [sousVue setAlpha:reglette.value]; [nouveauTexte release]; } -(IBAction)changeCouleur:(id)sender { UISegmentedControl *segmentedControl = (UISegmentedControl *)sender; NSInteger segment = segmentedControl.selectedSegmentIndex; if (segment == 0) [sousVue setBackgroundColor:[UIColor redColor]]; else [sousVue setBackgroundColor:[UIColor greenColor]]; } -(IBAction)alerteClic:(id)sender { NSString *msg = nil; msg = [[NSString alloc] initWithFormat:@"Vous avez slectionn la valeur %f", reglette.value]; UIAlertView *alerte = [[UIAlertView alloc] initWithTitle:@"Valeur slectionne" message:msg delegate:self cancelButtonTitle:@"Je recommence !" otherButtonTitles:nil]; [alerte show]; [alerte release]; [msg release]; } [] - (void)dealloc { [champReponse dealloc]; [reglette dealloc]; [sousVue dealloc];

182

Dveloppez des applications originales pour iPhone et iPod Touch

[super dealloc]; } @end

L encore, la notation dObjective-C nous permet daboutir rapidement au rsultat. Le contrle segment dclenche laction changeCouleur. On cre alors un objet de type UISegmentedControl et on relve ltat actuellement slectionn. Les deux versants de ce contrle sont identifis par des index : 0 pour la partie de gauche et 1 pour la partie de droite. laide dune simple boucle conditionnelle, on modifie la couleur darrire-plan de lobjet sousVue en fonction de llment slectionn. Ainsi, lorsque lutilisateur presse la partie gauche du contrle, lobjet sousVue revt la couleur rouge. Il devient vert lorsque lon clique sur la partie droite du contrle. L encore, nous utilisons les constantes redColor et greenColor avec la mthode setBackgroundColor afin de faciliter le changement de couleur. En parallle, laction sliderClic compte une opration supplmentaire : en fonction de la valeur de la rglette, on modifie lopacit de lobjet sousVue grce la mthode setAlpha. Vous devez toutefois modifier linterface en associant les outlets et actions. Slectionnez Files Owner, pressez la touche Ctrl du clavier et glissez la souris jusqu la sous-vue. Choisissez alors loption sousVue du menu contextuel qui apparat lcran. Slectionnez enfin le contrle segment, ouvrez linspecteur de connexions et cliquez sur le cercle droite de lvnement Value Changed. Dplacez la souris jusqu licne Files Owner et choisissez laction changeCouleur (voir Figure 6.19).
Figure 6.19 On associe lvnement Value Changed au contrle segment.

Lorsque lutilisateur cliquera sur lun des tats de ce contrle, il dclenchera ainsi cette action. Dernire opration ne pas oublier : vous devez modifier les valeurs qui bornent la rglette. En effet, lopacit dun objet dinterface varie de 0 1. Cliquez sur la rglette, ouvrez linspecteur dattributs et slectionnez 0,00 dans le champ Minimum ; 1,00 dans le champ Maximum et 0,50 dans le champ Initial (voir Figure 6.20).

Chapitre 6

Les contrles spcifiques

183

Figure 6.20 Vrifiez dans linspecteur de connexions que toutes vos associations sont bien identiques cet exemple.

Enregistrez le rsultat et compilez votre projet. Vous avez mis en avant tous les contrles avancs du SDK de liPhone. La rglette dfinit une valeur comprise entre 0 et 1. Celle-ci apparat aussi bien dans un champ de texte situ sur la vue principale qu travers une bote dalerte qui apparat en surimpression lcran. En parallle, un contrle segment permet de modifier la couleur darrire-plan dune sous-vue. Quelle que soit la couleur actuellement choisie, la rglette joue sur lopacit de cette sous-vue : les teintes rouge et vert sestompent progressivement ou deviennent totalement opaques (voir Figure 6.21).
Figure 6.21 Notre application complte modifie lopacit dune sousvue laide dune rglette.

Vous pouvez naturellement effectuer le mme traitement sur nimporte quelle instance dune sous-classe dUIView et ainsi jouer sur la transparence dune image, dun libell ou dun champ de texte par exemple.

184

Dveloppez des applications originales pour iPhone et iPod Touch

Intgrer une roulette lapplication


En manipulant le module des rglages de liPhone ou le calendrier, vous avez probablement dj remarqu les "roulettes" qui dfilent sur lcran du mobile et qui vous aident choisir une valeur prcise (voir Figure 6.22).
Figure 6.22 Le minuteur de lapplication Horloge est une roulette dun type particulier, timer.

On dsigne souvent ce type de contrle par leur patronyme anglais : il sagit de pickers, des contrles avancs qui formatent un certain volume de donnes sous la forme de tableaux dont les cellules se manipulent du bout des doigts. Ces roues peuvent revtir de nombreuses apparences et se diviser en plusieurs sous-modules avec lesquels on interagit de manire individuelle. Ainsi, la slection dune donne sur la premire roue peut modifier les informations figurant sur la seconde roue et ainsi de suite. Limplmentation de tels contrles implique donc une grande rigueur. Non seulement vous devez veiller lhomognit des donnes que vous faites figurer sur les roulettes, mais vous devez galement grer au mieux les interactions avec lutilisateur. Leur intgration une application soulve en parallle de nombreux problmes de design : leurs dimensions ne sont pas modifiables et ils occupent gnralement lespace principal sur lcran, quel que soit le nombre dinformations que vous y faites figurer. Pour toutes ces raisons, les dveloppeurs prfrent en rgle gnrale les disposer sur une seconde vue ddie aux rglages dune application. Redoublez de concentration : disposes harmonieusement, les roulettes sont des contrles trs agrables utiliser qui participent largement lergonomie dune application.

Chapitre 6

Les contrles spcifiques

185

Les roulettes de temps


Lun des rles essentiels des roulettes consiste slectionner une date prcise. Le SDK de liPhone intgre de nombreux modles prdfinis qui vous permettent de solliciter lutilisateur et de lenjoindre reprer une date du calendrier. Ces contrles prts lemploi intgrent jusqu quatre roues et relvent ainsi le jour, le mois, lanne et lheure prciss par lutilisateur. Mme sil sagit de pickers traditionnels, ces modles disposent de leur propre classe en Cocoa Touch : UIDatePicker. Sous Xcode, droulez le menu File, cliquez sur New Project et slectionnez le modle "View-Based Application". Saisissez Roue01 en guise de nom de projet et validez en cliquant sur le bouton Save. De retour dans la fentre principale du dveloppement, ouvrez le fichier Roue01ViewController.xib. Dposez ensuite un contrle de type Date Picker depuis la bibliothque dInterface Builder vers votre vue principale (voir Figure 6.23).
Figure 6.23 Lajout dun objet Date Picker et la modification de ses attributs.

Dans un second temps, ajoutez un simple champ de texte et tendez-le sur toute la largeur de la vue. Nous lutiliserons pour afficher la date slectionne par lutilisateur. Slectionnez votre roulette puis ouvrez linspecteur dattributs. Comme vous le constatez la section Date Picker, le SDK de liPhone prvoit quatre modles diffrents : Date & Time (quatre roues), Time (trois roues), Date (trois roues) et Timer (deux roues). Mieux encore : les champs Locale et Timezone vous permettent de dfinir la localisation des informations de date et dheure. En choisissant "franais" dans le premier champ, puis "Europe/Paris" dans le second, vous utilisez automatiquement des rgles franaises de formatage. Interface Builder nadapte pas toujours le contrle votre slection et vous ne verrez le rsultat final que sur un vritable iPhone ou sur le Simulateur. Nhsitez pas non plus indiquer la date de dpart et de fin travers linspecteur dattributs de la roulette.

186

Dveloppez des applications originales pour iPhone et iPod Touch

Enregistrez votre interface et revenez Xcode : nous associerons les outlets et actions dans un second temps. Commencez par ouvrir le fichier Roue01ViewController.h et ajoutez les lignes figurant en gras au listing ci-dessous. Listing 6.12 : Roue01ViewController.h
#import <UIKit/UIKit.h> @interface Roue01ViewController : UIViewController { IBOutlet UIDatePicker *roueDate; IBOutlet UITextField *champTexte; } @property (nonatomic, retain) UIDatePicker *roueDate; @property (nonatomic, retain) UITextField *champTexte; -(IBAction)afficheDate; @end

Nous avons ici mentionn nos deux outlets, roueDate et champTexte, et introduit une action, afficheDate qui relve la date slectionne par lutilisateur et laffiche dans le champ de texte. Modifiez prsent limplmentation de cette classe, en ajoutant les lignes suivantes au fichier Roue01ViewController.m. Listing 6.13 : Roue01ViewController.m
#import "Roue01ViewController.h" @implementation Roue01ViewController @synthesize roueDate; @synthesize champTexte; -(IBAction)afficheDate { NSDate *dateSelectionnee = [roueDate date]; NSString *message = [[NSString alloc] initWithFormat:@"Date : %@", dateSelectionnee]; champTexte.text = message; [message release]; } /* // The designated initializer. Override to perform setup that is required // before the view is loaded. - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *) nibBundleOrNil { if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) { // Custom initialization }

Chapitre 6

Les contrles spcifiques

187

return self; } */ /* // Implement loadView to create a view hierarchy programmatically, // without using a nib. - (void)loadView { } */ // Implement viewDidLoad to do additional setup after loading the view, // typically from a nib. - (void)viewDidLoad { NSDate *maintenant = [[NSDate alloc] init]; [roueDate setDate:maintenant animated:YES]; [maintenant release]; [super viewDidLoad]; } /* // Override to allow orientations other than the default portrait // orientation. - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation) interfaceOrientation { // Return YES for supported orientations return (interfaceOrientation == UIInterfaceOrientationPortrait); } */ - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesnt have a superview // Release anything thats not essential, such as cached data } - (void)dealloc { [roueDate release]; [champTexte release]; [super dealloc]; } @end

Notez tout dabord que nous avons modifi la mthode viewDidLoad qui sexcute lorsque la vue est charge par liPhone. Nous avons dfini un objet NSDate correspondant la date courante et nous lavons assign la roulette en tant que valeur de dpart, grce la mthode setDate. Laction afficheDate est trs simple : on repre tout dabord la date slectionne par lutilisateur avant de formater une chane de caractres et de lafficher dans le champ de texte.

188

Dveloppez des applications originales pour iPhone et iPod Touch

Ouvrez votre vue principale sous Interface Builder, cliquez sur licne Files Owner en maintenant la touche Ctrl enfonce et dplacez le curseur de la souris vers la roulette. Slectionnez alors llment roueDate du menu contextuel. Procdez de la mme manire avec le champ de texte. Cliquez ensuite sur la roulette, ouvrez linspecteur de connexions et reliez lvnement Value Changed au Files Owner, en slectionnant laction afficheDate. Enregistrez votre interface puis compilez votre projet. La roulette apparat au centre de lcran et la moindre pression met le champ de texte jour (voir Figure 6.24).
Figure 6.24 La roulette permet de slectionner une date et de lafficher dans le champ de texte.

Le formatage de la date rvle toutefois des valeurs pnibles afficher, comme "2010-1114 09:05:09 +0100". Il sagit de la nomenclature par dfaut dObjective-C, que vous pouvez heureusement adapter laide de la classe NSDateFormatter. L encore, Cocoa Touch prvoit une srie de constantes pour vous aider formater simplement des dates. Nous allons les utiliser dans un premier temps. Ouvrez nouveau le fichier Roue01ViewController.m et modifiez laction afficheDate comme ci-dessous. Listing 6.14 : afficheDate
-(IBAction)afficheDate { NSDate *dateSelectionnee = [roueDate date]; NSDateFormatter *formatageDate = [[[NSDateFormatter alloc] init] autorelease]; [formatageDate setDateStyle:NSDateFormatterShortStyle]; [formatageDate setTimeStyle:NSDateFormatterShortStyle]; NSString *dateFormatee = [formatageDate stringFromDate:dateSelectionnee]; champTexte.text = dateFormatee;

Chapitre 6

Les contrles spcifiques

189

[formatageDate release]; [dateFormatee release]; }

On cre ici une instance formatageDate de la classe NSDateFormatter. laide des mthodes setDateStyle et setTimeStyle, on choisit un formatage spcifique, dfini par la constante NSDateFormatterShortStyle. On applique ensuite cette rgle la date releve laide de la roue. Le champ de texte se met jour en consquence et affiche dsormais des valeurs du type "11/14/10 9:10 AM" (voir Figure 6.25).
Figure 6.25 On modifie le formatage de la date.

Les autres constantes de formatage Le SDK de liPhone reconnat quatre constantes principales pour formater les dates, dans le mme style que NSDateFormatterShortStyle. NSDateFormatterMediumStyle renvoie des dates du type "Nov 14, 2009 9:45:58 AM". NSDateFormatterLongStyle formate les donnes selon la nomenclature "November 14, 2009 9:45:51 AM CEST". Enfin, NSDateFormatterFullStyle renvoie "Saturday, November 14, 2009 9:45:33 AM CET". Slectionnez le formatage qui vous convient et appliquez les rgles de localisation des chanes de caractres pour renvoyer des valeurs selon la notation franaise.

Heureusement, vous avez galement la possibilit de crer votre propre rgle de formatage de toutes pices et de lui appliquer une notation franaise. On parvient un tel rsultat grce aux mthodes setDateFormat et setLocale, toutes deux lies la classe NSDateFormatter. Ouvrez nouveau le fichier Roue01ViewController.m et adaptez laction afficheDate comme au Listing 6.15.

190

Dveloppez des applications originales pour iPhone et iPod Touch

Listing 6.15 : afficheDate


-(IBAction)afficheDate { NSDate *dateSelectionnee = [roueDate date]; NSDateFormatter *formatageDate = [[[NSDateFormatter alloc] init] autorelease]; [formatageDate setLocale:[[[NSLocale alloc] initWithLocaleIdentifier:@"fr_FR"] autorelease]]; [formatageDate setDateFormat:@"EEEE d MMMM YYYY, HH:mm"]; NSString *dateFormatee = [formatageDate stringFromDate: dateSelectionnee]; champTexte.text = dateFormatee; [dateFormatee release]; }

Enregistrez vos modifications et compilez nouveau votre projet. Votre roulette de temps renvoie dsormais des valeurs du type "samedi 14 novembre 2009, 09:50". Nous avons commenc par forcer la localisation en franais laide de la mthode setLocale et de lidentifiant fr_FR. Nous avons ensuite dfini la rgle de formatage grce la syntaxe "EEEE d MMMM YYYY, HH:mm" ; le nom du jour et du mois figurent au complet et la date est renvoye en bout de chane, spare par une virgule. Adaptez librement cette syntaxe aux besoins de vos applications.

Intgrer une roulette personnalise


Les instances de la classe UIDatePicker correspondent des roulettes dun type prdfini, dont les donnes sont automatiquement remplaces par un calendrier. Vous avez naturellement la possibilit de charger tout type de contenu dans vos roulettes, en crant des instances de la classe UIPickerView. Ces derniers ne demeurent que des conteneurs visuels, qui attendent deux protocoles : la source des donnes (UIPickerViewDataSource) et leur dlgu (UIPickerViewDelegate). Le premier lment rpond la question "quelles sont les donnes afficher ?" et le second "comment traiter ces donnes ?". travers ce type de relations, vous comprenez immdiatement lintrt de ces roulettes personnalises : vous pouvez charger leur contenu depuis nimporte quelle source, quil sagisse dun simple tableau, dune base de donnes, dun fichier de proprits plist ou dune URL externe.

Ajouter une roulette simple


Dans le cadre de notre premier exemple, nous voluerons dans un contexte simple et nous crerons les donnes dans un tableau intgr la classe principale. Ouvrez Xcode et crez un nouveau projet de type View-Based Application que vous nommerez "Roue02". Effectuez un double-clic sur la vue Roue02ViewController.xib et dposez un objet Picker View sur la vue principale. Comme prcdemment, ajoutez galement un champ de texte, en ltendant sur toute la largeur de linterface. Telle que nous nous apprtons la dfinir, la

Chapitre 6

Les contrles spcifiques

191

roulette ne prsentera jamais les "vraies" donnes sous Interface Builder et renverra son allure par dfaut, o la ville de Cupertino est slectionne (voir Figure 6.26).
Figure 6.26 Lintgration dune roulette personnalise dans notre application.

Nous souhaitons ici crer lapplication officielle des ditions Pearson. La roulette reprsente ainsi les diffrents "rayons" de la librairie et lutilisateur est invit slectionner le domaine littraire de son choix (sciences humaines, apprentissage de langlais, informatique, multimdia, etc.). Sous Interface Builder, slectionnez la roulette puis ouvrez linspecteur de connexions. Reliez les outlets dataSource et delegate licne du Files Owner. Nous indiquons ainsi que la source des donnes et leur traitement sont dfinis dans la classe contrleur principale. Enregistrez votre fichier xib et revenez Xcode. Dans linterface de notre classe principale, nous avons besoin de dfinir deux outlets (la roulette et le champ de texte) ainsi quun tableau contenant les donnes. Commencez par diter le fichier Roue02ViewController.h en saisissant le code figurant au listing ci-dessous. Listing 6.16 : Roue02ViewController.h
#import <UIKit/UIKit.h> @interface Roue02ViewController : UIViewController <UIPickerViewDelegate, UIPickerViewDataSource> { IBOutlet UIPickerView *roueSimple; IBOutlet UITextField *champTexte; NSArray *roueDonnees; } @property (nonatomic, retain) UIPickerView *roueSimple; @property (nonatomic, retain) UITextField *champTexte; @property (nonatomic, retain) NSArray *roueDonnees; @end

192

Dveloppez des applications originales pour iPhone et iPod Touch

Rien de bien inhabituel pour linstant : nous dfinissons les deux outlets ainsi que le tableau de donnes, qui est une instance de la classe NSArray. Cest galement dans cette interface que vous dclarerez vos actions, si vous ajoutez des contrles supplmentaires comme des boutons par exemple. Limplmentation de la classe est toutefois plus complexe. Dans la mesure o nous avons choisi de dclarer la source et le dlgu de la roulette dans la classe principale, vous devez ajouter une srie de mthodes. Ouvrez le fichier Roue02ViewController.m et adaptez son code en consquence. Listing 6.17 : Roue02ViewController.m
#import "Roue02ViewController.h" @implementation Roue02ViewController @synthesize roueSimple; @synthesize roueDonnees; @synthesize champTexte; - (void)viewDidLoad { NSArray *donnees = [[NSArray alloc] initWithObjects:@"Economie", @"Sciences", @"Histoire", @"Apprentissage", @"Classes prpas", @"Informatique", @"Multimdia", @"Vie pratique", nil]; self.roueDonnees = donnees; [donnees release]; [super viewDidLoad]; } /* // The designated initializer. Override to perform setup that is required // before the view is loaded. - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *) nibBundleOrNil { if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) { // Custom initialization } return self; } */ /* // Implement loadView to create a view hierarchy programmatically, // without using a nib. - (void)loadView { } */ /* // Override to allow orientations other than the default portrait // orientation.

Chapitre 6

Les contrles spcifiques

193

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation) interfaceOrientation { // Return YES for supported orientations return (interfaceOrientation == UIInterfaceOrientationPortrait); } */ - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesnt have a superview // Release anything thats not essential, such as cached data } - (void)dealloc { [roueSimple release]; [roueDonnees release]; [champTexte release]; [super dealloc]; } // Nombre de composantes de la roulette - (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)roueSimple { return 1; } // Nombre de lignes afficher dans la roulette - (NSInteger)pickerView:(UIPickerView *)roueSimple numberOfRowsInComponent:(NSInteger)component { return [roueDonnees count]; } // Dlgu appel x fois, o x est la valeur retourne par // numberOfRowInComponent - (NSString *)pickerView:(UIPickerView *)roueSimple titleForRow:(NSInteger)cellule forComponent:(NSInteger)component { return [roueDonnees objectAtIndex:cellule]; } // Gestionnaire dvnements dclench lorsquon // slectionne une ligne (didSelectRow) - (void)pickerView:(UIPickerView *)roueSimple didSelectRow:(NSInteger) cellule inComponent:(NSInteger)component { NSString *choix = [roueDonnees objectAtIndex:cellule]; NSString *message = [[NSString alloc] initWithFormat:@"Choix : %@", choix]; champTexte.text = message; } @end

194

Dveloppez des applications originales pour iPhone et iPod Touch

Laffichage de la roulette commence par la cration dun tableau donnees, que lon initialise laide dune srie de mots-cls au sein de la mthode viewDidLoad. Dans notre exemple, il sagit des diffrents rayons des ditions Pearson. On affecte ensuite le contenu de ce tableau la variable rouesDonnees. Nous devons alors prendre le temps de dfinir correctement la source de la roulette. On doit tout dabord indiquer le nombre de composantes qui la constituent, cest--dire le nombre de "roues" quelle doit prsenter :
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)roueSimple { return 1; }

Ici, notre roulette ne comporte quun seul lment slectionnable la fois. On doit maintenant dfinir le nombre de lignes afficher sur cette unique composante :
- (NSInteger)pickerView:(UIPickerView *) roueSimple numberOfRowsInComponent:(NSInteger)component { return [roueDonnees count]; }

Notre tableau contient huit cellules et la roulette est ainsi instancie avec autant de lignes slectionnables. La mthode suivante est donc appele huit fois afin de remplir les lignes de la roulette avec chacune des cellules du tableau :
- (NSString *)pickerView:(UIPickerView *)roueSimple titleForRow:(NSInteger)cellule forComponent:(NSInteger)component { return [roueDonnees objectAtIndex:cellule]; }

Enfin, nous devons grer les vnements associs la roulette, en particulier la slection dune ligne spcifique. La mthode suivante est appele chaque fois que lutilisateur choisit lune des entres :
- (void)pickerView:(UIPickerView *)roueSimple didSelectRow:(NSInteger) cellule inComponent:(NSInteger)component { NSString *choix = [roueDonnees objectAtIndex:cellule]; NSString *message = [[NSString alloc] initWithFormat:@"Choix : %@", choix]; champTexte.text = message; }

On repre ainsi la cellule slectionne et on la convertit en une chane de caractres que lon affiche dans le champ de texte de notre application. Ouvrez nouveau votre vue principale sous Interface Builder, cliquez sur Files Owner en maintenant la touche Ctrl enfonce et d-

Chapitre 6

Les contrles spcifiques

195

finissez vos deux outlets : roueSimple et champTexte. Vrifiez galement que les lments dataSource et delegate de la roulette sont bien associs Files Owner (voir Figure 6.27).
Figure 6.27 Les connexions de notre interface principale.

Enregistrez votre projet et compilez-le : vous slectionnez ensuite votre rayon dans le Simulateur diPhone et la valeur releve figure dans le champ de texte (voir Figure 6.28). En lieu et place du champ de texte, vous pouvez envisager tout type de traitement pour la slection de lutilisateur. Un bouton permettrait alors de charger une seconde vue en fonction du choix initial, par exemple.
Figure 6.28 On slectionne facilement un lment laide de la roulette, pour lafficher dans le champ de texte en bas de lcran.

Ajouter une roulette multiple


Comme vous venez de le voir, la dfinition dune roulette ncessite dindiquer le nombre de "composantes" qui la constituent. Il sagit du nombre dlments que lutilisateur est susceptible de slectionner individuellement. laffichage, cela se traduit par lajout de

196

Dveloppez des applications originales pour iPhone et iPod Touch

roues supplmentaires sur votre contrle, la manire des roulettes de date que nous avons dveloppes au cours de ce chapitre. Consacrons-nous un nouvel exemple pour illustrer les diffrences fondamentales avec la technique prcdente. Sous Xcode, crez le nouveau projet "Roue03" et ajoutez directement un lment UIPickerView et un champ de texte la vue principale. Dans notre exemple, nous allons demander lutilisateur de choisir une ville franaise, puis un service qui lui est associ (mto, infos pratiques, circulation, etc.). Modifiez ensuite le code du fichier Roue03ViewController.h, en saisissant le listing ci-dessous. Listing 6.18 : Roue03ViewController.h
#import <UIKit/UIKit.h> #define indexVille 0 #define indexService 1 @interface Roue03ViewController : UIViewController <UIPickerViewDelegate, UIPickerViewDataSource> { IBOutlet UIPickerView *roueDouble; IBOutlet UITextField *champTexte; NSArray *villesContenu; NSArray *servicesContenu; } @property @property @property @property @end (nonatomic, (nonatomic, (nonatomic, (nonatomic, retain) retain) retain) retain) UIPickerView *roueDouble; UITextField *champTexte; NSArray *villesContenu; NSArray *servicesContenu;

Nous ouvrons len-tte de ce fichier par la dfinition de deux constantes, indexVille et indexService, qui nous permettront didentifier chacune des deux composantes de la roulette. Nous crons ensuite deux outlets, roueDouble et champTexte qui correspondent aux deux lments dinterface. Enfin, nous ajoutons deux tableaux de type NSArray qui contiendront les donnes affiches dans les deux roulettes. Nous terminons cette interface par la dclaration de toutes les proprits. Une fois encore, nous najoutons pas directement daction : cest lune des mthodes associes la classe UIPickerView qui sera responsable du traitement des donnes. Modifiez prsent le fichier Roue03ViewController.m en ajoutant la dclaration des donnes et le dlgu de la roulette.

Chapitre 6

Les contrles spcifiques

197

Listing 6.19 : Roue03ViewController.m


#import "Roue03ViewController.h" @implementation Roue03ViewController @synthesize roueDouble; @synthesize champTexte; @synthesize villesContenu; @synthesize servicesContenu; - (void)viewDidLoad { NSArray *villesArray = [[NSArray alloc] initWithObjects:@"Paris", @"Marseille", @"Lyon", @"Bordeaux", @"Lille", nil]; self.villesContenu = villesArray; [villesArray release]; NSArray *servicesArray = [[NSArray alloc] initWithObjects:@"La mto", @"Les infos", @"La circulation", @"Les loisirs", @"Les coles", nil]; self.servicesContenu = servicesArray; [servicesArray release]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesnt have a superview // Release anything thats not essential, such as cached data } - (void)dealloc { [roueDouble release]; [villesContenu release]; [servicesContenu release]; [super dealloc]; } - (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)roueDouble { return 2; } - (NSInteger)pickerView:(UIPickerView *)roueDouble numberOfRowsInComponent:(NSInteger)component { if (component == indexVille) return [self.villesContenu count]; return [self.servicesContenu count]; } - (NSString *)pickerView:(UIPickerView *)roueDouble titleForRow:(NSInteger)row forComponent:(NSInteger)component { if (component == indexVille) return [self.villesContenu objectAtIndex:row];

198

Dveloppez des applications originales pour iPhone et iPod Touch

return [self.servicesContenu objectAtIndex:row]; } - (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger) cellule inComponent:(NSInteger)component { NSInteger villeChoisie = [pickerView selectedRowInComponent: indexVille]; NSInteger serviceChoisi = [pickerView selectedRowInComponent: indexService]; NSString *ville= [villesContenu objectAtIndex:villeChoisie]; NSString *service= [servicesContenu objectAtIndex:serviceChoisi]; NSString *message = [[NSString alloc] initWithFormat:@"%@ %@ ? Cest parti !", service, ville]; champTexte.text = message; } @end

Ce contrleur illustre parfaitement les possibilits dextension de notre exemple prcdent. Au sein de la mthode viewDidLoad, nous dfinissons cette fois deux tableaux contenant le nom de quelques villes franaises et les services associs que notre application compte afficher. Nous indiquons ensuite que la roulette doit compter deux composantes diffrentes, travers la mthode numberOfComponentsInPickerView. Pour chaque composante, la mthode numberOfRowsInComponent construit des roulettes contenant le nombre de lignes appropri : il sagit du nombre dlments dfinis dans chacun des deux tableaux. Grce au dlgu, nous remplissons enfin les roulettes avec les lments des tableaux. Notez comment les constantes dclares dans len-tte nous permettent de valider rapidement chacune des deux roulettes :
if (component == indexVille) { }

Cette boucle conditionnelle vrifie que lon parcourt actuellement la composante de gauche, ddie aux villes. Enfin, la mthode didSelectRow rcupre chaque slection de ligne llment de la roulette de gauche et de droite. On concatne une chane de caractres dans la variable message, que lon affiche en dernier lieu dans le champ de texte en bas de lcran. Sous Interface Builder, cliquez sur licne Files Owner tout en maintenant la touche Ctrl du clavier enfonce, puis dsignez les deux outlets : la roulette et le champ de texte. linverse, cliquez sur la roulette et ouvrez linspecteur de connexions ; assignez les lments dataSource et delegate Files Owner. Enregistrez votre travail puis compilez le projet. Le Simulateur de liPhone vous permet dsormais de slectionner individuellement deux infor-

Chapitre 6

Les contrles spcifiques

199

mations, qui sont ensuite combines dans une seule chane de caractres (voir Figure 6.29). Vous pouvez envisager tout type de traitement partir de cette slection initiale. Dans notre exemple, le traitement se poursuivra alors par laffichage de la mto dune localit spcifique ou par ltat actuel du trafic.
Figure 6.29 On slectionne individuellement deux roulettes, dont le contenu est extrait de deux tableaux.

Dfinir des lments dpendants dans une liste de proprits


Mme si elle offre de bons rsultats, la technique prcdente manque indniablement de souplesse. Il est en effet difficile de saisir dinterminables tableaux dans le code de votre contrleur principal, sans compter que les deux roulettes ne dpendent pas lune de lautre. Pour peupler rapidement le contenu de lune des roulettes, vous avez ainsi tout intrt utiliser lditeur de listes de proprits : la manire de votre fichier Infos.plist, vous crez un fichier XML dont le contenu est directement intgr la roulette. En imbriquant plusieurs lments les uns dans les autres, vous crez rapidement une liste hirarchique dobjets : vous avez ainsi la possibilit de faire figurer les lments enfants dans la roulette de droite. On imagine tout de suite lintrt dun tel dispositif non seulement vous allgez votre code source en chargeant un fichier de donnes externes, mais vous avez aussi la possibilit daffiner les choix de lutilisateur, qui slectionne un lment prcis aprs avoir choisi une catgorie gnrale. Reprenons notre exemple dapplication officielle des ditions Pearson. Lors de notre premire tude, nous nous sommes contents dafficher les "rayons" de la librairie. Avec un tel systme, il nous est possible de dfinir lensemble du catalogue de lditeur dans une liste de proprits, en imbriquant les titres des ouvrages dans les rubriques qui leur sont associes. La roulette de gauche reprend ainsi les catgories dfinies prcdemment et la

200

Dveloppez des applications originales pour iPhone et iPod Touch

moindre slection modifie le contenu de la roulette de droite, qui naffiche que les ouvrages correspondant la requte. Ouvrez une fentre du Finder et rendez-vous dans le dossier /Developer/Applications/ Utilities. Effectuez un double clic sur "Property List Editor" : un fichier XML vierge apparat lcran. Il est dfini par un lment racine, Root, qui obit au type Dictionary. Slectionnez cette premire ligne, puis cliquez sur le bouton Add Child de la barre doutils (voir Figure 6.30).
Figure 6.30 On dfinit le contenu de la roulette travers une liste de proprits.

Saisissez alors le nom dun premier lment parent. Il sagit ici dune catgorie douvrages, "Informatique" par exemple. Droulez le menu au champ Type et slectionnez Array. Vous crez ainsi un premier tableau, capable dhberger des lments enfants. Cliquez sur la flche gauche de cette premire entre afin de drouler larborescence. Cliquez nouveau sur le bouton Add Child de la barre doutils afin dajouter une entre imbrique dans ce premier tableau ; il sagit ici dune chane de caractres, de type String donc, qui contient le nom dun ouvrage du rayon informatique. Renouvelez la procdure pour tous les lments que vous souhaitez faire figurer dans votre roulette (voir Figure 6.31). Vos lments parents devront ainsi tre dfinis en tant quarray et vos lments enfants en tant que string.
Figure 6.31 On complte la liste des proprits en saisissant toutes les donnes devant figurer dans la roulette et en les hirarchisant.

Chapitre 6

Les contrles spcifiques

201

Droulez enfin le menu File de Property List Editor > Save as et saisissez "ouvrages.plist" avant de cliquer sur le bouton Save. Vous avez ainsi rapidement cr le contenu de votre roulette, en triant lensemble des donnes en lments parents et lments enfants. De retour sous Xcode, crez un nouveau projet de type View-Based Application que vous nommerez Roue04. Droulez ensuite le menu Project, cliquez sur Add to Project et slectionnez le fichier ouvrages.plist. Cochez la case "Copy items into destination groups folder" afin de copier llment dans le dossier de votre projet. Ouvrez ensuite le fichier Roue04ViewController.xib et ajoutez un objet Picker View et un champ de texte comme vous en avez maintenant largement lhabitude. Affichez linspecteur de connexions, slectionnez votre roulette et associez les lments dataSource et delegate au Files Owner. Enregistrez votre interface puis revenez sous Xcode. Comme nous lavons vu travers loutil Property List Editor, la cration dun tel index dont les lments sont hirarchiss correspond un dictionnaire. En Objective-C, vous devez ainsi dclarer une instance de la classe NSDictionary qui va contenir lensemble de votre liste de proprits. En parallle, vous dclarez deux tableaux de type NSArray qui correspondent chacune des deux roulettes. Modifiez le fichier Roue04ViewController.h en consquence. Listing 6.20 : Roue04ViewController.h
#import <UIKit/UIKit.h> #define indexRayon 0 #define indexOuvrage 1 @interface Roue04ViewController : UIViewController <UIPickerViewDelegate, UIPickerViewDataSource> { IBOutlet UIPickerView *roulette; IBOutlet UITextField *champTexte; NSDictionary *ouvragesPearson; NSArray *rayons; NSArray *ouvrages; } @property @property @property @property @property @end (retain, (retain, (retain, (retain, (retain, nonatomic) nonatomic) nonatomic) nonatomic) nonatomic) UIPickerView *roulette; UITextField *champTexte; NSDictionary *ouvragesPearson; NSArray *rayons; NSArray *ouvrages;

202

Dveloppez des applications originales pour iPhone et iPod Touch

Si limplmentation de cette classe est rigoureuse, elle nest pas fondamentalement diffrente de notre exemple prcdent. La lecture des donnes dfinies dans la liste des proprits vous pargne du reste la cration manuelle des tableaux. Adaptez le fichier Roue04ViewController.m laide du listing ci-dessous. Listing 6.21 : Roue04ViewController.m
#import "Roue04ViewController.h" @implementation Roue04ViewController @synthesize roulette; @synthesize champTexte; @synthesize ouvragesPearson; @synthesize rayons; @synthesize ouvrages; - (void)viewDidLoad { NSBundle *bundle = [NSBundle mainBundle]; NSString *plistChemin = [bundle pathForResource: @"ouvrages" ofType:@"plist"]; NSDictionary *dictionnaire = [[NSDictionary alloc] initWithContentsOfFile:plistChemin]; self.ouvragesPearson = dictionnaire; [dictionnaire release]; NSArray *composantes = [self.ouvragesPearson allKeys]; NSArray *tri = [composantes sortedArrayUsingSelector: @ selector(compare:)]; self.rayons = tri; NSString *rayonSelec = [self.rayons objectAtIndex:0]; NSArray *array = [ouvragesPearson objectForKey:rayonSelec]; self.ouvrages = array; [super viewDidLoad]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesnt have a superview // Release anything thats not essential, such as cached data } - (void)dealloc { [roulette release]; [ouvragesPearson release]; [ouvrages release]; [rayons release]; [champTexte release]; [super dealloc]; }

Chapitre 6

Les contrles spcifiques

203

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView { return 2; } - (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component { if (component == indexRayon) return [self.rayons count]; return [self.ouvrages count]; } - (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component { if (component == indexRayon) return [self.rayons objectAtIndex:row]; return [self.ouvrages objectAtIndex:row]; } - (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component { if (component == indexRayon) { NSString *rayonSelec = [self.rayons objectAtIndex:row]; NSArray *array = [ouvragesPearson objectForKey:rayonSelec]; self.ouvrages = array; [roulette selectRow:0 inComponent:indexOuvrage animated:YES]; [roulette reloadComponent:indexOuvrage]; } NSInteger rayonLigne = [roulette selectedRowInComponent:indexRayon]; NSInteger ouvrageLigne = [roulette selectedRowInComponent: indexOuvrage]; NSString *rayonChoisi = [self.rayons objectAtIndex:rayonLigne]; NSString *ouvrageChoisi = [self.ouvrages objectAtIndex:ouvrageLigne]; NSString *message = [[NSString alloc] initWithFormat: @"%@ > %@", rayonChoisi, ouvrageChoisi]; champTexte.text = message; [message release]; } @end

204

Dveloppez des applications originales pour iPhone et iPod Touch

Tout commence par la mthode viewDidLoad, dans laquelle vous crez une instance de la classe NSBundle. Ce type dobjet permet de charger de manire dynamique des ressources externes, comme votre liste de proprits par exemple. Jusqu prsent, nous avons essentiellement manipul ce type de ressources travers Interface Builder, en slectionnant les fichiers correspondants dans linspecteur dattributs. Sachez toutefois que si vous souhaitez importer des images dans vos applications en quelques lignes de code, vous devez crer des instances de la classe NSBundle de ce type. Vous indiquez alors le chemin daccs votre fichier "ouvrages.plist" puis vous initialisez un dictionnaire avec son contenu :
NSString *plistChemin = [bundle pathForResource: @"ouvrages" ofType:@"plist"]; NSDictionary *dictionnaire = [[NSDictionary alloc] initWithContentsOfFile:plistChemin]; self.ouvragesPearson = dictionnaire;

Souvenez-vous de votre liste de proprits : les rayons correspondent aux lments-cls et les ouvrages reprsentent toutes les valeurs qui leur sont associes. Nous commenons par remplir la roulette de gauche, qui ne contient donc que les cls de votre liste de proprits. On rcupre de telles valeurs laide de la mthode allKeys.
NSArray *composantes = [self.ouvragesPearson allKeys]; NSArray *tri = [composantes sortedArrayUsingSelector: @selector(compare:)]; self.rayons = tri;

Noubliez pas que nous sommes ici en train de modifier la dclaration de la mthode viewDidLoad : nous prvoyons ainsi le traitement initial de notre application. Nous partons du principe que le premier rayon est actuellement slectionn : il correspond lindex 0 du tableau rayons. Chargeons en consquence le nom de tous les ouvrages associs ce rayon dans la roulette de droite, afin de finaliser notre vue de dpart :
NSString *rayonSelec = [self.rayons objectAtIndex:0]; NSArray *array = [ouvragesPearson objectForKey:rayonSelec]; self.ouvrages = array;

La mthode dlgue introduit une nouvelle boucle conditionnelle afin de relever la valeur slectionne dans la premire roulette. On recharge alors la seconde composante en fonction de ce choix : les donnes voluent dans la roulette de droite.
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component { if (component == indexRayon) { NSString *rayonSelec = [self.rayons objectAtIndex:row]; NSArray *array = [ouvragesPearson objectForKey:rayonSelec];

Chapitre 6

Les contrles spcifiques

205

self.ouvrages = array; [roulette selectRow:0 inComponent:indexOuvrage animated:YES]; [roulette reloadComponent:indexOuvrage]; } }

Rappelez-vous : cette mthode est dclenche chaque fois que lutilisateur exerce une slection sur la roulette. La composante concerne apparat au paramtre component. On vrifie donc si la modification porte sur la roulette de gauche. Si cest le cas, lutilisateur a chang de rayon : il faut lui prsenter une nouvelle liste douvrages. On rcupre alors le nom du rayon concern laide du paramtre row et on cre un nouveau tableau contenant les lments enfants du rayon slectionn. On ractualise enfin la roulette de droite laide de la mthode reloadComponent. La suite du traitement se poursuit comme lexemple prcdent : on rcupre les valeurs slectionnes par lutilisateur et on les affiche dans le champ de texte figurant lcran. Sous Xcode, vrifiez toutes les associations de vos outlets. Le Files Owner doit pointer vers le champ de texte et la roulette ; cette dernire voit ses outlets dataSource et delegate connects au Files Owner. Enregistrez votre interface et compilez votre projet. Vous manipulez ainsi les deux roulettes dans le Simulateur diPhone et le moindre changement sur la composante de gauche recharge automatiquement la composante de droite (voir Figure 6.32).
Figure 6.32 Le contenu de la roulette de droite dpend de la slection sur la roulette de gauche.

206

Dveloppez des applications originales pour iPhone et iPod Touch

Pour aller plus loin


Au cours de ce chapitre, nous avons examin en dtails les contrles avancs du kit de dveloppement de liPhone. Contrairement aux simples boutons et aux champs de texte, ils occupent un espace significatif sur linterface de votre application et votre rle de designer se complique en consquence : vous devez pleinement justifier lutilisation de roulettes ou dinterrupteurs, sous peine dalourdir votre interface et de la rendre confuse. Mais ils offrent en contrepartie des interactions plus riches et plus intuitives. En les agenant intelligemment autour dune srie donglets ou de vues secondaires, vous crez rapidement des crans de rglages simples et prcis sans dnaturer pour autant lallure de votre application (voir Figure 6.33).
Figure 6.33 Lapplication 7 Chords exploite des roulettes dpendantes pour afficher la grille de tous les accords de guitare.

Par ailleurs, la lecture de donnes externes comme notre liste de proprits ouvre un champ immense et facilite lintgration de contenus supplmentaires. Nous allons prcisment aborder cet aspect au cours du chapitre suivant, o nous apprendrons lire et enregistrer des donnes. Cest un passage oblig pour dvelopper des applications plus ambitieuses encore, que les utilisateurs vont exploiter quotidiennement et mettre jour en fonction de leurs besoins.

7
Lire et crire des donnes
Au sommaire de ce chapitre
vv vv vv

Lire des donnes Enregistrer des donnes Pour aller plus loin

Au cours du chapitre prcdent, vous avez appris manipuler tout type de donnes et agencer le contenu de votre application autour de contrles labors. Parmi ceux-ci, nous avons expos en dtails la structure des roulettes, en leur associant des tableaux ou des listes de proprits constelles dinformations. Informations. Le mot est lch. Cest bien lpine dorsale du dveloppement dapplications pour iPhone. Mise part une srie dutilitaires dont lintrt tient en une simple vue et un contrleur unique, la plupart des applications que vous dvelopperez visent soutenir une

208

Dveloppez des applications originales pour iPhone et iPod Touch

grande quantit dinformations. Lecteurs de livres lectroniques, guides touristiques ou recettes de cuisine : toutes ces applications reposent sur de volumineuses bases de donnes, dont le contenu sagence au mieux pour interagir avec lutilisateur. Le contrle privilgi de ce type de structure est la liste, qui prend lapparence dun tableau que lon manipule du bout des doigts et dont les cellules sont cliquables (voir Figure 7.1). LiPhone les utilise tous les niveaux, en particulier dans sa fonction de tlphone o vous slectionnez et triez vos contacts partir dun large tableau. Les listes ne sont pas fondamentalement diffrentes des roulettes que nous avons dveloppes prcdemment. Elles puisent leur contenu partir de tableaux ou de listes de proprits et prvoient de nombreuses mthodes pour grer la slection de lutilisateur ou la raction au clic. Ce type de contrle sinscrit parfaitement dans un systme de navigation de grande envergure. linverse, le contenu est parfois gnr par lutilisateur et vous devez lenregistrer afin quil le retrouve au prochain lancement de lapplication. Le kit de dveloppement de liPhone dispose de nombreuses solutions pour enregistrer les prfrences de lutilisateur ou les donnes quil a compulses, travers plusieurs types de bases de donnes ou de fichier systmes. Dans le mme ordre dide, vous avez galement la possibilit dinterroger un service distance afin de rcuprer des donnes formates ; cest notamment le cas des parseurs XML, particulirement adapts la cration dun lecteur de flux RSS. Ne ngligez donc pas la lecture et lcriture de donnes : ces deux oprations sont essentielles pour lintrt de vos applications et vous devez les matriser sur le bout des doigts.
Figure 7.1 Lapplication Recipes! sarticule autour dune large base de donnes qui prsente des recettes de cuisine sous forme de liste.

Chapitre 7

Lire et crire des donnes

209

Lire des donnes


La lecture du contenu associ votre application ne constitue quun versant de cette opration essentielle : vous devez galement apprendre lagencer de manire lgante, afin de favoriser sa lisibilit et dautoriser lutilisateur le manipuler. Sil est possible dafficher des donnes dans des champs de texte, des libells ou des roulettes, comme nous lavons vu au cours des chapitres prcdents, vous avez tout intrt matriser les listes. Illimites en longueur, elles permettent dafficher un grand volume de donnes tout en esquissant un systme de navigation simple et intuitif. En fonction du volume de donnes que vous souhaitez prsenter lutilisateur, vous pouvez envisager tout type dimplmentation. La solution la plus simple consiste trier le contenu avant de lafficher dans des cellules slectionnables. En cliquant sur un terme de premier niveau, lutilisateur affine son parcours et il navigue alors parmi une seconde liste constitue dlments plus prcis. Vous dclinez ainsi le principe de la liste hirarchise, ralise laide de lditeur de listes de proprits comme prcdemment, et vous le transformez en un vritable systme de navigation. Mais les listes revtent des aspects trs divers et vous pouvez largement personnaliser leur apparence en leur greffant une barre de recherche, un index alphabtique ou une srie dicnes. linstar des roulettes, leur cration est toutefois trs rigoureuse. Vous devez spcifier la provenance des donnes, mais aussi dfinir une srie de dlgus qui prendront en charge les interactions avec lutilisateur. Si la tche nest pas dsarmante au vu de nos progrs en Objective-C, vous devrez redoubler de vigilance afin dviter des sances de dbogage aussi longues que fastidieuses !

Crer une liste simple partir de contenu externe


Sil est naturellement possible dinitialiser le contenu dune liste partir dun tableau (un objet de type NSArray) dfini de manire statique dans le contrleur de votre application, vous avez tout intrt runir vos donnes dans un fichier externe de type XML. Non seulement la mise jour des informations de votre application sera plus simple, mais vous diffrenciez aussi de manire nette le contenu de votre projet de son aspect visuel et de ses traitements. Par ailleurs, vous crez ainsi une structure souple, capable de recueillir tout type de contenu. Noubliez jamais que liPhone dispose dun accs WiFi et 3G : selon toutes vraisemblances, vos utilisateurs pourront prtendre une connexion Internet et rapatrier ainsi des donnes depuis lextrieur. Si ces donnes sont formates en XML, vous gagnez sur toute la ligne et vous tendez largement le giron de votre application, en vous ouvrant les portes des innombrables API de services web (Flickr, Twitter, Facebook, Google, Amazon, etc.). Nous y reviendrons.

210

Dveloppez des applications originales pour iPhone et iPod Touch

Pour lheure, contentons-nous dun premier exemple sinscrivant dans la continuit du chapitre prcdent. Nous crons toujours lapplication de rfrence des ditions Pearson et nous souhaitons prsenter ses diffrents "rayons" travers une liste ordonne. Comme vous le verrez par la suite, ce mode de prsentation est beaucoup plus adapt ce type de tche que les roulettes que nous avons mises en place jusqu prsent. Votre premire opration consiste crer une liste de proprits laide de lditeur intgr aux outils de dveloppement de Mac OS X. Ouvrez une fentre du Finder, puis rendez-vous dans Developer/Applications/Utilities et effectuez un double-clic sur Property List Editor. Vous pouvez parfaitement partir du fichier ouvrages.plist ralis prcdemment. Dans notre exemple, nous ltoffons largement en crant des sous-rubriques lies tous les rayons principaux de lditeur. Dfinissez ainsi une srie dlments parents et enfants en cliquant sur les boutons Add Item et Add Child de la barre doutils. Ce dernier napparat que lorsquun lment parent est dfini selon le type Array ou Dictionary. Au final, vous devez ainsi faire apparatre des lments parents de niveau un et des lments enfants qui en dpendent (voir Figure 7.2).
Figure 7.2 La cration de notre liste de proprits, liste_ Pearson.plist.

Droulez enfin le menu File, cliquez sur Save As et saisissez liste_Pearson.plist dans le champ prvu cet effet. Ouvrez Xcode, droulez le menu File et cliquez sur New Project. Slectionnez le modle View-Based Application afin de commencer demble avec des contrleurs prts lemploi. Validez en cliquant sur le bouton Choose, puis saisissez "Table" en guise de nom de projet.

Crer la vue
Commencez par ouvrir le fichier TableViewController.xib associ votre projet. Sous Interface Builder, dposez un lment Table View sur la vue principale de votre application. L encore, cet lment ne rvlera jamais sa "vritable" apparence sous Interface Builder et se voit constitu dune srie de villes amricaines. Ny prenez pas garde : nous le

Chapitre 7

Lire et crire des donnes

211

remplacerons par le contenu de notre fichier .plist. Par dfaut, linstance de la classe UITableView occupe tout lespace de lcran de liPhone (voir Figure 7.3). Contrairement aux roulettes, vous pouvez toutefois saisir les poignes qui lencadrent et modifier sa hauteur ou sa largeur. Si le contenu dpasse de lcran de liPhone, la liste se poursuit indfiniment la manire dun "ascenseur" dune application bureautique.
Figure 7.3 La vue principale de notre application comprend une instance dUITableView.

Slectionnez ensuite llment Table View dans la fentre TableViewController.xib et ouvrez linspecteur de connexions. Vous retrouvez les deux outlets associs aux roulettes : dataSource et delegate. Comme pour ces contrles, vous devez les relier licne du Files Owner. Cliquez sur les petits cercles figurant droite de chaque entre et maintenez la souris enfonce jusqu cette icne. Cliquez ventuellement sur cette dernire icne afin de vrifier que la vue est bien connecte. Enregistrez votre travail et revenez sous Xcode.
Inscrire la liste dans une interface plus complexe Dans notre exemple, lobjet Table View occupe lensemble de lcran de liPhone et devient ainsi le systme de navigation privilgi de notre application. Mais bien souvent, il ne constitue que lun des lments devant figurer laffichage : vous pouvez alors rduire ses dimensions ou lintgrer dans une vue secondaire. Dans ce dernier cas, vous avez tout intrt crer un projet de type Navigation-Based Application ou Tab Bar Application. Vous disposerez ainsi dun contrleur racine, responsable de la navigation entre les diffrentes vues, et vous chargerez votre seconde vue partir dun fichier xib distinct.

212

Dveloppez des applications originales pour iPhone et iPod Touch

Dans ce cas, vous gagnez un temps prcieux en droulant le menu File puis en cliquant sur New File et en crant de nouvelles instances de la classe UITableViewController et de linterface View XIB. Notre exemple de catalogue des ditions Pearson sinscrit prcisment dans ce type de canevas ; a priori, nous avons tout intrt crer une srie donglets ("Dernires parutions", "Consulter le catalogue", "Nous contacter", etc.) dont chaque vue correspond une instance de la classe UITableViewController distincte.

Charger les donnes


Intressons-nous prsent la logique des contrleurs. Dans un premier temps, ajoutez la liste des proprits votre projet. Maintenez la touche Ctrl enfonce et cliquez sur le dossier Resources. Slectionnez Add > Existing Files et slectionnez le fichier liste_Pearson. plist cr prcdemment. Cochez la case "Copy items into destination groups folder" afin de copier le fichier dans le dossier associ votre projet. Il vous suffira de le slectionner dans le Finder, puis de le retoucher laide de lutilitaire ddi pour mettre jour les donnes quaffiche votre application. Nous allons charger les donnes quil contient dans un tableau de type NSArray. Pour cela, vous devez dclarer cette variable dans le contrleur de votre vue, TableViewController.h. Vous devez galement tendre cette classe aux protocoles UITableViewDelegate et UITableViewDataSource, puisque vous avez reli les deux outlets de Table View au Files Owner. Ouvrez ce fichier sous Xcode et modifiez son code laide du listing ci-dessous. Listing 7.1 : TableViewController.h
#import <UIKit/UIKit.h>
@interface TableViewController : UIViewController <UITableViewDelegate, UITableViewDataSource> { NSArray *donnees; } @property (nonatomic, retain) NSArray *donnees;

@end

Limplmentation de cette classe sinscrit dans la mme structure que celle des roulettes : vous chargez le contenu ds que la vue apparat lcran, grce la mthode viewDidLoad et vous conformez la liste travers une srie de mthodes standardises comme numberOfRowsInSection (nombre de lignes par section de la liste) et cellForRowAtIndexPath (nom de la cellule pour chaque ligne considre). La mthode didSelectRowAtIndexPath permettra enfin de grer la raction de lapplication au contact de lutilisateur. Ouvrez le fichier TableViewController.m et compltez-le laide du Listing 7.2.

Chapitre 7

Lire et crire des donnes

213

Listing 7.2 : TableViewController.m


#import "TableViewController.h" @implementation TableViewController @synthesize donnees; /* // The designated initializer. Override to perform setup that is required // before the view is loaded. - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *) nibBundleOrNil { if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) { // Custom initialization } return self; } */ // Chargement des donnes de notre liste - (void)viewDidLoad { NSBundle *bundle = [NSBundle mainBundle]; NSString *plistChemin = [bundle pathForResource: @"liste_pearson" ofType:@"plist"]; NSDictionary *dictionnaire = [[NSDictionary alloc] initWithContentsOfFile :plistChemin]; NSArray *niveauUn = [dictionnaire allKeys]; // Tri alphabtique du tableau NSArray *tri = [niveauUn sortedArrayUsingSelector:@selector(compare:)]; self.donnees = tri; [dictionnaire release]; [super viewDidLoad]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesnt have a superview // Release anything thats not essential, such as cached data } - (void)dealloc { [donnees release]; [super dealloc]; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection: (NSInteger)section { return [self.donnees count]; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndex Path:(NSIndexPath *)indexPath {

214

Dveloppez des applications originales pour iPhone et iPod Touch

static NSString *cellule = @"Cellule"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier: cellule]; if (cell == nil) { cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier: cellule] autorelease]; } NSUInteger row = [indexPath row]; cell.text = [donnees objectAtIndex:row]; return cell; } @end

Dans la mthode ViewDidLoad, nous crons un objet de type NSBundle responsable du chargement de donnes externes. Nous lui indiquons alors le chemin daccs notre fichier .plist contenant les donnes afficher dans la liste. Dans ce premier exemple, nous extrayons les lments parents laide de la mthode allKeys, puis nous les trions par ordre alphabtique avant de les intgrer au tableau donnees dfini dans linterface de la classe contrleur. Si vous prfrez conserver lordre dfini manuellement dans la liste des proprits, supprimez la ligne de tri et assignez le contenu de la variable niveauUn au tableau donnees.
NSBundle *bundle = [NSBundle mainBundle]; NSString *plistChemin = [bundle pathForResource: @"liste_pearson" ofType:@"plist"]; NSDictionary *dictionnaire = [[NSDictionary alloc] initWithContentsOfFile :plistChemin]; NSArray *niveauUn = [dictionnaire allKeys]; // Tri alphabtique du tableau NSArray *tri = [niveauUn sortedArrayUsingSelector:@selector(compare:)]; self.donnees = tri;

ce stade, les donnes afficher dans la liste sont contenues dans le tableau donnees. Nous commenons par indiquer au contrleur le nombre de lignes prparer dans la liste. On y parvient laide de la mthode numberOfRowInSection :
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection: (NSInteger)section { return [self.donnees count]; }

Nous devons enfin prsenter le titre des cellules de la liste, qui correspondent autant dinstances de la classe UITableViewCell. Pour cela, nous utilisons lattribut indexPath qui permet de pointer vers une cellule spcifique. Nous parcourons ainsi toutes les cellules de la liste en remplaant successivement leur texte par les lments de notre tableau donnees.

Chapitre 7

Lire et crire des donnes

215

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndex Path:(NSIndexPath *)indexPath { static NSString *cellule = @"Cellule"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier: cellule]; if (cell == nil) { cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier: cellule] autorelease]; } NSUInteger row = [indexPath row]; cell.text = [donnees objectAtIndex:row]; return cell; }

Enregistrez le code et compilez le programme. Lapplication se lance dans le Simulateur diPhone et vous dcouvrez votre liste constitue dlments puiss dans le fichier .plist (voir Figure 7.4).
Figure 7.4 La liste dlments apparat sur lcran de liPhone et charge un contenu externe.

Mettre en forme les cellules


Comme vous lavez vu prcdemment, la dclaration du contenu des cellules noccupe quune seule mthode de notre contrleur. Il est heureusement possible dajouter des traitements spcifiques chaque cellule et de modifier leur apparence du tout au tout. Nous allons ici apprendre ajouter une image ct de chaque entre et choisir un autre style typographique.

216

Dveloppez des applications originales pour iPhone et iPod Touch

Dans un premier temps, crez une icne au format PNG. Ses dimensions importent peu : vous pourrez librement adapter la hauteur des cellules par la suite. Toutefois, privilgiez de petits pictogrammes et essayez de composer un document sur fond transparent de 3535 pixels environ. Comme nous le verrons par la suite, il est possible dadapter la hauteur des cellules de votre liste. Lorsque votre image est prte, retournez sous Xcode, maintenez la touche Ctrl enfonce et cliquez sur le dossier Resources. Slectionnez Add > Existing Files et choisissez limage que vous avez cre. Ajoutez cet lment au dossier de votre projet. Dans notre exemple il sagit de limage livre.png. Nous souhaitons la faire apparatre gauche de chaque cellule, afin didentifier prcisment quil sagit de catgories douvrages. On y parvient en modifiant la mthode cellForRowAtIndexPath, responsable de laffichage de chaque cellule. Compltez-la laide du listing ci-dessous. Listing 7.3 : cellForRowAtIndexPath
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndex Path:(NSInteger)section { static NSString *cellule = @"Cellule"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier: cellule]; if (cell == nil) { cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier: cellule] autorelease]; } NSUInteger row = [indexPath row]; cell.text = [niveauUn objectAtIndex:row];
UIImage *image = [UIImage imageNamed:@"livre.png"]; cell.image = image;

return cell; }

Nous avons ici cr une instance de la classe UIImage travers la variable image et nous avons charg notre petit pictogramme. Nous affectons ensuite cette instance la variable cell.image l'aide de la notation point : on affiche ainsi limage dans chaque cellule construite la vole. Enregistrez et compilez le programme : le rsultat ne se fait pas attendre et chaque ligne arbore dsormais le pictogramme. La transparence de limage PNG est prserve (voir Figure 7.5). Dans le mme ordre dide, vous avez la possibilit dappliquer quelques rgles typographiques aux titres de vos cellules. L encore, tous les changements se rpercutent sur la mthode cellForRowAtIndexPath et sur un attribut de la classe UITableViewCell : font. Contentez-vous dajouter la ligne suivante cette mthode, la ligne qui suit la dclaration de notre pictogramme.

Chapitre 7

Lire et crire des donnes

217

Figure 7.5 Les cellules de notre liste intgrent une image personnalise.

Listing 7.4 : cellForRowAtIndexPath


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndex Path:(NSInteger)section { static NSString *cellule = @"Cellule"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier: cellule]; if (cell == nil) { cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier: cellule] autorelease]; } NSUInteger row = [indexPath row]; cell.text = [niveauUn objectAtIndex:row]; UIImage *image = [UIImage imageNamed:@"livre.png"]; cell.image = image;
cell.font = [UIFont systemFontOfSize:60];

return cell; }

Enregistrez le code et compilez nouveau le programme : les titres des cellules saffichent dsormais dans un corps de police normal, avec une taille de caractres de 60 points (voir Figure 7.6). Remplacez "systemFontOfSize" par "boldSystemFontOfSize" ou "italicSystemFontOfSize" pour obtenir un corps gras ou italique.

218

Dveloppez des applications originales pour iPhone et iPod Touch

Figure 7.6 Nous avons modifi le style typographique du titre des cellules : elles dbordent dsormais de laffichage.

Comme vous pouvez le constater, la taille choisie est trop large et le titre des cellules est tronqu. Pour y remdier, vous devez forcer votre programme adopter une hauteur spcifique pour toutes les cellules de la liste. L encore, une mthode spcifiquement lie la classe UITableView vient votre rescousse et vous permet dappliquer les dimensions de votre choix. Il sagit de la mthode heightForRowAtIndexPath qui, comme son nom lindique, dfinit la hauteur type de chacune de vos cellules. Dclarez-la dans le code principal de votre contrleur, juste aprs la fonction prcdente. Listing 7.5 : heightForRowAtIndexPath
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath: (NSIndexPath *)indexPath { return 65; }

Heureuse nouvelle : la taille retourne par cette mthode est galement exprime en points. Dans la mesure o nous avions dfini des titres avec une police de 60 points, veillez laisser une petite marge confortable afin que les cellules ne se superposent pas. Vous pouvez rapidement consulter le rsultat laide du Simulateur diPhone (voir Figure 7.7).

Chapitre 7

Lire et crire des donnes

219

Figure 7.7 Les cellules dune liste peuvent librement stendre en hauteur et sadapter ainsi vos choix typographiques.

Pour dfinir les rgles typographiques associes aux titres des cellules, nous avons cr une instance de la classe UIFont. Celle-ci vous permet notamment de choisir une autre police systme. En la couplant une instance de la classe UIColor, vous slectionnez galement la couleur des caractres. Modifiez une dernire fois la mthode cellForRowAtIndexPath, en appliquant les changements figurant en gras au listing ci-dessous. Listing 7.6 : cellForRowAtIndexPath
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndex Path:(NSInteger)section { static NSString *cellule = @"Cellule"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier: cellule]; if (cell == nil) { cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier: cellule] autorelease]; } NSUInteger row = [indexPath row]; cell.text = [niveauUn objectAtIndex:row]; UIImage *image = [UIImage imageNamed:@"livre.png"]; cell.image = image;
NSString *police = @"Courier"; UIColor *couleur = [UIColor redColor]; cell.font = [UIFont fontWithName:police size:60]; cell.textColor = couleur; [image release]; [police release];

return cell; }

220

Dveloppez des applications originales pour iPhone et iPod Touch

Le nom des polices systme sinscrit sous la forme dune chane de caractres. On commence donc par crer une instance de la classe NSString pour gagner en clart, en linitialisant avec le nom de la police "Courier". Libre vous de modifier cet exemple par la police de votre choix ! Reportez-vous ladresse http://daringfireball.net/misc/2007/07/ iphone-osx-fonts pour en dcouvrir la liste complte, avec des exemples prcis de rendu. Vous devez scrupuleusement respecter le nom de chaque famille de police, y compris leurs dclinaisons les plus complexes (comme "Arial Rounded MT Bold" par exemple). Nous dclarons ensuite la police de nos cellules laide de la mthode fontWithName:<UIFont> size:<taille>. Dans le mme ordre dide, nous utilisons une couleur prdfinie (redColor) pour lappliquer au texte des cellules. Cette dclaration passe par lattribut textColor. Compilez le projet pour voir le rsultat dans le Simulateur d'iPhone (voir Figure 7.8).
Figure 7.8 Nous avons modifi la police, la taille et la couleur des titres de cellules.

Personnaliser vos cellules avec parcimonie Sil parat tentant de choisir des polices et des couleurs personnalises pour les cellules de votre liste, procdez avec justesse et minutie. Vous ntes pas en train de composer un site web, sur lequel vous exprimez pleinement votre personnalit et vos gots : vos utilisateurs devront rapidement apprivoiser votre application, sans quelle ne vienne heurter leurs habitudes. En choisissant une police et une couleur particulires, vous courez le risque de les rebuter et de marquer trop profondment votre diffrence vis--vis des applications concurrentes. moins de composer lapplication dune marque, qui dispose dores et dj dune charte graphique bien tablie, essayez plutt de vous fondre dans le moule et de vous dmarquer par le caractre singulier de vos contrleurs ! Si le style de votre liste tranche radicalement avec les habitudes des utilisateurs, vous devez le justifier en dclinant fond cette charte graphique tous les lments de lapplication.

Chapitre 7

Lire et crire des donnes

221

Ragir au contact de lutilisateur


Si les longues listes constituent en soi un lment prpondrant de votre application, en soutenant des informations trs riches que vous compulsez dans un fichier externe, elles ne rvlent tout leur intrt quen se montrant interactives. linstar de nimporte quel contrle du kit de dveloppement de liPhone, elles autorisent en effet des manipulations de la part de lutilisateur, qui dclenchent alors des traitements secondaires. Lexemple typique de la liste de contacts est parfaitement adapt : en touchant lun des noms figurant dans votre carnet, vous dclenchez automatiquement un appel tlphonique. Votre application peut ragir de la mme manire et gnrer une multitude de sous traitements. Affichage dune seconde liste, basculement vers une vue auxiliaire, apparition dune alerte Toutes les ides sont possibles ! Votre liste devient alors un systme de navigation part entire. En prenant soin de prparer au mieux cet aspect de votre application, vous inventez une nouvelle manire de la mettre jour : il vous suffira de modifier la liste des proprits (ou plus gnralement le fichier externe charg par votre programme) pour offrir de nouvelles interactions vos utilisateurs. Comme pour les roulettes, la gestion des interactions passe par la mthode didSelectRowAtIndexPath. Cette mthode rcupre prcisment le numro de la cellule pointe par lutilisateur : souple et pratique, elle vous permet denvisager rapidement des traitements personnaliss pour toutes les entres de vos listes. Modifiez nouveau le fichier TableViewController.m en intgrant cette nouvelle mthode la fin du code source, comme au Listing 7.7. Dans notre exemple, nous restons dans un cadre simple et born : la pression sur une cellule de la liste affiche une alerte, qui correspond une instance de la classe UIAlertView. Listing 7.7 : didSelectRowAtIndexPath
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath: (NSIndexPath *)indexPath { NSUInteger cellule = [indexPath row]; NSString *valeurCellule = [niveauUn objectAtIndex:cellule]; NSString *message = [[NSString alloc] initWithFormat: @"Vous avez choisi le rayon %@", valeurCellule]; UIAlertView *alerte = [[UIAlertView alloc] initWithTitle:@"Choix dun rayon" message:message delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil]; [alerte show]; [message release]; [alerte release]; }

222

Dveloppez des applications originales pour iPhone et iPod Touch

Enregistrez le code source et compilez nouveau votre application. La moindre pression sur une cellule de la liste fait jaillir un message dalerte lutilisateur, en reprenant le titre du rayon slectionn (voir Figure 7.9). Vous pouvez facilement adapter cet exemple vos propres besoins, en intgrant dautres traitements spcifiques. La premire instruction de cette mthode rcupre le numro de la cellule pointe :
NSUInteger cellule = [indexPath row];

Figure 7.9 Nous avons slectionn une cellule et une alerte apparat automatiquement.

Nhsitez pas vous reporter aux exemples du Chapitre 5 afin de vous remmorer le chargement dune vue secondaire. En prparant un second contrleur associ une nouvelle vue contenant elle-mme une liste, vous dfinissez ainsi un niveau hirarchique. Llment parent point dans la premire vue charge une seconde liste constitue de ses lments enfants. Il est ncessaire de dfinir cette seconde vue dans un contrleur distinct, et non de recharger intgralement le contenu de la liste principale, afin doffrir un bouton de navigation aux utilisateurs. Ces derniers pourront ainsi cliquer sur lun des titres pour consulter les lments sous-jacents, avant de revenir la liste globale et repartir ventuellement dans une autre direction. Ce second contrleur obit strictement au mme principe que notre exemple : on parcourt nouveau le fichier liste_Pearson.plist en partant cette fois de llment slectionn en guise de point de dpart. On charge alors dynamiquement un tableau contenant de nouvelles valeurs, que lon dispose dans une liste laide de la mthode cellForRowAtIndexPath (voir Figure 7.10).

Chapitre 7

Lire et crire des donnes

223

Figure 7.10 Ce dictionnaire des oiseaux sappuie sur une srie de listes et de fichiers externes pour charger son contenu.

Crer un lecteur de flux RSS


Jusqu prsent, nous avons charg du contenu externe notre application sous la forme dune liste de proprits. Facile mettre jour, cette base est toutefois cre et stocke sur votre propre poste local. Il y a fort parier quen marge de votre passion grandissante pour liPhone, vous disposiez dun espace personnel sur la Toile. Votre site web ou votre blog sarticule trs probablement autour dun flux RSS gnr automatiquement ou prpar par vos soins laide dun script PHP de votre cr. Dans tous les cas, vous connaissez la souplesse et la polyvalence dun tel format : il est interprt par une grande quantit de logiciels, de nos navigateurs web aux petits gadgets du dock. Proposer un lecteur de flux RSS avec ladresse de votre blog en guise dapplication iPhone peut ainsi largement contribuer largir votre audience. En diffusant gratuitement cette application, vous attisez invitablement la curiosit de tous les frus de lApp Store : ils pourront ainsi consulter vos derniers billets dans le creux de leur mobile et vous naurez plus rellement vous proccuper des mises jour de votre application. En effet, les changements apports votre blog ou votre site web se rpercuteront automatiquement sur votre application iPhone, qui charge directement votre flux RSS (voir Figure 7.11). Bien entendu, cest une instance de la classe UITableView qui soutiendra le titre des diffrents billets ! Le kit de dveloppement de liPhone supporte de nombreux parseurs XML concurrents. Nous ne participerons pas cette querelle de chapelles, qui vise en lire un parmi tant dautres. Lune des bibliothques les plus utilises actuellement est TouchXML. Elle se base sur le projet open-source libxml2 et constitue une solution simple et rapide pour lire des fichiers XML. Sachez par ailleurs que Cocoa Touch dispose dune classe NSXMLParser dont

224

Dveloppez des applications originales pour iPhone et iPod Touch

vous pourrez prendre connaissance travers la documentation officielle de Xcode. Saisissez ce terme dans lditeur, puis pressez la touche Alt et slectionnez-le pour dcouvrir son implmentation. Nous lui prfrons TouchXML dans le cadre de notre exemple pour sa plus grande souplesse et sa facilit dutilisation.
Figure 7.11 De nombreux sites web clbres disposent dsormais dune application pour iPhone : il sagit gnralement dun lecteur de flux RSS prconfigur.

Intgrer la bibliothque TouchXML


Avant daller plus loin, vous devez tout dabord vous procurer la dernire version de la bibliothque TouchXML. On doit ce projet lquipe TouchCode, qui dispose dun espace collaboratif ladresse http://code.google.com/p/touchcode. Le projet bnficie dun suivi professionnel et une large communaut suit son volution travers le WiKi officiel. Pour tlcharger la bibliothque, rendez-vous sur la page officielle du projet puis cliquez sur longlet Downloads. Slectionnez TouchXML dans la liste et dcompressez larchive dans un dossier de votre disque dur, au sein de Developer par exemple (voir Figure 7.12). Ouvrez nouveau Xcode et crez un nouveau projet en droulant le menu File, puis en cliquant sur New Project. Choisissez le modle Navigation-Based Application et cliquez sur le bouton Choose. Saisissez LecteurRSS en guise de nom de projet. Vous en avez dsormais largement lhabitude : tous les fichiers ncessaires sont prts lemploi et votre application sarticule dores et dj autour dune liste vide. En revanche, nous navions pas encore expriment lajout dune bibliothque complmentaire, venant largir les fonctions du kit de dveloppement de liPhone. Droulez le menu Project et cliquez sur loption Edit Project Settings (voir Figure 7.13). Une fentre comprenant quatre onglets apparat lcran. Cliquez sur longlet Build.

Chapitre 7

Lire et crire des donnes

225

Figure 7.12 On tlcharge la dernire version de la bibliothque TouchXML.

Figure 7.13 La fentre des proprits du projet.

Dans le champ de recherche en haut droite de la fentre, saisissez Header Search Paths. Vous filtrez les lments : effectuez un double-clic sur la seule ligne apparaissant lcran, cliquez sur le bouton + et saisissez /usr/include/libxml2 dans le champ Path. Cliquez ensuite sur OK. Dans le champ de recherche, saisissez prsent Other Linker Flags et slectionnez la ligne. Ajoutez -lxml2 dans le champ considr. Vous venez de charger les bibliothques libxml2 de Cocoa sur lesquelles sappuie TouchXML. Fermez la fentre des proprits de votre projet. Finalisez cette opration initiale en ajoutant les classes de TouchXML que vous venez de tlcharger. Pour cela, pressez la touche Ctrl de votre clavier et cliquez sur le dossier Classes de votre projet. Slectionnez Add > Existing Files dans le menu contextuel et pointez lexplorateur vers le dossier contenant la bibliothque TouchXML. Choisissez plus prcisment

226

Dveloppez des applications originales pour iPhone et iPod Touch

le rpertoire TouchXML/Common/Source, slectionnez lensemble des fichiers (Cmd+A) sauf le dossier Tidy et validez en cliquant sur Add (voir Figure 7.14). Conservez les paramtres par dfaut et cliquez nouveau sur Add.
Figure 7.14 Lajout de la bibliothque TouchXML notre projet.

Sur le volet gauche de votre projet, dans le dossier Classes, vous dcouvrez une vingtaine de fichiers supplmentaires, dont TouchXML.h et une srie de bibliothques commenant par CXML. Votre application peut immdiatement les mettre profit pour parcourir un flux RSS !

Implmenter le parseur XML


Dans le cadre de notre exemple, nous souhaitons intgrer le flux RSS typique dun blog courant, hberg sur le service FeedBurner par exemple. Chaque billet est identifi par le nud <item></item> et dispose dune srie dlments enfants : title, link, description, pubDate, etc. Limplmentation de la classe TouchXML correspond ainsi aux tapes suivantes : 1. On charge le flux depuis son URL. 2. On cre une instance de la classe CXMLDocument, visant soutenir un document XML complet, que lon initialise avec le contenu du flux tlcharg. 3. On cre un tableau de type NSArray : chacun de ces lments correspond un nud <item> du flux. 4. On cre un dictionnaire de type NSMutableDictionary dans lequel on stocke tous les lments de chaque nud. Le nom des lments correspond aux cls du dictionnaire. Ainsi, on pourra identifier la date de publication, le titre ou la description de chaque billet figurant dans le flux RSS.

Chapitre 7

Lire et crire des donnes

227

5. On doit prvoir un tableau global pour manipuler aisment le contenu du flux RSS travers toutes les mthodes du contrleur de la vue. Nous serons ainsi en mesure dafficher des informations supplmentaires, comme la description dun billet par exemple, lorsque lutilisateur slectionnera un titre. Commencez par ouvrir le fichier RootViewController.h sous Xcode et ajoutez les lments figurant au Listing 7.8. Listing 7.8 : RootViewController.h
#import <UIKit/UIKit.h>
#import TouchXML.h"

@interface RootViewController : UITableViewController { IBOutlet UITableView *listeBillets;


NSMutableArray *billetsFlux;

} @property(retain, nonatomic) NSMutableArray *billetsFlux; @end

Vous noterez quon importe la bibliothque TouchXML associe notre projet puis quon dfinit un outlet correspondant lobjet UITableView. Nous ne devons pas oublier de lassocier au Files Owner, sous Interface Builder. Nous dclarons ensuite notre tableau global, billetsFlux. Saisissez prsent le code suivant dans limplmentation du contrleur : Listing 7.9 : RootViewController.m
#import RootViewController.h" #import LecteurRSSAppDelegate.h" @implementation RootViewController
@synthesize billetsFlux;

- (void)viewDidLoad { [super viewDidLoad]; // On indique lURL du flux NSString *adresseFlux = @"http://feeds2.feedburner.com/ BilletsCocoafr; // On initialise le NSMutableArray qui contiendra tous les billets billetsFlux = [[NSMutableArray alloc] init]; // On cre un objet NSURL pour accder ladresse du flux NSURL *url = [NSURL URLWithString: adresseFlux];

228

Dveloppez des applications originales pour iPhone et iPod Touch

// On cre notre parseur laide de la classe CMXDocument de // TouchXML CXMLDocument *parseurXML = [[[CXMLDocument alloc] initWithContentsOfURL:url options:0 error:nil] autorelease]; // On cre un tableau contenant tous les billets du flux NSArray *listeItems = NULL; // On remplit le tableau en identifiant les noeuds "<item> du flux RSS listeItems = [parseurXML nodesForXPath:@"//item" error:nil]; // On accde aux donnes de chaque lment individuel for (CXMLElement *billetIndividuel in listeItems) { // On stocke temporairement les lments de chaque billet NSMutableDictionary *elementBlog = [[NSMutableDictionary alloc] init]; int compteur; // On parcourt tous les lments du noeud <item> courant for(compteur = 0; compteur < [billetIndividuel childCount]; compteur++) { // On ajoute le nom et la valeur de chaque lment au // dictionnaire elementBlog [elementBlog setObject:[[billetIndividuel childAtIndex:compteur] stringValue] forKey:[[billetIndividuel childAtIndex:compteur] name]]; } // On ajoute le contenu de chaque noeud au tableau global [billetsFlux addObject:[elementBlog copy]]; } [adresseFlux release]; [url release]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesnt have a superview // Release anything thats not essential, such as cached data } - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 1; } // Nombre de cellules de la liste

Chapitre 7

Lire et crire des donnes

229

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection: (NSInteger)section { return [billetsFlux count]; } // On modifie lapparence des cellules - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndex Path:(NSIndexPath *)indexPath { static NSString *cellule = @"Cell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier: cellule]; if (cell == nil) { cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:cellule] autorelease]; } int indexBillet = [indexPath indexAtPosition: [indexPath length] -1]; // On affiche le titre de chaque billet [cell setText:[[billetsFlux objectAtIndex: indexBillet] objectForKey: @"title"]]; return cell; } - (void)dealloc { [super dealloc]; [billetsFlux release]; } @end

Ouvrez le fichier RootViewController.xib, slectionnez Files Owner en pressant la touche Ctrl de votre clavier et pointez la flche vers Table View. Slectionnez listeBillets dans le menu contextuel qui apparat. Enregistrez votre interface et votre code, puis compilez le programme (voir Figure 7.15). Et si nous mettions profit lexemple prcdent en ragissant aux manipulations de lutilisateur ? Une fois encore, tout passe par la mthode didSelectRowAtIndexPath. Dans la mesure o nous disposons de tout le contenu du flux dans un tableau global, billetsFlux, nous pouvons librement en extraire une information prcise. Il sagit ici dafficher une alerte contenant le texte du billet. En une pression sur un bouton, on revient la liste complte des billets. Ajoutez la mthode suivante au fichier RootViewController.m.

230

Dveloppez des applications originales pour iPhone et iPod Touch

Figure 7.15 Le lecteur de flux RSS affiche les derniers billets du blog choisi.

Listing 7.10 : didSelectRowAtIndexPath


// On gre la slection dun billet - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath: (NSIndexPath *)indexPath { NSUInteger indexBillet = [indexPath indexAtPosition: [indexPath length] -1]; NSString *description = [[billetsFlux objectAtIndex: indexBillet] objectForKey: @"description"]; NSString *message = [[NSString alloc] initWithFormat: @"%@", description]; UIAlertView *alerte = [[UIAlertView alloc] initWithTitle:@"Lecture du billet" message:message delegate:nil cancelButtonTitle:@"Revenir la liste" otherButtonTitles:nil]; [alerte show]; [message release]; [alerte release]; }

Les fentres dalerte se manipulent elles-mmes du bout des doigts : quelle que soit la longueur de la chane de caractres ainsi rcupre dans la variable description, lutilisateur pourra lire le texte en entier. Il suffit de cliquer sur le bouton dannulation, arborant le libell "Revenir la liste" pour masquer la fentre (voir Figure 7.16). Simple et efficace !

Chapitre 7

Lire et crire des donnes

231

Adapter cet exemple votre propre blog Vous avez probablement envie de personnaliser cet exemple autour de votre propre blog. Nhsitez pas ajouter un titre, voire une srie donglets pour accder des fonctions complmentaires. Si la liste reste dsesprment vide, votre blog utilise probablement un autre format de flux. Plusieurs standards cohabitent en effet sur le march et ils nidentifient pas tous les billets laide de nuds <item>, mme si la norme RSS, qui est la plus courante, le prvoit. Vrifiez la structure de votre propre flux Par ailleurs, vous pouvez adapter cet exemple bien dautres projets : si vous tes dveloppeur web, nhsitez pas crer des scripts PHP qui gnrent quantit de flux XML personnaliss. En modifiant la proprit de la mthode nodesForXPath, vous pouvez rapidement rapatrier dautres types dinformations, que vous encapsulez selon larborescence de votre choix. On peut ainsi imaginer un guide de restaurants, dont les lments sont isols dans des nuds <restos></restos> par exemple. En passant votre script PHP des paramtres dans lURL, vous pouvez ainsi facilement extraire des enregistrements dune base MySQL et les conformer en XML. Ajoutez des champs de texte ou des contrles votre interface afin de laisser lutilisateur choisir la fonction quil souhaite appeler : lURL soumise au parseur de TouchXML sadapte ainsi en consquence.

Figure 7.16 En slectionnant lun des billets, on affiche son contenu dans une bote dalerte.

Enregistrer des donnes


lorigine, les premiers dveloppeurs pour iPhone ont essentiellement eu pour vocation de prsenter des informations et du contenu lutilisateur, afin de lui prter immdiatement assistance face un besoin spcifique. Songez aux premires applications que vous avez installes : lApp Store tait constell de purs utilitaires, comme des lampes de poche ou

232

Dveloppez des applications originales pour iPhone et iPod Touch

des niveaux bulles par exemple. Trs rapidement, une seconde gnration dutilitaires a vu le jour et a propos une exprience plus pousse ; lutilisateur tait invit saisir les informations quil devait conserver au fil du temps. Cest notamment le cas des gestionnaires de budget ou des pense-btes. Que vous sollicitiez largement vos utilisateurs ou non, vous devez imprativement vous intresser aux paramtres externes de votre application. Votre iPhone en main, parcourez lcran des Rglages. Trs vraisemblablement, vous y verrez des entres ddies des applications que vous avez installes, comme Facebook, Finetune, LinkedIn ou Shazam par exemple (voir Figure 7.17). Tout comme Mac OS X, iPhone OS centralise les "Prfrences Systme" dans un espace du mobile et laisse tous les dveloppeurs y consigner les paramtres lis leurs applications. Grce la classe NSUserDefaults, vous chargez ces prfrences lors de lexcution de votre programme. Vous avez ainsi la possibilit denregistrer les rglages personnaliss de lutilisateur et de lui offrir une plus grande souplesse.
Figure 7.17 Lcran des Prfrences Systme de lapplication Facebook.

Sauvegarder les Prfrences Systme


Le kit de dveloppement de liPhone facilite rellement la tche des dveloppeurs qui souhaiteraient sinscrire dans un tel systme. Les Prfrences Systme sont en effet dfinies dans un bloc spcifique (on parle de bundle de prfrences) qui contient au moins une liste de proprits, Root.plist. Celui-ci dcrit une srie de rglages proposs lutilisateur, qui prennent la forme dun champ de texte remplir, dune rglette dplacer ou dun lment de liste slectionner par exemple. Tous ces champs et contrles sont runis dans une vue unique, situe dans lcran des Rglages de liPhone.

Chapitre 7

Lire et crire des donnes

233

Conservez le projet LecteurRSS.xcodeproj ouvert. Sous Xcode, droulez le menu File > New File. Dans le volet gauche de la fentre, slectionnez Settings sous la section iPhone OS, puis choisissez Settings Bundle et validez en cliquant sur le bouton Next, puis Finish. Sur le volet Groups & Files de Xcode, droulez llment Settings.bundle et slectionnez Root.plist. Vous accdez la liste des proprits des prfrences de votre application (voir Figure 7.18).
Figure 7.18 On cre la liste des Prfrences Systme de notre lecteur de flux RSS.

Par dfaut, la liste des proprits comprend quatre lments dexemple. Commencez par effectuer un double-clic en face du champ Title et saisissez le nom de votre application. Il sagit du titre qui apparat lcran des Rglages de liPhone. Vous dcouvrez ensuite un nud PreferenceSpecifiers : il sagit des diffrents types de contrles permettant lutilisateur de dfinir ses prfrences. Le premier lment correspond au nom du groupe des prfrences : son type est PSGroupSpecifier. Saisissez "Options du flux" dans le champ Title. Les trois autres lments prsentent lintgration de contrles spcifiques : un champ de texte (PSTextFieldSpecifier), un interrupteur pour choisir entre deux valeurs (PSToggleSwitchSpecifier) et une rglette (PSSliderSpecifier). Vous tes parfaitement libre dajouter les lments de votre choix, en rduisant larborescence dun nud et en cliquant sur le bouton + figurant la fin de chaque ligne. Vous avez galement la possibilit de copier/coller un lment pour le dupliquer rapidement. Dans le cadre de notre exemple, nous souhaitons essentiellement laisser lutilisateur saisir son adresse de flux RSS prfr. Nous lui soumettons ainsi un champ de texte, dont la valeur contient par dfaut ladresse du blog prcdent. Sil ne touche pas aux Prfrences Systme, il ne se rendra mme pas compte de lexistence dune telle option et le lecteur de flux affichera les billets prvus par le dveloppeur. Conservez le deuxime lment et adaptez le champ Title et Key. Ce dernier dfinit la constante qui sera reprise par le contrleur de votre programme. Dans le champ DefaultValue, saisissez ladresse par dfaut du lecteur

234

Dveloppez des applications originales pour iPhone et iPod Touch

RSS (voir Figure 7.19). Vous pouvez galement choisir le type de clavier virtuel et activer la correction automatique en cours de saisie. Vrifiez chaque fois le type dobjet attendu : nous utilisons ici des chanes de caractres.
Figure 7.19 Nous offrons aux utilisateurs la possibilit de saisir leur propre adresse de flux.

Poursuivez ventuellement avec un second champ de texte, visant dfinir le nombre de billets afficher par exemple. Vous pouvez aussi adapter la rglette ce type de valeurs. Enregistrez le fichier Root.plist et compilez le projet. Cliquez sur le bouton central du Simulateur diPhone et parcourez lcran Rglages. Vous dcouvrez la section consacre votre application, avec les contrles que vous avez prpars. Les valeurs par dfaut y figurent et un clavier virtuel apparat lorsque vous cliquez sur un champ de texte (voir Figure 7.20).
Figure 7.20 Les contrles dfinis apparaissent lcran Rglages.

Chapitre 7

Lire et crire des donnes

235

Vous pouvez trs facilement enregistrer tout type de valeur. Peu importe lordre dans lequel vous avez dfini les lments du fichier Root.plist : vous dfinissez vous-mme leur rle au sein de votre application. Essayez au passage de modifier la liste de prfrences et dajouter un lment de type PSMultiValueSpecifier : il sagit dune liste choix multiple. L encore, dfinissez un champ Title, Key et DefaultValue, mais ajoutez galement deux objets de type Array. Vous les nommerez respectivement Titles et Values et ils correspondront aux choix et aux valeurs que lutilisateur peut slectionner (voir Figures 7.21 et 7.22). Dans le cadre de notre application, nous pouvons laisser lutilisateur choisir le type de flux XML considr (ATOM, RSS, RDF, etc.).
Figure 7.21 On modifie la liste des prfrences pour ajouter un choix supplmentaire, parmi plusieurs valeurs prdfinies.

Figure 7.22 Ce contrle se traduit lcran par une liste slectionnable.

Il est maintenant lheure dadapter le contrleur de notre vue. Ouvrez le fichier RootViewController.h et ajoutez les lignes suivantes au dbut du code :

236

Dveloppez des applications originales pour iPhone et iPod Touch

#define kAdresseFlux @"adresse_flux" #define kNombreBillets @"nbr_billets" #define kTypeFlux @"type_flux"

Il sagit ici de trois constantes, que lon associe aux valeurs du champ Key de chaque prfrence systme. Ouvrez prsent limplmentation RootViewController.m et adaptez la mthode viewDidLoad. Listing 7.11 : viewDidLoad
- (void)viewDidLoad { [super viewDidLoad]; // On charge les Prfrences Systme NSUserDefaults *preferences = [NSUserDefaults standardUserDefaults]; NSString *adresseFlux = [NSString alloc]; adresseFlux = [preferences objectForKey:kAdresseFlux]; [] }

On cre ici une instance de la classe NSUserDefaults et on charge les Prfrences Systme. On rcupre ensuite la valeur associe la constante kAdresseFlux, cest--dire la cl adresse_flux de la liste des proprits. Il ny a plus la moindre mention dune URL au sein du contrleur et pourtant lapplication affiche bien un flux RSS lorsque vous la compilez nouveau (voir Figure 7.23).
Figure 7.23 On utilise les Prfrences Systme pour charger dynamiquement un nouveau flux RSS.

Chapitre 7

Lire et crire des donnes

237

Vous pouvez librement adapter ce principe tous vos besoins et limiter ainsi le nombre de billets affichs ou choisir un autre paramtre passer la mthode nodesForXPath, en fonction du type de flux. Mme aprs avoir ferm le Simulateur diPhone, vous retrouvez le paramtre que vous avez dfini manuellement en lanant nouveau votre application. Vous avez galement la possibilit dintgrer des champs de texte votre vue principale, dont les valeurs de base correspondent ces Prfrences Systme. Lutilisateur pourra ainsi adapter ces valeurs aussi bien dans lcran Rglages de liPhone quau sein de votre application. Vous connaissez la marche suivre : les champs de texte doivent correspondre des outlets que vous reliez au Files Owner du contrleur de la vue.

crire un fichier
Lorsque votre application doit lire et enregistrer des donnes qui ne relvent pas des Prfrences Systme, lune des solutions les plus simples consiste crire un fichier. Le Simulateur de liPhone rend compte de lorganisation des fichiers sur le mobile dApple. Ouvrez une fentre du Finder, accdez la racine de votre compte puis ouvrez Bibliothque/ Application Support/iPhone Simulator/User. Vous dcouvrez ainsi lagencement exact des dossiers et des fichiers sur iPhone OS. Parmi les cinq dossiers prsents par dfaut, vous remarquez le rpertoire Applications. Il contient une srie de fichiers .sb et de sous-rpertoires portant le mme nom (voir Figure 7.24).
Figure 7.24 Le Simulateur reproduit larborescence des fichiers de liPhone.

Lextension .sb correspond aux "sandbox" (littralement, des bacs sable) alloues chaque application. Cest une zone quelles peuvent librement agencer et utiliser pour stocker leurs propres donnes. Afin dviter les conflits, les noms des dossiers sont uniques et sont gnrs par le systme. Vous pouvez heureusement rcuprer le chemin daccs complet la sandbox dune application laide de la mthode NSSearchPathForDirectories-

238

Dveloppez des applications originales pour iPhone et iPod Touch

InDomains, comme nous allons le voir par la suite. Si votre application doit stocker temporairement le rsultat de traitements, vous profitez dun accs plus rapide encore au dossier /tmp qui lui est ddi, travers la mthode NSTemporaryDirectory().

La solution la plus simple et efficace pour crire un fichier consiste srialiser une classe, cest--dire convertir lensemble de ses lments en octets et les enregistrer dans une liste de proprit. Certes, tous les types de classes ne sont pas supportes, mais le panel est suffisamment large et vous pouvez ainsi enregistrer le contenu de variables dfinies en tant que NSString, NSDate, NSNumber, NSArray, NSDictionary, NSMutableArray et NSMutableDictionary. Lopration seffectue en une seule ligne :
[<classe instancie> writeToFile:<chemin_accs> atomically:YES];

Bien entendu, noubliez jamais que toutes les fonctions traditionnelles du langage C sont galement accessibles, comme fwrite() ou fopen(). Ces solutions dpassent toutefois le simple giron de notre ouvrage et nous vous invitons vous reporter au livre Le langage C++ de Jesse Liberty et Bradley Jones, paru aux ditions Pearson, pour en savoir davantage. Dans notre ultime exemple, nous allons modifier le lecteur de flux RSS en lui ajoutant deux fonctions :
vv

Un bouton "Supprimer", en haut droite, permettra de rduire loisir les billets affichs par le lecteur. Vous "personnalisez" ainsi son affichage en effaant les articles qui vous intressent le moins. Un bouton "Enregistrer", en haut gauche, va alors sauvegarder la slection de lutilisateur sous la forme dun fichier .plist.

vv

Ce fichier pourra ainsi tre archiv ou au contraire recharg afin de faire office de cache. Commencez par modifier le fichier RootViewController.h. On y dfinit une constante supplmentaire (le nom du fichier sauvegarder) et on dclare deux mthodes : une pour rcuprer le chemin daccs au dossier Documents associ notre application et une seconde pour supprimer lun des billets affichs lcran. Listing 7.12 : RootViewController.h
#define kAdresseFlux
#define kNomFichier

@"adresse_flux"
@"selection_blog.plist"

#import <UIKit/UIKit.h> #import "TouchXML.h" @interface RootViewController : UITableViewController { IBOutlet UITableView *listeBillets; NSMutableArray *billetsFlux;

Chapitre 7

Lire et crire des donnes

239

} @property(retain, nonatomic) NSMutableArray *billetsFlux;


-(IBAction)supprimerBillet:(id)sender; -(NSString *)cheminAcces;

@end

Modifiez ensuite le fichier RootViewController.m comme suit : Listing 7.13 : RootViewController.m


#import "RootViewController.h" #import "LecteurRSSAppDelegate.h" @implementation RootViewController @synthesize billetsFlux;
- (NSString *)cheminAcces { NSArray *chemins = NSSearchPathForDirectoriesInDomains (NSDocumentDirectory, NSUserDomainMask, YES); NSString *dossierDocuments = [chemins objectAtIndex:0]; return [dossierDocuments stringByAppendingPathComponent:kNomFichier]; } -(IBAction)supprimerBillet:(id)sender { [self.tableView setEditing:!self.tableView.editing animated:YES]; } -(void)enregFichier:(id)sender { [billetsFlux writeToFile:[self cheminAcces] atomically:YES]; }

- (void)viewDidLoad { [super viewDidLoad]; // On indique lURL du flux NSUserDefaults *preferences = [NSUserDefaults standardUserDefaults]; NSString *adresseFlux = [NSString alloc]; adresseFlux = [preferences objectForKey:kAdresseFlux]; // On initialise le NSMutableArray contenant tous les billets billetsFlux = [[NSMutableArray alloc] init]; // On cre un objet NSURL pour accder ladresse du flux NSURL *url = [NSURL URLWithString: adresseFlux]; // On cre notre parseur laide de la classe CMXDocument de // TouchXML CXMLDocument *parseurXML = [[[CXMLDocument alloc]

240

Dveloppez des applications originales pour iPhone et iPod Touch

initWithContentsOfURL:url options:0 error:nil] autorelease]; // On cre un tableau contenant tous les billets du flux NSArray *listeItems = NULL; // On remplit le tableau en identifiant les noeuds "<item> du flux // RSS listeItems = [parseurXML nodesForXPath:@"//item" error:nil]; // On accde aux donnes de chaque lment individuel for (CXMLElement *billetIndividuel in listeItems) { // On stocke temporairement les lments de chaque billet NSMutableDictionary *elementBlog = [[NSMutableDictionary alloc] init]; int compteur; // On parcourt tous les lments du noeud <item> courant for(compteur = 0; compteur < [billetIndividuel childCount]; compteur++) { // On ajoute le nom et la valeur de chaque lment au // dictionnaire elementBlog [elementBlog setObject:[[billetIndividuel childAtIndex:compteur] stringValue] forKey:[[billetIndividuel childAtIndex:compteur] name]]; } // On ajoute le contenu de chaque noeud au tableau global [billetsFlux addObject:[elementBlog copy]]; }
UIBarButtonItem *supprBouton = [[UIBarButtonItem alloc] initWithTitle:@"Supprimer" style:UIBarButtonItemStyleBordered target:self action:@selector(supprimerBillet:)]; self.navigationItem.rightBarButtonItem = supprBouton; UIBarButtonItem *enregBouton = [[UIBarButtonItem alloc] initWithTitle:@"Enregistrer" style:UIBarButtonItemStyleBordered target:self action:@selector(enregFichier:)]; self.navigationItem.leftBarButtonItem = enregBouton; [enregBouton release]; [supprBouton release];

[adresseFlux release]; [url release]; }

Chapitre 7

Lire et crire des donnes

241

/* // Override to allow orientations other than the default portrait // orientation. - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation) interfaceOrientation { // Return YES for supported orientations return (interfaceOrientation == UIInterfaceOrientationPortrait); } */ - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesnt have a superview // Release anything thats not essential, such as cached data } - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 1; } // Nombre de cellules de la liste - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection: (NSInteger)section { return [billetsFlux count]; } // On modifie lapparence des cellules - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndex Path:(NSIndexPath *)indexPath {
static NSString *cellule = @"DeleteMeCellIdentifier";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier: cellule]; if (cell == nil) { cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:cellule] autorelease]; } int indexBillet = [indexPath indexAtPosition: [indexPath length] -1]; // On affiche le titre de chaque billet [cell setText:[[billetsFlux objectAtIndex: indexBillet] objectForKey: @"title"]]; return cell; }
- (void) tableView:(UITableView *) tableView commitEditingStyle: (UITableViewCellEditingStyle) editingStyle forRowAtIndexPath:(NSIndexPath *) indexPath { NSUInteger row = [indexPath row]; [self.billetsFlux removeObjectAtIndex:row]; [tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:

242

Dveloppez des applications originales pour iPhone et iPod Touch

UITableViewRowAnimationFade]; }

// On gre la slection dun billet - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath: (NSIndexPath *)indexPath { NSUInteger indexBillet = [indexPath indexAtPosition: [indexPath length] -1]; NSString *description = [[billetsFlux objectAtIndex: indexBillet] objectForKey: @"description"]; NSString *message = [[NSString alloc] initWithFormat: @"%@", description]; UIAlertView *alerte = [[UIAlertView alloc] initWithTitle:@"Lecture du billet" message:message delegate:nil cancelButtonTitle:@"Revenir la liste" otherButtonTitles:nil]; [alerte show]; [message release]; [alerte release]; } - (void)dealloc { [super dealloc]; [billetsFlux release]; } @end

Enregistrez le projet et compilez-le : vous avez dsormais la possibilit de personnaliser la liste en cours daffichage en cliquant sur le bouton Supprimer, puis en slectionnant lune des cellules (voir Figures 7.25 et 7.26).
Figure 7.25 On commence par charger le flux laide dune adresse spcifique, indique dans les Prfrences Systme.

Chapitre 7

Lire et crire des donnes

243

Cest la mthode commitEditingStyle qui en est responsable, en rechargeant dynamiquement le contenu du tableau. Le second bouton, Enregistrer, lance la procdure de sauvegarde (voir Figure 7.27). On commence tout dabord par reprer le chemin daccs la sandbox de lapplication, puis on enregistre le contenu du tableau billetsFlux sous la forme dun fichier .plist.
Figure 7.26 On supprime ensuite tous les billets qui ne nous intressent pas.

Figure 7.27 On enregistre enfin le contenu du flux slectionn sous la forme dune liste de proprits.

244

Dveloppez des applications originales pour iPhone et iPod Touch

Pour aller plus loin


La boucle est dsormais boucle : vous avez appris lire, puis crire des listes de proprits. Vous avez donc parfaitement la possibilit de vrifier la prsence dun fichier dans la sandbox de votre application et de le charger : vous crez ainsi rapidement un systme de cache et vous offrez tout de mme du contenu vos utilisateurs malgr labsence dune connexion Internet, par exemple. En disposant lenregistrement du fichier dans la mthode applicationWillTerminate prdfinie dans les projets de Xcode, vous mettez en place un systme souple de sauvegarde des donnes. Cette mthode sexcute en effet lorsque lapplication est sur le point de se quitter, lorsque vous rpondez un coup de fil inopin par exemple. Cocoa Touch dispose galement dun systme de gestion de bases de donnes trs lger, sqlite3. Sarticulant autour du langage SQL, il vous permet denregistrer et de lire tout type de donnes. Son intgration dpasse toutefois le cadre de notre ouvrage et vous oblige matriser un langage complmentaire. Pour en savoir plus sur son intgration et ses usages, reportez-vous ladresse http://tinyurl.com/ylo9n95. Puisque nous savons dsormais lire et crire des fichiers, que diriez-vous dune petite halte du ct du multimdia ? Il sagit de lun des dossiers associs la sandbox de votre application (Media). En y stockant tout type de contenu supplmentaire, vous enrichissez votre projet et vous offrez aux utilisateurs un environnement plus immersif et plus souple.

8
Le multimdia
Au sommaire de ce chapitre
vv vv vv vv

Les images et les photographies Laudio et la vido Le dessin et les animations Pour aller plus loin

Si liPhone est un grand communiquant, autant laise dans les fonctions tlphoniques de base que dans linteraction avec des services extrieurs ou des donnes associes votre application, cest aussi un mobile lincroyable potentiel multimdia. Appareil photo, baladeur dans la veine de liPod, lecture dimages sur lesquelles on zoome en cartant deux doigts, affichage de squences vidos, animations en 3D, etc. Les dveloppeurs les plus ambitieux disposent dune palette trs large de fonctions pour tendre le champ de leurs

246

Dveloppez des applications originales pour iPhone et iPod Touch

applications et offrir une exprience plus riche leurs utilisateurs. linstar de tous les composants du kit de dveloppement de liPhone, la gestion des donnes multimdia obit un principe simple et vous permet de manipuler rapidement ce type de ressources. Comme au chapitre prcdent, il est possible de stocker lensemble de ces donnes dans la sandbox de votre application afin de compacter toutes les ressources dont elle a besoin. Mais avant de foncer tte baisse parmi ces possibilits et de parsemer vos projets de fichiers MP3 ou dimages en grand format, rflchissez deux fois. Comme nous lavons vu, les applications pour iPhone visent avant tout servir un rle simple et prcis. Les utilisateurs doivent tre capables dinterroger immdiatement votre application et dobtenir un rsultat en moins de vingt secondes. Ne cdez donc pas envers et contre tout aux sirnes du multimdia, en bardant votre interface de contrles superflus ou dune bande son larrire-plan ! Mal exploit, ce type de donnes ne se contente pas daccaparer inutilement lattention de lutilisateur ; il consomme galement des ressources considrables jusqu faire planter le mobile dApple dans le pire des cas. Vous voil mis en garde. LiPhone peut dores et dj rendre des services considrables avec les lments de base du kit de dveloppement : on ne reprochera jamais sa trop grande sobrit une application, si elle remplit parfaitement le rle quon lui a fix. Effectuez en revanche un usage intensif de ce type de ressources si votre projet sarticule prcisment autour de la photographie ou de la musique. Lecteurs multimdias, retouches photographiques, cration audio et gestion dalbums : les utilisateurs qui tlchargent ce type dapplications savent quoi sattendre et ils seront dus de ne pas profiter dun environnement riche ou de ne pas plonger dans de saisissants clichs manipuler du bout des doigts. titre dexemple, lapplication du Muse du Louvre fait figure de modle et combine intelligemment tous les atouts de liPhone (voir Figure 8.1). Le contenu ditorial est riche et sappuie sur des contrles standard, en particulier des libells, des champs de texte et des boutons. Toutes les vues senrichissent harmonieusement dimages ou de squences vido et vous parcourez les collections en zoomant sur les dtails dune slection duvres. Si vous envisagez denrichir votre propre application de ce type dlments, prenez cet exemple en modle. Lusage du multimdia y est constant, mais il se justifie sans cesse : aucune image nest l par hasard et ces ressources soutiennent un contenu ditorial trs riche.

Chapitre 8

Le multimdia

247

Figure 8.1 Lapplication du Muse du Louvre.

Lutilisation de lappareil photo de liPhone fait figure de cas particulier. Il ne sagit pas dimposer des images lutilisateur, mais bien de lui proposer dutiliser le capteur de liPhone pour prendre le sujet de son choix en flagrant dclic, avant de manipuler ventuellement le rsultat avec votre application. La tche est clairement identifie et il est le seul dcider des lments figurant sur linterface de son tlphone. Lintrt artistique de ces lments visuels ne vous incombe donc pas ! De nombreuses applications mettent ainsi en place un bouton dclenchant une photo ; cest notamment le cas de la liste de tches ToDo, qui vous permet darchiver les facturettes lies vos achats courants ou dUpCode grce auquel vous photographiez et convertissez les codes FlashCode prsents sur certaines publicits (voir Figure 8.2).
Figure 8.2 Grce UpCode, vous prenez en photo les codes barre "FlashCodes" qui sont automatiquement convertis.

Les lments sonores sont moins envahissants et plus discrets. On les rservera essentiellement aux jeux vido et ventuellement aux messages dalertes, afin dattirer lattention de lutilisateur comme sur une application bureautique. Si vous envisagez de programmer un lecteur multimdia, inspirez-vous de lapplication iPod installe par dfaut sil pa-

248

Dveloppez des applications originales pour iPhone et iPod Touch

rat prtentieux de rivaliser avec cet auguste comptiteur, si complet et ergonomique, vous avez en revanche la possibilit de spcialiser votre lecteur dans certains formats ou genres musicaux. L encore, vous pouvez profiter de limmense varit des contrles de liPhone pour offrir une nouvelle manire dcouter sa musique prfre. Cest notamment le pari du groupe britannique Snow Patrol, qui propose une application officielle trs droutante dans laquelle vous coutez des extraits des derniers albums tout en dpliant des origamis (voir Figure 8.3). Un vrai concept ! Par ailleurs, sachez que vous pouvez faire appel aux fonctions internes de liPhone et accder son microphone afin denregistrer lenvironnement extrieur. De nombreux dictaphones numriques de poche dferlent ainsi sur lApp Store diTunes.
Figure 8.3 Lapplication officielle du groupe Snow Patrol dclenche des sons en fonction des pressions de lutilisateur.

Passons sans plus tarder la pratique et voyons ensemble comment les ressources multimdias contribuent enrichir votre application.

Les images et les photographies


Afficher des images
Vous avez appris au Chapitre 6 manipuler de petites illustrations sous Interface Builder et les charger en guise de logo ou darrire-plan. Le chargement puis le positionnement dimages en Objective-C obissent au mme principe gnral : vous crez une vue dimage travers une instance de la classe UIImageView et vous chargez les donnes correspondantes avec une instance de la classe UIImage. Il vous suffit ensuite dajouter la vue dimage la vue principale pour faire apparatre lillustration lcran. Limage en elle-mme peut tre

Chapitre 8

Le multimdia

249

stocke au sein de votre application, charge depuis la photothque de lutilisateur ou tlcharge depuis une source externe. Sous Xcode, droulez le menu File, cliquez sur New Project et choisissez le modle ViewBased Application. Baptisez votre application Photo et validez la cration de votre nouveau projet. En guise de premier exemple, nous allons volontairement charger une image dont les dimensions dpassent celles de lcran de liPhone. Prparez un fichier photo.jpg puis cliquez sur le dossier Resources en maintenant la touche Ctrl du clavier enfonce. Choisissez Add, puis Existing Files et slectionnez votre nouveau fichier. Il sajoute au projet. Nous allons crer une instance de la classe UIImageView et lui faire soutenir limage que nous venons dajouter. Trs simple, ce code ne comprend que quelques lignes. Ouvrez le fichier PhotoViewController.m et modifiez la dclaration de la mthode loadView comme au listing ci-dessous. Listing 8.1 : PhotoViewController.m
- (void)loadView { UIImageView *vueImage = [[UIImageView alloc] initWithImage: [UIImage imageNamed:@"photo.jpg"]]; self.view = vueImage; [vueImage release]; }

Enregistrez votre programme et compilez le projet (voir Figure 8.4).


Figure 8.4 Limage charge dpasse de lcran de liPhone.

250

Dveloppez des applications originales pour iPhone et iPod Touch

Dans le Simulateur diPhone, vous constatez que limage dpasse largement de lcran : elle saffiche en taille relle et seule sa partie suprieure gauche (sur 320 480 pixels) apparat sur linterface. La barre de statut recouvre mme une partie de limage, sur 20 pixels de hauteur. Pour y remdier, vous devez dfinir le cadre dans lequel sinscrit votre vue dimage. Il existe plusieurs solutions pour aboutir un tel rsultat et redimensionner la vole le clich : remplacez la dclaration de loadView comme au Listing 8.2. Listing 8.2 : Redimensionner la zone daffichage
- (void)loadView {
UIImageView *vueImage = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];

[vueImage setImage:[UIImage imageNamed:@"photo.jpg"]]; self.view = vueImage; [vueImage release]; }

Relancez le Simulateur diPhone et constatez le rsultat : quelles que soient ses dimensions, votre image apparat dsormais en entier sur lcran (voir Figure 8.5).
Figure 8.5 Limage charge sadapte dsormais aux dimensions de lcran de liPhone.

La classe UIScreen vous permet de dlimiter le cadre de votre application. Sa mthode mainScreen retourne lobjet reprsent par lcran de liPhone et la proprit applicationFrame correspond exactement au cadre de votre application, soit lcran entier du mobile sans sa barre de statut (320 460 pixels). Dans notre exemple, nous avons ainsi rduit la vue dimage ces dimensions et la photographie sadapte au canevas en consquence. Mais voil : si votre image nobit pas au mme ratio que liPhone, elle va paratre dforme. Grce la proprit contentMode, vous dfinissez le type de redimensionnement du contenu

Chapitre 8

Le multimdia

251

de la vue. Il existe treize constantes diffrentes ; dans notre exemple, nous allons utiliser UIViewContentModeScaleAspectFit afin de prserver laspect de limage. Modifiez une nouvelle fois la dclaration de loadView avec le code figurant au Listing 8.3. Listing 8.3 : Prserver laspect de limage
- (void)loadView { UIImageView *vueImage = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]]; [vueImage setImage:[UIImage imageNamed:@"photo.jpg"]];
vueImage.contentMode = UIViewContentModeScaleAspectFit;

self.view = vueImage; [vueImage release]; }

Cette fois, limage conserve ses proprits dorigine et se voit simplement contrainte dans le conteneur de 320 460 pixels. Si elle est au format portrait, sa hauteur est redimensionne 460 pixels, et si elle est au format paysage, cest sa largeur qui est rduite 320 pixels. Son aspect est prserv et des zones transparentes apparaissent ventuellement autour de limage afin de meubler lespace vacant. Reportez-vous au Tableau 8.1 pour dcouvrir les autres constantes de la proprit contentMode et leur rle. Essayez de modifier lexemple prcdent afin de tester toutes vos possibilits (voir Figure 8.6).
Tableau 8.1 : Les constantes de la proprit contentMode

Constante UIViewContentModeScaleToFill UIViewContentModeScaleAspectFit UIViewContentModeScaleAspectFill UIViewContentModeRedraw UIViewContentModeCenter UIViewContentModeTop UIViewContentModeBottom

Rle Limage occupe tout lespace de la vue et son aspect est ventuellement modifi (mode par dfaut). Limage adapte ses dimensions en prservant son aspect. Limage occupe tout lespace de la vue en prservant son aspect : certaines zones peuvent ainsi tre rognes. Redessine limage lorsque les dimensions de la vue changent. Limage est centre au milieu de la vue, sans adapter ses dimensions. Limage est centre en haut de la vue, sans adapter ses dimensions. Limage est centre en bas de la vue, sans adapter ses dimensions.

252

Dveloppez des applications originales pour iPhone et iPod Touch

Tableau 8.1 : Les constantes de la proprit contentMode (suite)

Constante UIViewContentModeLeft UIViewContentModeRight UIViewContentModeTopLeft UIViewContentModeTopRight UIViewContentModeBottomLeft UIViewContentModeBottomRight

Rle Limage saligne gauche de la vue, sans adapter ses dimensions. Limage saligne droite de la vue, sans adapter ses dimensions. Limage est charge partir de son bord suprieur gauche, sans redimensionnement. Limage est charge partir de son bord suprieur droit, sans redimensionnement. Limage est charge partir de son bord infrieur gauche, sans redimensionnement. Limage est charge partir de son bord infrieur droit, sans redimensionnement.

Figure 8.6 La constante UIViewContentModeScaleAspectFill oblige parfois rogner limage dorigine.

Lintrt des proprits de redimensionnement Ce premier exemple illustre la ncessit de prparer soigneusement les images que vous affichez travers votre application. laide de votre logiciel de cration graphique prfr, nhsitez pas rogner ou changer lchelle de vos illustrations de telle sorte ce quelles pousent le ratio de lcran de liPhone : vous limiterez ainsi lapparition de zones transparentes. Vous rduirez au passage la taille du fichier correspondant. moins de prvoir lutilisation de zooms sur limage, vitez en effet dintgrer des fichiers trop volumineux au

Chapitre 8

Le multimdia

253

sein de votre projet. Par ailleurs, les proprits de contentMode prsentent un grand intrt lors de la rotation de lcran de liPhone ; lorsque lutilisateur pivote son mobile en mode paysage, la vue contenant limage est redessine et vous vous assurez ainsi que celle-ci nest pas tronque lcran. Lapplication Photos prinstalle sur liPhone exploite prcisment cette solution et utilise la proprit UIViewContentModeScaleAspectFit pour prserver laspect de vos clichs et les adapter quel que soit le mode daffichage choisi. Nous y reviendrons largement au cours du chapitre suivant.

Adapter les dimensions de la vue dimage


Au cours des chapitres prcdents, nous avions essentiellement dfini les dimensions des instances de la classe UIImageView la souris, travers Interface Builder. Si la manipulation est simple et intuitive, elle peut parfois savrer rbarbative dans le cas du chargement dimages. Vous devez en effet dfinir des outlets dans le contrleur de la vue puis les associer vos lments dinterface. Vous effectuez ainsi un incessant va-et-vient entre Xcode et Interface Builder. En considrant lexprience dont vous disposez aujourdhui, vous constatez quil est parfois plus rapide de se passer dInterface Builder et de modifier la mthode loadView afin de dfinir directement vos lments dinterface en Objective-C, comme nous lavons fait travers notre premier exemple. Attention toutefois : en procdant de la sorte, vous ne vous inscrivez plus pleinement dans le schma MVC dans la mesure o la vue ne sisole pas dans un fichier nib. Mais pour des programmes simples, vous aboutissez rapidement un rsultat. Nous avons initialis notre instance de la classe UIImageView travers la mthode initWithFrame en adaptant ses dimensions celles de lcran de liPhone. Dans le mme ordre dide, vous avez la possibilit de positionner trs prcisment vos vues dimages laide de la structure CGRect. Comme son nom lindique, cet objet appartient au framework Core Graphics dont Quartz est le moteur graphique. On retrouve naturellement ce framework sous Mac OS X : il est responsable de laffichage de linterface Aqua du systme. Le framework Core Graphics fait partie de la couche Media de Cocoa Touch, au mme titre que Core Audio et Core Animation sur lesquels nous reviendrons dans la suite de ce chapitre. La structure CGRect dfinit un rectangle aux dimensions et au positionnement prcis. En utilisant la proprit frame de tous les types de vues, vous modifiez ainsi linterface de votre application en quelques lignes dObjective-C. Vous devez imprativement vous familiariser avec cette technique afin de grer au mieux lauto-rotation de liPhone et le repositionnement dlments dinterface, comme nous le verrons par la suite. Par ailleurs, cette mthode vous oblige matriser au mieux le systme de coordonnes du kit de dveloppement un atout prcieux lorsque vous souhaitez disposer des onglets, des boutons ou une barre de navigation sur une interface trs complexe !

254

Dveloppez des applications originales pour iPhone et iPod Touch

Sur lcran de liPhone, les coordonnes sexpriment en pixels et lorigine correspond au coin suprieur gauche. Laxe des abscisses (x) est horizontal et laxe des ordonnes (y) est vertical, que lon tienne le mobile en mode portrait ou paysage. En considrant que lcran de liPhone fait 320 480 pixels dans le mode normal daffichage, on comprend ainsi le systme de coordonnes :
vv vv vv

le coin suprieur droit correspond au point (320, 0) ; le coin infrieur gauche correspond au point (0, 480) ; le coin infrieur droit correspond au point (320, 480).

Vous pouvez ainsi vous reprer dans le plan et disposer prcisment toutes les vues de votre application (voir Figure 8.7). ce titre, passons la pratique en adaptant notre dernier exemple un cas concret. Nous souhaitons disposer une lgende en-dessous du clich charg prcdemment : nous devons ainsi prvoir une zone pour abriter un libell. La vue dimages se rduit en hauteur et nous ajoutons une instance de la classe UIView pour soutenir la lgende. Elle contient elle-mme une instance de la classe UILabel correspondant au libell. Celle-ci drive dUIView et on peut donc galement prciser ses coordonnes laide de la structure CGRect.
Figure 8.7 Le systme de coordonnes de liPhone.

Afin dillustrer le principe de chargement des vues, nous allons modifier cette fois la mthode viewDidLoad de notre contrleur. Elle intervient juste aprs lexcution de loadView : la vue est charge mais elle nest pas encore affiche. La mthode viewWillAppear vient ensuite. La vue est sur le point dapparatre lcran : vous procdez ventuellement vos ultimes rglages. linverse, la mthode viewDidAppear est appele aprs son affichage final. Il est intressant dutiliser viewDidLoad lorsque vous souhaitez changer les propri-

Chapitre 8

Le multimdia

255

ts dobjets instancis par la vue dun fichier nib. Dans ce cas, la mthode loadView a en effet charg tous les objets de la vue : on les initialise avec du code inclus dans la mthode viewDidLoad. Si les traitements sont particulirement lourds, vous limitez ainsi la consommation mmoire en distinguant le chargement des objets de leur code dinitialisation. Dans notre exemple, nous souhaitons ajouter des sous-vues la vue principale : nous pouvons ainsi la dsigner par self.view dans la mesure o elle a t charge. Recopiez le code du Listing 8.4. Listing 8.4 : Chargement dune image avec une lgende
- (void)viewDidLoad { // Prparation de la vue pour limage UIImageView *vueImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 420)]; [vueImage setImage:[UIImage imageNamed:@"photo.jpg"]]; vueImage.contentMode = UIViewContentModeScaleAspectFill; // Prparation de la vue pour la lgende UIView *vueLegende = [[UIView alloc] initWithFrame:CGRectMake (0, 420, 320, 40)]; vueLegende.backgroundColor = [UIColor darkGrayColor]; // Dclaration de la lgende UILabel *legende = [[UILabel alloc] initWithFrame:CGRectMake (20, 5, 280, 30)]; legende.text = @"Temple proximit de Tokyo"; legende.textAlignment = UITextAlignmentCenter; legende.textColor = [UIColor whiteColor]; legende.backgroundColor = [UIColor clearColor]; // Ajout de la vue de la lgende [vueLegende addSubview:legende]; [self.view addSubview:vueLegende]; // Ajout de la vue de limage [self.view addSubview:vueImage]; [vueLegende release]; [vueImage release]; [legende release]; }

256

Dveloppez des applications originales pour iPhone et iPod Touch

Enregistrez le projet puis compilez-le : linterface principale de votre application affiche bien deux vues, limage et la lgende, avec un libell positionn en bas de lcran (voir Figure 8.8).
Figure 8.8 Notre interface affiche la photo et une lgende, positionnes grce au systme de coordonnes.

Nous avons dabord conserv linstance de la classe UIImageView, destine soutenir la photo. Cette vue est dlimite par un rectangle de 320 420 pixels, positionn en haut gauche. Nous chargeons limage et nous prservons son aspect comme prcdemment. Nous dclarons galement linstance vueLegende de la classe UIView afin de positionner la lgende. Elle correspond un rectangle de 320 40 pixels, plac juste en-dessous de la photographie. Son origine est ainsi dfinie au point (0,420). Petite subtilit des fins dillustration du code : nous souhaitons que le libell soit une sous-vue de vueLegende et non de la vue principale. Ses coordonnes sont ainsi dfinies par rapport cette vue parente ; lorigine correspond donc en ralit au point (0, 420) de la vue globale (voir Figure 8.9). Nous aurions parfaitement pu nous dispenser de linstance vueLegende et placer directement le libell aux coordonnes attendues, en fonction de la vue principale. Lajout de la sous-vue aurait alors t :
UILabel *legende = [[UILabel alloc] initWithFrame:CGRectMake (20, 425, 280, 30); legende.text = @"Temple proximit de Tokyo"; legende.textAlignment = UITextAlignmentCenter; legende.textColor = [UIColor whiteColor]; legende.backgroundColor = [UIColor clearColor]; [self.view addSubview:legende];

Chapitre 8

Le multimdia

257

Le rsultat est strictement identique en ce qui concerne le libell ; linstance vueLegende nous permet toutefois dajouter une couleur en arrire-plan. En guise dexercice, essayez de vous passer totalement de cette instance vueLegende en modifiant les dimensions du libell et sa proprit backgroundColor afin de reproduire le mme effet visuel.
Figure 8.9 Les coordonnes de nos diffrents objets dinterface.

Un portfolio de photographe Si vous tes photographe, combinez cet exemple avec le diaporama manipulable au doigt, prsent au Chapitre 9, afin de prsenter votre travail dans une application dynamique (voir Figure 8.10). Essayez alors dintgrer la lgende la vue vueImage afin de la "dplacer" en mme temps que limage laquelle elle est associe.

Figure 8.10 En dfinissant soigneusement linterface de votre application, vous pouvez aboutir un portfolio haut en couleur, comme celui du photographe Eric Lafforgue !

258

Dveloppez des applications originales pour iPhone et iPod Touch

Charger une image depuis une source externe


Dans cette srie dexemples, nous avons ajout directement limage charger notre projet, sous Xcode. Essayons prsent dimporter limage depuis une source externe. Le service ParisLive.net propose une webcam centre sur la Tour Eiffel. Elle dpose intervalles rguliers une image JPG, toujours du mme nom, sur un serveur web. Nous pouvons ainsi crer une application qui charge cette image afin de relayer le service sur iPhone. On y parvient laide de la classe NSURL, qui vous permet de manipuler des URL et les ressources auxquelles elles font rfrence. Utilis conjointement avec la classe NSData, cet objet rcupre ainsi le contenu dune image et la charge dans une instance de la classe UIImage. Sous Xcode, crez un nouveau projet de type "View-Based Application". Modifiez alors la mthode loadView du contrleur de la vue, comme au Listing 8.5. Listing 8.5 : Chargement de la webcam de la Tour Eiffel
- (void)loadView { NSURL *url = [NSURL URLWithString:@"http://www.parislive.net/ eiffelwebcam1.jpg"]; UIImage *image = [UIImage imageWithData: [NSData dataWithContentsOfURL:url]]; UIImageView *vueWebcam = [[UIImageView alloc] initWithFrame:CGRectMake(16, 64, 288, 352)]; [vueWebcam setImage:image]; self.view = vueWebcam; [vueWebcam release]; }

Le principe est simple. On commence par dfinir ladresse de limage de la webcam. Le nom du fichier est toujours le mme, ce qui facilite largement laccs la ressource. On cre ensuite une instance de la classe UIImage, en linitialisant avec le contenu de lURL. Une instance de la classe UIImageView la prsente lcran. Ses coordonnes ont t dfinies de telle sorte ce que limage apparaisse centre. La webcam renvoie en effet une image de 288 352 pixels et nous dfinissons lorigine de la structure CGRect afin de laisser des marges quivalentes de part et dautre de la photo. Nous aurions pu aboutir au mme rsultat en tendant linstance dUIImageView lensemble de la vue principale et en utilisant lune des constantes vues prcdemment pour centrer limage. Enregistrez le code et compilez le projet : limage de la webcam de la Tour Eiffel apparat bien au centre de lcran (voir Figure 8.11). Le serveur ajoute automatiquement la date et

Chapitre 8

Le multimdia

259

lheure courantes limage, ce qui vous permet de vrifier quelle est bien charge en temps rel.
Figure 8.11 Limage de la webcam est charge depuis un serveur web et apparat sur lcran de liPhone.

Ajouter un contrle afin de recharger la vue


Mais bien souvent, llment graphique charg depuis une source extrieure ne constitue que lun des objets que vous souhaitez afficher lcran. Vous avez besoin de mettre jour la vue dimage mais aussi dajouter des libells et des contrles permettant de dclencher des mthodes personnalises. Cet exemple de webcam affiche en temps rel sy prte tout particulirement : il ne rcupre pour lheure que la dernire image de la Tour Eiffel. Si on laisse tourner infiniment lapplication, limage nest pas mise jour et la webcam perd de son intrt. Modifions le code de notre projet afin dajouter un bouton "Recharger" qui dclenchera le tlchargement dune nouvelle image. Linterface sera remise jour en consquence et lutilisateur pourra ainsi surveiller la Tour Eiffel toute heure du jour ou de la nuit ! Pour cela, la variable dinstance de la classe UIImageView doit tre une variable globale, accessible de multiples endroits de votre programme. Nous avions baptis notre projet "Webcam" ouvrez le fichier WebcamViewController.h et modifiez linterface du contrleur comme suit :
@interface WebcamViewController : UIViewController {UIImageView *vueWebcam; } @end

Modifiez ensuite le code de limplmentation du contrleur comme au Listing 8.6.

260

Dveloppez des applications originales pour iPhone et iPod Touch

Listing 8.6 : WebcamViewController.m


#import "WebcamViewController.h" @implementation WebcamViewController
- (void)changeWebcam:(id)sender { NSURL *url = [NSURL URLWithString:@"http://www.parislive.net/ eiffelwebcam1.jpg"]; UIImage *image = [UIImage imageWithData: [NSData dataWithContentsOfURL:url]]; vueWebcam.contentMode = UIViewContentModeScaleAspectFit; [vueWebcam setImage:image]; }

- (void)viewDidLoad { [super viewDidLoad]; NSURL *url = [NSURL URLWithString:@"http://www.parislive.net/ eiffelwebcam1.jpg"]; UIImage *image = [UIImage imageWithData: [NSData dataWithContentsOfURL:url]];
vueWebcam = [[UIImageView alloc] initWithFrame:CGRectMake(16, 24, 288, 352)];

[vueWebcam setImage:image];
UIButton *bouton = [UIButton buttonWithType:UIButtonTypeRoundedRect]; [bouton setFrame:CGRectMake(110, 395, 100, 30)]; [bouton setTitle:@"Recharger" forState:UIControlStateNormal]; [bouton addTarget:self action:@selector(changeWebcam:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:bouton];

[self.view addSubview:vueWebcam]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesnt have a superview // Release anything thats not essential, such as cached data } - (void)dealloc { [super dealloc]; [vueWebcam release]; } @end

Chapitre 8

Le multimdia

261

Enregistrez le code et compilez le projet. Cette fois, un bouton "Recharger" apparat sous la premire image de la webcam et vous permet de mettre jour laffichage, en tlchargeant la dernire vue ractualise sur la Tour Eiffel (voir Figure 8.12).
Figure 8.12. Le bouton dclenchant le rafrachissement de limage est ajout dans le code du contrleur.

Nous avons en effet cr une instance de la classe UIButton, de type UIButtonTypeRoundedRect et nous lui avons assign les coordonnes de la lgende de photo, dfinies lexemple prcdent. Le bouton et la vue de la webcam sont des sous-vues de la vue principale : leurs coordonnes sinscrivent ainsi dans le gabarit global de lcran de liPhone. La ligne suivante correspond au choix de lvnement qui dclenche une action :
[bouton addTarget:self action:@selector(changeWebcam:) forControlEvents:UIControlEventTouchUpInside];

Cette ligne est donc quivalente notre procd habituel, qui consistait dfinir une action dans linterface de notre contrleur puis modifier le fichier nib en associant cette mthode lvnement TouchUpInside dun bouton aux coins arrondis. Nous navons jamais invoqu Interface Builder au cours de la programmation de cette application et nous aboutissons ainsi un rsultat rapide et efficace.

Charger des images et des PDF avec la classe UIWebView


LiPhone dispose dun navigateur web trs ractif et complet, qui supporte sans problme le chargement de fichiers JPEG, PNG, TIF ou PDF trs volumineux. Tous ces types de fichiers sont reconnus immdiatement, sans intervention de votre part, et le navigateur offre un cadre convivial et prt lemploi pour manipuler ces ressources externes. Vous limplmentez dans vos applications laide de la classe UIWebView. Vous crez ainsi une vue corres-

262

Dveloppez des applications originales pour iPhone et iPod Touch

pondant au navigateur web, expurg du moindre contrle, et lutilisateur peut librement le manipuler (zooms avec deux doigts, dfilement de la page avec un doigt, etc.). Par ailleurs, cette classe offre dimmenses possibilits tous les dveloppeurs web. Si vous tes dj rompu la cration de larges bases de donnes, de scripts PHP ou ASP et darbres XML, vous avez ainsi lopportunit de crer des applications trs riches en quelques lignes dObjective-C. Dans votre code, il vous suffira de disposer une vue UIWebView puis dajouter une srie de contrles dclenchant laccs dautres URL (ou des adresses formates avec un paramtre, comme "script.php?id=4&rubrique=2" par exemple). Bien entendu, le serveur distant devra tre accessible sous peine de rduire lintrt de votre application peau de chagrin. Nous allons illustrer la puissance de cette classe en chargeant distance le PDF du guide de lutilisateur de liPhone. Il pse 6,4 Mo mais son chargement et sa consultation ne feront absolument pas souffrir votre iPhone. Dans un nouveau projet de type "View-Based Application", surchargez la mthode loadView de votre contrleur, comme au Listing 8.7. Listing 8.7 : Limplmentation de la classe UIWebView
- (void)loadView { NSURL *url = [NSURL URLWithString:@"http://manuals.info.apple.com/fr/ Guide_de_l_utilisateur_de_l_iPhone.pdf"]; NSURLRequest *requete = [NSURLRequest requestWithURL:url]; UIWebView *vueWeb = [[UIWebView alloc] initWithFrame: [[UIScreen mainScreen] applicationFrame]]; [vueWeb setScalesPageToFit:YES]; [vueWeb loadRequest:requete]; self.view = vueWeb; [vueWeb release]; }

Nous avons tout dabord dfini lURL du document PDF charger. Celle-ci sinscrit alors dans une requte soutenue par la classe NSURLRequest. Nous crons ensuite linstance de la classe UIWebView en ltendant lensemble de lcran de liPhone. La proprit setScalesPageToFit permet lutilisateur de modifier lchelle du document par de simples zooms en cartant deux doigts. Nous lanons enfin la requte laide de la mthode dinstance loadRequest. Nous ajoutons alors la vue linterface de notre application. Enregistrez le projet et compilez-le : le navigateur de liPhone occupe tout lcran et le document PDF

Chapitre 8

Le multimdia

263

est charg en quelques secondes en situation relle, en fonction du dbit de la connexion WiFi ou 3G (voir Figure 8.13).
Figure 8.13 Lobjet UIWebView soutient le navigateur et vous permet de charger rapidement de nombreuses ressources.

Vous pouvez librement adapter cet exemple tout type de ressources ou de fichiers PDF. En inscrivant cette vue dans une barre de navigation, constelle donglets par exemple, ou dans une liste dlments pointant vers des fichiers associs votre application, vous crez en quelques lignes un lecteur de livres numriques ou un lecteur multimdia, capable daccder une grande varit de contenus (voir Figure 8.14).
Figure 8.14 Lapplication du magazine Premiere utilise ce type de reprsentation pour afficher les horaires de salles de cinma.

264

Dveloppez des applications originales pour iPhone et iPod Touch

Gare aux avertissements mmoire ! Si vous essayez de charger des PDF dfinitivement trop copieux pour liPhone, la mthode applicationDidReceiveMemoryWarning du dlgu de votre application risque de se lancer. Si la plupart du temps, vous pouvez ignorer ces messages davertissement (la classe UIWebView gre automatiquement les ressources mmoires et parvient limiter sa consommation de ressources de manire drastique), vous devez toutefois prendre le temps dexaminer plus en dtails votre application laide des instruments de Xcode. Pour cela, droulez le menu Run, slectionnez Start with Performance Tool puis Leaks. Enregistrez une trame de lexcution de votre application et surveillez ainsi la consommation des ressources. Renouvelez lopration avec linstrument Activity Monitor. Comparez ces valeurs avec le chargement du guide de lutilisateur en PDF, comme lexemple prcdent.

Charger la photothque de lutilisateur


Plbiscit par les utilisateurs, lappareil photo intgr liPhone peut tre manipul par votre application. Dans le mme ordre dide, vous avez accs la photothque personnelle de chaque utilisateur. Nous avons vu jusqu prsent que lapplication dispose de sa propre "sandbox" qui runit tous les lments dont elle a besoin ; elle est heureusement en mesure de charger les images communes de liPhone et de retoucher ainsi les clichs pris en-dehors de son cadre. Lexercice sarticule autour de la classe UIImagePickerController, qui met en place un large tableau constell de vignettes des clichs et gre la slection individuelle de photos et le parcours de la photothque (voir Figure 8.15).
Figure 8.15 Le contrleur charge automatiquement une vue avec la photothque de lutilisateur.

Le principe gnral ne diffre pas fondamentalement de limplmentation des autres types de contrleurs. Vous crez ainsi une instance de la classe UIImagePickerController, vous

Chapitre 8

Le multimdia

265

indiquez sa source (la photothque ou le lancement du capteur de liPhone) et vous limplmentez dans votre application. Lorsque lutilisateur slectionne une image ou capture un clich, le rsultat est transmis au dlgu de votre application. Vous pouvez ainsi surcharger la logique de ce dlgu afin de procder quelques rglages et offrir des fonctions ddition basique. Mais il existe dsormais une grande varit de modles diPhone et diPod Touch, qui ne disposent pas tous du mme capteur. LiPod Touch en est mme dpourvu et seuls les derniers iPhone 3GS intgrent la possibilit de capturer des squences vido. Vous devez ainsi vous assurer, travers quelques lignes de code, que lutilisateur dispose bien du matriel adquat avant de lui proposer de telles fonctions. On y parvient laide dune simple boucle conditionnelle :
if ([UIImagePickerController isSourceTypeAvailable: UIImagePickerControllerSourceTypePhotoLibrary]); { // La photothque est disponible sur cet iPhone }

On distingue trois constantes pour la mthode isSourceTypeAvailable. Elles vous permettent galement dinitialiser la classe UIImagePickerController :
vv

UIImagePickerControllerSourceTypePhotoLibrary. On utilise lensemble de la photothque de cet iPhone : elle comprend la fois les photos captures avec le mobile et les images synchronises travers iTunes. UIImagePickerControllerSourceTypeSavedPhotosAlbums. On se sert uniquement des photos captures avec liPhone. UIImagePickerControllerSourceTypeCamera. On utilise directement la vue de la camra, afin de prendre un nouveau clich en flagrant dclic ; il sera retourn au dlgu du contrleur.

vv

vv

On implmente le parcours de la photothque trs simplement : en dclarant une instance de la classe UIImagePickerController dans la mthode viewDidLoad de votre contrleur, par exemple. Crez un nouveau projet sous Xcode de type "View-Based Application" et baptisez-le "Phototheque". Remplacez alors la dclaration du contrleur par les Listings 8.8 et 8.9. Listing 8.8 : PhotothequeViewController.h
#import <UIKit/UIKit.h> @interface PhotothequeViewController : UIImagePickerController <UIImagePickerControllerDelegate, UINavigationControllerDelegate> { } @end

266

Dveloppez des applications originales pour iPhone et iPod Touch

Comme vous le constatez, notre contrleur devient une instance de la classe UIImagePickerController et il implmente les protocoles UIImagePickerControllerDelegate et UINavigationControllerDelegate. En effet, le parcours des photos seffectue dans une interface de navigation, avec un bouton permettant de revenir lcran gnral de slection des albums. Listing 8.9 : PhotothequeViewController.m
- (void)viewDidLoad { if([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypePhotoLibrary]) { UIImagePickerController *vuePhotos = [[UIImagePickerController alloc] init]; vuePhotos.delegate = self; vuePhotos.sourceType = UIImagePickerControllerSourceTypePhotoLibrary; [self presentModalViewController:vuePhotos animated:YES]; [vuePhotos release]; } }

Dans la mthode viewDidLoad, nous commenons par vrifier que la photothque est bien disponible sur liPhone de lutilisateur. On y parvient laide dune constante de la mthode isSourceTypeAvailable, comme voqu prcdemment. On initialise alors notre instance de la classe UIImagePickerController et on rattache son dlgu notre contrleur principal. Nous indiquons ensuite la source des donnes, en utilisant la mme constante que lors du test initial. Il ne nous reste plus qu afficher linterface de navigation sur la vue, laide de la mthode presentModalViewController. Il sagit dune mthode dinstance de la classe UIViewController, qui fait apparatre lcran lobjet UIImagePickerController dfini prcdemment dans un effet de "volet" vertical. Enregistrez et compilez votre projet. Le Simulateur diPhone dispose par dfaut de trois albums, contenant trente photos dexemple (Hawaii, Slovnie et remise de diplme). Parcourez les albums et utilisez les boutons figurant automatiquement dans la barre de titre pour afficher toutes les vignettes (voir Figure 8.16).

Chapitre 8

Le multimdia

267

Figure 8.16 Notre application affiche les photos dexemple du Simulateur diPhone.

Charger des photos individuelles et sauvegarder des retouches


Dans lexemple prcdent, nous affichons la photothque de lutilisateur au sein de notre application. Mais voil : lorsque vous cliquez sur lune des vignettes, il ne se produit rien de particulier. Nous avons en effet dfini le dlgu de lapplication, mais nous navons implment aucune mthode spcifique. Vous devez ajouter deux mthodes lies au contrleur UIImagePickerController :
vv

didFinishPickingImage sexcute lorsque lutilisateur a slectionn une image individuelle. imagePickerControllerDidCancel sexcute lorsque lutilisateur annule la slection dune image ou la prise de vue avec lappareil photo intgr.

vv

La mthode didFinishPickingMediaWithInfo Apparue avec le SDK de liPhone OS 3.0, la mthode didFinishPickingMediaWithInfo vise complter didFinishPickingImage lorsquil sagit de capturer des squences vido. Son giron est donc plus large et vous permet de rcuprer de nombreuses informations associes au "mdia" captur par lutilisateur, travers un objet NSDictionary. Implmentez plutt cette mthode lorsque votre application sarticule autour de mdias au sens large et que vous souhaitez diffuser un projet compatible exclusivement avec liPhone OS 3.0. Vous accdez limage spcifique slectionne par lutilisateur en procdant comme suit :
- (void) imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)details {

268

Dveloppez des applications originales pour iPhone et iPod Touch

imageView.image = [details objectForKey:UIImagePickerController EditedImage]; [] }

En dfinissant ces deux mthodes, vous offrez un rel contrle lutilisateur et la navigation au sein de la photothque sert un objectif prcis. Crons un nouveau projet : nous souhaitons que lutilisateur slectionne lun de ses clichs puis le redimensionne du bout des doigts. La photo retouche sera ensuite sauvegarde dans la sandbox de lapplication. Il sagit du comportement par dfaut du gestionnaire de fond dcran, situ dans les rglages de liPhone. De nombreuses applications sappuient sur ce type de code pour enrichir des clichs personnels de bordures ou de pictogrammes (voir Figure 8.17).
Figure 8.17 Les applications permettant de retoucher des photos personnelles comptent parmi les plus populaires diTunes.

Dans la mesure o lapplication a une vocation graphique, nous allons raliser sa vue principale avec Interface Builder. Crez un nouveau projet sous Xcode de type View-Based Application et baptisez-le RetouchePhoto. Ouvrez directement RetouchePhotoViewController. xib afin de lancer la vue dans Interface Builder. Au strict minimum, nous devons prvoir un objet UIImageView pour afficher limage finale aprs son redimensionnement et un bouton pour dclencher le lancement de lopration. Vous intgrerez ainsi facilement cette premire fonction une plus large application de retouche photographique. Dposez donc un lment Image View en bas de lcran, en llargissant au cadre de liPhone. Ajoutez ensuite un objet Round Rect Button et effectuez un double-clic dessus afin de saisir son libell, "Retoucher une photo". Enrichissez ventuellement linterface des lments visuels de votre choix. La vue globale devrait au moins ressembler celle prsente la Figure 8.18.

Chapitre 8

Le multimdia

269

Figure 8.18 On prpare linterface de notre application de retouche photo.

Noubliez pas quen appelant les mthodes presentModalViewController et dismissModalViewController, vous ajoutez automatiquement un effet danimation vertical : tenezen compte dans le placement de vos objets. Sauvegardez votre interface, puis saisissez le code du Listing 8.10 dans le fichier RetouchePhotoViewController.h : Listing 8.10 : RetouchePhotoViewController.h
#import <UIKit/UIKit.h> @interface RetouchePhotoViewController : UIViewController <UIImagePickerControllerDelegate, UINavigationControllerDelegate> { IBOutlet UIImageView *vuePhoto; IBOutlet UIButton *bouton; UIImagePickerController *imagePicker; } - (IBAction)retouchePhoto; @property (retain, nonatomic) UIImagePickerController *imagePicker; @end

Nous avons ici reproduit le code de lexemple prcdent, en dfinissant nos deux outlets : vuePhoto dsigne linstance de la classe UIImageView et bouton celle de la classe UIButton. La variable globale imagePicker nous permettra de dsigner le contrleur de la photothque dans la logique de notre application. Nous dclarons galement laction retouchePhoto, qui dclenche la navigation dans la photothque. Ouvrez nouveau votre vue sous Interface

270

Dveloppez des applications originales pour iPhone et iPod Touch

Builder et crez les liaisons. Pressez la touche Ctrl en cliquant sur Files Owner et slectionnez linstance dUIImageView (vuePhoto) et celle dUIButton (bouton). Cliquez ensuite sur ce bouton, ouvrez linspecteur de connexions (Cmd+2) et associez lvnement "Touch Up Inside" Files Owner, en slectionnant retouchePhoto. Vos connexions doivent correspondre celles de la Figure 8.19. Enregistrez linterface et retournez sous Xcode. Saisissez alors le code du Listing 8.11 dans RetouchePhotoViewController.m.
Figure 8.19 Les connexions de linterface de notre application.

Listing 8.11 : RetouchePhotoViewController.m


#import "RetouchePhotoViewController.h" @implementation RetouchePhotoViewController #define DOSSIER_DOC [NSHomeDirectory() stringByAppendingPathComponent: @"Documents"] @synthesize imagePicker; - (IBAction)retouchePhoto { [self presentModalViewController:self.imagePicker animated:YES]; } - (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingImage:(UIImage *)img editingInfo:(NSDictionary *)editInfo { vuePhoto.image = img; int i = 0; // Cration du chemin daccs unique pour enregistrer limage retouche // Chaque fichier prendra la forme "retouche_x.png" NSString *cheminAcces = [DOSSIER_DOC stringByAppendingPathComponent: @"retouche.png"];

Chapitre 8

Le multimdia

271

while ([[NSFileManager defaultManager] fileExistsAtPath:cheminAcces]) cheminAcces = [NSString stringWithFormat:@"%@/%@_%d.%@", DOSSIER_DOC, @"retouche", ++i, @"png"]; // Affichage du chemin daccs dans le dbogueur, utile pour le // Finder NSLog(@"%@", cheminAcces); // Enregistrement du fichier au format PNG [UIImagePNGRepresentation(img) writeToFile:cheminAcces atomically:YES]; // On fait disparatre la vue de la photothque [[picker parentViewController] dismissModalViewControllerAnimated:YES]; } // Implement viewDidLoad to do additional setup after loading the view, // typically from a nib. - (void)viewDidLoad { // Test de la prsence dune photothque // Permission dditer limage choisie if([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypePhotoLibrary]) { self.imagePicker = [[UIImagePickerController alloc] init]; self.imagePicker.delegate = self; self.imagePicker.allowsImageEditing = YES; } } - (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker { [[picker parentViewController] dismissModalViewControllerAnimated:YES]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesnt have a superview // Release anything thats not essential, such as cached data } - (void)dealloc { [super dealloc]; [imagePicker release]; } @end

272

Dveloppez des applications originales pour iPhone et iPod Touch

Sauvegardez le projet et compilez-le. Dans le Simulateur diPhone, vous retrouvez linterface de votre application de retouche photo. En cliquant sur le bouton, vous faites apparatre la photothque de lutilisateur. En slectionnant un clich, vous avez alors la possibilit de le redimensionner ou de le rogner. Validez votre choix : le rsultat apparat au centre de lcran et un fichier est enregistr dans la sandbox de lapplication (voir Figure 8.20). Sous Xcode, cliquez licne "gdb" au-dessus de la fentre de code et dcouvrez le chemin daccs complet au rpertoire de votre application. Accdez-y avec Finder : vous y retrouvez toutes vos images modifies, enregistres sous le nom retouche_1.png, retouche_2.png, etc.
Figure 8.20 On slectionne une photo de son album personnel avant de le redimensionner librement.

Le code est relativement clair. Au lancement de la vue, nous initialisons notre instance de la classe UIImagePickerController. Nous vrifions que liPhone dispose bien dune photothque, nous assignons le dlgu du contrleur et nous autorisons ldition dimages. En cliquant sur le bouton central, on dclenche laction retouchePhoto. Celle-ci fait alors apparatre la photothque. Lorsque lutilisateur slectionne un clich, il peut ltendre ou le rduire : la proprit allowsImageEditing du contrleur de photo est en effet active. Sil valide son choix, la mthode didFinishPickingImage est appele. On remplace alors la vue dimages avec le rsultat et on cre un chemin daccs unique. Celui-ci est compos du chemin au dossier /Documents de la sandbox de lapplication (dfini dans la constante DOSSIER_DOC, dans len-tte du fichier), suivi de retouche_i.png, o i est un entier que lon incrmente. On procde enfin lenregistrement de limage PNG et on fait disparatre la photothque pour revenir la vue principale de lapplication (voir Figure 8.21).

Chapitre 8

Le multimdia

273

Figure 8.21 Les modifications sont sauvegardes dans un fichier unique, que vous pouvez visualiser dans une fentre du Finder.

Traduire en franais les contrles prdfinis Par dfaut, votre application est localise en langue anglaise et les menus ou contrles gnrs automatiquement ("Move and scale", "Cancel", etc.) sexpriment dans la langue de Shakespeare. Pour forcer totalement lusage de la langue franaise, ouvrez le fichier Info. plist associ votre projet et saisissez France dans le champ "Localization native development region" (voir Figure 8.22).

Figure 8.22 Modifiez les informations associes votre projet pour forcer la traduction franaise des menus gnriques.

274

Dveloppez des applications originales pour iPhone et iPod Touch

Utiliser lappareil photo de liPhone dans une application


Le Simulateur diPhone ne nous permet hlas pas de tester le comportement de lappareil photo. Sachez toutefois que vous pouvez trs facilement modifier le code prcdent afin de dmarrer le contrleur dimages sur ce type de vue. Il vous suffit en effet de dfinir la proprit sourceType de linstance de la classe UIImagePickerController, comme au Listing 8.9 :
- (void)viewDidLoad { if([UIImagePickerController isSourceTypeAvailable:UIImagePickerContro llerSourceTypeCamera]) { UIImagePickerController *vuePhotos = [[UIImagePickerController alloc] init]; vuePhotos.delegate = self; vuePhotos.sourceType = UIImagePickerControllerSourceTypeCamera; [self presentModalViewController:vuePhotos animated:YES]; [vuePhotos release]; } }

Vous ne constaterez donc aucun changement dans le Simulateur diPhone, mais cette mthode lance la vue typique de la capture de photos (voir Figure 8.23). Sachez par ailleurs que vous pouvez ajouter vos propres photos dans le simulateur afin de tester votre application en situation relle. Pour cela, copiez le dossier /100APPLE prsent la racine dun vrai iPhone dans le rpertoire ~/Bibliothque/Application Support/iPhone Simulator/User/Media/DCIM. Pratique pour enrichir rapidement la photothque du simulateur !
Figure 8.23 Contrlez lappareil photo de liPhone de vos utilisateurs et enregistrez leurs images au sein de votre application.

Chapitre 8

Le multimdia

275

Laudio et la vido
Dclencher un son
LiPhone fait la part belle au son et il existe de nombreux frameworks capables de grer laspect audio de votre application. On en repre cinq principaux, associs des rles bien spcifiques :
vv

Media Player dlivre un lecteur audio/vido prt lemploi. Cest un framework idal pour soutenir la lecture de fichiers MP3, de podcasts ou de livres audio. AVFoundation permet essentiellement de lire et denregistrer une source audio en quelques lignes dinitialisation. Audio Toolbox est un framework trs puissant pour dclencher des sons et les synchroniser des actions, mais aussi pour les convertir la vole et les enregistrer. Audio Unit gre essentiellement les plug-ins de traitement audio. OpenAL est un framework avant tout destin aux jeux vido.

vv

vv

vv vv

Tous les frameworks prsentent leurs avantages et leurs inconvnients. Il nest pas ncessaire de les connatre tous sur le bout des doigts : si laspect audio joue un rle important sur liPhone, notamment pour avertir lutilisateur ou enrichir lergonomie dune application, vous ne devez pas y cder en permanence. Tchez de justifier lintgration du son vos projets en lui confrant un objectif prcis. Pour ajouter un framework votre projet, cliquez sur le dossier /Frameworks dans le volet gauche de Xcode tout en maintenant la touche Ctrl du clavier. Choisissez Add puis Existing Frameworks. Slectionnez le dossier /Frameworks, puis importez lun des frameworks, AudioToolbox.framework par exemple (voir Figure 8.24).
Figure 8.24 Lajout du Framework AudioToolbox notre projet.

276

Dveloppez des applications originales pour iPhone et iPod Touch

Vous devez ensuite importer le fichier de classes dans votre contrleur, comme par exemple :
# import <AudioToolbox/AudioServices.h>

Afin de tester linitialisation dune classe audio du kit de dveloppement, nous allons btir une application autour du chant des oiseaux. Il sagit dune vaste encyclopdie du monde animal, qui prsente lutilisateur une slection de spcimens en associant chaque fiche descriptive un bouton dclenchant son "cri". Cest le modle de lapplication Cui-Cui! Chants doiseaux dEurope, diSpiny, ou de lAudioZoo de Bas Meijer (voir Figure 8.25).
Figure 8.25 Comme son nom lindique, lapplication AudioZoo fait la part belle aux sons en tout genre !

Dans cet exemple, le son correspond un fichier WAV que lon importe au sein de notre projet, comme nous lavons fait prcdemment pour des images ou des listes de proprits. LiPhone supporte les formats suivants :
vv vv

MP3, le format audio le plus rpandu ; AAC (Advanced Audio Coding), format audio offrant la qualit du MP3 un dbit infrieur ; ALAC (Apple Lossless Audio Codec), format audio sans perte de qualit ; HE-AAC (High Efficiency Advanced Audio Coding) ; AMR (Adaptive Multi-Rate) ; iLBC (Internet Low Bitrate Codec), un format adapt la simple voix ; IMA4, un format compress dcod par le processeur de liPhone ; Linear PCM, le format audio non-compress (WAV et AIFF) ; -law et a-law.

vv vv vv vv vv vv vv

Chapitre 8

Le multimdia

277

Vous vous contenterez trs probablement de sources en WAV, MP3, AAC et AIFF. Le chargement de fichiers sarticule systmatiquement autour du mme canevas, quel que soit le format choisi. Sous Xcode, crez un nouveau projet de type "View-Based Application" et baptisez-le ChantOiseau. Commencez par importer le framework AudioToolbox, en suivant la procdure dcrite prcdemment. En parallle, intgrez un fichier WAV correspondant au chant dun oiseau. Dans notre exemple, il sagit dun bref extrait de trois secondes, que nous avons rapatri depuis ladresse www.randonneur.net. Nous vous laissons dvelopper linterface selon vos gots. A priori, elle contiendra une image de lanimal considr ainsi quune fiche descriptive. Nous allons ici ajouter un bouton aux contours arrondis permettant de dclencher le son (voir Figure 8.26).
Figure 8.26 Nous crons la fiche descriptive du bruant gorge blanche, en prvoyant un bouton pour dclencher son chant.

Modifiez tout dabord le fichier ChantOiseauViewController.h comme au Listing 8.12. Listing 8.12 : ChantOiseauViewController.h
#import <UIKit/UIKit.h> #import <AudioToolbox/AudioServices.h> @interface ChantOiseauViewController : UIViewController { UIView *vueOiseau; SystemSoundID bruantGorgeBlanche; } @end

278

Dveloppez des applications originales pour iPhone et iPod Touch

Nous avons ici dfini un objet UIView visant soutenir la fiche descriptive dun "bruant gorge blanche". Aprs avoir import la classe du framework AudioTool, nous dfinissons un objet de type SystemSoundID. Il sagit de llment de base du service audio : il renvoie vers un fichier audio. Modifiez prsent limplmentation de votre contrleur, en saisissant le code du Listing 8.13 dans le fichier ChantOiseauViewController.m. Listing 8.13 : ChantOiseauViewController.m
#import "ChantOiseauViewController.h" @implementation ChantOiseauViewController - (void) chantOiseau { AudioServicesPlaySystemSound (bruantGorgeBlanche); } - (void)loadView { vueOiseau = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]]; self.view = vueOiseau; [vueOiseau release]; // Bouton dclenchant la lecture du fichier audio UIButton *bouton = [UIButton buttonWithType:UIButtonTypeRoundedRect]; [bouton setFrame:CGRectMake(110, 395, 150, 30)]; [bouton setTitle:@"Cri de loiseau" forState:UIControlStateNormal]; [bouton addTarget:self action:@selector(chantOiseau) forControlEvents :UIControlEventTouchUpInside]; [self.view addSubview:bouton]; // On dfinit le chemin daccs au fichier audio id fichierAudio = [[NSBundle mainBundle] pathForResource:@"bruantgorge_blanche" ofType:@"wav"]; CFURLRef cheminAcces = (CFURLRef)[[NSURL alloc] initFileURLWithPath: fichierAudio]; AudioServicesCreateSystemSoundID (cheminAcces, &bruantGorgeBlanche); } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesnt have a superview // Release anything thats not essential, such as cached data } - (void)dealloc {

Chapitre 8

Le multimdia

279

if(bruantGorgeBlanche) AudioServicesDisposeSystemSoundID (bruantGorgeBlanche); [vueOiseau release]; [super dealloc]; } @end

La lecture du fichier audio noccupe que quelques lignes de code tout au plus. Nous indiquons tout dabord le chemin daccs notre extrait au format WAV :
id fichierAudio = [[NSBundle mainBundle] pathForResource: @"bruant-gorge_blanche" ofType:@"wav"]; CFURLRef cheminAcces = (CFURLRef)[[NSURL alloc] initFileURLWithPath: fichierAudio];

Nous crons ensuite lobjet correspondant au son laide de la fonction AudioServicesCreateSystemSoundID. Le second paramtre correspond linstance dun objet SystemSoundID. Nous associons lappel de la mthode chantOiseau au bouton rectangulaire : lorsque lutilisateur le presse, on dclenche la lecture du son laide de la fonction AudioServicesPlaySystemSound (voir Figure 8.27). Simple, nest-ce pas ?
Figure 8.27 En cliquant sur le bouton correspondant, lutilisateur dclenche le chant de loiseau.

Par ailleurs, ce framework gre trs simplement les vibrations de liPhone. Remplacez son initialisation par la ligne suivante, afin de faire trembler le tlphone de lutilisateur :
AudioServicesPlaySystemSound (kSystemSoundID_vibrate);

280

Dveloppez des applications originales pour iPhone et iPod Touch

Vous ne pouvez toutefois pas faire varier lintensit de la vibration : elle correspond une secousse brve. Vous pouvez facilement adapter cet exemple un autre framework li la gestion de laudio, comme AVFoundation par exemple. Dans ce cas, importez le framework correspondant puis remplacez limplmentation de votre contrleur avec le code suivant :
# import <AVFoundation/AVFoundation.h> [] NSString *fichierAudio = [[NSBundle mainBundle] pathForResource:@"bruantgorge_blanche" ofType:"wav"]; AVAudioPlayer *lecteurAudio = [[AVAudioPlayer alloc] initWithContentsOfURL:[NSURL URLWithString:fichierAudio] error:nil]; [lecteurAudio play];

Comme vous le constatez, linstance de la classe AVAudioPlayer accepte directement un objet NSURL en entre. Vous pouvez ainsi facilement charger un son distance, travers une requte HTTP par exemple.

Lire une vido


La lecture de squences vido est intimement lie aux mmes frameworks que prcdemment et la procdure est toute aussi simple et rapide. On privilgie toutefois le framework MediaPlayer, compatible avec une large slection de formats et de codecs (H.264, MP4, MOV, MPV). Il cre en quelques lignes de code un lecteur vido qui occupe lensemble de lcran de liPhone. Il dispose par dfaut de contrles permettant de rgler le volume, davancer dans la squence ou de mettre la lecture en pause (voir Figure 8.28).
Figure 8.28 Les contrles par dfaut du lecteur implment partir de la classe MediaPlayer.

Commencez par importer le framework MediaPlayer comme prcdemment, en cliquant sur le dossier Frameworks de votre projet tout en maintenant la touche Ctrl du clavier enfonce. Linitialisation du lecteur vido et le chargement du fichier sequence.mp4 associ votre projet seffectuent de la manire suivante :

Chapitre 8

Le multimdia

281

# import <AVFoundation/AVFoundation.h> NSString *fichierVideo = [[NSBundle mainBundle] pathForResource:@"sequence" ofType:"mp4"]; NSURL *lienVideo = [NSURL URLWithString:fichierVideo]; MPMoviePlayerController lecteurVideo = [[MPMoviePlayerController alloc] initWithContentURL:lienVideo]; [lecteurVideo play];

Noubliez pas dassocier le fichier sequence.mp4 votre projet avant de le compiler et de saisir ces quelques lignes de code au sein de la mthode loadView ou viewDidLoad par exemple. Le rsultat ne se fait pas attendre : le lecteur vido occupe lensemble de lcran et lutilisateur peut contrler la diffusion de la squence. L encore, vous avez la possibilit de lire en streaming un flux vido rcupr partir dune URL. linstar des mthodes associes au parcours de la photothque, vous disposez dune mthode pour enchaner par un second traitement lorsque la lecture de la vido sarrte. Pour cela, vous devez tout dabord dfinir un objet NSNotificationCenter correspondant au centre des notifications du systme.
[[NSNotificationCenter defaultCenter] addObserver:self selector@selector(moviePlayBackDidFinish:) name:MPMoviePlayerPlaybackDidFinishNotification object:lecteurVideo];

Lorsque la notification MPMoviePlayerPlaybackDidFinishNotification est envoye, le lecteur vido a fini de lire la squence charge : on appelle alors la mthode moviePlayBackDidFinish :
- (void) moviePlayBackDidFinish:(NSNotification*)notification { // Insrer ici le code post-lecture }

Pour une plus ample dcouverte des options lies au lecteur vido initialis partir du framework MediaPlayer, reportez-vous aux exemples de codes sources offerts par Apple, ladresse http://developer.apple.com/iphone/library/samplecode/MoviePlayer_iPhone. Cet exemple complet articule le lecteur vido autour dun systme de navigation par onglets, tout en autorisant la lecture de squences dposes sur le Web ou associes au projet (un fichier Movie.m4v est inclus dans larchive .zip tlcharger). Vous y dcouvrez notamment les options de mise lchelle du contenu et lutilisation du systme de notifications (voir Figure 8.29).

282

Dveloppez des applications originales pour iPhone et iPod Touch

Figure 8.29 Le lecteur vido peut aussi bien charger une squence depuis une source externe quun fichier associ votre projet.

Le dessin et les animations


Nous achevons notre tour dhorizon des lments multimdias de liPhone par lune des plus grandes couches de liPhone OS, Core Graphics. Trac de lignes droites, dessin de formes gomtriques, ajout de points : ses classes vous permettent de dessiner toutes sortes dlments graphiques lcran. Cest le moteur graphique Quartz qui est responsable du traitement de ces instructions et qui prsente le rsultat. Il fonctionne selon le principe dun canevas virtuel : vous dfinissez tous les lments apparaissant lcran et il restitue une image entire, compose des objets que vous avez dclars en indiquant leurs coordonnes. On parle alors du contexte graphique : lorsque vous effectuez des traitements graphiques, vous rcuprez les informations lies la vue en cours, vous procdez des traitements et des ajouts, puis vous mettez jour le contexte de la vue. Nous allons mettre en place un exemple trs simple, que vous pourrez librement personnaliser avec lensemble des fonctions de dessin de Core Graphics. Dans un nouveau projet de type "View-Based Application" baptis Peinture, modifiez le fichier xib en ajoutant une large instance de la classe UIImageView. Elle correspond au canevas sur lequel lapplication va dessiner. Modifiez ensuite linterface PeintureViewController.h comme au Listing 8.14. Listing 8.14 : PeintureViewController.h
#import <UIKit/UIKit.h> @class VueDessin; @interface PeintureViewController : UIViewController { IBOutlet VueDessin *vueDessin; } @end

Chapitre 8

Le multimdia

283

Comme vous pouvez le voir, nous avons dfini la classe VueDessin. On lui associe un outlet : il correspondra linstance de la classe UIImageView dfini dans le fichier nib. Droulez le menu File, cliquez sur New File et choisissez UIView subclass la section Cocoa Touch Classes. Saisissez VueDessin en guise de nom et validez la cration de votre classe. Saisissez ensuite le code du Listing 8.15 dans le fichier VueDessin.h. Listing 8.15 : VueDessin.h
#import <Foundation/Foundation.h> @interface VueDessin : UIView { } @end

Nous importons ici la bibliothque Foundation afin de dessiner lcran de liPhone. Compltez la dfinition de votre classe en modifiant le fichier VueDessin.m avec le code du Listing 8.16. Listing 8.16 : VueDessin.m
#import "VueDessin.h" @implementation VueDessin - (id)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { // Initialization code } return self; } - (void)drawRect:(CGRect)rect { CGContextRef contexte = UIGraphicsGetCurrentContext(); CGContextSetLineWidth(contexte, 4.0); CGContextSetStrokeColorWithColor(contexte, [UIColor blueColor].CGColor); CGContextMoveToPoint(contexte, 300, 300); CGContextAddLineToPoint(contexte, 50, 50); CGContextStrokePath(contexte); } - (void)dealloc { [super dealloc]; } @end

284

Dveloppez des applications originales pour iPhone et iPod Touch

Ouvrez nouveau le fichier nib et associez loutlet vueDessin lobjet UIImageView. En parallle, slectionnez cet objet puis ouvrez linspecteur didentit (Cmd+4) et saisissez VueDessin dans le champ Class (voir Figure 8.30). Enregistrez tous les fichiers et compilez le projet : sur lcran de liPhone, une ligne oblique bleue de quatre pixels dpaisseur apparat sur la vue (voir Figure 8.31).
Figure 8.30 Noubliez pas de modifier la classe de votre objet UIImageView sous Interface Builder.

Figure 8.31 Notre programme dessine un trait entre deux points.

Le dessin est dfini dans la mthode drawRect. Nous commenons par dfinir le contexte graphique :
CGContextRef contexte = UIGraphicsGetCurrentContext();

Chapitre 8

Le multimdia

285

On dfinit ensuite lallure de notre "pinceau", en choisissant une paisseur de quatre pixels et un trait de couleur bleue :
CGContextSetLineWidth(contexte, 4.0); CGContextSetStrokeColorWithColor(contexte, [UIColor blueColor].CGColor);

On atteint tout dabord le point situ aux coordonnes (300, 300) et on trace une ligne vers le point (50, 50). Le mme systme de coordonnes sapplique au dessin : le point dorigine se situe dans le coin suprieur gauche.
CGContextMoveToPoint(contexte, 300, 300); CGContextAddLineToPoint(contexte, 50, 50);

On trace enfin le contexte :


CGContextStrokePath(contexte);

Reportez-vous au Guide de programmation Quartz, sur lespace dveloppeur du site dApple, pour dcouvrir plus en dtails les autres fonctions de dessin. Elles obissent toutes au mme principe et vous pouvez dsormais les ajouter la mthode drawRect afin de passer rapidement en revue cette srie dexemples (voir Figure 8.32).
Figure 8.32 Consultez le Guide de programmation pour dcouvrir vos autres possibilits de dessin.

286

Dveloppez des applications originales pour iPhone et iPod Touch

Pour aller plus loin


Vous tes dsormais en mesure dajouter de nombreux lments multimdias votre application afin de lenrichir. Le parcours puis le traitement des photographies, et plus gnralement des images, sont au centre de vos besoins : vous ajoutez ainsi dynamiquement des lments visuels votre interface, quils proviennent dune source externe, de la bibliothque personnelle de lutilisateur ou dun fichier associ votre projet. La lecture de donnes audio ou vido suit le mme chemin et sintgre de manire souple vos projets de dveloppement. En marge du framework Core Graphics, vous pouvez approfondir cet apprentissage en vous intressant la bibliothque OpenGL ES. Cette bibliothque open-source, spcialement adapte aux priphriques mobiles (Embedded Systems), vous permet mme denvisager des effets de dessin 3D. La solution la plus simple pour dcouvrir les principes gnraux de dveloppement avec OpenGL ES consiste vous reporter sur les exemples de codes sources, diffuss gratuitement sur lespace dveloppeur du site dApple. lheure o nous mettons sous presse, vous dcouvrirez huit projets complets de dessin 3D, dont laffichage dun cube que vous manipulez au doigt (voir Figure 8.33). Si tous ces exemples dpassent le cadre de notre ouvrage par leur complexit, ils constituent un excellent moyen de prolonger votre enseignement si vous vous spcialisez dans les effets graphiques.
Figure 8.33 Testez le projet MusicCube, diffus gratuitement sur le site dApple, pour visualiser des effets de dessin 3D.

Puisque le multimdia na plus de secrets pour vous, penchons-nous prsent sur lultime aspect matriser avant de diffuser vos applications sur lApp Store diTunes : la raction aux gestes de lutilisateur. Acclromtre, basculement automatique vers le mode daffichage Paysage, contrle dune vue au doigt : accordez un contrle maximal vos utilisateurs.

9
Ragir aux gestes de lutilisateur
Au sommaire de ce chapitre
vv vv vv

Grer la rotation de laffichage Contrler la manipulation de lcran Pour aller plus loin

Plbiscits par les utilisateurs et repris par de nombreux constructeurs, lcran multi-touch et lacclromtre de liPhone offrent des contrles avancs et introduisent tout type de manipulations au sein de vos applications. Du modeste utilitaire au jeu vido grandiose, tous les projets gagnent exploiter fond ces possibilits afin daccrotre leur ergonomie

288

Dveloppez des applications originales pour iPhone et iPod Touch

et de prsenter un contrle intuitif aux utilisateurs. Lacclromtre constitue lui seul un lment fondamental de liPhone ; il est mme lorigine du concept de nombreuses applications, comme le niveau bulles ou la plupart des jeux dadresse par exemple. Il introduit de nouvelles dimensions vos projets, en vous donnant la possibilit de reprer un iPhone dans lespace et de relever la vlocit que lutilisateur lui applique. La simple vocation de ces concepts fait immdiatement jaillir des dizaines dides de projets, que vous tes dsormais largement en mesure de dvelopper grce lexprience que vous avez accumule. En dveloppant pour un priphrique mobile, vous connaissez prcisment le cadre dans lequel sexcuteront vos applications. Lespace de lcran est born, le matriel embarqu est connu et aucun utilisateur ne pourra se prvaloir dun affichage plus grand ou dun processeur plus puissant. Vous avez ainsi la possibilit de prvoir des comportements riches, sans vous soucier dinnombrables configurations subalternes ou de rsolutions suprieures. Cest un vritable atout : vous pouvez ainsi dvelopper les ractions de votre application face lensemble des gestes et manipulations que les utilisateurs seront susceptibles deffectuer. Au premier rang de celles-ci, vous devez prvoir le basculement automatique vers la vue Paysage, lun des modes de visualisation privilgi pour la lecture et la saisie de longs textes. Mais vos possibilits ne sarrtent pas l ! Zooms deux doigts, dfilement de vues du bout de lindex, inclinaison de liPhone Envisagez tout type dinteractions en reprant prcisment les gestes des utilisateurs. Dans une large mesure, tous nos exemples prcdents sinscrivent dores et dj dans un tel lan. La pression sur un bouton dclenche une action et le parcours de la photothque seffectue du bout des doigts, par exemple. Au cours de ce chapitre, nous allons passer en revue lensemble de vos possibilits et dcouvrir comment introduire des ractions plus avances en fonction des manipulations des utilisateurs. limage du trs populaire Topple, un jeu dadresse dans lequel vous empilez des briques, vos applications gagneront ainsi une nouvelle dimension (voir Figure 9.1).
Figure 9.1 Le jeu Topple fait un usage constant de lacclromtre et offre un plaisir vido ludique immdiat.

Chapitre 9

Ragir aux gestes de lutilisateur

289

Grer la rotation de laffichage


Vous lavez constat en naviguant sur le Web avec Safari ou en parcourant vos photos personnelles : liPhone bascule automatiquement laffichage entre le mode portrait (par dfaut) et Paysage lorsque vous le manipulez (voir Figure 9.2). Vous pouvez mme prvoir jusqu quatre vues diffrentes, en fonction de la rotation du mobile vers la gauche, la droite ou 180 degrs. Certaines applications restreignent le mode de visualisation lune de ces vues ; cest notamment le cas du lecteur multimdia, qui ne sexcute quen mode paysage, ou de la liste des contacts, que vous ne pouvez parcourir quen mode portrait.
Figure 9.2 Le navigateur web prend automatiquement en compte la rotation de liPhone.

Le kit de dveloppement de liPhone vous aide agencer vos lments dinterface en fonction de lorientation du mobile. Il dispose dune mthode shouldAutorotateToInterfaceOrientation qui relve le mode de visualisation actuel et autorise ou non le basculement vers un autre type daffichage. Vous lavez compris : en activant le basculement automatique, vous devez alors prvoir lagencement de vos objets pour chaque mode considr. Cette mthode est dfinie par dfaut dans tous les projets que vous crez sous Xcode, mais elle est commente et nest donc pas compile. Sa structure obit la nomenclature suivante :
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation) interfaceOrientation { // Return YES for supported orientations return (interfaceOrientation == UIInterfaceOrientationPortrait); }

chaque fois que lutilisateur roriente son mobile, cette mthode est appele et on vrifie ainsi que le nouveau mode daffichage est possible. On associe quatre constantes aux modes dorientation de liPhone :

290

Dveloppez des applications originales pour iPhone et iPod Touch

vv vv vv vv

UIInterfaceOrientationPortrait, mode portrait ; UIInterfaceOrientationLandscapeLeft, mode paysage vers la gauche ; UIInterfaceOrientationLandscapeRight, mode paysage vers la droite ; UIInterfaceOrientationPortraitUpsideDown, mode portrait 180 degrs ;

En supprimant cette mthode ou en laissant les commentaires, vous empchez ainsi le basculement vers un autre mode dorientation. linverse, vous spcifiez les modes supports travers la valeur retourne par cette mthode. Ainsi, la dclaration suivante gre le basculement automatique vers les deux modes paysage et le mode portrait par dfaut :
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation) interfaceOrientation { return (interfaceOrientation == UIInterfaceOrientationPortrait || interfaceOrientation == UIInterfaceOrientationLandscapeLeft || interfaceOrientation == UIInterfaceOrientationLandscapeRight); }

Modifiez la dclaration de cette mthode comme prcdemment sur lun de vos projets puis compilez-le. Dans le Simulateur diPhone, droulez le menu Matriel et cliquez sur Rotation gauche ou Rotation droite. Les contrles se rarrangent dans un lger effet danimation. Mais le basculement nest pas toujours gracieux : dans notre exemple ChantOiseau du Chapitre 8, les libells et la photo de loiseau se chevauchent, tandis que le bouton dclenchant lextrait audio napparat plus lcran (voir Figure 9.3). Vous devez indiquer prcisment la position de tous vos lments dinterface afin dviter ce type de problme. En fonction de la complexit de votre application, vous choisirez de modifier la vue travers Interface Builder ou la proprit frame de vos variables dinstances, en Objective-C. Dans ce dernier cas, vous indiquez prcisment les coordonnes de tous vos objets, comme nous lavons vu au chapitre prcdent.
Figure 9.3 Lorientation en mode paysage fait disparatre certains contrles, en labsence de proprits spcifiques.

Linspecteur de dimensions dInterface Builder vous permet de prvoir ce type de comportement et de retoucher visuellement lagencement de vos contrles. Dans le cas dinterfaces

Chapitre 9

Ragir aux gestes de lutilisateur

291

simples qui sarticulent autour dune srie de boutons et de libells, cest une technique rapide et efficace qui conduit de bons rsultats. Ouvrez le fichier nib associ votre projet et faites apparatre cet inspecteur en pressant les touches Cmd+3. Commencez par slectionner lun des objets figurant sur votre interface, comme le libell principal par exemple (voir Figure 9.4).
Figure 9.4 Linspecteur de dimensions de llment considr, sous Interface Builder.

Observez attentivement la section Autosizing. Le schma sur la gauche vous indique les proprits de redimensionnement de lobjet. Sur la droite de lcran, vous dcouvrez comment se traduisent ces proprits laffichage. Cet outil est directement hrit du dveloppement dapplications Cocoa pour Mac OS X et dfinit ainsi les principales caractristiques de chaque lment dinterface lorsque la vue laquelle ils sont rattachs change daspect et de dimensions. Vous devez cliquer sur les flches de part et dautre de la bote, sur la gauche de lcran, pour modifier laspect de vos lments. Le carr au centre du schma reprsente lobjet actuellement slectionn. Les flches horizontales et verticales dfinissent ses dimensions : si elles apparaissent dans un trait continu, vous indiquez que la largeur et la hauteur de votre lment doit sadapter lespace disponible. Cliquez sur les flches : elles apparaissent en pointills et vous exigez ainsi que llment conserve rigoureusement ses dimensions. En slectionnant un libell et en lui associant une flche horizontale continue et une flche verticale en pointills, vous choisissez alors de redimensionner automatiquement sa largeur mais de prserver la hauteur que vous avez dfinie (voir Figure 9.5). Les traits lextrieur du carr correspondent lespace entre lobjet slectionn et les quatre bords de la vue qui le soutient. Si un trait apparat en pointills, vous indiquez que la distance vis--vis du bord correspondant doit tre librement radapte : lobjet "flotte" ainsi dans linterface et sa position sadapte lespace disponible. linverse, si un trait continu encadre votre objet, vous conservez la distance qui le spare du bord de linterface. En autorisant le redimensionnement dun objet tout en adaptant librement lespace qui le spare des

292

Dveloppez des applications originales pour iPhone et iPod Touch

bords de linterface, vous vous assurez ainsi quil apparat lcran. Le concept vous parat abstrait ? Passez tout de suite la pratique, en slectionnant le bouton dclenchant le cri de loiseau, dans lapplication ChantOiseau. Situ tout en bas de linterface, il disparaissait de lcran en mode paysage. Cliquez sur le trait en pointills, en-dessous du rectangle : il se transforme en une ligne continue et vous indiquez ainsi que lespace infrieur doit tre prserv votre contrle apparat tout en bas de lcran de liPhone, lorsquon lui imprime une rotation (voir Figure 9.6).
Figure 9.5 Llment conservera sa hauteur lors dune rotation, mais adaptera librement sa largeur lespace disponible.

Figure 9.6 Dans ce mode, on redimensionne automatiquement la largeur du bouton mais on maintient lespace qui le spare du bas de lcran.

Cette technique est particulirement rapide pour les interfaces les plus simples : vous indiquez facilement les lments redimensionner et vous vous assurez quaucun contrle ne sort de la vue principale. Elle vous oblige toutefois un incessant va-et-vient entre le Simulateur diPhone et Interface Builder, jusqu valider le positionnement et la rorientation de

Chapitre 9

Ragir aux gestes de lutilisateur

293

vos objets. Dans le cadre de notre application ChantOiseau, cette technique rencontre vite ses limites : si tous les lments apparaissent bien lcran en mode paysage, ils gagneraient tre positionns de manire plus prcise. En effet, vous ne pouvez pas revoir lemplacement des lments du tout au tout avec Interface Builder ! Pour amliorer le rsultat, vous devez imprativement vous consacrer quelques lignes supplmentaires dObjective-C. Comme dhabitude, tous vos lments dinterface doivent correspondre des outlets pour tre modifis dans le code de votre application. Vous avez naturellement la possibilit de les initialiser directement travers les mthodes loadView ou viewDidLoad mais nous privilgions ici la premire solution : le fichier nib nous permet de dfinir prcisment une interface principale complexe, travers Interface Builder, que lon modifie ensuite afin de supporter lorientation de laffichage. Comme vous le constaterez travers cet exercice pratique, le design de la vue principale sous Interface Builder prsente un grand intrt : vous pouvez ainsi relever prcisment les coordonnes de tous vos lments dinterface afin de faciliter la modification de leur proprit frame dans votre contrleur. Commencez par prparer cette vue initiale, qui apparatra en mode portrait. Dans notre exemple, nous prvoyons deux libells (pour le nom de loiseau et ses caractristiques principales), une vue dimages (pour la photo de loiseau) et un bouton (pour lancer le fichier audio). Dfinissez tous les outlets et laction chantOiseau comme au Listing 9.1 et associez-les votre contrleur comme sur la Figure 9.7. Listing 9.1 : ChantOiseauViewController.h
#import <UIKit/UIKit.h> #import <AudioToolbox/AudioServices.h> @interface ChantOiseauViewController : UIViewController { IBOutlet UIButton *bouton; IBOutlet UILabel *nomOiseau; IBOutlet UILabel *description; IBOutlet UIImageView *photoOiseau; SystemSoundID bruantGorgeBlanche; } @property @property @property @property (retain, (retain, (retain, (retain, nonatomic) nonatomic) nonatomic) nonatomic) UIButton *bouton; UILabel *nomOiseau; UILabel *description; UIImageView *photoOiseau;

- (IBAction)chantOiseau; @end

294

Dveloppez des applications originales pour iPhone et iPod Touch

Figure 9.7 Les liaisons des outlets et actions notre vue principale.

Comme nous lavons vu prcdemment, nous devons ensuite activer lorientation de liPhone laide de la mthode shouldAutorotateToInterfaceOrientation. La mthode willAnimateSecondHalfOfRotationFromInterfaceOrientation permet de positionner prcisment chaque lment de linterface en fonction de lorientation du mobile. Commencez par relever la position actuelle de chacun de vos lments en mode portrait : ouvrez votre fichier nib sous Interface Builder et lancez linspecteur de dimensions. La section "Size & Position" affiche les coordonnes et les dimensions de chaque objet dinterface (voir Figure 9.8).
Figure 9.8 Interface Builder relve notre place la position et les dimensions de tous les objets dinterface, comme ici le libell principal.

Le systme de coordonnes change fondamentalement lorsque lon bascule lcran de liPhone dans un autre mode daffichage. En mode paysage, vous disposez en effet de 480 pixels de largeur et de 320 pixels de hauteur pour positionner vos lments. Essayez de dessiner sur papier la position attendue de vos objets. Relevez ensuite les valeurs correspon-

Chapitre 9

Ragir aux gestes de lutilisateur

295

dantes pour chacun de vos outlets. Saisissez enfin le code du Listing 9.2 dans limplmentation de votre contrleur, ChantOiseauViewController.m. Listing 9.2 : ChantOiseauViewController.m
#import "ChantOiseauViewController.h" #import <AudioToolbox/AudioServices.h> @implementation ChantOiseauViewController @synthesize bouton; @synthesize nomOiseau; @synthesize description; @synthesize photoOiseau; // Mthode dcrivant la position des lments dinterface - (void)willAnimateSecondHalfOfRotationFromInterfaceOrientation: (UIInterfaceOrientation)fromInterfaceOrientation duration:(NSTimeInterval)duration { UIInterfaceOrientation toOrientation = self.interfaceOrientation; // Vue Portrait if (toOrientation == UIInterfaceOrientationPortrait) { nomOiseau.frame = CGRectMake(70, 20, 177, 21); photoOiseau.frame = CGRectMake(42, 47, 234, 255); description.frame = CGRectMake(72, 323, 175, 72); bouton.frame = CGRectMake(82, 400, 155, 37); } // Vue Paysage else { nomOiseau.frame = CGRectMake(20, 20, 177, 21); photoOiseau.frame = CGRectMake(220, 25, 234, 255); description.frame = CGRectMake(20, 71, 175, 72); bouton.frame = CGRectMake(20, 200, 155, 37); } } // Action dclenche pour lire le fichier audio (cf. chapitre 8) - (void) chantOiseau { id fichierAudio = [[NSBundle mainBundle] pathForResource:@"bruantgorge_blanche" ofType:@"wav"]; CFURLRef cheminAcces = (CFURLRef)[[NSURL alloc] initFileURLWithPath: fichierAudio]; AudioServicesCreateSystemSoundID (cheminAcces, &bruantGorgeBlanche); AudioServicesPlaySystemSound (bruantGorgeBlanche); } // On autorise lorientation de lcran - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation) interfaceOrientation { // Return YES for supported orientations

296

Dveloppez des applications originales pour iPhone et iPod Touch

return (interfaceOrientation == UIInterfaceOrientationPortrait || interfaceOrientation == UIInterfaceOrientationLandscapeLeft || interfaceOrientation == UIInterfaceOrientationLandscapeRight); } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesnt have a superview // Release anything thats not essential, such as cached data } - (void)dealloc { if(bruantGorgeBlanche) AudioServicesDisposeSystemSoundID (bruantGorgeBlanche); [bouton release]; [nomOiseau release]; [description release]; [photoOiseau release]; [super dealloc]; } @end

Enregistrez puis compilez votre projet. Dans le Simulateur diPhone, pressez le pav flch en maintenant la touche Ctrl enfonce : vous basculez automatiquement dans les autres modes daffichage et vous constatez que le positionnement de vos objets est entirement radapt. Nous avons en effet dfini les positions prcises de chaque lment et un lger effet danimation accompagne la rotation de laffichage (voir Figure 9.9).
Figure 9.9 En mode paysage, les lments dinterface changent totalement demplacement.

Chapitre 9

Ragir aux gestes de lutilisateur

297

Contrler la manipulation de lcran


Le kit de dveloppement de liPhone gre merveille toutes les interactions de lutilisateur sur son cran. Du simple effleurement de sa surface aux doubles ou triples pressions conscutives, en passant par les gestes de glissement ou dcartement de deux doigts, vous disposez dune palette trs riche de comportements relever. travers les objets UITouch crs par le capteur de mouvements, vous relevez galement les diffrentes proprits des gestes de lutilisateur, notamment les coordonnes du point slectionn et le nombre de pressions daffile quil a exerces. Quatre mthodes permettent de grer les temps forts dun geste :
vv vv vv vv

touchesBegan, une premire pression sur lcran a t dtecte. touchesMoved, la pression sur lcran est maintenue et le doigt bouge. touchesCancelled, on a annul la pression en sortant de la zone de lcran. touchesEnded, on a finalement relev le doigt de lcran.

Ces quatre mthodes couvrent lensemble de vos besoins. Elles sont dailleurs intgres certaines classes du kit de dveloppement : la rglette (UISlider) repre les gestes de lutilisateur pour mettre jour son aspect, par exemple. Vous devez toutefois prter une grande attention aux lments dinterface impliqus dans un geste ; comme nous le verrons par la suite, il est ncessaire de matriser le systme de coordonnes de liPhone et surtout de dfinir correctement les zones touches par lutilisateur afin de dplacer des objets. Commenons par un premier exemple simple, que nous complterons par la suite. Sous Xcode, crez un nouveau projet de type View-Based Application et baptisez-le Toucher. Saisissez le code du Listing 9.3 dans le fichier ToucherViewController.h. Listing 9.3 : ToucherViewController.h
#import <UIKit/UIKit.h> @interface ToucherViewController : UIViewController { IBOutlet UILabel *messageLabel; IBOutlet UILabel *coordonneesLabel; } @property(retain, nonatomic) UILabel *messageLabel; @property(retain, nonatomic) UILabel *coordonneesLabel; @end

Nous dfinissons ici deux outlets correspondant de simples libells. Ouvrez le fichier nib associ votre projet, dposez deux libells sur votre interface et supprimez leur texte initial. Vous disposez ainsi de deux champs vierges, que nous mettrons jour avec les coor-

298

Dveloppez des applications originales pour iPhone et iPod Touch

donnes du point slectionn par lutilisateur et par le type de geste ralis. Connectez les outlets Files Owner comme vous en avez lhabitude, en slectionnant respectivement messageLabel et coordonneesLabel. Saisissez prsent le code du Listing 9.4 dans limplmentation de votre contrleur, ToucherViewController.m. Listing 9.4 : ToucherViewController.m
#import "ToucherViewController.h" @implementation ToucherViewController @synthesize messageLabel; @synthesize coordonneesLabel; - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { messageLabel.text = @"Dbut du toucher"; UITouch *touch = [[event allTouches] anyObject]; // Coordonnes du point touch CGPoint location = [touch locationInView:self.view]; NSString *coordMessage = [[NSString alloc] initWithFormat:@"Coordonnes : %.0f, %.0f", location.x, location.y]; coordonneesLabel.text = coordMessage; [coordMessage release]; NSUInteger nbrPressions = [[touches anyObject] tapCount]; switch (nbrPressions) { case 1: self.view.backgroundColor break; case 2: self.view.backgroundColor break; case 3: self.view.backgroundColor break; case 4: self.view.backgroundColor break; default: break; } } - (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event { messageLabel.text = @"Annulation du toucher"; self.view.backgroundColor = [UIColor redColor]; } - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { messageLabel.text = @"Arrt du toucher";

= [UIColor grayColor]; = [UIColor blackColor]; = [UIColor purpleColor]; = [UIColor whiteColor];

Chapitre 9

Ragir aux gestes de lutilisateur

299

self.view.backgroundColor = [UIColor blueColor]; } - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { messageLabel.text = @"Dplacement dtect"; // Coordonnes du point touch UITouch *touch = [[event allTouches] anyObject]; CGPoint location = [touch locationInView:self.view]; NSString *coordMessage = [[NSString alloc] initWithFormat:@"Coordonnes : %.0f, %.0f", location.x, location.y]; coordonneesLabel.text = coordMessage; [coordMessage release]; self.view.backgroundColor = [UIColor greenColor]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; } - (void)dealloc { [messageLabel release]; [coordonneesLabel release]; [super dealloc]; } @end

Enregistrez puis compilez votre projet. Le Simulateur diPhone remplace le doigt de lutilisateur par la souris : en exerant des pressions successives ou en maintenant le clic enfonc, les diffrents messages apparaissent sur votre libell ("Dplacement dtect", "Arrt du toucher", etc.). En parallle, larrire-plan de la vue principale est modifi en fonction du geste ralis. Le dbut dun geste et la pression maintenue, dtects par les mthodes touchesBegan et touchesMoved, crent un objet de la classe UITouch dont on relve les coordonnes. Elles figurent alors dans le second libell. Vous disposez ainsi dun mini-outil permettant de dfinir correctement les coordonnes de vos lments dinterface, dans le cas dun changement de mode daffichage par exemple ! Enfin, nous comptons le nombre de pressions successives au sein de la mthode touchesBegan et nous modifions une nouvelle fois larrire-plan en consquence. Une simple pression change le fond en gris, deux pressions le remplissent en noir, trois pressions font apparatre un fond violet et quatre pressions affichent un cadre blanc (voir Figure 9.10). Le nombre de pressions releves est illimit et vous pouvez ainsi envisager des ractions trs diffrentes au sein de votre application, en distinguant le simple "clic" du double-clic.

300

Dveloppez des applications originales pour iPhone et iPod Touch

Un outil de dessin main leve Le code prcdent suffit dores et dj mettre en place un outil de dessin sommaire. Comme vous pouvez le constater, on relve les coordonnes du point touch par lutilisateur. Il vous suffit dafficher un point cet emplacement et de poursuivre le trait travers la mthode touchesMoved pour laisser lutilisateur dessiner du bout des doigts. Ajoutez des boutons permettant de changer de couleur ou dpaisseur de trait et vous obtenez une application qui na rien envier lhonorable Photoshop !

Figure 9.10 Larrire-plan et les libells se transforment en fonction des gestes de lutilisateur.

Dplacer un lment du bout des doigts


Compltons ce premier exemple en ajoutant une image PNG transparente, que lutilisateur va dplacer sur lcran du bout des doigts. Cet ajout illustre notamment la technique de dtection des points communs entre plusieurs zones : lutilisateur doit en effet toucher lespace correspondant limage pour la dplacer. Les gestes excuts en-dehors de cette zone ne doivent pas tre considrs. Cliquez sur le dossier /Resources de votre projet en maintenant la touche Ctrl enfonce. Choisissez Add > Existing Files et slectionnez une image en la copiant dans le rpertoire de votre projet. Ouvrez ensuite le fichier nib et ajoutez une instance de la classe UIImageView. Ouvrez linspecteur dattributs (Cmd+1) et slectionnez votre image dans le premier menu droulant. Adaptez ventuellement les dimensions de lobjet UIImageView celles de limage que vous avez importe. Modifiez prsent le code de ToucherViewController.h laide du Listing 9.5.

Chapitre 9

Ragir aux gestes de lutilisateur

301

Listing 9.5 : ToucherViewController.h


#import <UIKit/UIKit.h> @interface ToucherViewController : UIViewController { IBOutlet UILabel *messageLabel; IBOutlet UILabel *coordonneesLabel; IBOutlet UIImageView *logoPearson; } @property(retain, nonatomic) UILabel *messageLabel; @property(retain, nonatomic) UILabel *coordonneesLabel; @property(retain, nonatomic) UIImageView *logoPearson; @end

Nous crons ici loutlet correspondant notre objet UIImageView. Sous Interface Builder, pressez la touche Ctrl du clavier tout en cliquant sur Files Owner et dplacez la flche vers linstance de la classe UIImageView. Choisissez alors logoPearson dans le menu contextuel qui apparat : notre image correspond au logo de Pearson (voir Figure 9.11).
Figure 9.11 On associe les outlets notre vue principale.

Enregistrez votre interface puis attaquez-vous au fichier ToucherViewController.m. Ajoutez les lignes figurant en gras au Listing 9.6. Listing 9.6 : ToucherViewController.m
#import "ToucherViewController.h" @implementation ToucherViewController @synthesize messageLabel; @synthesize coordonneesLabel; @synthesize logoPearson;

302

Dveloppez des applications originales pour iPhone et iPod Touch

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { messageLabel.text = @"Dbut du toucher"; UITouch *touch = [[event allTouches] anyObject]; // Coordonnes du point touch CGPoint location = [touch locationInView:self.view]; NSString *coordMessage = [[NSString alloc] initWithFormat:@"Coordonnes : %.0f, %.0f", location.x, location.y]; coordonneesLabel.text = coordMessage; [coordMessage release]; NSUInteger nbrPressions = [[touches anyObject] tapCount]; switch (nbrPressions) { case 1: self.view.backgroundColor break; case 2: self.view.backgroundColor break; case 3: self.view.backgroundColor break; case 4: self.view.backgroundColor break; default: break; } } - (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event { messageLabel.text = @"Annulation du toucher"; self.view.backgroundColor = [UIColor redColor]; } - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { messageLabel.text = @"Arrt du toucher"; self.view.backgroundColor = [UIColor blueColor]; } - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { messageLabel.text = @"Dplacement dtect"; // Coordonnes du point touch UITouch *touch = [[event allTouches] anyObject]; CGPoint location = [touch locationInView:self.view]; NSString *coordMessage = [[NSString alloc] initWithFormat:@"Coordonnes : %.0f, %.0f", location.x, location.y]; coordonneesLabel.text = coordMessage; [coordMessage release]; if(CGRectContainsPoint([logoPearson frame], location)) { self.logoPearson.center = location; }

= [UIColor grayColor]; = [UIColor blackColor]; = [UIColor purpleColor]; = [UIColor whiteColor];

Chapitre 9

Ragir aux gestes de lutilisateur

303

self.view.backgroundColor = [UIColor greenColor]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; } - (void)dealloc { [messageLabel release]; [coordonneesLabel release]; [logoPearson release]; [super dealloc]; } @end

Enregistrez votre projet puis compilez-le. Notre image apparat lcran. En imprimant des gestes sur la surface de lcran, nos deux libells sont toujours mis jour : on dtecte ainsi les coordonnes de chaque point touch. La mthode frame de notre objet UIImageView renvoie les coordonnes du cadre de cet lment dinterface. laide de la mthode CGRectContainsPoint, on vrifie ainsi que le point touch appartient cette zone : si lutilisateur a bien exerc une pression cet endroit, tout en dplaant son doigt, on recentre limage. Celle-ci "suit" donc le doigt de lutilisateur, tant quil pointe prcisment au-dessus de sa zone daffichage (voir Figure 9.12). Essayez de dplacer le doigt au-dessus dun espace vierge de lcran : limage ne bouge pas.
Figure 9.12 On dplace limage du bout des doigts.

304

Dveloppez des applications originales pour iPhone et iPod Touch

Grer la navigation partir de gestes


Lexemple prcdent illustre la puissance de la classe UITouch et plus gnralement des fonctions de dtection du toucher de liPhone. Vous pouvez facilement implmenter les mthodes touchesBegan, touchesMoved et touchesEnded au sein de vos contrleurs ou de vos classes personnalises afin de contrler la navigation de votre application ou doffrir des fonctions supplmentaires lutilisateur. De nombreux lments prdfinis de liPhone sarticulent autour de tels comportements intuitifs ; cest notamment le cas du parcours de la photothque, que nous allons reproduire travers une nouvelle application, Diaporama. Comme vous allez le constater, lenjeu est plus complexe que notre exemple prcdent. Sil est facile de dplacer une instance unique de la classe UIImageView en reprant ses coordonnes, il est en revanche plus dlicat danimer une srie de vues par simples glissements du doigt. Reportez-vous la photothque de votre iPhone : de part et dautre de limage centrale, vous apercevez la premire moiti des images de gauche et droite. Celles-ci apparaissent progressivement en fonction du dplacement du doigt dans un sens ou lautre de lcran. Dans notre application, nous devrons ainsi charger non seulement limage centrale mais galement limage prcdente et suivante, en prparant les vues correspondantes et en redfinissant dynamiquement leur cadre en fonction des gestes de lutilisateur. Sous Xcode, crez un nouveau projet de type View-Based Application. Saisissez Diaporama en guise de nom, puis validez. Notre exemple sarticule autour dune srie dimages que lon ajoute notre projet (01.jpg, 02.jpg, 03.jpg, etc.). Droulez le menu File et cliquez sur New File. Dans la fentre qui apparat, slectionnez UIView subclass, la section Cocoa Touch Classes et cliquez sur le bouton Next. Saisissez DiaporamaView en guise de nom et validez. Il sagit dune instance personnalise de la classe UIView, que lon va exploiter pour crer les vues dimages et grer les effets de transition. Commencez par saisir le Listing 9.7 dans le fichier DiaporamaView.h. Listing 9.7 : DiaporamaView.h
#import <UIKit/UIKit.h> @interface DiaporamaView : UIView { NSArray * images; UIImageView * vueImageGauche; UIImageView * vueImageActuelle; UIImageView * vueImageDroite; NSUInteger imageActuelle; BOOL transition; CGFloat debutTransition;

Chapitre 9

Ragir aux gestes de lutilisateur

305

} - (id)chargementImages:(NSArray *)inImages; @end

Nous dclarons ici un tableau contenant les rfrences aux images, trois instances de la classe UIImageView (pour la vue centrale et les deux vues de part et dautre) et un entier correspondant lindex de limage actuellement charge. La valeur boolenne indique si une transition doit tre effectue : elle prendra la forme dune animation entre deux vues. Saisissez prsent le code du Listing 9.8 dans le fichier DiaporamaView.m. Listing 9.8 : DiaporamaView.m
#import "DiaporamaView.h" @implementation DiaporamaView // Chargement initial des vues dimages - (id)chargementImages:(NSArray *)inImages { if (self = [super initWithFrame:CGRectZero]) { images = [inImages retain]; NSUInteger nbrImages = [inImages count]; if (nbrImages > 0) { vueImageActuelle = [self creerVueImage:0]; [self addSubview:vueImageActuelle]; // Il y a plus de deux images : on prpare la vue suivante if (nbrImages > 1) { vueImageDroite = [self creerVueImage:1]; [self addSubview:vueImageDroite]; } } self.opaque = YES; self.backgroundColor = [UIColor blackColor]; self.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; } return self; } // Cration des vues dimages - (UIImageView *)creerVueImage:(NSUInteger)inImageIndex { if (inImageIndex >= [images count]) { return nil; }

306

Dveloppez des applications originales pour iPhone et iPod Touch

// Cration dune vue // On la charge avec limage courante du tableau UIImageView * vueTraitee = [[UIImageView alloc] initWithImage: [images objectAtIndex:inImageIndex]]; vueTraitee.opaque = YES; vueTraitee.userInteractionEnabled = NO; vueTraitee.backgroundColor = [UIColor blackColor]; vueTraitee.contentMode = UIViewContentModeScaleAspectFit; vueTraitee.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; return vueTraitee; } // Dbut du toucher : on repre le point press au dpart - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { if ([touches count] != 1) return; debutTransition = [[touches anyObject] locationInView:self].x; transition = YES; vueImageGauche.hidden = NO; vueImageActuelle.hidden = NO; vueImageDroite.hidden = NO; } // Dplacement dtect - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { // On cesse le traitement si on dtecte plusieurs pressions //successives if (! transition || [touches count] != 1) return; // On calcule la distance du dplacement CGFloat distanceDeplacement = [[touches anyObject] locationInView:self].x - debutTransition; // On repre les dimensions de la vue actuelle CGSize tailleVue = self.frame.size; // On modifie dynamiquement le cadre des vues afin de faire // apparatre des "morceaux" des images de gauche et de droite // au fur et mesure du dplacement vueImageGauche.frame = CGRectMake(distanceDeplacement tailleVue.width, 0.0f, tailleVue.width, tailleVue.height); vueImageActuelle.frame = CGRectMake(distanceDeplacement, 0.0f, tailleVue.width, tailleVue.height); vueImageDroite.frame = CGRectMake(distanceDeplacement + tailleVue.width, 0.0f, tailleVue.width, tailleVue.height); }

Chapitre 9

Ragir aux gestes de lutilisateur

307

// Fin du toucher : fin de lanimation et affichage complet de limage // centrale - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { if (! transition) return; // On repre les dimensions de la vue actuelle CGSize tailleVue = self.frame.size; // Doit-on afficher une image gauche et droite ? // Sil sagit de la dernire image, on ne prpare pas // la vue de droite. NSUInteger nbrImages = [images count]; // Si lutilisateur a dplac le doigt sur plus de 100 pixels // vers la droite, on remplace la vue centrale par limage de droite. CGFloat distanceDeplacement = [[touches anyObject] locationInView:self].x - debutTransition; if (imageActuelle > 0 && distanceDeplacement > 100.0f) { [vueImageDroite removeFromSuperview]; [vueImageDroite release]; vueImageDroite = vueImageActuelle; vueImageActuelle = vueImageGauche; // La vue centrale prcdente devient la vue de gauche imageActuelle--; if (imageActuelle > 0) { vueImageGauche = [self creerVueImage:imageActuelle - 1]; vueImageGauche.hidden = YES; [self addSubview:vueImageGauche]; } else { vueImageGauche = nil; } } // Si lutilisateur a dplac le doigt sur plus de 100 pixels // vers la gauche, on remplace la vue centrale par limage de gauche. else if (imageActuelle < nbrImages - 1 && distanceDeplacement < -100.0f) { [vueImageGauche removeFromSuperview]; [vueImageGauche release]; vueImageGauche = vueImageActuelle; vueImageActuelle = vueImageDroite; // La vue centrale prcdente devient la vue de droite imageActuelle++; if (imageActuelle < nbrImages - 1) {

308

Dveloppez des applications originales pour iPhone et iPod Touch

vueImageDroite= [self creerVueImage:imageActuelle + 1]; vueImageDroite.hidden = YES; [self addSubview:vueImageDroite]; } else { vueImageDroite = nil; } } // On effectue la suite de lanimation [UIView beginAnimations:@"transition" context:NULL]; [UIView setAnimationCurve:UIViewAnimationCurveEaseOut]; [UIView setAnimationDuration:0.3f]; // On redfinit le cadre des vues, lissue de lanimation vueImageGauche.frame = CGRectMake(-tailleVue.width, 0.0f, tailleVue. width, tailleVue.height); vueImageActuelle.frame = CGRectMake(0.0f, 0.0f, tailleVue.width, tailleVue.height); vueImageDroite.frame = CGRectMake(tailleVue.width, 0.0f, tailleVue. width, tailleVue.height); [UIView commitAnimations]; transition = NO; } - (void)dealloc { [images release]; [super dealloc]; } @end

Le code est relativement explicite. La premire mthode, chargementImages, est appele ds linitialisation de notre contrleur (nous le verrons au Listing 9.10 qui suit). Elle cre les vues de limage au centre de lcran et de celle qui suit immdiatement. La cration dune vue dimage passe par la mthode creerVueImage : on initialise un objet UIImageView partir de limage releve dans le tableau global contenant les rfrences aux fichiers que vous avez associs votre projet. Ce sont les fonctions de gestion du toucher qui sont responsables de lanimation des vues. Dans la mthode touchesBegan, nous relevons la position du point touch par lutilisateur. Cest la distance horizontale quil imprime son mouvement qui nous intresse : la coordonne x est stocke dans la variable debutTransition. La mthode touchesMoved est appele lorsque lutilisateur maintient son doigt sur lcran et quil se met le dplacer. On calcule la distance parcourue et on modifie dynamiquement le cadre des trois vues (limage centrale et les deux images de part et dautre) en fonction de

Chapitre 9

Ragir aux gestes de lutilisateur

309

ce dplacement. La fonction touchesEnded intervient lorsque lutilisateur relve son doigt de lcran. On calcule alors la distance totale parcourue par le doigt : si elle est suprieure 100 pixels, on considre que lutilisateur souhaite passer la vue prcdente ou suivante. On affiche un effet danimation pour remplacer la vue centrale par limage de gauche ou de droite, en fonction du sens du dplacement. Il ne nous reste plus qu implmenter notre contrleur de vue. Modifiez linterface et limplmentation du contrleur DiaporamaViewController par le code des Listings 9.9 et 9.10. Listing 9.9 : DiaporamaViewController.h
#import <UIKit/UIKit.h> #import "DiaporamaView.h" @interface DiaporamaViewController : UIViewController { } @end

Listing 9.10 : DiaporamaViewController.m


#import "DiaporamaViewController.h" #import "DiaporamaView.h" @implementation DiaporamaViewController // Chargement initial du tableau dimages // Cration de linstance DiaporamaView - (void)loadView { NSArray * images = [NSArray arrayWithObjects:[UIImage imageNamed:@"01.jpg"], [UIImage imageNamed:@"02.jpg"], [UIImage imageNamed:@"03.jpg"], [UIImage imageNamed:@"04.jpg"], [UIImage imageNamed:@"05.jpg"], nil]; self.view = [[[DiaporamaView alloc] chargementImages:images] autorelease]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesnt have a superview // Release anything thats not essential, such as cached data } - (void)dealloc { [super dealloc]; } @end

310

Dveloppez des applications originales pour iPhone et iPod Touch

Notre contrleur de vue charge le tableau images partir des fichiers que vous avez imports dans votre projet. En dernier lieu, modifiez la mthode applicationDidFinishLaunching du dlgu de lapplication, comme au Listing 9.11. Listing 9.11 : DiaporamaAppDelegate.m
#import "DiaporamaAppDelegate.h" #import "DiaporamaViewController.h" @implementation DiaporamaAppDelegate @synthesize window; @synthesize viewController; - (void)applicationDidFinishLaunching:(UIApplication *)application { viewController = [[DiaporamaViewController alloc] init]; viewController.view.frame = [window frame]; // Override point for customization after app launch [window addSubview:viewController.view]; [window makeKeyAndVisible]; } - (void)dealloc { [viewController release]; [window release]; [super dealloc]; } @end

Tout est prt : enregistrez votre projet et compilez-le. Dans la fentre du Simulateur diPhone, vos images apparaissent de manire horizontale, la suite les unes des autres. Un simple dplacement du doigt sur plus de 100 pixels de longueur conduit un effet danimation, qui vient charger la vue prcdente ou suivante (voir Figure 9.13).

Chapitre 9

Ragir aux gestes de lutilisateur

311

Figure 9.13 Notre application affiche un diaporama dynamique, travers lequel vous dplacez des images du bout des doigts.

Interagir avec lacclromtre de liPhone


Figure emblmatique du succs de liPhone, lacclromtre quil intgre autorise des manipulations avances qui jouent un grand rle dans lergonomie de votre application. Grce aux trois capteurs qui le composent, vous tes en mesure de relever la force inertielle et lacclration imprimes sur les trois axes perpendiculaires du mobile : vous reprez ainsi le tlphone dans lespace et vous dtectez les inclinaisons vers la gauche ou la droite (axe X), le haut ou le bas (axe Y) et lavant ou larrire (axe Z). Lacclromtre relve en particulier la force de gravit exerce sur le mobile. En position statique, celle-ci est de 1g : seule la pesanteur terrestre sapplique liPhone. Si vous provoquez un geste soudain, cette valeur augmente radicalement jusqu se situer aux alentours de 2g ou 2,5g. En crant une simple boucle conditionnelle qui vrifie cette valeur, vous dtectez coup sr les secousses intentionnelles et vous prvoyez des comportements spcifiques au sein de votre application. linstar de laccs au capteur photo/vido de liPhone, vous interrogez lacclromtre en crant une classe qui se conforme un protocole spcifique, UIAccelerometerDelegate. Vous linitialisez puis vous relevez ses valeurs laide de la mthode sharedAccelerometer :
UIAccelerometer *accelerometre = [UIAccelerometer sharedAccelerometer];

Comme pour les interactions avec les gestes des utilisateurs, vous disposez ensuite dune mthode qui relve le type dacclration exerce, didAccelerate. Celle-ci renvoie lacclration exprime sur les trois axes vus prcdemment.

312

Dveloppez des applications originales pour iPhone et iPod Touch

Vous savez ainsi si lutilisateur incline son mobile vers la gauche, la droite, le haut, le bas, lavant ou larrire. En parallle, la force exerce sur le mobile traduit lacclration : on peut ainsi reprer si lutilisateur bouge rapidement ou non son tlphone dans lune des directions. Cette valeur joue sur la viscosit des effets danimation que vous imprimez vos objets ; en dplaant lcran une instance de la classe UIImageView en fonction de linclinaison du mobile, vous pouvez ainsi acclrer ou dclrer le mouvement en fonction de cette valeur (voir Figure 9.14).
Figure 9.14 Le jeu Labyrinth utilise lacclromtre pour animer une balle lcran : la force exerce se traduit par des mouvements prcis, qui vous permettent dacclrer ou de ralentir la balle et de contourner les obstacles.

Tout ceci vous parat encore abstrait ? Passons sans plus tarder un exemple concret ! Nous allons dplacer une simple image sur lensemble de lcran de liPhone, en fonction de linclinaison du mobile. Crez un nouveau projet sous Xcode de type View-Based Application et baptisez-le "Accelerometre". Importez une image PNG votre projet. Notre modle dexemple est une image de 128 128 pixels (les dimensions sont importantes afin de prvoir la bute contre lun des bords de liPhone), qui provient du site dicnes gratuites www.iconspedia.com. Saisissez ensuite le code du Listing 9.12 dans le fichier AccelerometreViewController.h. Listing 9.12 : AccelerometreViewController.h
#import <UIKit/UIKit.h> @interface AccelerometreViewController : UIViewController <UIAccelerometerDelegate> { UIImageView *vueImage; UIImageView *personnage; float accelX, accelY, velociteX, velociteY; } @end

Chapitre 9

Ragir aux gestes de lutilisateur

313

Rien de bien particulier : nous dclarons nos deux vues dimages ainsi quune srie de nombres flottants, qui correspondent lacclration de liPhone sur ses axes X et Y. Lessentiel du traitement rside dans limplmentation du contrleur, que vous saisirez partir du Listing 9.13. Listing 9.13 : AccelerometreViewController.m
#import "AccelerometreViewController.h" @implementation AccelerometreViewController #define SIGNE(x) ((x < 0.0f) ? -1.0f : 1.0f)

- (void) deplacement { // On modifie dynamiquement la position de lobjet // UIImageView contenant limage. CGRect zonePersonnage = [personnage frame]; zonePersonnage.origin.x += velociteX; zonePersonnage.origin.y += velociteY; // Si le cadre bute contre lun des bords de liPhone, // on cesse le dplacement. if (zonePersonnage.origin.x > 192.0f) zonePersonnage.origin.x = 192.0f; if (zonePersonnage.origin.x < 0.0f) zonePersonnage.origin.x = 0.0f; if (zonePersonnage.origin.y > 332.0f) zonePersonnage.origin.y = 332.0f; if (zonePersonnage.origin.y < 0.0f) zonePersonnage.origin.y = 0.0f; [personnage setFrame:zonePersonnage]; } // Une acclration est dtecte : on la traite - (void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration { // On relve lacclration sur les axes X et Y float xAccel = -[acceleration x]; float yAccel = [acceleration y]; // On vrifie la direction du dplacement float directAccelX = SIGNE(velociteX) * 1.0f; float nouvDirectX = SIGNE(xAccel); float directAccelY = SIGNE(velociteY) * 1.0f; float nouvDirectY = SIGNE(yAccel); // Le tlphone sincline dans la direction // suivie actuellement par limage : on lacclre. if (directAccelX == nouvDirectX)

314

Dveloppez des applications originales pour iPhone et iPod Touch

accelX = (abs(accelX) + 0.9f) * SIGNE(accelX); if (directAccelY == nouvDirectY) accelY = (abs(accelY) + 0.9f) * SIGNE(accelY); // On modifie alors la valeur de lacclration // appliqu limage. // Le Timer modifie la position de limage toutes les 0,03 sec. velociteX = -accelX * xAccel; velociteY = -accelY * yAccel; } // Chargement initial de la vue - (void)loadView { vueImage = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]]; self.view = vueImage; [vueImage release]; // Cration de la vue contenant limage personnage = [[UIImageView alloc] initWithFrame:CGRectMake(25, 153, 128, 128)]; [personnage setImage:[UIImage imageNamed:@"personnage.png"]]; [vueImage addSubview:personnage]; [personnage release]; // On dfinit la position dorigine de limage. [personnage setCenter:CGPointMake(150, 150)]; accelX = 2.0f; accelY = 2.0f; velociteX = 0.0f; velociteY = 0.0f; // On active lcoute de lacclromtre [[UIAccelerometer sharedAccelerometer] setDelegate:self]; // On dfinit un Timer qui va excuter toutes les 0,03 sec // le dplacement de limage. [NSTimer scheduledTimerWithTimeInterval: 0.03f target:self selector:@selector(deplacement) userInfo:nil repeats:YES]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Releases the view if it doesnt have a superview // Release anything thats not essential, such as cached data }

Chapitre 9

Ragir aux gestes de lutilisateur

315

- (void)dealloc { [vueImage release]; [super dealloc]; } @end

Enregistrez le programme. Cette fois, il est impossible de le tester directement dans le Simulateur diPhone. Vous devez gnrer un certificat de dveloppeur et associer le profil de provisionnement votre propre iPhone, avant de le compiler vers votre mobile laide de Xcode. Reportez-vous au Chapitre 10 pour dcouvrir la procdure en dtails. Dans notre exemple, nous avons cr une instance UIImageView contenant notre image de dpart. Aprs avoir activ lcoute de lacclromtre, un objet NSTimer appelle la mthode deplacement toutes les 0,03 seconde. Celle-ci modifie le point dorigine du conteneur UIImageView en fonction de linclinaison dtecte par lacclromtre. Si limage atteint lun des bords (soit 320 pixels en largeur et 460 pixels en hauteur moins les dimensions de notre image de 128 128 pixels), sa position se maintient. La mthode didAccelerate est charge de relever les valeurs de lacclromtre. Les mthodes x et y renvoient lacclration sur les axes X et Y. On vrifie tout dabord le sens de lacclration, en fonction du signe de ces deux valeurs. Si linclinaison correspond bien au sens de dplacement actuel de limage, on modifie les valeurs de son acclration. la prochaine excution de la mthode deplacement, limage se repositionne en consquence. Ainsi, lorsque vous inclinez le tlphone vers le haut, la variable yAccel contient une valeur positive. On lapplique sous forme de coefficient la variable velociteY. Attention, comme il sagit de dplacer limage vers le haut, nous devons ainsi inverser sa valeur velociteY contient une valeur ngative, ce qui se traduit lcran par un dplacement vers le haut de lobjet UIImageView (voir Figure 9.15).
Figure 9.15 Le dplacement de limage correspond linclinaison de liPhone.

316

Dveloppez des applications originales pour iPhone et iPod Touch

Pour aller plus loin


En grant lacclromtre ou le capteur de lcran de liPhone, vous offrez une toute nouvelle dimension vos applications. Vous amliorez considrablement leur prise en main, en rinventant totalement des contrles plus intuitifs. Inspirez-vous des exemples de ce chapitre pour dfinir une ergonomie dun ordre nouveau : vous pouvez ainsi envisager tout type dinteractions et sortir largement des sentiers battus. Sans exploiter cote que cote ces fonctions au sein de tous vos projets, sachez quelles font souvent la diffrence entre deux projets oprant dans le mme domaine. Lecteur multimdia dclencher en une secousse, application de dessin manipuler du bout des doigts ou jeu vido ambitieux : vous tes dsormais en mesure de vous attaquer aux dveloppements les plus importants. Nhsitez pas non plus vous reporter aux multiples exemples diffuss sur le centre de dveloppement dApple. En triant les projets en fonction de leur framework, vous remarquerez une dizaine dexemples sarticulant autour de la classe UITouch. Dans le mme ordre dide, la gestion de lacclromtre implique des connaissances sur la physique des lments qui dpassent le cadre de notre ouvrage. L encore, le centre de dveloppement de liPhone vous offre un aperu de vos possibilits. Consultez en particulier les sections User Experience et Graphics & Animation, ladresse http://developer.apple.com/iphone/library.

10
Publication et marketing
Au sommaire de ce chapitre
vv vv vv vv vv

Adhrer au programme de dveloppeur iPhone Dployer une application iPhone Soumettre votre application Apple Populariser votre application Pour aller plus loin

Vous avez enfin trouv lide dapplication du sicle et vous avez achev sa programmation, en exploitant toutes vos connaissances du dveloppement pour iPhone. Aprs lavoir teste sous toutes les coutures dans le simulateur, vous bouillonnez dimpatience de la soumettre au monde entier, convaincu de son intrt pour un large public. Flicitations ! La route

318

Dveloppez des applications originales pour iPhone et iPod Touch

conduisant au succs nest plus qu quelques clics de souris si vous disposez toutefois dun compte dveloppeur afin dintroduire votre projet sur lApp Store diTunes. Moyennant 79 euros, vous intgrez liPhone Developer Program et vous profitez dun accs complet lensemble des outils de distribution et de test dApple. Outre la possibilit de diffuser vos propres crations travers iTunes Connect, ce contrat de licence vous permet aussi de compiler directement vos projets Xcode sur votre iPhone. Vous les testerez en situation relle et vous vous assurerez de leur ergonomie sur un vritable mobile. Mais votre tche ne consiste pas uniquement vous acquitter du montant de cette licence. Vous devez soigner tout particulirement lultime tape de soumission de votre application afin quApple la valide dans de brefs dlais. Description dtaille, captures dcran dexemple, cration dun site web associ votre projet, promotion travers un large rseau Le succs dune application ne tient parfois qu une campagne de marketing savamment organise. Il ne sagit pas dimpressionner cote que cote vos utilisateurs et de leur promettre des avantages que votre application ne saurait tenir, mais bien de rvler sa quintessence et son intrt fondamental.

Adhrer au programme de dveloppeur iPhone


Vous tes fin prt : il est temps de souscrire une licence auprs dApple afin de diffuser vos applications. Rendez-vous ladresse http://developer.apple.com/iphone/program et cliquez sur le bouton Enroll Now, droite de lcran (voir Figure 10.1).
Figure 10.1 Achetez une licence standard 79 euros pour distribuer vos applications.

Apple propose deux licences, standard et enterprise, qui correspondent des utilisations diffrentes. Le second cas nest rserver quaux entreprises comptant plus de 500 salaris, qui souhaitent inscrire leurs propres applications propritaires dans leur cycle de produc-

Chapitre 10

Publication et marketing

319

tion. Ils profiteront ainsi doptions plus tendues lies la diffusion de licences et de certificats. Choisissez le programme standard, propos 79 euros.
Figure 10.2 Vous devez successivement vous authentifier, choisir votre programme, puis procder au paiement.

Sur la page suivante, cliquez sur le bouton Continue (voir Figure 10.2). Vous devez alors vous authentifier. Vous pouvez librement utiliser votre compte Apple ID standard, mais sachez que votre nom complet figurera ct de tous vos projets, sur lApp Store diTunes. Rflchissez donc deux fois : il peut tre intressant de crer un nouvel identifiant de revendeur, tout en conservant votre compte dorigine pour un usage plus personnel. Slectionnez votre option, puis cliquez sur le bouton Continue (voir Figure 10.3).
Figure 10.3 Crez un nouvel identifiant Apple ID ou utilisez votre compte actuel.

Vous devez enfin valider votre choix. Vous remarquerez quil existe deux types de licences, Standard Individual et Standard Company, proposes 79 euros. La premire concerne les particuliers : leur nom apparat directement sur leur compte de dveloppeur, tandis que pour la seconde le nom dune socit pourra apparatre. ce stade, faites attention : dans le second cas, Apple pourra exiger des documents officiels au moment de vous rtribuer. Vous devez galement oprer dans le cadre de la lgislation franaise et dfinir prcisment la structure de votre socit. Les entreprises unipersonnelles ou le statut dauto-entrepreneur conviennent ce type de compte, par exemple. Si vous hsitez ou si vous souhaitez diffuser rapidement des applications dveloppes en solo, choisissez plutt la premire option (voir Figure 10.4).

320

Dveloppez des applications originales pour iPhone et iPod Touch

Figure 10.4 Choisissez dadhrer au programme standard.

Le site vous rsume les droits lis votre licence et son montant. Cliquez nouveau sur le bouton Continue pour procder au paiement et finaliser lopration (voir Figure 10.5).
Figure 10.5 Vous avez adhr au programme standard : il ne reste plus qu passer la caisse !

Il y a quelques mois encore, lachat dune licence de dveloppeur iPhone passait irrmdiablement par les services dApple USA. Aprs avoir cr votre compte, vous deviez indiquer vos motivations principales et mme rpondre un coup de fil en provenance de Cupertino afin dobtenir le prcieux ssame. La procdure tait lourde et ncessitait des semaines de dlais. Vous obtenez aujourdhui votre licence en moins de vingt-quatre heures, travers lApple Store local. Cliquez sur le bouton Add to Cart pour basculer vers lApple Store franais (voir Figure 10.6).

Chapitre 10

Publication et marketing

321

Figure 10.6 Si le prix de la licence est fix 99 dollars, vous vous acquittez en ralit de 79 euros.

Louons Apple pour avoir simplifi la procdure ! Sur lApple Store, vous dcouvrez que le montant de la licence est de 79 euros et que votre compte en banque ne sera ainsi pas dbit en dollars, ce qui aurait engendr des frais de conversion de devises supplmentaires (voir Figure 10.7). Procdez au paiement et surveillez vos e-mails : vous allez recevoir un message automatique contenant un code dactivation.
Figure 10.7 Passez commande sur lApple Store franais, comme si vous achetiez nimporte quel accessoire Apple.

Une fois le-mail de liPhone Developer Program dans votre bote de rception, suivez le lien quil contient. Vous activez ainsi votre compte (voir Figure 10.8). Prenez une bonne dernire inspiration et cliquez sur le bouton Activate : vous faites dsormais partie de la grande famille des dveloppeurs pour iPhone !
Figure 10.8 Le succs nest plus qu un clic de souris.

322

Dveloppez des applications originales pour iPhone et iPod Touch

Dployer une application iPhone


Associ au prcieux ssame que vous avez achet, votre compte de dveloppeur senrichit dsormais dun module supplmentaire. Rendez-vous ladresse http://developer.apple. com/iphone et authentifiez-vous. Remarquez le bloc "iPhone Developer Program", sur la droite de lcran : il contient un lien direct vers le portail de liPhone Developer Program et vers iTunes Connect. Cliquez tout dabord sur "iPhone Developer Program Portal". La diffusion dune application sur liPhone de votre choix tient en une srie dtapes que vous devrez imprativement suivre dans lordre : 1. La cration dun certificat de dveloppeur, travers lapplication Trousseau daccs de Mac OS X. 2. La signature de ce certificat par Apple. 3. Lajout diPhones autoriss installer lapplication, via leur identifiant unique UDID. 4. La cration dun identifiant dapplication, associ chacun de vos projets. 5. La cration dun profil de provisionnement, qui lie votre certificat un identifiant dapplication et une srie diPhone autoriss. 6. Linstallation du profil sur liPhone du dveloppeur et la liaison avec Xcode.

Crer un certificat de dveloppeur


Le certificat lectronique permet Xcode de signer votre application et de grer vos droits daccs. Chiffr, il garantit ainsi lauthenticit dune application et vous autorise la tester en-dehors de lenvironnement de dveloppement. Ouvrez une fentre du Finder, parcourez le dossier Applications/Utilitaires et lancez le Trousseau daccs. Droulez le menu Trousseau daccs et slectionnez Assistant de certification > Demander un certificat une autorit de certificat. Remplissez le formulaire initial en indiquant votre adresse e-mail et votre nom puis cochez les cases Enregistr sur disque et Me laisser indiquer les donnes sur la bi-cl (voir Figure 10.9). Cliquez sur le bouton Continuer et validez lenregistrement du fichier .certSigning. lcran suivant, vrifiez que la cl gnre est bien base sur lalgorithme RSA en 2 048 bits et cliquez nouveau sur Continuer (voir Figure 10.10).

Chapitre 10

Publication et marketing

323

Figure 10.9 Saisissez les informations lies votre demande de certificat.

Figure 10.10 Vrifiez le niveau de chiffrement de votre cl de certificat.

Vous devez prsent faire signer votre certificat par Apple, travers la section Certificates du portail de dveloppement de liPhone. Cliquez sur le bouton Add Certificate, tout en haut droite. Envoyez ensuite votre demande de certificat en cliquant sur le bouton Parcourir puis en slectionnant le certificat gnr prcdemment. Il apparat la section Current Development Certificates. Il nest pas encore approuv : cliquez sur le bouton Approve et patientez quelques minutes, le temps que le certificat se prpare. Vous pouvez ensuite le tlcharger sur votre poste de dveloppeur en cliquant sur le bouton Download (voir Figure 10.11).

324

Dveloppez des applications originales pour iPhone et iPod Touch

Figure 10.11 Le certificat est approuv : vous pouvez le tlcharger sur votre poste de dveloppeur.

Associer des iPhones enregistrs


Cliquez sur la rubrique Devices, sur le volet gauche de lcran. Votre compte vous autorise ajouter 100 appareils par an. Vous pouvez tout moment supprimer ou ajouter des priphriques mobiles, mais sachez que les appareils que vous retirez de la liste comptent malgr tout parmi les cent priphriques autoriss. Connectez votre propre iPhone ou iPod Touch votre ordinateur, puis cliquez sur le bouton Add Devices. Commencez par saisir le nom de votre priphrique dans le champ Device Name. Ouvrez iTunes, slectionnez votre mobile dans la section Appareils puis cliquez sur lintitul Numro de srie. Celui-ci se remplace par un identifiant unique de 40 caractres. Cliquez sur ce numro et pressez les touches Cmd+C pour copier cette chane de caractres (voir Figure 10.12). Vous obtenez la mme information travers la fentre Organizer de Xcode, situe dans le menu Window.
Figure 10.12 On relve lidentifiant unique associ liPhone que lon souhaite ajouter.

Chapitre 10

Publication et marketing

325

De retour sur le portail de dveloppement, collez la chane dans le champ Device ID. Validez en cliquant sur le bouton Submit. Votre mobile figure dsormais parmi les appareils enregistrs (voir Figure 10.13).
Figure 10.13 Ajoutez votre propre iPhone la liste des appareils autoriss.

Crer un identifiant dapplication


Cliquez sur la rubrique App IDs, puis sur le bouton New App ID. Lidentifiant de lapplication se compose dune chane de dix caractres gnre par Apple (Bundle Seed ID) et du nom de votre application, en notation de nom de domaine invers (Bundle Identifier). Il prendra alors la forme dune longue chane unique, comme "A1B2C3D4E5.com.masociete. monapplication" par exemple. En procdant ainsi, vous crez un identifiant unique que vous associez une application prcise. Si vous avez lintention de tester de nombreux projets sur votre propre iPhone, vous pouvez galement gnrer un identifiant dapplication multiple, en remplaant le Bundle Identifier par un astrisque.
Figure 10.14 Crez un identifiant dapplication, que vous associerez chacun de vos projets au moment de les distribuer.

326

Dveloppez des applications originales pour iPhone et iPod Touch

Dans la page qui apparat, commencez par saisir un nom dans le champ Description (voir Figure 10.14). Remplissez ensuite le champ Bundle Identifier, en indiquant un identifiant complet (com.masociete.monapplication, par exemple) si vous envisagez de dployer une application prcise, ou un identifiant plus large (com.masociete.*) afin dutiliser la mme cl sur une srie de projets. Validez en cliquant sur le bouton Submit.

Crer un profil de provisionnement


Ultime tape, la cration du profil de provisionnement lie lun de vos priphriques enregistrs lidentifiant dune application. Vous pouvez ainsi utiliser votre propre appareil pour tester votre application, au-del du Simulateur diPhone. Cliquez sur la rubrique Provisioning, sur le volet gauche de lcran, puis sur le bouton New Profile (voir Figure 10.15). Dans la mesure o vous avez rempli toutes les oprations prcdentes, la tche ne devrait pas tre difficile : saisissez le nom de votre profil, puis cochez la case correspondant votre certificat et votre appareil. Droulez le menu App ID et slectionnez lidentifiant dapplication que vous venez de composer. Cliquez sur le bouton Submit pour valider lopration. Vous devez ensuite tlcharger le profil pour linstaller sur votre iPhone. Sur le large tableau rsumant tous vos profils de provisionnement, cliquez sur le bouton Download. Vous tlchargez ainsi un fichier .mobileprovision.
Figure 10.15 La cration du profil de provisionnement lie un certificat, un identifiant dapplication et un appareil enregistr.

Pour lajouter votre iPhone, rien de plus simple : ouvrez Xcode, droulez le menu Window et cliquez sur Organizer. Glissez-dposez le profil tlcharg prcdemment vers la section Provisioning de votre mobile (voir Figure 10.16). Tout est prt !

Chapitre 10

Publication et marketing

327

Figure 10.16 Installez enfin le profil de provisionnement sur votre propre iPhone, travers Xcode.

Tester une application sur votre iPhone


Vous avez install le profil de provisionnement sur votre iPhone. Ouvrez le projet Xcode correspondant lapplication que vous souhaitez installer. Effectuez ensuite un double-clic sur son intitul, au sommet du volet gauche de lenvironnement de dveloppement. Cliquez sur longlet Build et vrifiez tout dabord que le menu Configuration indique bien Debug avant de vous reporter la section Code Signing (voir Figure 10.17).
Figure 10.17 On prpare la diffusion dune application sur un iPhone.

Aux lignes Code Signing Identity et Any iPhone OS Device, droulez le menu et slectionnez la cl lie votre propre iPhone. Fermez la fentre et slectionnez ensuite le fichier Info.plist associ votre projet. Dans le champ Bundle identifier, saisissez lidentifiant que vous avez dfini prcdemment lors de la cration dun App ID. Enregistrez votre mo-

328

Dveloppez des applications originales pour iPhone et iPod Touch

dification, droulez le menu tout en haut gauche de Xcode et slectionnez Device iPhone OS x (o x correspond la version diPhone OS installe sur votre mobile). Cliquez enfin sur le bouton Build and Go, en ayant naturellement connect votre iPhone votre Mac en USB. Xcode compile votre projet et lenvoie vers votre iPhone et non le Simulateur. Vous pouvez ainsi librement tester vos applications, en renouvelant lopration pour chacun de vos projets.
En cas derreur Un message derreur apparat lcran lors de la compilation et vous empche dinstaller lapplication sur votre iPhone (erreur 0XE800003A) ? Pas de panique : droulez le menu Build de Xcode et cliquez sur Clean All Targets. Quittez Xcode, relancez votre projet. Vrifiez les proprits de votre application, en particulier la section Code Signing Identity, puis compilez nouveau votre projet.

Soumettre votre application Apple


Lexercice prcdent vous a permis de tester votre application en situation relle. Nhsitez pas ajouter dautres mobiles la liste des appareils enregistrs, notamment des iPod Touch ou des iPhone sappuyant sur une autre version du systme, en sollicitant laide de vos amis. Vous procdez ainsi une batterie de tests supplmentaires et vous vous assurez que votre application ne posera pas de problmes majeurs face la multitude de configurations possibles. Il est maintenant lheure de soumettre votre application Apple, afin de la diffuser sur iTunes. De retour sur le portail de dveloppement pour liPhone, ladresse http://developer.apple. com/iphone, cliquez sur le lien iTunes Connect droite de lcran. Cet espace vous permet de soumettre de nouveaux projets, de grer vos informations bancaires, de visualiser les rapports de ventes ou dobtenir des codes promotionnels visant tlcharger gratuitement vos propres applications (voir Figure 10.18). Cliquez sur le lien Manage Your Applications, puis sur le bouton Add New Application. Tout commence par le choix dune langue principale : il sagit de la langue dans laquelle vous saisirez les informations lies votre application. Ce choix est important, dans la mesure o il dfinit la langue principale associe au projet que vous soumettez. Si votre application se destine exclusivement un public francophone, slectionnez le franais. Vous aurez ainsi plus de chances de figurer en bonne place dans liTunes Store francophone. Vous pourrez toutefois ajouter des langues supplmentaires par la suite et mme publier des captures dcran dans plusieurs langues : nous y reviendrons. En parallle, saisissez votre nom ou celui de votre socit. L encore, vous ne pourrez pas modifier ce choix ultrieurement.

Chapitre 10

Publication et marketing

329

Il sagit du nom qui figurera ct de votre application, sous iTunes. Rien ne vous oblige saisir le nom dune entit rellement dpose auprs de la Chambre de commerce et dindustrie ou du statut des auto-entrepreneurs, mais prenez garde : si vous utilisez un nom trs fantaisiste ou pompeux (en prtendant par exemple que votre application mane dApple), elle sera immdiatement rejete. Dans la mesure du possible, essayez dutiliser votre propre nom en diffusant votre application titre individuel.
Figure 10.18 Les diffrents outils de la section iTunes Connect.

Apple vous demande ensuite si votre application exploite des technologies de chiffrement. Dans la mesure o elle sera diffuse au monde entier, vous devez faire attention aux lgislations locales portant sur le chiffrement de donnes. Il y a toutefois de grandes chances pour que votre application nexploite pas ce type de procd : poursuivez la soumission de votre projet. Vous devez enfin remplir un large formulaire pour finaliser la soumission de votre application auprs dApple (voir Figure 10.19). Procdez avec minutie : vous ne serez plus en mesure de modifier la plupart de ces informations par la suite et Apple se montre intransigeant vis--vis des conditions dutilisation. La qualit gnrale des applications de lApp Store est ce prix !
Figure 10.19 Le formulaire de soumission dapplications diTunes Connect.

330

Dveloppez des applications originales pour iPhone et iPod Touch

Nom de lapplication. Ce nom figurera dans lApp Store diTunes et non sur liPhone de vos clients (ce dernier est dfini au champ Bundle display name du fichier Info.plist associ votre projet, sous Xcode). Vous tes limit 255 caractres, mais vitez de choisir un nom si long. Noubliez pas que les utilisateurs peuvent galement consulter le catalogue dapplications depuis leur propre iPhone lcran y est plus limit et vous devez rester synthtique. Par ailleurs, vous navez pas le droit dutiliser des marques dposes, y compris le mot "iPhone". Apple voit galement dun trs mauvais il lutilisation du prfixe "i", comme iVideo ou iReader par exemple. Si vous choisissez un nom diffrent pour votre application et sa fiche descriptive diffuse sur iTunes, optez pour une base commune. Par exemple, une clbre application lie aux mtros parisiens sintitule "Paris-ci" sur un iPhone et "Paris-ci la sortie du mtro" sur iTunes. Cet intitul plus complet permet cette application dtre rfrence sur le terme "mtro" lors dune recherche sur iTunes. Description de lapplication. Ce long champ de texte contient jusqu 4 000 caractres. Vous y dfinissez le rle et lintrt de votre application, en mettant en relief ses principales fonctionnalits. Vous navez pas la possibilit dutiliser de balises HTML dans ce champ ; la plupart des dveloppeurs divisent cette description en plusieurs sections (Fonctionnalits, Caractristiques, Nouveauts, etc.) en soulignant les titres laide de codes ASCII, en ajoutant une srie dtoiles par exemple. Soignez tout particulirement ce texte initial : mis part son intitul et son icne, cest le premier contact quont vos futurs clients avec votre application. Configuration requise. Vous dfinissez dans ce menu les appareils compatibles avec votre application : iPhone uniquement, iPhone et iPod Touch de seconde gnration ou toutes les versions de liPhone et de liPod Touch. Si votre application exploite le capteur de liPhone ou son GPS, slectionnez la premire catgorie. Catgories de lapplication. iTunes trie les applications selon vingt catgories diffrentes (actualits, divertissement, utilitaires, mto, jeux, enseignement). Slectionnez la catgorie principale de votre application : elle figurera dans cette section, sous iTunes. La catgorie secondaire affine le genre de votre application. Un lecteur de flux RSS pointant vers le blog dun photographe appartiendra probablement la catgorie principale "News" et la catgorie secondaire "Photography", par exemple. Informations de copyright. Saisissez ensuite vos informations de copyright, en notation anglaise ("2010, Ma socit" par exemple). Dfinissez galement le numro de version ("1.0"). Le champ SKU Number correspond la gestion des stocks : son acronyme signifie Stock-Keeping Unit. Il sagit dun numro unique qui vous permettra de suivre les ventes de vos applications. Ainsi, votre premier projet pourra hriter du numro de produit 1, votre deuxime application du numro 2 et ainsi de suite. Ces numros figurent galement dans

Chapitre 10

Publication et marketing

331

les diffrents documents de facturation et vous aident conserver une trace des applications que vous diffusez sur lApp Store. Mots-cls. Fondamentale, cette section vous permet dassocier des mots-cls votre application. Ils seront pris en compte au moment de la recherche. Vous ne disposez que de cent caractres, en sparant chaque terme dun espace. Soyez prcis et essayez de dfinir au mieux les termes lis votre application. Sites web du support. Afin de valider la soumission de votre application, vous devez imprativement indiquer ladresse dun site web associ votre projet. Cette page doit comprendre un rapide guide dutilisation, autour dune srie de captures dcrans, et mentionner une information de contact afin de permettre aux utilisateurs de vous solliciter. En ralit, ces pages ne sont que rarement consultes par les utilisateurs, qui prfrent dposer directement leurs questions sous forme de commentaires sur iTunes. Si vous tes press, nhsitez pas utiliser un service de blogging ou dhbergement gratuit afin daboutir rapidement un rsultat. Le service Google Sites (http://sites.google.com) constitue une solution simple et conviviale pour crer ce type de page. En quelques clics de souris, vous dployez un site complet autour dun modle et vous enrichissez vos pages de captures dcrans et dune description prcise de votre application. linverse, vous pouvez prendre le temps de crer un site complet aux couleurs de votre application, en veillant son bon rfrencement auprs des moteurs de recherche. Une telle solution constitue alors un second point dentre vers votre application, au-del diTunes : des utilisateurs potentiels la dcouvriront au gr dune recherche sur Google, avant de se rabattre vers iTunes pour la tlcharger. Compte de dmonstration. Votre application ncessite-t-elle un compte utilisateur pour accder un service prcis ? Si cest le cas, vous devez initialiser un compte de test et en indiquer lidentifiant Apple. La maison-mre ne prendra effectivement pas le temps de crer manuellement un compte sur votre service et rejettera votre application si vous ne lui en fournissez pas un. Contrat de licence. Si votre application ncessite un contrat de licence particulier, vous pouvez le fournir en dernier lieu. Ce type de contrat est ncessaire lorsque votre application effectue des traitements particuliers (stockage ou publication dinformations, par exemple) ou lorsquelle sinscrit dans un rseau communautaire qui exige le respect de certaines rgles. Dans la plupart des cas, le contrat de licence standard suffit. Cliquez sur le bouton Continue pour valider votre saisie.

332

Dveloppez des applications originales pour iPhone et iPod Touch

Niveau de contrle parental. Vous devez ensuite indiquer le niveau de contrle parental de votre application, en rpondant une srie de questions (voir Figure 10.20). Votre application contient-elle de la violence ? Des rfrences lalcool ou au tabac ? Des illustrations pouvant effrayer les utilisateurs ? Rpondez sereinement chaque point, en cochant la case "Jamais", "Modrment" ou "Frquemment". Sur la droite de lcran, un pictogramme vous indique le niveau de contrle parental correspondant (4+, 9+, 12+ et 17+). Apple ne plaisante pas du tout avec cet aspect et vous avez tout intrt vous montrer trs prudent. Si votre application interroge un service distance, comme un lecteur de flux RSS par exemple, veillez choisir un niveau de contrle parental relativement lev (12+). Dans tous les cas, sachez que les utilisateurs diPhone de moins de douze ans sont relativement rares et que vous ne vous priverez donc pas dune cible potentielle !
Figure 10.20 Slectionnez le niveau de contrle parental de votre application.

lments de votre application. Ouvrez nouveau votre projet sous Xcode et slectionnez Release dans le menu droulant en haut gauche. Compilez votre application : vous obtenez un fichier .app dans le dossier /build/release de votre projet. Vous devez imprativement ajouter une icne de 57 57 pixels au fichier Info.plist, comme nous lavons vu au cours des premiers chapitres. Vous devez ajouter ce fichier .app la section Application de ltape suivante diTunes Connect (voir Figure 10.21). Choisissez galement une large icne de 512 512 pixels en 72 dpi, de prfrence au format TIFF ou PNG. Celle-ci sera utilise sur la page associe votre application, sous iTunes. Enfin, ajoutez cinq captures dcran en choisissant lune dentre elles en guise de capture principale. Ces images prsentent votre application en action : slectionnez-les attentivement, elles constituent lun des premiers critres de choix. Pour raliser une capture dcran sur votre propre iPhone, pressez simultanment la touche Home et le bouton Power, en haut droite. Vous avez galement la possibilit dutiliser Xcode : droulez le menu Window > Organizer, puis cliquez sur longlet Screenshot aprs avoir reli votre iPhone en USB.

Chapitre 10

Publication et marketing

333

Figure 10.21 Associez des lments graphiques votre application.

Prix et date de disponibilit. lcran suivant, vous tes invit dfinir le prix de votre application (voir Figure 10.22). Vous ne pouvez pas saisir directement le montant de votre choix : slectionnez lune des catgories. Reportez-vous au tableau ci-dessous pour connatre la correspondance entre les principales tranches tarifaires et le prix rellement pratiqu en France, lheure o nous mettons cet ouvrage sous presse (voir Tableau 10.1).
Figure 10.22 Indiquez le niveau de prix et la date de disponibilit de votre application.

Comme vous le constatez, la grille tarifaire volue largement. Nous ne vous recommandons pas de choisir un prix trop lev : tchez de vous maintenir dans les cinq premires catgories de tarifs, moins de proposer une application rellement innovante. Envisagez galement de diffuser gratuitement votre application, afin de vous constituer une vitrine initiale sur iTunes. Vous btirez des versions plus approfondies de vos applications par la suite, aprs avoir brill une premire fois dans les rayons de lApp Store ! Slectionnez galement

334

Dveloppez des applications originales pour iPhone et iPod Touch

une date de disponibilit. Par dfaut, il sagit de la date du jour : vous indiquez ainsi Apple que lapplication peut tre commercialise ds quelle sera valide. Si votre application se rattache un vnement spcifique (rencontre sportive, foire ou salon, ftes de fin danne, etc.) indiquez une date prcise.
Tableau 10.1 : Les principaux tarifs et rtributions pratiqus sur iTunes

Tranche tarifaire Gratuit Tranche 1 Tranche 2 Tranche 3 Tranche 4 Tranche 5 Tranche 6 Tranche 7 Tranche 8 Tranche 9 Tranche 10 Tranche 25 Tranche 50 Tranche 85

Prix pratiqu sur iTunes 0 0,79 1,59 2,39 2,99 3,99 4,99 5,49 5,99 6,99 7,99 19,99 39,99 799

Reversement net au dveloppeur 0 0,48 0,97 1,45 1,82 2,43 3,04 3,34 3,65 4,25 4,86 12,17 24,34 485,95

En dernier lieu, iTunes Connect vous propose de soumettre un descriptif dtaill de votre application dans des langues complmentaires. Si vous aviez choisi le franais ltape prcdente, vous avez ainsi la possibilit de renseigner une nouvelle fiche en anglais, allemand, espagnol ou italien par exemple, comme nous le verrons un peu plus loin. Vous ajoutez au passage des captures dcran localises. Apple rsume ensuite toutes les informations que vous avez saisies jusqu prsent. Cliquez sur le bouton Submit Application pour lancer votre requte. Patientez : le processus de validation prend deux trois semaines environ, en fonction de la demande. Apple traite prs de 8 500 nouvelles applications par semaine et indique que 95 % dentre elles sont analyses selon ce dlai. Le tableau dressant la liste de toutes les applications que vous soumettez indique la progression de cette opration ("waiting for review", "in review", "ready for sale", etc.).

Chapitre 10

Publication et marketing

335

Lquipe de validation dApple comprend lheure actuelle plus de quarante membres, dont deux seront dlgus votre application. Les critres de validation sont relativement flous, mais la plupart dentre eux relvent du bon sens. Votre application plante-t-elle ? Gnret-elle des messages derreur ? Que se passe-t-il lorsquon lutilise sans capter le moindre rseau ? Contient-elle tous les lments ncessaires, en particulier une icne ? Affiche-telle du contenu offensant ? Utilise-t-elle des lments dont vous ne dtenez pas les droits dauteurs ? Avez-vous sous-estim le niveau de contrle parental requis ? Nhsitez pas tlcharger le guide de dveloppement complet, sur la page daccueil diTunes Connect. Il vous renseigne sur les meilleures pratiques et sur les lments ne pas oublier. Si Apple rejette votre application, lquipe vous explique prcisment les points que vous navez pas respects. lheure actuelle, 20 % des applications en moyenne chouent lors de leur premire soumission.
Validez votre contrat auprs dApple Sur la page daccueil diTunes Connect, cliquez sur le lien "Contracts, Tax & Banking Information". Par dfaut, Apple a contract un premier document auprs de vous : il vous permet de diffuser des applications gratuites dans le monde entier. Si vous envisagez de diffuser des applications payantes, vous devrez expressment demander un contrat largi et indiquer vos coordonnes bancaires internationales. Cliquez sur le premier lien et validez les conditions gnrales. Vous obtenez alors un PDF dans votre bote aux lettres. De retour sur iTunes Connect, saisissez vos informations de contact la rubrique "Contact Info" puis indiquez vos informations bancaires, notamment le numro IBAN qui figure sur lun de vos RIB. Dans la mesure o Apple est une socit amricaine, vous devrez valider un formulaire de "cessation du statut de revendeur un non-rsident des tats-Unis" (sauf si vous avez la nationalit amricaine, bien entendu, ce que vous indiquez en dbut de formulaire). Quelques heures plus tard, votre contrat est finalement valid par Apple et vous avez la possibilit de revendre des applications aux quatre coins du monde.

Populariser votre application


Sil existait une recette magique conduisant invariablement au succs dune application, tous les dveloppeurs seraient millionnaires! La russite de votre projet tient parfois une srie de dtails quil est difficile de prvoir et de matriser. Mettez toutefois toutes les chances de votre ct, en envisageant une campagne promotionnelle et en soignant les derniers aspects de votre application. Lintrt de votre application. En premier lieu, veillez proposer une application qui remplit un rle spcifique et qui enrichit rellement le quotidien de ses utilisateurs. Programmer la dix-millime calculatrice pour iPhone, sans offrir de rels atouts par rapport

336

Dveloppez des applications originales pour iPhone et iPod Touch

lapplication intgre par dfaut, est peine perdue : elle sombrera dans les profondeurs du classement, mme si Apple la valide rapidement. Si cette notion est largement subjective, vous avez intrt soumettre votre application au verdict de votre cercle familial dans un premier temps. Des ides damliorations jailliront spontanment, si vous tes ouvert la discussion et si vous acceptez de repousser la diffusion de votre application en replongeant dans son code source. Dans le mme ordre dide, rflchissez au cadre dexcution de votre application. Noubliez jamais que vous dveloppez pour un priphrique nomade, qui accompagne lutilisateur lors de ses dplacements. Ce dernier na ni le temps ni la concentration de se pencher sur des traitements trop complexes ou des manipulations avances. Par exemple, une application de recettes de cuisine qui exigerait des manipulations incessantes de lcran ne remplirait pas totalement lobjectif quelle sest fixe : lutilisateur napprcierait pas forcment de toucher son mobile avec les doigts dans la farine. Si votre application sexerce dans un cadre spcifique, mettez-vous en situation et vrifiez que son usage est rellement possible. Lanalyse de lexistant. Intimement lie cette premire tape de validation, lanalyse de vos applications concurrentes en dit long sur la porte de votre projet. Vous avez cr un utilitaire de calcul de trajets dans le mtro ? Passez en revue lensemble des solutions concurrentes, en particulier celles sinscrivant dans la mme grille tarifaire que la vtre. Si leurs fonctions dpassent largement ce que vous proposez, vous aurez du mal vous dmarquer moins doffrir une ergonomie et une interface rellement nouvelles. linverse, si votre application renvoie aussitt un air de fracheur et complte ces approches concurrentes, vous avez toutes les chances de vous imposer en quelques semaines. Optimisation du code source. Cest un aspect quApple considre au moment de valider votre application : consomme-t-elle des ressources dmesures ? Validez consciencieusement votre application avant de la soumettre sur iTunes. Vrifiez que vous avez bien supprim les rfrences vos outlets lors de larrt de vos traitements et que la gestion de la mmoire est optimise. Pour vous aider dans cette tche, utilisez les instruments de Xcode, en particulier Memory Leaks et Activity Monitor. Lorsque vous compilez votre projet, vitez galement dalourdir le fichier rsultant par des lments que vous nutilisez pas (images importes, frameworks non utiliss, etc.). Supprimez les commentaires de vos codes sources, en particulier les appels la classe NSLog. Les utilisateurs nauront pas accs la console de dbogage et ce type dappels amoindrit la ractivit de votre application. Charte et lments graphiques. Cest lun des premiers aspects li votre application, sur iTunes : soignez tout particulirement son icne, son logo et les captures dcran. L encore, il nexiste pas rellement de rgles tablies qui garantissent le succs dune charte graphique. titre de comparaison, reportez-vous la Figure 10.23 : elle runit des exemples dicnes dapplications de "listes de tches". Ces icnes, allies au nom de chaque projet, apparaissent sous la forme dun tableau lorsquon effectue une recherche sur iTunes. Cer-

Chapitre 10

Publication et marketing

337

taines dentre elles paraissent plus explicites et mieux dessines deux critres de choix essentiels. Si vous ne disposez pas dun talent de graphiste particulier, sollicitez laide dun spcialiste, travers un forum de discussion, ou veillez rester le plus sobre possible. vitez dans la mesure du possible les photos rduites en 57 57 pixels. Elles donnent un ct trs amateur au projet et passent mal sur lcran de liPhone.
Figure 10.23 Les applications de listes de tches abondent : saurez-vous distinguer les meilleures dentre elles partir de leur icne ?

Le site web de rfrence. Lors de la soumission de votre application Apple, vous tes invit crer un site web associ votre projet. Sil est possible dutiliser un modle prt lemploi, qui ne contiendra que les informations essentielles (description du projet, fonctionnalits de lapplication, support technique), vous pouvez aussi envisager de crer un site haut en couleurs. Celui-ci accompagnera les utilisateurs et pourra mme contenir un forum (voir Figure 10.24). L encore, si vous envisagez de crer un vaste site web, profitezen pour soigner son rfrencement. De nombreux utilisateurs pourraient ainsi tomber sur vos pages travers une recherche sur Google : convainquez-les de tester votre application travers iTunes.
Figure 10.24 Le studio franais Agharta diffuse des jeux pour iPhone et a mis en place un site web trs riche.

338

Dveloppez des applications originales pour iPhone et iPod Touch

Sites partenaires et rseaux communautaires. Il existe de nombreux blogs ou webzines lis liPhone et aux applications diffuses sur iTunes. Il est dlicat de solliciter leurs rdacteurs en leur soumettant votre propre cration : nenvoyez jamais directement un e-mail les invitant tester votre projet, ce serait largement contre-productif. Participez aux forums de discussion, dposez des commentaires constructifs et intgrez-vous progressivement leur communaut de lecteurs. Petit petit, vous gagnerez en crdibilit et vous pourrez ainsi plus sereinement vous soumettre leur verdict. Utilisez galement les codes promotionnels que vous pouvez crer sur iTunes Connect pour offrir un accs gratuit votre application. Parmi les sites de rfrence, reportez-vous iPhoneTests.com, ApplicationIphone.com, Test-Appstore.com et Appstore-test.fr (voir Figure 10.25). Les rseaux sociaux comme Facebook et Twitter jouent galement un grand rle dans la diffusion initiale de votre application. Publiez un Tweet ou modifiez votre statut, en indiquant que vous venez de crer une premire application. Vos amis et contacts directs iront peut-tre lessayer : le nombre de tlchargements effectus dans les premiers jours de diffusion de votre application jouent largement sur son classement. Faites ensuite marcher le bouche--oreille.
Figure 10.25 De nombreux sites testent rgulirement les nouvelles applications de lApp Store. Soumettez-leur vos propres crations.

Versions localises et mises jour. Afin de toucher un public plus large, vous pouvez prvoir des versions localises de vos applications. Sous Xcode, votre projet peut en effet abriter des traductions de tous vos lments dinterface et chanes de caractres : le rsultat apparat automatiquement dans la langue de lutilisateur, telle quil la choisie dans les rglages de son mobile. Reportez-vous la documentation du SDK de liPhone pour de plus amples dtails ce sujet. La localisation dune application ne met pas en jeu des techniques complexes, mais elle exige de la minutie et de lorganisation. Heureusement, Xcode supporte pleinement cet aspect et vous aide en prparant automatiquement des sousdossiers contenant vos lments de traduction. Vous devez tout dabord connatre lidentifiant ISO des langues supplmentaires que vous souhaitez proposer. Rendez-vous ladresse

Chapitre 10

Publication et marketing

339

http://www.iso.org/iso/country_codes.htm pour en dcouvrir la liste complte. LAllemand est reconnu par le code "de_DE" et le Franais par "fr_FR" par exemple. En Objective-C, on rcupre le paramtre local de lutilisateur laide de la mthode currentLocale :
NSLocale *localisation = [NSLocale currentLocale];

Vous dfinissez ensuite tous les termes apparaissant lcran travers des instances de la classe NSLocalizedStrings. Cliquez sur licne de votre projet, sous Xcode, puis droulez le menu File et cliquez sur Get Info. Cliquez ensuite sur le bouton Make File Localizable. Parmi les ressources associes votre projet, vous dcouvrez alors un sous-dossier /English. Ouvrez nouveau le panneau des informations associes votre projet et cliquez prsent sur le bouton Add Localization. Saisissez le code ISO correspondant la langue que vous souhaitez ajouter, "fr_FR" par exemple. Vous crez ainsi automatiquement un nouveau fichier prt lemploi, dans lequel vous dfinirez les versions localises de vos chanes de caractres. La structure de votre projet est prte : reportez-vous au guide de dveloppement Cocoa Touch intgr Xcode pour dcouvrir la nomenclature exacte de la classe NSLocalizedStrings. Sachez par ailleurs que ce march sest considrablement ouvert ces derniers mois et quil est dsormais possible de proposer ses services de traduction. La socit iPhoneLocalizer (www.iphonelocalizer.com) sen fait une spcialit et propose de traduire une application dans prs de quatre-vingt langues. Dans le mme ordre dide, noubliez pas de proposer des mises jour rgulires de votre application (voir Figure 10.26).
Figure 10.26 La publication de mises jour rgulires renforce limage de votre application auprs de ses utilisateurs.

340

Dveloppez des applications originales pour iPhone et iPod Touch

Vous devrez nouveau les soumettre Apple et vous inscrire dans le cycle de validation choisissez un numro de version diffrent afin dviter de saisir toutes les informations initiales. Vos utilisateurs sont prvenus de la mise jour par un petit "badge" associ licne de lapplication App Store. Tirez des leons des commentaires. On ne le sait que trop bien : les commentaires sur les forums ne font jamais dans la demi-mesure et peuvent vite tourner linsulte lorthographe approximative. Ne vous dcouragez pas si un premier utilisateur vocifre sur la page des commentaires lis votre application. Attardez-vous plutt sur les commentaires constructifs ; de nombreux internautes prennent le temps dexprimer leur avis complet et de vous suggrer des pistes damlioration. coutez-les attentivement, notamment pour faire remonter la note moyenne de votre application (voir Figure 10.27).
Figure 10.27 Consultez frquemment les commentaires, sans toutefois prendre au premier degr les avis les plus acerbes et personnels.

Trouver des ides originales de dveloppement. lissue de la lecture de cet ouvrage, vous matrisez la quasi-totalit des comportements spcifiques de liPhone et de liPod Touch. Appareil photo, support de lacclromtre, lecture de fichiers externes, interfaces complexes sarticulant autour de listes ou donglets Votre champ daction sest trs largement ouvert et vous tes en mesure de vous confronter des projets de grande ampleur. Premier rflexe salutaire : consultez attentivement la liste des applications les plus populaires de lApp Store diTunes et essayez de comprendre au premier coup dil la logique de tous ces projets. Un simple jeu consiste dplacer une balle lcran en inclinant son mobile ? Son auteur a utilis lacclromtre pour dterminer les coordonnes appliquer la balle. Il faut viter des obstacles et des trous ? Ceux-ci correspondent des instances de la classe UIImageView dont les coordonnes ont t soigneusement repres : si la balle pntre dans leur primtre, elle disparat et la partie est perdue. Procdez de mme avec lensemble des applications les plus populaires : vous verrez quel point certains projets aurols de succs ne tiennent quen quelques modestes lignes de code. linverse, vous constaterez que cer-

Chapitre 10

Publication et marketing

341

taines catgories dapplications paraissent bouches et quil sera bien difficile de proposer des programmes supplantant les meilleurs projets. Cest notamment le cas des utilitaires de prise de vue, dont certains exemples dpassent largement lapplication gnrique propose par dfaut par Apple. Ne vous dcouragez pas pour autant : si dillustres dveloppeurs se sont dj empars dun sujet particulier que vous convoitiez, vous avez toujours votre mot dire. Rflchissez en particulier aux spcificits franaises de votre projet : ny a-t-il pas des services nationaux (transport, mto, dictionnaires, etc.) qui mriteraient dtre intgrs au sujet et qui vous offriraient immdiatement un large public francophone ? Sans pour autant dupliquer lapplication dorigine, essayez den proposer une nouvelle ergonomie. Si votre interface est plus intuitive et facile matriser, vous partirez dun bon pied et votre projet pourra tre salu sur iTunes. Par ailleurs, noubliez jamais que les applications les plus populaires ont gnralement bnfici dune dizaine de mises jour depuis leur lancement. Nessayez donc pas du premier coup de proposer une application aussi bluffante vous ltofferez progressivement, en vous basant sur les commentaires des utilisateurs.

Pour aller plus loin


Nous arrivons au terme de notre exploration du dveloppement dapplications pour iPhone et iPod Touch. Comme vous lavez constat travers chaque chapitre, cest un exercice aussi rigoureux que ludique : le kit de dveloppement offre un socle riche et intuitif, qui vous oblige respecter de nombreuses rgles mais qui se solde par des applications originales et innovantes. Compltez votre apprentissage initial en vous reportant au guide de dveloppement inclus dans Xcode, en approfondissant tous les aspects de Cocoa Touch et dObjective-C. Aprs avoir soumis votre application Apple, faites-la vivre en lenrichissant de nouveaux comportements et en sollicitant lavis de ses utilisateurs. ce titre, les rapports de plantage que vous adresse Apple sur votre interface de publication constituent une formidable source dinformations pour rsoudre les principaux problmes et tendre les fonctionnalits de vos projets. LApp Store diTunes contient aujourdhui plus de 100 000 applications dont les vtres ! Vous participez au succs de cette plateforme innovante et originale et vous vous inscrivez parmi les pionniers de ce dveloppement dun type nouveau, promis un grand avenir. Sur les bases de votre exprience initiale, nhsitez pas vous intresser au jour le jour toutes les nouveauts du SDK, en suivant rgulirement ses mises jour. La demande est aujourdhui trs forte et vous pouvez mme proposer vos services de nombreuses entreprises, qui souhaitent disposer dune certaine visibilit sur lApp Store. Devenez dveloppeur professionnel, compltez vos connaissances en Objective-C et travaillez en quipe afin dassurer des projets de plus grande ampleur.

342

Dveloppez des applications originales pour iPhone et iPod Touch

Plus quun simple mobile, liPhone saffirme comme une plateforme de dveloppement part entire qui sadapte librement vos projets les plus ambitieux. Participez activement ce nouvel lan et dveloppez votre tour toutes les applications dont vous rvez. Le succs est au bout de vos doigts !

Index

A
Acclromtre 311 dplacer une image 315 Accesseurs 98 Actions 81 Activity Indicator View 60 Activity Monitor 72 Affichage alerte lutilisateur 177 images 248, 250 modes 290 rotation 289 afficheDate 188 Ajouter une rglette 173 alerteClic 179 allKeys 204, 214 allowsImageEditing 272 animated 124 Appareil photo de liPhone 274 Applications appareil photo de liPhone 274 catgories 19 formulaire de soumission 330 icne 66 interactions 75 langue 334 multivues 116 populariser 335 soumettre Apple 328 tarif et rtribution Apple 334 tester lors du dploiement 327 vues 110, 150 Voir aussi Dployer une application Audio 275 dclencher un son 275 formats 276 Audio Toolbox 275 Audio Unit 275 AVFoundation 275, 280

B
backgroundColor 257 Bar Button Item 60 beginAnimations 128 Bienvenue_Prefix.pch 50 BienvenueViewController. xib 50 Blog 231 Boutons prdfinis 169 Bundle de prfrences 232

C
Caractres spciaux 88 cellForRowAtIndexPath 216 Certificat de dveloppeur 322 CGRect 253 CGRectContainsPoint 303 Champs de saisie 140 Charger des donnes 212

344

Dveloppez des applications originales pour iPhone et iPod Touch

Classes 50 fichier dimplmentation 86 srialiser 238 Cocoa 34 Cocoa Touch 32 commitAnimations 128, 131 commitEditingStyle 243 component 205 Conteneurs de donnes 58 contentMode, constantes 251 Contexte graphique 282 Contrat de dveloppeur 12 Contrles bibliothque 153 localiser 273 roulette 184 segments 173, 179 spcifiques 153, 154 Contrleurs implmenter 87 logique interne 89, 160 navigation 124 Coordones cran 254 Core Graphics 253 creerVueImage 308

Dlgu 99 Dplacer un lment au doigt 300 Dployer une application 322 associer des iPhones enregistrs 324 certificat de dveloppeur 322 tapes 322 formulaire de soumission 330 identifiant dapplication 325 langue 334 profil de provisionnement 326 soumettre Apple 328 tarif et rtribution 334 tester lapplication 327 validation Apple 335 Design ergonomie 144 tendances 144 vues 143 Dessin 282 Dveloppement outils 30 vue densemble 29 Dictionary 200 Dictionnaire 201 didAccelerate 315 Did End On Exit 97 didFinishPickingImage 267 didSelectRow 198 didSelectRowAtIndexPath 221, 229 Dimensions Voir Inspecteur de dimensions

Donnes 207 charger 212 crire un fichier 237 enregistrer 231 interactivit 221 lire 209 listes 214 cellules 215 lire 209 mise en forme 220 polices 217 taille 218 rcuprer 194 tableau 194, 198 drawRect 284

E
crire un fichier de donnes 237 Editing Changed 97 Editing Did Begin 97 Editing Did En 97 @end 98 Enregistrer des donnes 231 vnements, bibliothque 96 Exemples Chant doiseaux 277, 293 dessin 282 Diaporama 304 donnes 210 flux RSS 223 gnrateur de mot de passe 155 quiz 80

D
Date & Time 185 Date Picker 59, 185 Dates 185 formater 188, 189 Dboguer 62 outils 70 debutTransition 308 Dclencher un son 275

F
Files Owner 52 First Responder 53

Index

345

Fixed Space Bar Button Item 61 Flexible Space Bar Button Item 61 Flux RSS 208, 223 charger 243 TouchXML, intgrer 224 font 216 Formats audio 276 Foundation 37 frame 253, 290, 303 Frameworks 51

dplacer avec lacclromtre 315 dimensions de la vue 253 importer 204 lgende 255 personnelles et retouche 267 photothque de lutilisateur 264 prserver laspect 251 taille 250 UIWebView 261 Image View 59 indexPath 214 Info.plist 51 initWithNibName 124 Inspecteur de connexions 94 de dimensions 290 Installer le SDK 13 Interactions 75 ergonomie 77 type de 95 Voir aussi Donnes et Gestes de lutilisateur @interface 98 Interface dfinir 165 dposer des objets 92 disposer les contrles 171 prparer sous Photoshop 170 Interface Builder 8, 52 bibliothque dobjets 58 fentres 52 hritage 56 objets, ajouter 54 Interrupteurs 158 isEqualToString 103 isSourceTypeAvailable 265

K
Key 236

L
Label 59 Leaks 72 libxml2 223 Licence 318 programme standard 320 types 319 Limites de liPhone 39 Lire des donnes 209 Liste de proprits 199, 210, 232 crer 200 prfrences des applications 233 loadView 250 Locale 185 Logo 170

G
Gnrateur de mot de passe 155 Gestes de lutilisateur 287 acclromtre 311 dplacer un lment 300 cran 299 navigation 304 Glyphish 119

H
heightForRowAtIndex Path 218

M
main.m 50 MainWindow.xib 51 Manipulation de lcran 297 Marketing 317 analyse de lexistant 336 charte et lments graphiques 336 commentaires 340 ides 340 intrt dune application 335 optimisation du code source 336 site web de rfrence 337

I
IBAction 83 Identifiant dapplication 325 imagePickerControllerDidCancel 267 Images 119, 248 afficher 248 charger depuis une source externe 258 mise jour 259

346

Dveloppez des applications originales pour iPhone et iPod Touch

versions localises et mises jour 338 Media Player 275 Mthodes objets et 91 Modle-Vue-Contrleur. Voir MVC MultiConvertisseur 131 Multimdia 245 Mutateurs 98 MVC architecture 78 contrleur 82 vue et contrles 80

NSDateFormatterFullStyle 189 NSDateFormatterLongStyle 189 NSDateFormatterMediumStyle 189 NSDateFormatterShortStyle 189 NSSearchPathForDirectoriesInDomains 237 NSString 89 NSTemporaryDirectory 238 NSURL 258 NSUserDefaults 232, 236 NSXMLParser 223 numberOfComponentsInPickerView 198

P
Page Control 60 PDF, charger avec UIWebView 261 PhoneGap 17 Photographies Voir Images Photothque de lutilisateur 264 pickers 184 Picker View 59 Pointeur 81 PreferenceSpecifiers 233 Products 51 Profil de provisionnement 326 Programme de dveloppeur iPhone 318 Voir aussi Licence Progress View 60 Projets cahier des charges 18 complier 63 conseils 24 crer 46 dboguer 62 icne 105 modles 48 officiels dApple 68 piges 23 prparer 17 structure 49 tester 62 @property 84, 99, 124 Property List Editor 201 Proprits dclarer 84 Objective-C 98 PSGroupSpecifier 233

N
Navigation barre de 113 boutons 121 choisir 111 gestes de lutilisateur 304 listes 111 listes et tableaux 127 onglets 114, 116, 121 utilitaires 113 Navigation Bar 60 Navigation-Based Application 48 Navigation Controller 124 Navigation Item 60 nodesForXPath 237 nonatomic 85 NSArray 192, 196 NSBundle 204 NSData 258 NSDate 187 NSDateFormatter 188

O
Objective-C 32, 35 Objets ajouter via Interface Builder 54 bibliothque 91 dimensions 294 mthodes, associer 91 types 58 Voir aussi Inspecteur de dimensions Opacit 182 OpenAL 275 OpenGL ES Application 48 Optimisation du code source 336 Other Sources 50 Outils de dveloppement 30 Outlets 81

Index

347

PSMultiValueSpecifier 235 PSSliderSpecifier 233 PSTextFieldSpecifier 233 PSToggleSwitchSpecifier 233 Publication 317 Voir aussi Dployer une application et Licence

SDK 7, 45 alternatives 17 configuration requise 8 installer 13 outils 8 tlcharger 9 Search Bar 60 Segmented Controls 59, 180 setAlpha 182 setBackgroundColor 182 setDateFormat 189 setLocale 189 shouldAutorotateToInterfaceOrientation 289 Simulateur diPhone 8, 105 paramtres linguistiques 64 vrifier un projet 65 Slider 60, 174 sliderClic 177 Soumettre une application Apple 328 Sous-vue ajouter 179 opacit 181 Splash screen 150 Streaming 281 Switch 60 @synthesize 99, 124 Systmes de navigation 60 SystemSoundID 278

Tab Bar Item 61 Table View. 58 Table View Cell 59 Tarifs et rtributions Apple 334 Tlcharger des images supplmentaires 119 TextField 59 Text View 59 Time 185 Timezone 185 toggleView 156 Toolbar 60 Touch Cancel 97 Touch Down 97 Touch Down Repeat 97 Touch Drag Enter 97 Touch Drag Exit 97 Touch Drag Inside 97 Touch Drag Outside 97 touchesBegan 297, 304 touchesCancelled 297 touchesEnded 297, 304 touchesMoved 297, 304 Touch Up Inside 97 Touch Up Outside 97 TouchXML 223 parseur XML 226 Transitions 127 constantes 131

Q
QuickConnect 17

R
RacineViewController 124 Rglette 173 ajouter 173 valeurs 174 reloadComponent 205 Resources 50 Root.plist 232 RootViewController 156 Rotation affichage 289 modes 290 Roulettes 184 actualiser 205 de temps 185 personnaliser 190 Round Rect Button 59 row 205

S
Saisie utilisateur, rcuprer 140 Scroll View 59

T
Tab Bar 61 Tab Bar Application 48, 117, 132

348

Dveloppez des applications originales pour iPhone et iPod Touch

U
UIAlertView 177 UIButton 83, 169 UIColor 219 UIControlState 90 UIDatePicker 185 UIFont 219 UIImage 258 UIImagePickerController 265, 272 UIImageView 170, 300 UIKit 37 UILabel 83 UINavigationBar 155 UINavigationController 116, 123 UIPickerView 190 UIPickerViewDataSource 190 UIPickerViewDelegate 190 UIScreen 250 UISegmentedControl 173, 182 UISlider 297 UISwitch 158 UITableViewCell 214, 216 UITextField 142 UITouch 297 UIView beginAnimations 130 UIViewController 94, 116 UIWebView 261 UIWindow 110

Utilitaire crer 158 interface 159, 169 lier outlets et actions 169 Voir aussi Gnrateur de mot de passe Utility Application 48 Utility Application, modle 154

W
Webcam 258 Web View 59 willAnimateSecondHalfOfRotationFromInterfaceOrientation 294 window 101 Window 60 Window-Based Application 48, 121

V
Validation Apple 335 Value Changed 98 velociteY 315 Vido framework 280 lire 280 streaming 281 View 53, 60 View-Based Application 48 viewDidAppear 130 viewDidDisappear 130 viewDidLoad 194, 236 ViewDidLoad 214 viewWillAppear 130 viewWillDisappear 130 VueDessin 283 Vues 107 basculement 169 design 143 hirarchiser 109 image, dimensions 253 navigation par onglets 125 secondaire 173 transitions 127

X
Xcode 8, 43, 46 aide la frappe 85

Y
yAccel 315

Dveloppez des applications originales pour

iPhone et iPod Touch


Transformez vos ides en applications ! Apple met disposition des dveloppeurs un kit de dveloppement complet pour crer des applications tirant partie des fonctions originales de liPhone ou de liPod Touch cran multi-touch, acclromtre, capteur photo/vido, accs aux services web... Chacun peut ensuite vendre ses applications sur iTunes. Pourquoi pas vous ? Grce cet ouvrage complet, crit dans une langue vivante et accessible, dcouvrez progressivement le langage de programmation Objective-C et les principales fonctionnalits du SDK. Pntrez dans les coulisses de liPhone, dcryptez son systme, protez de ses contrles originaux et modernes et rinventez votre tour lusage mobile. Des exemples comments vous permettront de vous exercer au dveloppement dapplications, mais aussi de rchir la conception de vos propres interfaces, an quelles soient conviviales et originales. Enn, des conseils en marketing vous aideront optimiser la diffusion de vos applications. De la cration de vos premiers projets leur publication sur iTunes, vous aurez toutes les cls en main pour devenir un dveloppeur professionnel et briller sur lApp Store.
Le SDK de liPhone et de liPod Touch Vue densemble du dveloppement pour iPhone la dcouverte du SDK de liPhone Interactions avec vos applications Les vues de votre application Les contrles spciques Lire et crire des donnes Le multimdia Ragir aux gestes de lutilisateur Publication et marketing

propos de lauteur Jean-Marc Delprato est journaliste dans la presse spcialise informatique et a collabor plusieurs revues consacres la programmation (Code(r), Windows News, Computer Arts...). Il a par ailleurs crit et traduit une quinzaine douvrages spcialiss. Niveau : Dbutant / Intermdiaire Catgorie : Dveloppement mobile

ISBN : 978-2-7440-4127-3

Pearson Education France 47 bis, rue des Vinaigriers 75010 Paris Tl. : 01 72 74 90 00 Fax : 01 42 05 22 17 www.pearson.fr

Vous aimerez peut-être aussi