Aller au menu - Aller au contenu

Icône Un premier développement

Par MichelMartin
Mise à jour : 01/02/2012
Difficulté : Facile Facile Durée d'étude : 1 heure Creative Commons BY-NC-SA
19 893 visites depuis 7 jours, dont 1 223 sur ce chapitre classé 18/786
Le but de ce premier développement est de vous faire prendre contact avec Xcode et le langage Objective-C. N'essayez pas de comprendre tout ce qui va être dit ici : cela deviendra de plus en plus clair au fur et à mesure de votre apprentissage.

Vous verrez, cette première application sera vraiment très basique. Un clic sur l'écran remplacera un texte par un autre. Ça n'a l'air de rien dit comme ça, mais ce n'est déjà pas si mal.
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Création de l'application

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

L'icône de Xcode dans le dock


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

Fenêtre de lancement de Xcode


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.

Création d'un nouveau projet dans Xcode


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.

Les options du nouveau projet


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.

Il faut choisir l'emplacement du projet


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

Le projet est créé et ouvert


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.

Vous vous demandez peut-être pourquoi avoir choisi une application de type Single View, ou encore pourquoi avoir tapé « test » dans la zone de texte Company Identifier. Ces deux questions resteront pour l'instant sans réponse. Plutôt que de tout introduire en même temps et de vous noyer sous des détails qui ne manqueraient pas de s'entremêler dans votre tête, j'ai choisi de ne pas répondre pour l'instant à ces deux questions… qui sont toutefois bien légitimes.
Retour en haut

Ajout des contrôles sur l’interface

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.


Affichage de 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.

Glisser-déposer un contrôle Label


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.

Le contrôle Round Rect Button


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.

La zone d'édition que vous devriez avoir
Retour en haut

Liaison des contrôles au code

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.

L'icône Show the Assistant editor


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

L'icône Hide or Show the Utilities


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

Déclarations, objets ? Je n'y comprends rien !


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.


Un simple contrôle-glisser-déposer permet d'ajouter des déclarations dans le volet d'édition


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.

Une boîte de dialogue s'affiche au relâchement du bouton de la souris


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

Code : Objective-C
1
2
3
4
5
6
7
#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 :

Code : Objective-C
1
@interface ViewController : UIViewController


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

Code : Objective-C
1
@property (weak, nonatomic) IBOutlet UILabel *message;


Pour l'instant, ne vous préoccupez pas des paramètres qui font suite au mot interface. Ces paramètres sont générés automatiquement par Xcode et leur valeur importe peu pour l'instant. Nous y reviendrons un peu plus loin dans ce livre.


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

Code : Objective-C
1
@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
Un contrôle-glisser-déposer au-dessus de la dernière ligne de code


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.

La boîte de dialogue permet d'associer une action au bouton


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 :

Code : Objective-C
1
2
3
4
5
6
7
8
9
#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).
Retour en haut

Ecriture du code

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.

Code : Objective-C
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
//
//  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


Vous avez sans doute remarqué que certaines lignes de code ne sont pas alignées à gauche ; c'est ce qu'on appelle indenter son code. Le but est d'améliorer la lisibilité du code en définissant visuellement sa structure. Vous pouvez utiliser des tabulations ou des espaces, selon votre préférence.


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 :

Code : Objective-C
1
2
3
4
- (IBAction)reagir:(id)sender {
  NSString *lemessage = [[NSString alloc] initWithFormat:@"Bravo !"];
  message.text = lemessage;
}


Mais qu'est-ce que tout ce charabia ? C'est comme ça que parle mon iPhone ?


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.
Retour en haut

Construction et exécution

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

L'icône Run de la barre d'outils


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 !

Votre première application iPhone !
Retour en haut

Q.C.M.

Comment accéder au fichier d'en-têtes d'une application ?
Pour ajouter des contrôles (zones de texte, boutons) dans une application pour iOS, vous devez utiliser :
Pour relier un contrôle au code, le plus simple consiste à utiliser :

Statistiques de réponses au QCM

Retour en haut

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.
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
51 commentaires pour "Un premier développement"
Note moyenne : 3.41 / 4 (189 votes)
Pseudo Commentaire
Hors ligne MichelMartin # Posté le 01/05/2012 à 20:54:54

Avis : Très bon Groupe : Auteurs

Boujour reip,

Attention, le glisser-déposer du bouton sur le fichier .h est sensible. Il faut bien relâcher le bouton de la souris quand le pointeur se trouve au-dessus du @end final. Est-ce que c'est ce que vous faites ?
Je pense que cette technique doit également fonctionner dans Xcode 4.3.2, mais je ne peux pas le confirmer car je suis sous Xcode 4.2.
Hors ligne XPits # Posté le 03/05/2012 à 12:21:36

Bonjour,

après avoir suivi le tuto, j'ai obtenu un écran noir sur le simulateur. En regardant de plus près le code généré dans ViewController.m, je me suis aperçu qu'en ce qui me concerne les fonctions suivantes n'avaient pas été générées:
- (void)didReceiveMemoryWarning
- (void)viewWillAppear:(BOOL)animated
- (void)viewDidAppear:(BOOL)animated
- (void)viewWillDisappear:(BOOL)animated
- (void)viewDidDisappear:(BOOL)animated

Donc, après un copier coller de ces méthodes depuis ce tuto (je sais c'est pas bien), le tuto a parfaitement compilé et l'exécution est Ok.

Pourriez-vous m'indiquer pourquoi ce code n'a pas été généré ?

Env:
- Mac OS X 10.7.2
- xcode 4.3.2


En vous remerciant,

Xavier
Hors ligne Libelull # Posté le 10/05/2012 à 17:40:56

Salut à tous
J'ai un petit souci, votre dernier Xcode est totalement diffèrent de ma version 3.2.6.
Rien pour le début je n'ai tout les menus et les choix que vous avez, il faut que je me rachète un Mac :)
Cheers
M
Hors ligne tybbo # Posté le 12/05/2012 à 14:57:09
Avatar

 Bonjour tout le monde !
j'ai lu vos commentaires et d'après ce que j'ai compris, avant le tuto était sous xcode 3.2.
Je suis sous snow leopard donc est il possible de récupérer l'ancienne version de ce tuto quelque part car comme le commentaire précedent les menus sont différents dès la première étape.
Merci et un grand bravo !
Hors ligne letisbee # Posté le 13/05/2012 à 12:30:50

Bonjour !
Pour commencer, je tiens à dire que le tuto a l'air génial, même si je n'en suis qu'au début :)
Ensuite, pour parler de choses qui fâchent, j'ai un problème... Quand je fais glisser le label dans le volet de code, que je remplis le nom dans la boite de dialogue puis que je clique sur "connect", un message d'erreur s'affiche :

"Could not insert new outlet connection : could not find any information for the class named ViewController"

Je ne sais pas trop comment résoudre le problème, n'y connaissant rien ...

Merci de votre aide !

Voir tous les commentaires