Application Hello World [Tutoriel iPhone n°3]
Après avoir vu les bases de l’Objective-C dans le tutorial précédent, nous allons créer notre première application. Comme tout bon néo-développeur il va s’agir d’un simple Hello World. C’est peut être peu, mais c’est un bon début.
L’application « HelloWorld »
Tout d’abord, lancez Xcode, et choisissez de créer un nouveau projet de type « View-based application ».
Nommer le : « helloWorld ». Lorsque votre projet sera créé, vous constaterez que Xcode vous aura « maché » une bonne partie du travail. En effet, tous les fichiers seront créés pour que votre application iPhone se lance comme il faut. Nous reviendrons sur le rôle de ces fichiers dans un futur tutoriel, surtout quand nous introduirons le modèle MVC (Model-View-Controller).
Nous allons nous concentrer sur 3 fichiers pour le moment:
- le fichier helloWorldViewController.h
nous allons ici définir toutes nos propriétés et action qui nous permettrons d’afficher notre text « Hello World » sur l’écran de notre simmulateur iPhone. - le fichier helloWorldViewController.m
nous implémenterons donc notre code dans ce fichier, grâce a ce que nous aurons defini dans notre fichier header. N’oubliez pas que le .h et le .m marchent toujours par paire. - le fichier helloWorldViewController.xib
Enfin notre fichier d’interface utilisateur, ce fichier lancera Interface Builder afin de « designer » notre application comme bon nous semble.
Nous allons dans un premier temps ouvrir notre fichier helloWorldViewController.h. Dans notre application nous aurons besoin d’un label, c’est dans ce label que nous afficherons notre texte « Hello World » et d’un boutton qui déclanchera l’affichage de notre texte.
Nous allons donc définir nos propriétés entre les accolades. Il nous faudra donc un UILabel, et un UIButton (UI pour User Interface).
@interface helloWorldViewController : UIViewController { // Ici IBOutlet sert pour Interface Builder, en effet cela va nous permettre de lier // nos élements visuels a notre code. On utilise IBOutlet pour des propriétés. IBOutlet UILabel *myLabel; IBOutlet UIButton *myButton; } end |
Nous aurons ensuite a définir nos actions. Les getters et les setters pour nos propriétes et notre action qui nous permettra de modifier notre label.
@interface helloWorldViewController : UIViewController { // Ici IBOutlet sert pour Interface Builder, en effet cela va nous permettre de lier // nos élements visuels à notre code. On utilise IBOutlet pour des propriétés. IBOutlet UILabel *myLabel; IBOutlet UIButton *myButton; } @property (retain, nonatomic) UILabel *myLabel; @property (retain, nonatomic) UIButton *myButton; // Méthode d'instance, qui retourne IBAction. Contrairement a IBOutlet, IBAction nous // nous permettra de lier des méthodes à nos éléments visuels. - (IBAction) showHelloWorld: (id)sender; end |
Nous pouvons donc maintenant passer au fichier d’implémentation (.m).
Dans ce fichier nous n’avons pas besoin de re-déclarer nos propriétés, nous déclarerons que nos méthodes dont nous nous servirons.
@implementation helloWorldViewController // On redéfini nos getters et nos setters @synthesize myLabel; @synthesize myButton; // On implémente l'action qui nous permet d'afficher le texte "Hello World" -(IBAction) showHelloWorld:(id)sender{ myLabel.text =@"Hello World"; } ... end |
A noter: Vous remarquerez que nous utilisons la « dot-syntax » et non la syntaxe avec les crochets lorsque nous donnons une valeur à notre label. Rapellez-vous que cela est possible grâce aux directives « @property/@synthesize ».
Utiliser Interface Builder pour « dessiner » notre application :
Nous avons donc créé tout notre code qui nous permettra d’afficher notre texte « Hello World » sur l’écran de notre simmulateur iPhone, cependant il nous manque un élément clé qui est notre Interface Utilisateur. Pour ce faire lancer le fichier helloWorldViewController.xib.
- Library : c’est ici que vous irez « piocher » vos éléments graphiques tels que UILabel, UITextField, UIButton, etc.
- View : c’est votre écran iPhone en gros. Vous glisserez vos éléments graphique ici et les organiserez comme bon vous semble.
- helloWorldViewController.xib qui vous montre ou liste (en fonction du mode d’affichage) les éléments présents dans le fichier .xib
- Inspector regroupe 4 autres fenêtres qui vous permettent de modifier les propriétés de vos objets UILabel, View, etc.
Choisissez l’onglet object dans Library et dans le moteur de recherche en bas, tapez UILabel jusqu’à ce que le label s’affiche dans la liste au dessus. Ensuite vous aurez qu’à simplement glissé-déposer votre label dans la fenêtre View. Vous constaterez que votre label va s’ajouter dans la liste dans la fenetre helloWorldViewController.xib, sous View (en mode d’affichage « Liste »). Répétez l’opération pour UIButton.
Ensuite, cliquez sur votre bouton, dans Inspector sélectionnez la vue Attributs, et dans le titre mettez par exemple Affiche moi un Hello World.
Vous allez maintenant lier vos éléments graphiques a votre code, pour ce faire cliquez avec le bouton option de votre Mac enfoncé sur File’s Owner, sans lacher votre click deplacez vous sur votre bouton, vous aurez une popup Outlets qui s’affichera. Vous pourrez donc choisir myButton. Vous venez donc de lier votre code a votre interface graphique. Répétez l’operation avec votre label et selectionnez myLabel
Dernière chose, avant de lancer votre application. Nous allons « nettoyer » un peu notre code, en effet nous avons oublié de libérer l’espace mémoire que nous avons utilisé. Pour ce faire, retournez sur Xcode, et selectionnez le fichier helloWorldViewController.m. Dans le fichier, il vous faut trouver la méthode dealloc, lorsque vous l’aurez trouvé, modifiez la afin que le code ressemble a ceci :
- (void)dealloc { // Vous libérez l'espace mémoire occupé par votre label et votre bouton [myLabel release]; [myButton release]; [super dealloc]; } |
Lancez votre simulateur iPhone et testez votre toute premiere application iPhone. Vous devriez obtenir ceci comme résultat :
C’est ainsi que s’achève ce tuto, vous avez réalisé votre première application iPhone. Bon ce n’est pas encore la killer App mais c’est déjà pas mal ! 
Si vous avez des questions, des remarques ou autre n’hésitez pas à nous en faire part dans un commentaire, nous ferons de notre mieux pour y répondre. Sinon n’hésitez pas à partager ce tuto sur Twitter et/ou FaceBook cela nous encourage à continuer et un petit clique sur le petit « + » en haut fais toujours plaisir Vous avez vu on se contente de peu. Merci à vous et à très vite pour un prochain tuto.
Ah oui j’oubliais, n’hésitez pas non plus à vous abonnez uniquement au flux RSS des tutos iPhone, c’est par ici : http://feeds.feedburner.com/TutoMobileTutorielsIphone
Cette création par Tuto Mobile est mise à disposition selon les termes de la licence Creative Commons Paternité - Pas d'Utilisation Commerciale - Partage des Conditions Initiales à l'Identique 3.0 Unported.
Encore un peu de lecture :
-
[Concours] Résultats du concours pour gagner 4 formation video2brain iPhone -
[Concours] Gagner 4 formations vidéos pour apprendre le développement iPhone -
Intégrer et utiliser le partage Facebook [Tutoriel iPhone n°11]
Salut Salut =)
Dès que j’ai terminé un projet web que j’ai en parallèle,
je testerais ton tuto
Au faait pour mon stage je vais devoir bosser sur iphone, ipad & bberry en particulier
Voilaa! lol
Sinon je ne sais pas si tu as vu, mais l’outil Google App Inventor est utilisable
@creationy : Ah je vais pas pouvoir beaucoup t’aider su iPhone, iPad… ce n’est pas moi qui est rédigé ce tuto (c’est Emré) je n’ai pas de mac et j’ai un peu la flemme de virtualisé pour le moment.
Sinon oui j’ai vu que App Inventor était dispo je vais surement faire un tuto dessus.
Merci pour ce tuto. Je vais passer au travail grâce à lui
il manque des étapes pour que ce tuto fonctionne, notamment la déclaration des outlets myButton et myLabel
il manque aussi la déclaration de l’action showHelloWorld: … dans le code du .h il manque un @avant end
par contre pas moyen de faire fonctionner ce tuto :/
Tuto ne marche pas non plus pour moi.
L’application compile et se lance bien, mais écran gris avec aucun bouton ni label de visible !
Une solution ?
@sh0n > Il ne faut pas oublier de sauver tes modifications dans Interface Builder (Pomme+S), ce n’est pas précisé dans le tuto je crois.
Super, génial ! J’ai même réussi à créer un autre bouton qui efface le label
, un grand merci !!
Moi j’ai pleins d’erreur à la compilation
Exemple : synthesized property ‘myButton’ must either be named the same as a compatible ivar or must explicitly name an ivar
Ou encore : expected specifier-qualifier-list before ‘IBoutlet’.
J’ai pourtant suivi le tuto à la lettre
Faites bien attention a bien sauvegarder votre View dans Interface Builder !!! (cmd + S)
J’ai perdu au moins 4h a revoir le code alors qu’il suffisait de sauvegarder !!
Marche pas! Dans mon .m, il m’indique « error: expected identifier or ‘(‘ before ‘…’ token », pourtant je n’ai fait que copier/coller le code et essayer de comprendre…
Bonjour,
D’abord merci pour les tutos
J’ai suivi attentivement le tuto mais lorsque je lance le simulateur, je lance l’appli et lorsque je clique sur le bouton se ferme ( je suppose donc qu’elle plante ?!? ).
Quelqu’un a t’il eu le même soucis ?
Merci d’avance
Edit :
Avec le Breakpoint d’activer, j’ai l’erreur suivante :
terminate called after throwing an instance of ‘NSException’
Program received signal: “SIGABRT”.
Merci d’avance.
Edit :
Toutes mes excuses pour avoir parlé trop vite ! Après avoir relu beaucoup de fois … je me suis rendu compte que c’était du à une faute de frappe ….
Désolé pour le dérangement M. le modérateur :S
Cordialement.
Moi j’ai j’ai juste un écran noir… L’appli se crée bien correctement, mais après j’ai une erreur ici :
« self.window.rootViewController = self.viewController; »
et « Thread 1:Program received signal: »SIGABRT »"
Quelqu’un sait d’ou pourrait venir le problème ?
Pour info, je signal que je travail à partir d’Xcode 4.0, peut-être y a-t-il une différence point de vue codage ?
Ben déjà moi j’ai pas du tout 4 fenêtre d’ouvert donc ça commence bien « – Quand je double clique sur le fichier xib j’ai une fenêtre qui s’ouvre avec l’interface de l’appliation et la fenêtre de code XCode mais en aucun cas des fenêtre « View » ni « Library ».
Et y a pas de champs de recherche pour trouver les objets non-plus…
En plus je viens d’installer XCode 4 donc non je n’ai pas touché au layout.
@Ludavid21 : oui il faut afficher la view « utility » en haut à droite. J’ai mis moi aussi quelques temps à trouver…
Le tuto n’est pas à jour, y a quelques modif sur Xcode4.
@OtherOne Okay merci =) Effectivement c’est mieux comme ça « ^^
Partie ‘pas mal mais…’
Personnellement, j’aurais en premier effectué la partie graphique (model, VIEW, controller..), puis seulement rajouté le code, cela me semble plus logique. On crée la structure de données, puis l’interface.. et on relie le tout.
Autre remarque, je conseille d’utiliser le français, à savoir par exemple ‘NSButton *monBouton;’, tout simplement parce que l’on comprend mieux (et surtout au début) ce qui est généré par XCode et ce qui ne l’est pas, comme par exemple le ‘myApp’AppDelegate..
Partie ‘ouille j’ai des soucis …’ :
Il ne manquerait pas quelque chose lors de la phase du passage sur l’éditeur graphique ? ou alors est-ce ma version 4 de XCode qui pose problème ? Où glisser-déposer le bouton ou tout autre ressource ? Ne faut-il pas créer une nouvelle ‘view’ ? Si je ne fais pas cela, mon bouton occupe tout l’espace disponible…. beaucoup beaucoup beaucoup de mal avec la philosophie d’apple (différente d’un visual studio)…. help
oops je voulais dire UIButton, désolé… :/
Bonjour à tous,
En fait j’ai une application que je l’ai fait pour Android, et je veux convertir le code utilisé en java à un code en objective-c pour rendre l’application fonctionnelle pour iphone, s’il y à quelqu’un qui pourra m’aider ca sera gentil de votre part.
Merci à vous d’avance.
Bon soir,voila je passe sur ce tuto pour vous dire que je serai vraiment ravie un joure de tomber sur une application qui pourait traduire le créole, parske je suis d’origine de la réunion et je comprend tres peut de chose du créole jespere 1joure cela arrivera pour toutes les perssone dans mon cas ou autre merci d’avance bnne soirée
Bonjour,
Merci pour ces tuto qui sont bien sympa. J’avais une petite question. Je souhaiterais déployer le programme sur mon iphone et ne pas le lancer dans un simulateur.
Est-ce-possible ? Faut-il payer ? Quel sont les restrictions puisque je suppose que Apple a prévu le coup.
Merci d’avance.