3

la dcouverte du SDK de liPhone et de liPad

Au sommaire de ce chapitre

Crer votre premier projet pour iPhone et iPad Matriser les outils de cration dinterfaces Tester et dboguer votre premier projet

Aprs cette premire dcouverte des lments fondamentaux du dveloppement pour liPhone et liPad, 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 iOS! Comme vous le constaterez travers ce premier exercice, ce sont les deux faces dune mme pice ; vous effectuerez des allers-retours incessants entre ces deux applications de dveloppement, en vous arrtant rgulirement au Simulateur iOS 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 ou iPad depuis Xcode. Mais ce stade,

2011 Pearson Education France Dveloppez des applications originales pour iPhone, iPad et iPod touch, 2e dition Jean-Marc Delprato

48

Dveloppez des applications originales pour iPhone, iPad et iPod

il est encore inutile de manipuler votre premier projet dans des conditions relles; focalisezvous 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 et iPad 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. 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. linstar du systme dexploitation que se partagent liPhone et liPad, les techniques et les outils de dveloppement sont galement semblables en tout point; nous parcourrons successivement ces deux plates-formes afin de mettre en relief les diffrences essentielles que vous devez retenir. 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 iOS

Au cours du premier chapitre, vous avez install le SDK de liPhone et de liPad 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 liOS, 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, construction 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 liOS Dev Center compltent galement cette premire approche. Pour cela, cliquez sur le lien Getting Started with Xcode. Si vous vous sentez en confiance, nhsitez pas dcocher la case Show this window when Xcode launches pour ne plus tre importun par la suite. Cliquez alors sur le lien Create a new Xcode project.

2011 Pearson Education France Dveloppez des applications originales pour iPhone, iPad et iPod touch, 2e dition Jean-Marc Delprato

Chapitre 3 Figure 3.1

Lcran de bienvenue de Xcode.

la dcouverte du SDK de liPhone et de liPad

49

La liaison avec votre propre iPhone ou iPad Si vous avez connect votre iPhone ou votre iPad 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 vos propres priphriques 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 ou iPad: toutes ces plates-formes figurent ainsi dans le volet gauche de lassistant. Cliquez sur lintitul Application, en dessous de la rubrique iOS, pour dcouvrir les sept modles associs ce type de dveloppement. linstar des modles de documents dun traitement de texte par exemple, ils reprsentent sept 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):

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. Ce type de modle nest disponible que pour les applications iPhone pures. OpenGL ES Application. Ce modle prpare tous les lments ncessaires aux applications graphiques, en particulier celles qui lancent des animations ou des effets visuels. Il se dcline en deux variantes, prvues spcifiquement pour liPhone ou liPad.

2011 Pearson Education France Dveloppez des applications originales pour iPhone, iPad et iPod touch, 2e dition Jean-Marc Delprato

50

Dveloppez des applications originales pour iPhone, iPad et iPod

Tab Bar Application. Ce modle cre rapidement une application dote dun systme de navigation par onglets avec une vue prdfinie pour le premier dentre eux. L encore, vous pouvez choisir un modle prpar pour liPhone ou liPad. 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. Dans la mesure o les utilitaires constituent lune des catgories-vedettes de liPhone, seul le mobile dApple est concern par ce modle. 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. Vous devez pleinement la personnaliser par la suite et vous avez donc la possibilit de choisir un modle prvu pour liPhone ou liPad. Window-based Application. Il sagit dun modle vierge, qui ne dispose que dune instance de la fentre principale de liPhone ou de liPad. Privilgiez-le si vous souhaitez dmarrer dun canevas pur, dans lequel il reste encore tout faire! Dans la mesure o il sagit dun modle vierge, vous pouvez indiffremment choisir une version adapte liPhone, liPad ou aux deux plates-formes (Universal). Split View-based Application. Spcifique liPad, ce modle dmarre un projet avec une vue partage: deux vues sont ainsi prpares et cohabitent sous forme de colonne, limage de lapplication Mail incluse par dfaut sur liPad. Nous reviendrons largement sur cette disposition spcifique la tablette dApple par la suite; les dveloppeurs web de la premire heure peuvent retenir que sa prsentation sapparente aux ancestrales frames du HTML 3.2.

Figure 3.2.
Les diffrents modles associs la cration dun nouveau projet pour iOS sous Xcode.

2011 Pearson Education France Dveloppez des applications originales pour iPhone, iPad et iPod touch, 2e dition Jean-Marc Delprato

Chapitre 3

la dcouverte du SDK de liPhone et de liPad

51

Pour dmarrer du bon pied, nous allons nous focaliser dans un premier temps sur une simple application iPhone, dans laquelle nous souhaitons afficher un texte lcran et dposer une srie de contrleurs. Cliquez sur le modle View-based Application, choisissez iPhone dans le menu droulant Product, puis cliquez 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 projetdans 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 iOS

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.

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.

2011 Pearson Education France Dveloppez des applications originales pour iPhone, iPad et iPod touch, 2e dition Jean-Marc Delprato

52

Dveloppez des applications originales pour iPhone, iPad et iPod

Other Sources. Ce groupe runit tous les scripts et codes sources qui ne correspondent pas des classes en Objective-C. Par dfaut, Xcode cre automatiquement deux fichiers indispensables:

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

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:

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.

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.

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

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
2011 Pearson Education France Dveloppez des applications originales pour iPhone, iPad et iPod touch, 2e dition Jean-Marc Delprato

Chapitre 3

la dcouverte du SDK de liPhone et de liPad

53

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. Les premiers contours du dveloppement dune application universelle, ou dune dclinaison pour liPad dun utilitaire pour liPhone, sesquissent: sans rinventer ncessairement la logique interne de votre application, vous serez ainsi en mesure de charger dautres interfaces ou de pointer vers des classes spcifiques chaque plate-forme. Cest lune des forces du kit de dveloppement pour iOS; vous dclinez rapidement votre savoir-faire et votre travail lune ou lautre de ces platesformes. Nous allons dailleurs prcisment nous en assurer: enfilez votre blouse de designer, nous allons raliser linterface de notre premier projet.

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.
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 OSX, 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 iOS. 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

2011 Pearson Education France Dveloppez des applications originales pour iPhone, iPad et iPod touch, 2e dition Jean-Marc Delprato

54

Dveloppez des applications originales pour iPhone, iPad et iPod

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 dinterfaces du SDK de liOS. Mme la documentation officielle na pas envisag de corriger ce rflexeet prserve lappellation dorigine !

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 sousclasses. 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 liOS. 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 associe un fichier nib spcifique linstance dune classe ou sous-classe. La sous-classe
2011 Pearson Education France Dveloppez des applications originales pour iPhone, iPad et iPod touch, 2e dition Jean-Marc Delprato

Chapitre 3

la dcouverte du SDK de liPhone et de liPad

55

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.
Figure 3.5
La fentre BienvenueViewController dtaille le contenu du fichier nib.

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 iOS (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. Pour liPad, cette cohabitation entre une srie de vues est encore plus explicite, comme nous le confirme le modle split-view dont le principe est prcisment de juxtaposer deux vues.

Ajouter des objets avec Interface Builder

Tout lintrt dInterface Builder rside dans son mode de cration intuitif et cohrent: vous visualisez simplementles instances de vos classes et vous manipulez une bibliothque riche

2011 Pearson Education France Dveloppez des applications originales pour iPhone, iPad et iPod touch, 2e dition Jean-Marc Delprato

56

Dveloppez des applications originales pour iPhone, iPad et iPod

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.
Figure 3.6
La fentre View correspond la reprsentation visuelle de linstance View. Vous y dfi nissez directement linterface de votre projet.

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. Mieux encore : Interface Builder gre de manire naturelle les imbrications et hritages de classes et dobjets (voir Figure 3.8). Dans de nombreux cas de figure, il est en effet 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 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.

2011 Pearson Education France Dveloppez des applications originales pour iPhone, iPad et iPod touch, 2e dition Jean-Marc Delprato

Chapitre 3 Figure 3.7

La bibliothque dobjets du framework UIKit diOS.

la dcouverte du SDK de liPhone et de liPad

57

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

2011 Pearson Education France Dveloppez des applications originales pour iPhone, iPad et iPod touch, 2e dition Jean-Marc Delprato

58

Dveloppez des applications originales pour iPhone, iPad et iPod

Label. Il sagit dun simple "libell", soit un texte statique apparaissant sur lcran de liPhone ou de liPad 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.

Slectionnez cet objet, maintenez le bouton gauche de la souris enfonc et relchez-le au-dessus 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 ou liPad de vos "clients". Pour vous en persuader, droulez le menu Tools et cliquez sur Attributes Inspector, aprs avoir slectionn le libell. Dans la fentre qui apparat, vous reconnaissez les options traditionnelles dun diteur de texte (voir Figure 3.10). Vous pouvez ainsi changer la couleur et la taille du texte, son alignement, la porte de son ombreou son opacit par exemple. Multipliez les essais afin daboutir au rsultat escompt. Vous pouvez invoquer loutil Inspector pour chaque objet figurant sur linterface utilisateur, 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.

1. Acronyme de what you see is what you get : ce que vous voyez est ce que vous obtiendrez.
2011 Pearson Education France Dveloppez des applications originales pour iPhone, iPad et iPod touch, 2e dition Jean-Marc Delprato

Chapitre 3

la dcouverte du SDK de liPhone et de liPad

59

Figure 3.10
On dfi nit simplement les proprits de notre libell, laide de loutil Inspector dInterface Builder.

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 (Inputs & Values) et les fentres et systmes de navigation (Windows, Views & Bars). Voici les principales classes correspondantes:
2011 Pearson Education France Dveloppez des applications originales pour iPhone, iPad et iPod touch, 2e dition Jean-Marc Delprato

60

Dveloppez des applications originales pour iPhone, iPad et iPod

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.

Table View. La vue Table met en place un tableau visant accueillir des informations, la manire du carnet de contacts de liPhone par exemple ou de la liste des derniers messages de lapplication Mail de liPad. 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 et liPad supportent 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. Map View. Cet objet ajoute intgralement une carte de type Google Maps votre projet: lutilisateur la manipule du bout des doigts et vous pouvez mme choisir dafficher une vue satellite ou une carte (ou les deux, linstar du service de cartographie de Google). 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. Ad BannerView. Si vous envisagez dajouter des bannires publicitaires votre application iOS, cet objet rserve une portion de lcran laffichage de telles rclames interactives (par dfaut, 50 pixels de hauteur). Son vritable intrt rside dans la prparation de tous les mcanismes dinteraction: ainsi, si un message publicitaire prvoit laffichage dun site web ou dune vido, liPhone ou liPad dclenchent les applications concernes, comme Safari par exemple, tout en notifiant votre propre application de la bascule. Nous revenons en dtails sur ce systme de revenus publicitaires au Chapitre 12.

La saisie de valeurs. Que vaut une application pour iPhone ou iPad si vous ne pouvez pas interagir avec elle? Sur les deux plates-formes 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.

2011 Pearson Education France Dveloppez des applications originales pour iPhone, iPad et iPod touch, 2e dition Jean-Marc Delprato

Chapitre 3

la dcouverte du SDK de liPhone et de liPad

61

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. 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 ou de liPad et qui vous permet de naviguer parmi les applications que vous avez installes.

Les systmes de navigation. Sobre et pur, lcran de liPhone ou de liPad 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.

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.

2011 Pearson Education France Dveloppez des applications originales pour iPhone, iPad et iPod touch, 2e dition Jean-Marc Delprato