Skip to content

3 août 2010 | Rédigé par Emré Ozdemir

24

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:

  1. 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.
  2. 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.
  3. 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.

Une fois lancé, vous devriez avoir d’affiché 4 fenêtres :
  1. Library : c’est ici que vous irez « piocher » vos éléments graphiques tels que UILabel, UITextField, UIButton, etc.
  2. View : c’est votre écran iPhone en gros. Vous glisserez vos éléments graphique ici et les organiserez comme bon vous semble.
  3. helloWorldViewController.xib qui vous montre ou liste (en fonction du mode d’affichage) les éléments présents dans le fichier .xib
  4. 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

L’avant dernière étape consite a lier votre action j’appuis sur le bouton a votre méthode showHelloWorld. Pour ce faire selectionnez votre bouton, dans Inspector, choisissez l’onglet Button Connection. Vous aurez une liste de tous les actions qui sont possibles sur ce bouton. Nous allons nous intéresser a l’action Touch up inside qui correspond au touch sur le bouton. Cliquez enfoncé sur le cercle a coté et déposez sur File’s Owner, une popup apparaîtra et selectionnez showHelloWorld. Vous venez donc de lier votre action a votre méthode, qui sera exécutée lorsque vous toucherez votre bouton.

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

Découvrez d'autre articles de la catégorie Tutoriels iPhone

Encore un peu de lecture :

24 Commentaires Poster un commentaire
  1. 4 août 2010

    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 :)

  2. 5 août 2010

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

  3. Merci pour ce tuto. Je vais passer au travail grâce à lui

  4. davs
    16 sept 2010

    il manque des étapes pour que ce tuto fonctionne, notamment la déclaration des outlets myButton et myLabel

  5. davs
    16 sept 2010

    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 :/

  6. sh0n
    1 oct 2010

    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 ?

  7. 20 oct 2010

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

  8. David
    22 nov 2010

    Super, génial ! J’ai même réussi à créer un autre bouton qui efface le label ;-) , un grand merci !!

  9. jean
    5 jan 2011

    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

  10. Yacine
    4 fév 2011

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

  11. Remailleu
    14 mar 2011

    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…

  12. georges
    15 mar 2011

    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 :)

  13. georges
    15 mar 2011

    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.

  14. georges
    15 mar 2011

    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.

  15. Erwan
    17 mar 2011

    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 ?

  16. Ludavid21
    3 avr 2011

    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.

  17. OtherOne
    12 avr 2011

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

  18. Ludavid21
    25 avr 2011

    @OtherOne Okay merci =) Effectivement c’est mieux comme ça « ^^

  19. Fabrice
    16 mai 2011

    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 :(

  20. Fabrice
    16 mai 2011

    oops je voulais dire UIButton, désolé… :/

  21. melr
    20 mai 2011

    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.

  22. TIKAFBLANC974
    1 août 2011

    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

  23. Tony
    12 avr 2013

    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.

Trackbacks & Pingbacks

  1. Les tweets qui mentionnent Tutoriel iPhone : Hello World application iPhone | Tuto Mobile -- Topsy.com

Une question, une suggestion, une opinion? Partagez ce que vous pensez, laissez un commentaire.

(obligatoire)
(obligatoire)

Note: Votre adresse email ne sera jamais publiée.

Suivez les réponses aux commentaires