Tutoriel developpement : 01 - Hello World

tuto dev iPhoneSoftAujourd'hui j'inaugure la partie tutoriel de notre catégorie développement iPhone.

Pour commencer rien de mieux qu'un bon Hello World, qui est sûrement la première chose à faire quand on arrive sur un nouveau langage de programmation.

Je vais y aborder quelques concepts importants dans l'objective-c en particulier sur iPhone.

N'hésitez pas à me faire des remarques (constructives si possible ;)), afin que j'améliore au fur et à mesure mes tutoriaux.

Pré-requis :

  • Un Mac (à jour c'est mieux)
  • XCode
  • SDK iPhone (inscrivez vous sur cette page pour avoir accès au téléchargement du SDK, qui sera aussi votre source d'inspiration et d'enseignement)
  • Un iPhone ou iPod Touch (à jour c'est mieux aussi)
  • Des notions de programmation suffiront pour cet exemple

C'est parti !

Pour commencer, nous allons ouvrir le logiciel XCode.
Pour lancer l'application allez dans /Developer/Applications/XCode (faites un raccourci sur votre dock).
Sous XCode, ouvrir un nouveau projet:

  • File - New Project
  • Placez vous sous iPhone OS Application (colonne gauche), puis sélectionnez View based application (c'est un template avec une vue vide) et cliquez sur Choose
  • Une fenêtre vous demande le nom de l'application, entrez HelloWorld et faites Save

View based application

Vous voilà devant une application qui marche mais qui ne fait rien, simplement un affichage d'une vue vide.
Faites un pomme + R (Build & Run), vous verrez ainsi le simulateur iPhone qui va vous permettre de faire vos tests.
L'application est vide, mais elle compile.

Passons au code.

Il existe 2 méthodes de travail bien différentes :

  • Programmation pure sous XCode
  • Programmation sous XCode + Interface Builder

Je vais faire la première méthode pour ce tutoriel Hello World.

Vous avez maintenant plusieurs dossiers dans la colonne de gauche, dont le dossier qui nous concerne Classes.

La classe HelloWorldAppDelegate (.h : le header autrement dit l'entête / déclaration de la classe et .m : le corps qui contient l'implémentation des méthodes de la classe).
Cette classe (xxxAppDelegate) est obligatoire pour toute application iPhone, elle est conforme protocole UIApplicationDelegate (d'où le nom de la classe suivie par ) et implémente surtout la méthode
: applicationDidFinishLaunching
Cette méthode est appelée directement après le lancement de l'application par le main.m (on ne touche presque jamais au main).

Les fichiers HelloWorldAppDelegate ne seront pas modifier dans cet exemple mais au moins cela vous donne un aperçu des fichiers (on peut modifier cette classe pour par exemple faire un écran type splash screen pour votre application).

Le delegate de votre application appelle le controller de la vue principale, la classe :
HelloWorldViewController Il a été généré par XCode lors de la création du projet type View based application et possède toutes les caractéristique d'un objet UIViewController, car elle hérite de cette dernière.

Dans notre vue vide, on va enfin placer un objet, ici un label de type UILabel.
Un label n'est rien de plus que du texte placé dans la fenêtre selon des coordonnées.
Nous allons rajouter dans le HelloWorldViewController.h la déclaration d'un attribut de type UILabel avec le code suivant :



@interface HelloWorldViewController : UIViewController {
  UILabel *monLabel;
}
// nonatomic permet d avoir de meilleures performances pour une application simple, sans multi thread
// retain permet de faire un +1 sur le compteur interne de la variable, cela cree une occurence de l objet
// son contraire release, decremente le compteur interne  de la variable
@property (nonatomic, retain) UILabel *monLabel;

@end

La directive @property permet de générer la déclaration des accesseurs de notre attribut, ici monLabel (pour pouvoir accéder à ses propriétés).

Maintenant passons à l'implémentation de la classe HelloWorldViewController, dans le .m.

La directive @synthesize dans le .m va de pair avec @property du .h, ainsi votre objet aura des accesseurs opérationnels (sinon on pourrait aussi redéfinir les getters et setters si besoin).

Voici le contenu du fichier HelloWorldViewController.m, je mets des commentaires au fur et à mesure (prenez soin de dé-commentez la méthode loadView) :

#import "HelloWorldViewController.h"

@implementation HelloWorldViewController

@synthesize monLabel;

-(void)loadView {

  // on récupère la taille de l'écran (notamment)
  CGRect mainFrame = [[UIScreen mainScreen] applicationFrame];
  // Creation d une vue principale qui occupera la taille de l'écran
  UIView *maView = [[UIView alloc] initWithFrame:mainFrame];

  // on donne une couleur de fond a la vue, ici le fond rayé classique des UITableView
  maView.backgroundColor = [UIColor groupTableViewBackgroundColor];

  // comme notre classe hérite de l'objet UIViewController, ici self puisqu on est dans la declaration de l objet lui meme
  // c est donc qu'elle possede une view, on lui attribut la nouvelle vue creee
  self.view = maView;

  // on libere la memoire allouee pour l'occurrence de l UIView une fois qu on en a plus besoin
  // on ne fait release que si on a fait retain ou alloc
  [maView release];

  // Creation d'un UILabel position x:10, y:10, width:320-20, height:40
  // CGRectMake est une fonction du Core Graphic qui permet de dessiner
  monLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, mainFrame.size.width - 20, 40)];

  // la couleur du texte, c est a partir d ici que les setters (accesseurs) servent
  // on peut ecrire la meme chose de 2 manières
  // monLabel.textColor = [UIColor blackColor];
  // OU 
  // en mettant set devant le nom de la methode et une majuscule
  // on écrit en noir mais vous pouvez vous amuser à changer en regardant dans la doc comment personnaliser un UIColor
  [monLabel setTextColor:[UIColor blackColor]];

  // idem pour les autres proprietes
  monLabel.backgroundColor = [UIColor clearColor];  
  monLabel.textAlignment = UITextAlignmentCenter;

  // on met du texte dans le label
  // les strings (NSString) en objective-c sont toujours précédé d'un @
  monLabel.text = @"Hello World";
  
  // enfin on ajoute le label a la vue
  [self.view addSubview:monLabel];
}

@end

Vous n'avez plus qu'à compiler et lancer le simulateur !

simulateur

N'oubliez pas de faire un release de votre attribut de classe monLabel dans la fonction dealloc (avant [super dealloc]) de votre classe pour libérer correctement la mémoire.

Pour aller plus loin regarder par exemple les méthodes d'un UILabel sur la doc Apple, afin de le modifier à votre guise, et puis vous pouvez regarder comment ajouter par exemple de la même manière un UIButton, un UITextField pour faire interagir vos éléments.

Vous aimerez peut-être

Nos derniers articles

Suivez-nous avec notre app iSoft
Articles populaires
Donner votre avis

 





Les réactions

19 Aphax

13/08/2011 à 21h43 :

Sympa le tuto merci !
Par contre y'a un truc qui m'échappe... tout s'est bien passé concernant les étapes du tutorial, par contre quand j'essaye de changer un peu le style, les couleurs, etc, rien ne change, et même en changeant la valeur du texte, le résultat est toujours le même...
Une histoire de cache ou autre ? Pourtant j'ai relancé xCode, redémarré et tout, rien n'y fait, une idée ?
Je travaille sous xCode 3.1.4

18 NicMe

29/06/2010 à 21h36 :

Excellent mais... ou sont les autres tutoriels de developpement? Peu de ceux-ci sont disponibles en francais. Merci pour celui-ci!

17 Okami - iPhone

06/02/2010 à 14h43 :

Faut il être majeur pour s inscrire au SDK?

16 azeruslpr

08/11/2009 à 00h25 :

Je pense que tu vois le springboard avec ton icone non ?

oui cest cela ???

15 Medhi Naitmazi - iPhone

07/11/2009 à 17h36 :

Je pense que tu vois le springboard avec ton icone non ?

14 Laurent

07/11/2009 à 17h33 :

Merci beaucoup, j'essayerai plus tard :)

13 azeruslpr

07/11/2009 à 16h57 :

salut merci pour tes expliquations mais je croyais avoir tout suivi à la lettre et pourtant une fois fini c'est une petite icone que j'ai sur le simulateur et non le texte comme prevue ...
sous celle ci il y a bien ecrit "helloworld" mais en banc ???
peut tu me dire ou je me suis trompé ;merci ..

c'est pour cela qu'une capture permet de mieux suivre ;-)

12 Medhi Naitmazi - iPhone

06/11/2009 à 21h42 :

Non ce n est payant que pour mettre son app sur AppStore ;)

11 Antho

06/11/2009 à 20h02 :

"•SDK iPhone (inscrivez vous sur cette page pour avoir accès au téléchargement du SDK, qui sera aussi votre source d'inspiration et d'enseignement)"

C'est payant non ?

10 pakos210

06/11/2009 à 19h10 :

Dommage qu'on peut pas wundowsiens :-(

9 Kino - mobile

06/11/2009 à 17h36 :

Tout ça pour un Hello World!Je vais me contenté du HTML! LOL

8 Craig

06/11/2009 à 17h15 :

Frais le tuto !

7 proSF

06/11/2009 à 17h05 :

ah un super tuto en francais c est pas si facile d en trouver pour commencer le dev sur iphone !

6 Medhi Naitmazi

06/11/2009 à 16h14 :

C'est vrai que c est long pour juste faire un affichage de texte :)

Mais quelques explications permettent de mieux aborder ensuite des développements plus compliqués

5 Grm1

06/11/2009 à 16h10 :

Yeah Medhi,
Balaise ton tuto

4 Medhi Naitmazi

06/11/2009 à 16h04 :

Ah bon sur windows ? tu as un lien à nous montrer ?

3 Fa

06/11/2009 à 15h56 :

Il parait que ce n'est plus impossible de développer sur windows pour iphone... si c'est vrai on aura droit à un tuto? En tous cas cette nouvelle catégorie est une super idée.

2 Medhi Naitmazi

06/11/2009 à 15h35 :

une video pour un hello world ? pourquoi pas mais dans de futurs tutos alors :)

Sinon oui je pourrais ajouter des captures, si tu as une idée de ce qu'il manque ...

1 azeruslpr

06/11/2009 à 15h30 :

en plus de l'expliquation de texte qui pourrait etre agrementée de plus de capture d'ecran il pourrait aussi y avoir une petite video ce qui permet de voir de lire et d'entendre, en un mot la totale ...

merci ;-)