Tutorial Objective-c Xcode et Interface Builder

février 26, 2009

Je me lance dans un nouveau petit tutorial sur la création d’une application simple pour iPhone en utilisant Interface Builder. Je ne vais pas m’attarder sur les notions de la programmation objet ou aux spécificités de Xcode. Pour un tutorial sur Xcode voir le précédent.

On va donc créer une application calculant un montant TTC à partir d’un montant HT et d’une TVA. Il y aura 2 champs de saisie et un bouton. Allez c’est parti !

I) Création du projet

Dans un premier temps on va créer un projet, dans la section iPhone sélectionnez View-Based Application.

Donnez lui un nom et choisissez son emplacement. Moi je vais le nommer TutoIB.
En choisissant un projet de type View-Based Application on gagne un peu de temps car Xcode va nous créer un projet contenant déjà une classe gérant l’application et une classe controller gérant la vue.

On a donc 4 fichiers dans le dossier Classes, en fonction du nom de votre projet les fichiers seront différents
Dans mon projet j’ai :

• TutoIBAppDelegate.h
• TutoIBAppDelegate.m
• TutoIBViewController.h
• TutoIBViewController.m

Je parlerais pas des différences entre les .h et .m voir mon tutorial précédent.

Et dans le dossier Ressources il y a 2 fichiers qui nous intéressent.

• TutoIBViewController.xib
• MainWindow.xib

Doubles cliquez dessus et cela va lancer Interface Builder car ce sont ces fichiers qui décrivent l’interface graphique de notre application. Le MainWindow.xib appelant TutoIBViewController.xib c’est ce dernier qui va nous intéresser.

II) Interface Builder

Vous devriez voir ceci :

Si ce n’est pas le cas, dans la fenêtre double cliquez sur View – UiView.
C’est donc ici que nous allons rajouter les éléments de notre interface. Dans la librairie sélectionnez un Text Field et glissez le dans la fenêtre. Ajoutez en encore 2, puis des labels devant et enfin un boutton pour finalement obtenir ceci.

L’interface est maintenant terminée, elle est simpliste. Je vous laisse regarder les possibilités de configuration des TextField.

III) Xcode

On attaque maintenant la partie code. Le projet etant simpliste, on ne vas pas créer de classe. On va juste modifier la classe TutoIBViewController. Ouvrez le fichier TutoIBViewController.h et modifiez le code comme ceci.

1
2
3
4
5
6
7
8
9
10
11

#import <UIKit/UIKit.h>
@interface TutoIBViewController : UIViewController {
IBOutlet    UITextField *fieldHT;
IBOutlet    UITextField *fieldTTC;
IBOutlet    UITextField *fieldTVA;
}
@property (nonatomic, retain) IBOutlet UITextField *fieldHT;
@property (nonatomic, retain) IBOutlet UITextField  *fieldTTC;
@property (nonatomic, retain) IBOutlet UITextField *fieldTVA;
- (IBAction)calculate;
@end

On déclare nos 3 champs, pour pouvoir récuperer les valeurs saisies mais aussi modifier la valeur du champs fieldTTC qui est notre résultat. On déclare un IBAction qui est notre fonction de calcule.

Ensuite on implémente tout ca dans  TutoIBViewController.m.

1
2
3
4
5
6
7
8
9
10
11

#import "TutoIBViewController.h"
@implementation TutoIBViewController
@synthesize fieldHT;
@synthesize fieldTVA;
@synthesize fieldTTC;
- (IBAction)calculate {
float a = [[fieldHT text] floatValue];
float b = [[fieldTVA text] floatValue];
float c = a*((b/100)+1);
fieldTTC.text = [NSString stringWithFormat:@"%f",c];
}

On récupère simplement les valeurs saisie dans les champs et on fait le calcule, et on affiche le résultat dans le fieldTTC. Simple non? Mais, comment le compilateur peut il savoir que la variable fiedTTC, fieldTVA et fieldHT correspondent aux textfields qu’on a placé dans l’interface?
Réponse, il faut le lui préciser, et cela se fait très facilement. Sauvegardez les 2 fichiers, et retournez sur Interface Builder.

IV) Les connections

Il faut donc faire la liaison entre les variables de la classe TutoIBViewController et l’interface graphique. Il suffit pour cela de les lier. Dans la fenêtre TutoIBViewController.xib cliquez sur File’s Owner puis sur Pomme-2 pour afficher le « Connection’s inspector ». La vous devriez voir les 3 noms de variable que nous avons déclarer dans la classe. Et donc il suffit de les lier avec les champs correspondant dans notre interface.

Faites de même pour les 3 textfield. Enfin, il faut donner une fonction au bouton. Cette fois, au lieu de partir du File’s Owner, on va partir du bouton. Fait un ctrl-click sur le bouton, et glissez jusqu’au File’s Owner, et sélectionner notre fonction calculate.

Et voilà, tout est lié, il ne reste plus qu’à lancer la compilaton et l’execution, un pomme-R fera l’affaire !

Nous avons donc fait une petite application très simple. On peut l’améliorer en gérant l’affichage du clavier sur l’iPhone, le nombre de chiffre après la virgule etc..
Je vous laisse chercher 🙂

Catégorie(s): Développement, Iphone, Objective-C, Tutorial | Comments (26)