Tutoriel no2

Tutoriel n°2 : "Apprenez à utiliser Interface Builder" par Ipodishima...
Pour ce deuxième tutoriel, nous allons apprendre à nous servir d'Interface Builder. Rien que ça...
1) Créons notre projet
Pour commencer, lancer XCode et créer un nouveau projet (File/New Project)
Choisir "Window-Based Application". La Nommer "HelloiPuP"
Vous obtenez cette fenêtre :
www.iPuP.fr! !
!
!
!
!
!
!
!
!
!
!
!
Page 1 de 12
Tutoriel n°2 : "Apprenez à utiliser Interface Builder" par Ipodishima...
Diantre, mais à quoi correspondent tous ces fichiers?
CoreGraphics.framework, Foundation.framwork, UIKit.framework - Vous vous en doutez, ou pas, ce
sont les librairies fournies par Apple que vous allez utiliser dans votre application
HelloiPuP.app - C'est l'application que vous pourrez installer sur l'iPhone, si vous avez payé bien sûr...
HelloiPuP_Prefix.pch - C'est un autre fichier include. Vous n'avez cependant pas besoin de l'inclure
dans vos fichiers, car il est compilé séparément.
HelloiPuPAppDelegate.h - C'est un fichier d'entête très similaire à ce que vous trouvez en C ou C++. Il
contient toutes les déclarations.
HelloiPuPAppDelegate.m - C'est ici que vous allez commencer
instructions de votre programme.
. Ce fichier va contenir les
Info.plist - Ce fichier contient diverses informations à propos de votre programme. Vous n'allez pas
vous en servir avant de débugger votre application sur votre iPhone ou iPod Touch
main.m - Comme dans beaucoup de langages, ce fichier contient la fonction "Main". C'est là où
l'exécution du programme débute. Typiquement, ce main lance le programme. Vous ne devriez pas
avoir besoin de l'éditer.
MainWindow.xib - Ce fichier contient l'interface graphique de votre fenêtre. En double cliquant dessus,
vous lancerez "Interface Builder" pour dessiner votre interface. Ce fichier ne contient pas de code.
Ceci fait, choisissez ensuite votre cible pour débugger : soit le simulateur, soit votre iPhone si vous
avez payé votre licence.
www.iPuP.fr! !
!
!
!
!
!
!
!
!
!
!
!
Page 2 de 12
Tutoriel n°2 : "Apprenez à utiliser Interface Builder" par Ipodishima...
2) Amusons-nous un peu avec notre IHM...
Nous allons maintenant modifier l'Interface Homme Machine qui reste très simple ici...
Double-cliquez sur "MainWindow.xib"
Cela va lancer "Interface Builder"
Interface Builder est un outil de développement proposé par Apple pour faciliter les créations
d'Interface Homme-Machine. Bien entendu, vous pouvez tout faire en dur, c'est-à-dire par
programmation, mais cela deviendra vite ingérable lorsque vous aurez plusieurs vues. Vous
comprendrez par la suite...
Revenons à nos moutons...
Vous allez obtenir ceci:
Vous remarquerez que la fenêtre "Window" est celle de votre iPhone.
Dans le menu "Tools", vous pouvez choisir d'afficher la librairie et l'inspecteur.
Nous allons maintenant créer une View.
Qu'est-ce qu'une view ? Un objet UIView qui fait l'interface entre le système et l'utilisateur. Vous
pouvez-y placer des boutons, des labels, ... et cet objet permet la gestion des événements (par
exemple : le clic sur un bouton "new game" entraîne le lancement d'une nouvelle partie)
www.iPuP.fr! !
!
!
!
!
!
!
!
!
!
!
!
Page 3 de 12
Tutoriel n°2 : "Apprenez à utiliser Interface Builder" par Ipodishima...
Pour cela, choisissez dans la librairie "Object", un "View".
Cliquez une fois pour sélec1onner l’objet
Détails sur l’objet sélec1onné
www.iPuP.fr! !
!
!
!
!
!
!
!
!
!
!
!
Page 4 de 12
Tutoriel n°2 : "Apprenez à utiliser Interface Builder" par Ipodishima...
Glissez déposez cette View dans votre fenêtre
www.iPuP.fr! !
!
!
!
!
!
!
!
!
!
!
!
Page 5 de 12
Tutoriel n°2 : "Apprenez à utiliser Interface Builder" par Ipodishima...
Nous allons maintenant faire de cet View une classe. Dans l'inspecteur, allez dans l'onglet "Identity".
Nommez cette classe "iPuPView".
Nous allons pour continuer, ajouter un Label, qui nous servira à afficher le Texte "Hello iPuP". Toujours
dans la librairie objet, glissez déposez un Label.
Cliquez hors du Label mais dans "Window" pour se positionner sur iPuPView. Vérifiez dans l'inspecteur
"Identity" que vous avez bien la classe "iPuPView" affichée.
www.iPuP.fr! !
!
!
!
!
!
!
!
!
!
!
!
Page 6 de 12
Tutoriel n°2 : "Apprenez à utiliser Interface Builder" par Ipodishima...
Il faut ensuite "lier" le label à iPuPView. Pour cela, cliquez sur "+" dans "class outlet" et nommez
l'outlet "helloLabel". Spécifiez son type (id est un type d'objet "indéfini" que vous pourrez utiliser par
exemple dans des fonctions recevant des objets dont vous ne voulez pas spécifier le type) "UILabel"
Vous obtenez ceci:
www.iPuP.fr! !
!
!
!
!
!
!
!
!
!
!
!
Page 7 de 12
Tutoriel n°2 : "Apprenez à utiliser Interface Builder" par Ipodishima...
Nous allons maintenant relier ce label à notre fenêtre. Pour cela, cliquez sur l'onglet "Connections" de
l'inspecteur. Cliquez sur le petit rond à côté de helloLabel et glissez jusqu'au Label sur la fenêtre de
l'iPhone:
Vous obtenez ceci:
www.iPuP.fr! !
!
!
!
!
!
!
!
!
!
!
!
Page 8 de 12
Tutoriel n°2 : "Apprenez à utiliser Interface Builder" par Ipodishima...
Nous allons maintenant retourner sous XCode, mais avant il nous faut "écrire" les classes. En effet,
tout ce que vous venez de faire n'a pas "influencé" XCode. C'est-à-dire que la classe que vous avez
créée n'est pas dans votre projet. Par conséquent, votre objet Label n'y est pas non plus!
Choisissez File/Write class files, cela ajoutera les fichiers iPuPView.m et iPuPView.h (selon la
configuration proposée ci-dessous) à votre projet. Essayez! c'est l'adopter...
puis cochez
www.iPuP.fr! !
!
!
!
!
!
!
!
!
!
!
!
Page 9 de 12
Tutoriel n°2 : "Apprenez à utiliser Interface Builder" par Ipodishima...
3) Retournons sous XCode
Glissez votre .h et .m dans le dossier "Classes"
dans iPuPView.h, vous avez ce code :
@interface iPuPView : /* Specify a superclass (eg: NSObject or NSView) */ {
IBOutlet UILabel *helloLabel;
}
@end
Faites hériter de UIView:
@interface iPuPView : UIView {
IBOutlet UILabel *helloLabel;
}
@end
Notez qu'il n'y a pas d'héritage multiple en Objective-C
www.iPuP.fr! !
!
!
!
!
!
!
!
!
!
!
!
Page 10 de 12
Tutoriel n°2 : "Apprenez à utiliser Interface Builder" par Ipodishima...
Mais pourquoi ne pas mettre de texte dans notre label ?
Il suffirait de mettre le texte souhaité directement depuis Interface Builder, mais nous allons voir une
autre méthode, en utilisant awakeFromNib. Et oui, il faut bien compliquer un peu les choses.
Pour définir notre texte dans le label par programmation, utilisons une méthode awakeFromNib. Cette
méthode se lance lors de la création par Interface Builder de votre appli, et initialise ce que vous
souhaitez.
Dans HelloiPuPAppDelegate.m, importez iPuPView.h
#import "HelloiPuPAppDelegate.h"
#import "iPuPView.h"
@implementation HelloiPuPAppDelegate
@synthesize window;
........ // suite du code, ne rien toucher
Bon, il nous faut maintenant lui mettre du texte à ce petit label.
C'est très simple : dans iPuPView.m, écrivez la méthode suivante :
- (void) awakeFromNib {
[helloLabel setText:@"Hello iPuP !"];
}
Le - nous dit c’est une méthode d’instance. Le +, moins courant, est pour une méthode de classe
(static en C++).
vous retrouvez ceci :
#import "iPuPView.h"
@implementation iPuPView
- (void) awakeFromNib {
[helloLabel setText:@"Hello iPuP !"];
}
@end
Faites un build&go, et vous allez voir un "Hello..." s'afficher. Notre Label n'est pas assez grand,
réouvrez Interface Builder et agrandissez votre Label, sauvez et ...
www.iPuP.fr! !
!
!
!
!
!
!
!
!
!
!
!
Page 11 de 12
Tutoriel n°2 : "Apprenez à utiliser Interface Builder" par Ipodishima...
Tadam
Voilà, vous savez maintenant comment utiliser Interface Builder.
sources
Attaquez-vous au tuto n°3 !
www.iPuP.fr! !
!
!
!
!
!
!
!
!
!
!
!
Page 12 de 12