Main Contents

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.

Création du projet

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 :

Edition de l'interface

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.

Interface terminée

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.

interfaceB

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.

Inspecteur

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)

26 Comments

  1. Tibimac (1 comments) février 27, 2009 @ 8 h 48 min

    Thanks a lot pour le tuto, ca m’aide car j’avais besoin des bases maintenant je les ai. passons a plus complexe 😉

  2. jojo (3 comments) mai 1, 2009 @ 0 h 23 min

    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

  3. Petite liste de tutorial Objective-C et iPhone | MacFan mai 11, 2009 @ 23 h 43 min

    […] Tutorial Objective-c Xcode et Interface Builder […]

  4. Berloun (1 comments) mai 27, 2009 @ 22 h 27 min

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

  5. kraft (36 comments) mai 27, 2009 @ 23 h 27 min

    Merci, c’est corrigé!

  6. Damien (2 comments) mai 29, 2009 @ 10 h 32 min

    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

  7. Damien (2 comments) mai 29, 2009 @ 10 h 36 min

    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

  8. humplop (1 comments) juin 10, 2009 @ 21 h 50 min

    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.

  9. kraft (36 comments) juin 10, 2009 @ 23 h 18 min

    @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!

  10. Fabrice (1 comments) juin 30, 2009 @ 20 h 00 min

    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

  11. Raphman (1 comments) juillet 4, 2009 @ 16 h 51 min

    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

  12. Jo (1 comments) juillet 16, 2009 @ 16 h 06 min

    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…

  13. kraft (36 comments) juillet 16, 2009 @ 16 h 23 min

    Regarde du coté de ce tuto : http://www.jkraft.fr/2009/04/24/objective-c-application-iphone-qui-parse-un-fichier-xml/

  14. Loulou (1 comments) novembre 11, 2009 @ 11 h 35 min

    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 ?

  15. djgreg (1 comments) mars 1, 2010 @ 23 h 02 min

    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!

  16. kop of boulogne (1 comments) mars 2, 2010 @ 10 h 08 min

    Super Merci beaucoup ^^

  17. yassine (2 comments) juin 17, 2010 @ 12 h 17 min

    merci trés bon tuto ,bon continuation et plus de tuto

  18. Francis (2 comments) décembre 24, 2010 @ 5 h 02 min

    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 ?

  19. Francis (2 comments) décembre 24, 2010 @ 5 h 04 min

    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.

  20. guillaume (1 comments) janvier 3, 2011 @ 19 h 52 min

    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

  21. bboygiz (2 comments) janvier 11, 2011 @ 22 h 07 min

    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.

  22. Léna (1 comments) janvier 25, 2011 @ 17 h 12 min

    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

  23. bboygiz (2 comments) février 19, 2011 @ 12 h 15 min

    personne pour le clavier ?

  24. Laga (1 comments) mars 7, 2011 @ 13 h 58 min

    tanmirtik (merci en langue Kabyle)

  25. djamel (1 comments) mars 26, 2011 @ 21 h 46 min

    Vraiment un grand merci

  26. Joe (1 comments) mai 8, 2013 @ 23 h 10 min

    Merci beaucoup .

Leave a comment