Pour ce deuxième tutoriel, nous allons apprendre à nous servir d’Interface Builder. Rien que ça… cool
1) Créons notre projet
Pour commencer, lancer XCode et créer un nouveau projet (File/New Project)
https://www.ipup.fr/forum/userimages/Image-4.jpg
Choisir “Window-Based Application”. La Nommer “HelloiPuP”
Vous obtenez cette fenêtre :
https://www.ipup.fr/forum/userimages/Image-5.jpg
Diantre, mais à quoi correspondent tous ces fichiers? neutral
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… cool
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 big_smile . Ce fichier va contenir les instructions de votre programme.
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.
https://www.ipup.fr/forum/userimages/Image-10.jpg
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… roll
Vous allez obtenir ceci
https://www.ipup.fr/forum/userimages/Image-11.jpg
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)
Pour cela, choisissez dans la librairie “Object”, un “View”.
https://www.ipup.fr/forum/userimages/Image-12.jpg
Glissez déposez cette View dans votre fenêtre
https://www.ipup.fr/forum/userimages/Image-13.jpg
Nous allons maintenant faire de cet View une classe. Dans l’inspecteur, allez dans l’onglet “Identity”.
Nommez cette classe “iPuPView”
https://www.ipup.fr/forum/userimages/Image-14.jpg
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.
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 :
https://www.ipup.fr/forum/userimages/Image-15.jpg
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 :
https://www.ipup.fr/forum/userimages/Image-16.jpg
Vous obtenez ceci
https://www.ipup.fr/forum/userimages/Image-17.jpg
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! big_smile
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… wink
https://www.ipup.fr/forum/userimages/Image-18.jpg
puis cochez
https://www.ipup.fr/forum/userimages/Image-19.jpg
3) Retournons sous XCode
Glissez votre .h et .m dans le dossier “Classes”
https://www.ipup.fr/forum/userimages/Image-9.jpg
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
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. big_smile
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++). tongue
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 …
Tadam cool