Tutoriel n°4 : Gestion de quelques éléments d'interface

Dans ce tutoriel nous allons apprendre à gérer des éléments simples d’interface (label, bouton, etc...)
Bref nous obtiendrons quelque chose du genre :

Pour cela, lancer Xcode et choisir «Window-Based Application» dans la fenêtre New Project. Pour que tout soit plus simple nous allons tous nommer notre projet «iPuP».

1) Création de notre vue :

Nous devons tout d’abord créer une vue.  Sélectionnons donc File->New File et dans la rubrique User Interface choisissons View.
Nommons cette vue «iPuPView»:

Pour s’attaquer à l’interface double-cliquer sur le fichier «iPuPView.xib».

Nous allons utiliser ici un text field, un boutton et un label.

Comme nous l’avons vu dans le tutoriel n°2 il faut rajouter nos éléments dans notre vue :

Bien sûr vous pouvez personnaliser tous ces éléments avec titres, images etc...

Sauvons notre interface et retournons à Xcode.

2) Création d’un View Controller :

Il nous faut maintenant créer ce que l’on nomme un View Controller.

Mais qu’est ce donc qu’un View Controller ?

    Les View Controllers (de type UIViewController)  jouent un rôle très important pour les applications iPhone car ce sont eux qui gèrent les vues, la navigation entre elles et la mémoire. C'est pour cette raison que chaque vue doit être connectée à un View Controller.

Pour créer un View Controller selectionnons File->New File puis UIViewControllersubclass

Nommons le «iPuPViewController».

Dans le header (iPuPViewController.h), il nous faut créer les objets pour les éléments d’interface que nous avons défini dans notre vue :

#import <UIKit/UIKit.h>


@interface iPuPViewController : UIViewController <UITextFieldDelegate> {
    
    IBOutlet UITextField *textField;
    IBOutlet UILabel *lblMessage;
    NSString *sNom;
}

@property (nonatomic, retain) IBOutlet UITextField *textField;
@property (nonatomic, retain) IBOutlet UILabel *lblMessage;
@property (nonatomic, copy) NSString *sNom;

-(IBAction)affichageDuTexteLorsDuClick:(id)sender;

@end

Nous avons ici fait hériter notre classe de la super classe UIViewController.

Le mot clé IBOutlet spécifie au compilateur de rendre ces objets disponibles pour Interface Builder.

Nous avons également déclaré une méthode de gestion de l’événement du clic sur le bouton. Cette méthode est déclarée à l’aide du mot-clé IBAction qui spécifiera au compilateur de rendre cette méthode disponible pour Interface Builder. Elle prend également un paramètre de type id (qui est générique)

Voilà pour le fichier header. Passons donc à l’implémentation de la méthode dans le fichier source (iPuPViewController.m) :

#import "iPuPViewController.h"


@implementation iPuPViewController
@synthesize lblMessage, textField, sNom;

-(IBAction)affichageDuTexteLorsDuClick:(id)sender {
    
}

Vous avez envie de vous tirer les cheveux ? Lisez la suite ... sinon, sautez quelques lignes... 

---

@property et @synthesize :



Quand une propriété est “synthesized”, le compilateur va générer des méthodes d'accès aux propriétés conformément aux attributs spécifiés dans la déclaration @property.
Par exemple, si vous spécifiez une propriété "readonly", le compilateur va générer seulement un "getter" mais pas de "setter",


retain est un message envoyé pour dire que l'on réserve l'objet "durablement" cf la page 35 ou paragraphe 8.2 du document de Pierre Chatelier.

---

Voilà, si vous avez lu, vous vous sentirez peut-être moins bête en vous couchant cette nuit. Sinon, rappelez-vous seulement que @property et @synthesize servent pour communiquer entre les classes.


Ensuite il faut écrire la méthode appelée lors du clic :

-(IBAction)affichageDuTexteLorsDuClick:(id)sender {
    //Recevoir le nom et l'inscrire dans une variable
    self.sNom = textField.text;
    
    //Création d'une variable temporaire
    NSString *sTemp = nil;
    
    //Crétion du texte
    sTemp = [[NSString alloc] initWithFormat:@"%@ fait un big up à iPuP",sNom];
    
    //Envoi du texte dans le label
    lblMessage.text = sTemp;
    
    //Pour libérer la mémoire après un alloc
    [sTemp release];
}

-(BOOL)textFieldShouldReturn:(UITextField *)leTextField { 
    if (leTextField == textField )
    {
        [leTextField resignFirstResponder];
    }
    return YES;
}

La seconde méthode permet de fermer correctement le Text Field après la saisie.

3) Ajout de notre vue à la fenêtre principale :

Ajoutons maintenant notre vue comme sous-vue de notre fenêtre principale pour que celle-ci s’affiche lors de l’éxécution.
Pour cela attachons nous d’abord au fichier header iPuPAppDelegate.h :

#import <UIKit/UIKit.h>

//Déclaration dite "forward"
@class iPuPViewController; 

@interface iPuPAppDelegate : NSObject <UIApplicationDelegate> {
    IBOutlet UIWindow *window;
    IBOutlet iPuPViewController *viewController;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet iPuPViewController *viewController;
@end

Nous avons ici déclaré un objet de type iPuPViewController. Comme nous pouvons le voir nous avons dû faire une déclaration dite forward, pour préciser au compilateur que la classe iPuPViewController était défini ailleurs.


Passons ensuite au fichier source iPuPAppDelegate.m dans lequel nous devons rendre notre vue visible :

#import "iPuPAppDelegate.h"
#import "iPuPViewController.h"

@implementation iPuPAppDelegate

@synthesize window;
@synthesize viewController;

- (void)applicationDidFinishLaunching:(UIApplication *)application {  
    
    iPuPViewController *vcontroller=[[iPuPViewController alloc] initWithNibName:@"iPuPView" bundle:[NSBundle mainBundle]];
    
    self.viewController=vcontroller;
    
    [vcontroller release];
    
    //Ajoute notre vue comme sous-vue de la fenêtre principale
    [window addSubview:[viewController view]];
    
    // Override point for customization after application launch
    [window makeKeyAndVisible];
}


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

@end

Voilà, c'est tout pour le code. Passons donc à la dernière partie.

4) Connecter les objets à leurs élément respectifs :

Pour finir notre petite application nous devons rattacher les objets créés dans notre code et leurs éléments d’interface respectifs.
Revenons donc une dernière fois à Interface Builder en ouvrant iPuPView.xib.

En premier lieu, il faut définir notre File’s Owner comme appartenant à la classe iPuPViewController. Ainsi après avoir sélectionné le File’s Owner choisissons l’onglet identity dans l’inspecteur, puis iPuPViewController dans le champ classe.

Pour continuer, sélectionnons l’onglet Connections et relions notre label et notre Text Field à nos élements d’interface. Pour le Text Field il faut également rattacher le champ delegate au File’s Owner (dans l’onglet Connections du Text Field).

Enfin il faut relier la méthode affichageDuTexteLorsDuClick à l’élément dont elle gère les événements c’est à dire au bouton (choisir l’option Touch Up Inside).

L’inspecteur devrait donc ressembler à cela :

Ouf !! on a fini et en plus ça fonctionne ! 

Un petit <Pomme + R> dans Xcode après avoir sauvegardé vous en convaincra !

Merci d’avoir suivi ce tutoriel et n’hésitez pas à vous lancer à corps perdu dans le tutoriel n°5.

À bientôt !

---

Petit exercice

Pour nous perfectionner, un exercice s'impose.
Alors let's go !   

Reprenons notre code, rajoutons un Text Field pour le prénom, peaufinons notre méthode liée au clic afin qu'elle affiche en plus du text une petite image, laissons mijoter 1/2h à thermostat 7  (euh non là on s'égare ...) et hop nous obtenons une petite application assez sympathique !

Un petit aperçu :

Aide et correction

sources
version imprimable

Aurel