Tutoriel n°2 : Apprenez à utiliser Interface Builder — V2

Pour ce deuxième tutoriel, nous allons apprendre à nous servir d'Interface Builder. Rien que ça...

Pour commencer, lancer Xcode et créer un nouveau projet (File/New Project)

Choisir "Window-Based Application". La Nommer "HelloiPuP2"

Vous obtenez cette fenêtre :

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

Nous allons maintenant modifier l'Interface Homme Machine qui reste très simple ici...

Pour commencer, nous allons éditer notre projet Xcode pour le faire communiquer avec un outil proposé dans le pack de développement : "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. Parfois, vous ne pourrez faire autrement, mais vous vous en rendrez compte le moment venu !

Revenons à nos moutons...

Que souhaitons-nous faire finalement ? En fait, nous allons simplement afficher du texte dans notre application avec "Hello iPuP !".
Pour cela, nous allons devoir utiliser un UILabel. C'est un élément du UIKit, le framework contenant tout les objets dont les noms de classe commencent par UI...

Pour afficher ce label, nous avons besoin d'une vue. Nous allons donc créer un objet UIView :
Faites Files/New files

Et choisissez Objective-C class comme ceci :

Nommez-là "iPuPView"

Finalement, 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)

Maintenant, allez dans "iPuPView.h" et écrivez ceci :

#import <UIKit/UIKit.h>


@interface iPuPView : UIView {

    IBOutlet UILabel *labeliPuP;
    
}

@end

Oula, que venons-nous de faire ?
Il y a deux choses à voir :
- la déclaration classique d'un label

UILabel *labeliPuP;

- une référence vers Interface Builder

IBOutlet ...

En fait, cela va permettre de faire le lien entre vos code et Interface Builder, tout simplement.

Par ailleurs, remarquez que notre classe iPuPView hérite bien de UIView, donc tout va bien pour l'instant !
Notez qu'il n'y a pas d'héritage multiple en Objective-C, et que par convention, le nom des classes doit commencer par une majuscule (Malheureusement IpUp fait moins joli que iPuP...)

Par contre, nous allons allouer de la mémoire pour cet objet. Il faudra donc la libérer un jour. Rajoutez cette ligne dans le dealloc de iPuPView.m :

- (void)dealloc {
    [super dealloc];
    [labeliPuP release];
}

(Nous reviendrons plus longuement sur ces aspects lors d'un prochain tuto, notamment dans la fiche mémoire !)

Sauvez, et double cliquez sur MainWindow.xib. Cela va produire l'ouverture de Interface Builder :

Vous remarquerez que la fenêtre "Window" est celle de votre iPhone. C'est la vue de base, celle sur laquelle vous mettrez toute les autres.
Dans le menu "Tools", vous pouvez choisir d'afficher la librairie et l'inspecteur.

Maintenant, nous allons ajouter un objet de type UIView à notre window :

Glissez déposez cette View dans votre fenêtre

Maintenant, nous allons spécifier que cette view est iPuPView. Dans l'inspecteur, allez dans l'onglet "View Identity".

Rentrez "iPuPView" dans class :

Nous allons pour continuer, ajouter le label, qui nous servira à afficher le Texte "Hello iPuP". Toujours dans la librairie objet, glissez déposez un Label.

Vérifiez que le label est bien positionné sur la vue "iPuPView" et non pas sur la window. Pour cela, vérifiez dans cette fenêtre que vous avez bien ceci :

(Si vous ne voyez pas la fenêtre, faites "Window / Bring all to front")

Maintenant, souvenez-vous, nous avions déclaré un UILabel dans notre code... Nous allons donc relier ce label à l'élément graphique que vous venez de positionner. Cliquez sur "iPuP view" dans la navigation hiérarchique de vos vues (copie d'écran du dessus) et dans l'inspecteur, rendez-vous dans l'onglet "I pup View connections"

Oh, vous voyez le nom de la variable déclarée sous Xcode ! Fabuleux !

Et relions tout simplement ! (cliquez dans le rond vide à côté de de labeliPuP et glissez tout en maintenant le clic jusque votre label)

Vous devez obtenir ceci :

Bon, maintenant vérifions que notre label d'affiche bien avec son texte par défaut. Sauvez votre .xib, et quittez Interface Builder. Une fois sous Xcode, faites "Build / Build and run". Le simulateur devrait se lancer (ou votre iPhone selon)...
...

Comment ça il n'y a rien ?! Aurions-nous oublié quelque chose ? Réfléchissons... Est-ce que qu'à un moment, nous ajoutons la vue "iPuPView" à notre window ? Et bien non. Interface Builder ne fait pas tout le travail à notre place.

Rendez-vous dans HelloiPuP2AppDelegate .h pour importer iPuPView.h et déclarer une vue comme tout à l'heure en IBOutlet. Cela revient à faire :

#import <UIKit/UIKit.h>
#import "iPuPView.h"

@interface HelloiPuP2AppDelegate : NSObject <UIApplicationDelegate> {
    UIWindow *window;
    IBOutlet iPuPView *viewiPuP;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) iPuPView *viewiPuP;

@end

Dans le HelloiPuP2AppDelegate.m :

#import "HelloiPuP2AppDelegate.h"

@implementation HelloiPuP2AppDelegate

@synthesize window;
@synthesize viewiPuP;

- (void)applicationDidFinishLaunching:(UIApplication *)application {    

    [window addSubview:viewiPuP]; // on ajoute la vue viewiPuP en tant que subView de window 
    // revient à placer viewiPuP au dessus de window
    [window makeKeyAndVisible];
}


- (void)dealloc {
    [viewiPuP release];
    [window release];
    [super dealloc];
}


@end

Et même manipulation que tout à l'heure, il faut relier sous IB votre viewiPuP :
Cliquez sur "Hello iPuP delegate"

Reliez à votre vue

Vous devriez obtenir

Ouf maintenant, tout va bien ! Vous pouvez vérifier en refaisant un build and run.
Bon, et on le met ce 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 lorsque votre vue va être chargée en mémoire depuis le .xib (on dit nib car historiquement, l'extension était .nib au lieu de .xib (nib pour "NextStep Interface Builder").

C'est très simple : dans iPuPView.m

écrivez la méthode suivante :

- (void) awakeFromNib {
    [labeliPuP setText:@"Hello iPuP !"];
}

Le - nous dit que 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 {
    [labeliPuP 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

Notez que l'on pourrait faire :

- (void) awakeFromNib {
    NSLog(@"awakeFrom nib");
    [labeliPuP setText:@"Hello iPuP !"];
    [labeliPuP sizeToFit]; // la taille du label va s'adapter automatiquement
}

Voilà, vous savez maintenant comment utiliser Interface Builder.

sources

Attaquez-vous au tuto n°3 !

Ipodishima

commentaires

Remonter

Retour