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)
Thanks a lot pour le tuto, ca m’aide car j’avais besoin des bases maintenant je les ai. passons a plus complexe 😉
Merci beaucoup, super tutoriel.
Ca change des tutos qu’on trouve ailleurs.
Moi qui débute, j’ai compris plein de choses là !
Vivement pls de tutos !!!!
MERCI
[…] Tutorial Objective-c Xcode et Interface Builder […]
Pas mal du tout, merci.
Ya une petite erreur ici :
– float c = a/((b/100)+1);
->float c = a*((b/100)+1);
et là
-[…]implémente tout ca dans TutoIBViewController.h.
-[…]implémente tout ca dans TutoIBViewController.m
Si tu peux faire plein d’autres tutos je suis preneur. ++
Merci, c’est corrigé!
Merci déjà pour le tuto, mais j’ai un petit problème a l’exécution.
le programme se lance sans problème avec l’Iphone simulator mais quand j’ai remplit les « textfield » et que j’appuie sur calculer, l’Iphone plante et Xcode me dit « _TERMINATING_DUE_TO_UNCAUGHT_EXCEPTION » et donc je ne sais pas quoi faire…
Merci d’avance
J’ai trouvé mon erreur…
au fait j’avait mit un C majuscule a calculate a la place d’un C minuscule ^^
Merci quand même
Salut,
pourrais-tu expliquer à quoi servent les lignes @property et @synthesize ?
J’ai essayé avec (comme dans ton tuto) et puis après coup sans, et çà fonctionne très bien, et tout cas avec le dernier XCode 3.
En tout cas merci pour le tuto, c’est vraiment ce qui me manquais.
@property et @synthesize permettent d’implémenter automatiquement les fonction getter et setter pour la variable, c’est à dire les fonctions qui permette de récupérer sa valeur ou de la modifier!
Salut,
merci pour ce tuto, j’ai quasiment tout compris et pourtant la derniere prog que j’ai fait remonte au licée avec ma casio…
Bref, comme tu explique bien, y’a quelque chose que j’aimerai pouvoir faire .
sur ton tutoriel la TVA est figé a 19,6.pour mon appli il faudrait que je puisse choisir 3 type de TVA (5,5% 19,6% et 30%) par l’intermediaire d’un tableview ou de la roulette par exemple)
comment puis-je mettre cela en place
merci beaucoup
Salut,
Merci pour ton Tuto : le démarrage pour le développement iPhone n’est pas évident sans ça.
Par quoi on peut continuer selon toi ?
Merci d’avance
Problème résolu, encore merci!
Sait-on jamais, est ce qu’un tuto sur comment créer une petite liste d’éléments indépendants les uns des autres avec IB est imaginable?
En fait je voudrais avoir un tableau sur lequel je peux cliquer et ensuite accéder à l’élément sur lequel j’ai cliqué, mais je sais pas comment m’y prendre…
Regarde du coté de ce tuto : http://www.jkraft.fr/2009/04/24/objective-c-application-iphone-qui-parse-un-fichier-xml/
Salut,
Super tuto 😉
Par contre, j’ai essayer de mettre l’appli sur mon iphone, je la voi bien apparaitre dans le springboard mais elle ne se lance pas !
Pour info, mon iphone est jailbreaker.
Quelqu’un a t’il déjà eu ce problème ?
Bonjour,
j’ai enfin réussi à tout programmer, mais pourquoi le clavier de l’iphone ne disparait pas cela m’empêche d’utiliser le bouton calculer.
Help!
Super Merci beaucoup ^^
merci trés bon tuto ,bon continuation et plus de tuto
Bonjour !
Merci pour ce Tuto trés bien fait 🙂
Par contre, je ne comprends pas pourquoi aucune action n’est faites quand je clique sur le bouton.
Je pense pourtant tout avoir lié.
Une idée ?
Merci d’avance.
PS : est il possible d’avoir les sources de ce programme ?
Autant pour moi…
Je ne sais pas pourquoi, mais les fonctions que rajoutent Apple font tout foirer… Une simple suppression du code « en trop » et tout est rentré dans l’ordre
Désolé du commentaire inutile.
Bonjour
super tuto
je débute juste et c’est vrai que c’est assez dur de trouver de bon tuto!!
j’ai juste un probleme, je n’arrive pas a enlever le clavier une fois les montant tapé.. je ne peux donc pas appuyer sur le bouton calculer…
je voulais aussi savoir si, pour tester l’application sur l’iphone il fallait payer la license de 80€ ou si pas un moyen quelconque on pouvait importer l’application sur l’iphone
merci d’avance
comment faire disparaitre le clavier pour pouvoir appuyer sur le bouton calculer ?
loulou pour mettre ton appli sur ton iphone, il te faut la license develeppeur dapple à 99$ par an.
Avec un iphone jailbreaké tu peux mettre lappli mais elle ne se lancera pas. Je crois qu’il y a une histoire de processeur la dedans.
Pour deployer sur iPhone, il te faut un programme de Saurik (developpeur de Cydia) qui s’appelle « ldid ».
En aucun cas, le lancement puis fermeture du programme concerne le processeur. Il faut signer l’application. « Fake sign app iPhone » sur google, et tu verra bien un tuto
personne pour le clavier ?
tanmirtik (merci en langue Kabyle)
Vraiment un grand merci
Merci beaucoup .