Créez des applications pour iPhone, iPad et iPod Touch

Avant toute chose, il nous faut lancer Xcode, en cliquant par exemple sur l'icône présente dans le dock (figure suivante).

La fenêtre Welcome to Xcode s'affiche alors, comme à la figure suivante.

Nous allons ensuite créer un nouveau projet. Pour cela, rien de plus simple, il vous suffit de cliquer sur Create a new Xcode project. Une nouvelle boîte de dialogue s'affiche (figure suivante). Dans le volet de gauche, sous iOS, choisissez Application. Dans la partie centrale de la boîte de dialogue, choisissez Single View Application.

Cliquez sur Next, donnez le nom « premier » au projet, tapez « test » dans la zone de texte Company Identifier, sélectionnez iPhone dans la liste Device Family, et cochez la case Include Unit Tests, comme indiqué à la figure suivante.

Cliquez sur Next et choisissez le dossier dans lequel le projet sera créé (figure suivante), au besoin en cliquant sur New Folder pour créer un nouveau dossier.

Cliquez sur Create. Le projet est alors créé et ouvert dans Xcode, comme à la figure suivante.

Cette fenêtre va vous permettre de définir l'allure de l'application, de saisir du code Objective-C et de tester l'application. Pour l'instant, nous n'allons pas entrer dans les détails de la fenêtre de Xcode, cela ne ferait que vous embrouiller.

La première étape va consister à dessiner ce que l'on souhaite voir s'afficher sur l'écran du device (Je vous rappelle que device désigne le périphérique sur lequel s'exécutera l'application ; il peut tout aussi bien s'agir d'un iPhone, d'un iPod Touch ou d'un iPad. Ici, la cible de l'application étant un iPhone ou iPod Touch, device désigne ces deux périphériques).
L'interface de Xcode est composée de plusieurs modules (éditeur de code, zone de débogage, utilitaires, éditeur d'interface, etc.). Chacun d'entre eux utilise un ou plusieurs volets, accessibles à partir de la zone de navigation ou de la barre d'outils. Dans cette première étape, vous allez utiliser Interface Builder pour construire la partie visuelle de l'application. Pour ce faire, procédez selon les trois étapes suivantes en vous aidant au besoin de la figure suivante.

1. Dans la zone de navigation, cliquez sur MainStoryboard.storyboard (1) pour accéder à Interface Builder.

2. Dans la barre d'outils, cliquez sur l'icône Hide or Show the utilites (2), au-dessus du libellé View, pour révéler le volet des utilitaires.

3. Dans la partie inférieure du volet des utilitaires, cliquez sur l'icône Show the Object library (3) pour afficher la bibliothèque d'objets. Cliquez si nécessaire sur l'icône Icon View (4) pour afficher plus de contrôles dans la bibliothèque d'objets.

Glissez-déposez un contrôle Label de la bibliothèque d'objets dans la zone d'édition. Si vous n'êtes pas (encore) familiers avec cette opération, sachez qu'elle consiste à cliquer sur le contrôle Label dans la bibliothèque d'objets, à maintenir le bouton gauche de la souris enfoncé, à déplacer l'élément ainsi sélectionné au-dessus de la zone d'édition puis à relâcher le bouton de la souris, comme le montre la figure suivante.

Glissez-déposez ensuite un contrôle Round Rect Button (un bouton) de la bibliothèque d'objets dans la zone d'édition, comme indiqué à la figure suivante.

Vous allez maintenant modifier le texte affiché par défaut dans le Label. Double-cliquez sur celui-ci dans la zone d'édition, écrivez « Cliquez sur le bouton » puis appuyez sur la touche Entrée de votre clavier.
Faites de même pour afficher un texte sur le bouton : double-cliquez sur le bouton, écrivez « Cliquez ici » et appuyez sur la touche Entrée.
La zone d'édition doit maintenant ressembler à la figure suivante.

Cette application doit afficher un texte dans le Label lorsque l'utilisateur clique sur le bouton. Pour que le code Objective-C puisse agir sur les contrôles définis dans l'étape précédente, il faut relier les contrôles au code.

Cliquez sur l'icône Show the Assistant editor, au-dessus du libellé Editor, dans la partie droite de la barre d'outils (figure suivante). Cette action affiche le code du fichier ViewController.h dans un volet vertical.

Si votre écran n'est pas assez large pour visualiser la zone d'édition et le code, désactivez la zone d'utilitaires en cliquant sur l'icône Hide or Show the Utilities, dans la partie droite de la barre d'outils, au-dessus du libellé View (figure suivante).

Le fichier ViewController.h contient les déclarations relatives aux objets manipulés.

Les applications développées avec Xcode sont composées de nombreux fichiers. Certains ont un nom qui se termine par .h, comme par exemple ViewController.h dans le cas qui nous intéresse. Ces fichiers sont dits fichiers d'en-têtes.
Ils contiennent des instructions Objective-C qui permettent d'identifier les objets (c'est-à-dire les contrôles déposés sur la zone d'édition depuis Interface Builder) utilisés dans l'application. Ces instructions sont appelées déclarations.

Pour ajouter les déclarations nécessaires pour le Label, contrôle-glissez-déposez le contrôle Label du volet d'édition dans le volet de code, juste au-dessus de la dernière ligne (figure suivante). Cette technique deviendra vite habituelle. Elle consiste à :

1. placer le pointeur de la souris sur le contrôle Label dans le volet d'édition ;

2. maintenir la touche Ctrl de votre clavier enfoncée ;

3. maintenir le bouton gauche de la souris enfoncé et déplacer le contrôle Label du volet d'édition dans le volet de code, juste au-dessus de la ligne où apparaît l'instruction @end ;

4. relâcher le bouton gauche de la souris ainsi que la touche Ctrl.

Au relâchement du bouton gauche de la souris, une boîte de dialogue est affichée. Tapez « message » dans la zone de texte Name, comme à la figure suivante.

Cliquez sur Connect. Le code du fichier ViewController.h devrait maintenant ressembler à ceci :

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (weak, nonatomic) IBOutlet UILabel *message;

@end

Passons quelques minutes sur ce code si vous le voulez bien.

La première ligne, sur laquelle figure le mot import, fait référence à tout ce dont vous aurez besoin pour développer une interface utilisateur pour périphérique iOS. En ajoutant cette simple ligne au début de l'application, le code pourra afficher sur l'écran du device et répondre aux gestuelles (appui, déplacement, rotation, etc.) des utilisateurs.

La ligne 3, sur laquelle figure le mot interface, indique que l'application ViewController est de type UIViewController :

@interface ViewController : UIViewController

La ligne 5, qui contient le mot property, indique le comportement de l'objet :

@property (weak, nonatomic) IBOutlet UILabel *message;

Enfin, la ligne 7 matérialise la fin du fichier ViewController.h :

@end

Contrôle-glissez-déposez le bouton de la zone d'édition dans le volet de code, juste au-dessus de la dernière ligne, comme à la figure suivante

Au relâchement du bouton de la souris, une boîte de dialogue est affichée. Ici, nous voulons associer une action au bouton, afin qu'un message soit affiché dans le Label lorsque l'utilisateur appuie sur le bouton. Choisissez Action dans la liste déroulante Connection et tapez « reagir » dans la zone de texte Name. La boîte de dialogue devrait maintenant ressembler à la figure suivante.

Comme vous pouvez le voir sur cette image, l'action reagir (paramètre Name), exécutée lorsque l'utilisateur appuie sur le bouton (Touch Up Inside, soit « au relâchement du bouton de la souris » dans le paramètre Event), est sur le point d'être définie.

Cliquez sur Connect. Le code est complété avec une nouvelle instruction :

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (weak, nonatomic) IBOutlet UILabel *message;

- (IBAction)reagir:(id)sender;

@end

Comme vous pouvez le voir, une ligne a été ajoutée dans le code pour déclarer l'action reagir dans le code (ligne 7).

Cliquez sur l'entrée ViewController.m dans le volet de navigation. Un code assez imposant apparaît dans la partie centrale de la fenêtre. Il a (gentiment) été généré par Xcode.

//
//  ViewController.m
//  premier
//
//  Created by Michel Martin on 24/10/11.
//  Copyright (c) 2011 __MyCompanyName__. All rights reserved.
//

#import "ViewController.h"

@implementation ViewController
@synthesize message;

- (void)didReceiveMemoryWarning
{
  [super didReceiveMemoryWarning];
  // Release any cached data, images, etc that aren't in use.
}

#pragma mark - View lifecycle

- (void)viewDidLoad
{
  [super viewDidLoad];
  // Do any additional setup after loading the view, typically from a nib.
}

- (void)viewDidUnload
{
  [self setMessage:nil];
  [super viewDidUnload];
  // Release any retained subviews of the main view.
  // e.g. self.myOutlet = nil;
}

- (void)viewWillAppear:(BOOL)animated
{
  [super viewWillAppear:animated];
}

- (void)viewDidAppear:(BOOL)animated
{
  [super viewDidAppear:animated];
}

- (void)viewWillDisappear:(BOOL)animated
{
  [super viewWillDisappear:animated];
}

- (void)viewDidDisappear:(BOOL)animated
{
  [super viewDidDisappear:animated];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
  // Return YES for supported orientations
  return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

- (IBAction)reagir:(id)sender {
}
@end

Jetez un œil aux dernières lignes du code. Est-ce que cela ne vous rappelle rien ?
La ligne 62 est la copie conforme de la déclaration qui a été générée lorsque vous avez contrôle-glissé-déposé le bouton de la zone d'édition dans le fichier ViewController.h. Avez-vous remarqué les accolades, juste après le mot sender ? C'est à cet endroit que vous allez écrire le code qui permettra d'afficher un message dans le Label lorsque l'utilisateur clique sur le bouton. Complétez cette déclaration comme suit :

- (IBAction)reagir:(id)sender {
  NSString *lemessage = [[NSString alloc] initWithFormat:@"Bravo !"];
  message.text = lemessage;
}

Ce n'est pas comme ça que parle votre iPhone, mais plutôt comme ça qu'Objective-C se fait comprendre de votre device. Je sais que la syntaxe de ces instructions a de quoi surprendre. Ne vous en faites pas, et surtout, n'essayez pas de tout comprendre tout de suite. Pour l'instant, contentez-vous de voir le mot « Bravo » sur la deuxième ligne. C'est ce mot qui sera affiché sur l'iPhone lorsque vous cliquerez sur le bouton.

Dans la barre d'outils, cliquez sur l'icône Run (figure suivante).

Au bout de quelques instants, une fenêtre complémentaire nommée Simulateur iOS est affichée, et l'application apparaît dans son état initial. Cliquez sur le bouton. Le texte « Bravo ! » remplace le texte « Cliquez sur le bouton », comme à la figure suivante. Je vous félicite ! Vous venez de réaliser votre première application sur iPhone !

En résumé

• Le design des applications est défini dans la composante Interface Builder de l'application Xcode.

• La bibliothèque d'objets est accessible en cliquant sur l'icône Hide or Show the Utilities, puis sur l'icône Show the Object library.

• Pour ajouter un contrôle dans une vue, il suffit de le glisser-déposer depuis la bibliothèque d'objets dans le Storyboard.

• Pour relier un contrôle au code, contrôle-glissez-déposez-le depuis le Storyboard dans le fichier .h correspondant et indiquez si vous voulez créer un outlet ou une action.

• Le code de l'application est écrit dans le fichier .m qui correspond à la vue.

• Pour construire et exécuter l'application dans le simulateur iOS, il suffit de cliquer sur l'icône Run, dans l'angle supérieur gauche de la fenêtre de Xcode.