[TUTO] Première Application avec Interface Builder et XCode

eMxPi · 15-07-2009 10:25:51

Voici le nouveau tutoriel pour débuter avec le SDK. Il fait suite à l'étape précédente sur la présentation des concepts.

Ce tutoriel débute par l'installation du SDK. Si vous ne l'avez pas déjà installé, rendez-vous sur le Dev Center. Le temps du téléchargement, reprenez le tuto précédent, faites un tour sur le blog, prenez un café... Bref, patientez.

Voila le SDK est installé et téléchargé, lancez maintenant XCode. Cliquez ensuite sur File--> New Project. Sélectionnez le template View-Based Application.

Entrez le nom de projet iPodTutoFast puis choisissez un emplacement, vous arrivez alors sur linterface principale dXcode.

Pour les connaisseurs du C, on retrouve le .h pour définir l'interface et .m pour l'implémentation des méthodes.
Ouvrez le fichier iPodTutoFastAppDelegate.h. On y retrouve un objet

Window

qui est l'objet de base, utilisé pour l'affichage ainsi que le

iPodTutoFastViewController

. Vous vous souvenez du contrôleur ? Non ! Pas de panique, je vais reprendre cette notion par la suite.

Au tour du iPodTutoFastAppDelegate.m. Comme vous pouvez le voir, l'implémentation est très simple, une fois l'application démarrée avec la méthode

 applicationDidFinishLaunching

, la vue contrôlée par notre

iPodTutoFastViewController

est affichée par l'action :

[window addSubview:viewController.view];

. Au passage, notez comment il faut procéder pour appeler une méthode d'un objet : il faut utiliser les crochets ! Je sais c'est déroutant au début, mais on s'y fait très vite.

Revenons à notre

iPodTutoFastViewController

, il est presque vide ! Et c'est là que vous allez travailler, vous allez définir la vue, l'associée au contrôleur.

C'est fait ? Non ? Bon je vais vous montrer comment procéder avec un autre outil Interface Buider

Comment est créée la vue ?
Une vue est ici créée à partir dun fichier de description dinterface géré par linterface builder : iPodTutoFastViewController.xib. Double-cliquez-dessus, linterface suivante saffiche alors :

On constate notamment dans la fenêtre centrale, les éléments suivants :

Files owner : iPodTutoFastViewController
View : UIView
Donc le .xib permet de dire que la vue est associée au contrôleur iPodTutoFastViewController

Sélectionnez à présent la ligne View : UIView puis sélectionnez le second onglet dans la fenêtre de droite.
Note : si cette fenêtre nest pas visible, faites Tools > Identity Inspector

Vous pouvez visualiser lassociation entre la vue View et la propriété view du contrôleur iPodTutoFastViewController.

Soyez attentif maintenant. Vous vous souvenez que dans iPodTutoFastAppDelegate, on charge la vue du contrôleur et c'est grâce à l'association effectuée dans l'interface buider que l'affichage est possible.

Dune manière générale, chaque élément ajouté depuis lInterface Builder devra être lié à une propriété du contrôleur (ou dun délégué) via lInterface Builder afin que vous puissez interagir avec depuis le code.

La propriété en question est alors nommée Outlet côté Interface Builder, soit Sortie si lon traduit litéralement : cest effectivement un paramètre de sortie de votre interface.

Créons maintenant notre première application

Dans interface builder, ajoutez deux champs texte, trois labels et un bouton. Essayez d'obtenir le même rendu que moi, histoire de ne pas être perdu .

Dans Tools > Reveal in Document Window vous pourrez voir les objets créés dans l'interface et associés à la vue.

Il est maintenant temps d'ajouter les contrôles associées à ces éléments depuis notre iPodTutoFastViewController.

Pour cela deux méthodes :

1- Directement depuis Interface Builder
Sélectionnez iPodTutoFastViewController depuis le Document Window
Dans lInspector (fenêtre de droite) choisissez le dernier onglet (i) puis ajoutez les propriétés via la section Class Outlets

Ceci fait vous devez enregistrer les modifications dans le fichier iPodTutoFastViewController.m. Pour cela, vous devez utiliser la fonction File > Write class files
Faites alors Save
Loutil vous demande si vous souhaitez fusionner ou écraser : choisissez Merge (fusionner)
Comme vous pouvez le voir, le fichier .m nest pas modifié, et vous pouvez donc le fermer, en revanche vous constaterez que le .h est modifié comme suit :

sous réserve que vous choisissiez laction Choose left depuis le menu déroulant du bas
Sauvegardez (enfin) votre fichier fusionné.

2 - Mix XCode et Interface Builder
Il s'agit de déclarer manuellement les propriétés correspondant aux contrôles que nous allons manipuler dans linterface.
Dans iPodTutoFastViewController.h, insérez les lignes suivantes :

IBOutlet UITextField *lastNameField;
IBOutlet UITextField *nameField;
IBOutlet UILabel *outputField;
IBOutlet UIButton *validateButton;

Compilez maintenant le projet.
Rouvrez lInterface Builder pour faire les liens

Personnellement, je préfère cette seconde méthode, qui est plus pratique et plus rapide. Et surtout, on maîtrise mieux ce que l'on fait.

La manière de procéder est simple. Cliquez sur le File's Owner et dans l'inspector sélectionnez la flèche pour voir apparaître le menu suivant :

Magie, on retrouve les 4 objets que l'on créé dans le .h. Il suffit de cliquer sur le rond à coté d'un objet et de déplacer la croix vers l'objet qui doit lui être lié :

Répétez l'opération pour les autres objets et sauvegardez.

Nous avons maintenant tous les objets disponibles pour l'opération. Mais vous allez me dire que ca ne fait rien du tout cette application... Et vous n'avez pas tord. On va ajouter une méthode pour afficher le nom vers la sortie.

Pour cela dans nterface Builder, nous allons créer un handler gérant le clic sur le bouton. Pour cela :

Sélectionnez iPodTutoFastViewController depuis la Document Window
Dans le dernier onglet de lInspector, cliquez sur le bouton + de la section Class Actions en entrez

buttonClick:

. Laissez le Type sur id.

Sauvegardez, faites Write class files, fusionnez les sources et enregistrez
Faites un lien entre lévénement Touch up Inside de votre bouton et iPodTutoFastViewController, léditeur vous propose alors votre fonction

buttonClick:

Maintenant que votre événement est lié à votre contrôleur, ajoutons le bout de code pour afficher le résultat :

Retournez sous XCode, et ouvrez iPodTutoFastViewController.m
Modifiez le code pour avoir la méthode

buttonClick:

sous la forme suivante :

- (IBAction)buttonClick:(id)sender {
    [outputField setText:[lastNameField text]];
}

Faites Build and Go et testez !

Bien, il ne reste plus quà apprendre l'Objective-C. Pour cela, je vous renvoie vers les liens:

Passage de C++ à Objective-C
Passage de Java à Objective-C

Voilà, vous avez à présent les bases nécessaires pour démarrer le développement dune application iPhone.

Dans la suite, je vous montrerai des exemples de codes pour faire des applications sympas.

So Stay Tuned !

PS: si vous voulez tester votre application sur votre iPhone/iTouch, il faut le configurer comme outil de dev. Je vous renvoie vers ce tuto pour savoir comment faire

Dernière modification par eMxPi (15-07-2009 15:34:45)

Noriil · 19-07-2009 19:12:28

Merci pour ce tuto !
Je l'ai réalisé, ça me semble assez gérable tout ça même si l'environnement de dév est assez depaysant.
Faut que je lise le lien que t'as mis à propos de Java à Objective-C now.

Noobodyy · 31-07-2009 18:00:03

Ayant quelques bases de programmation (xhtml et php), je pensais parvenir à suivre un minimum ce tuto et tous ceux sur lesquels je suis tombés...et bien ça a beau chauffer la haut...je m'en arrache encore les cheveux ^^

Il est très difficile de passer d'un notepadd++ à un IDE comme XCode.

Merci beaucoup pour le tuto, il garde une part d'utilité pour un débutant total.
Je m'en vais à présent chercher quelque chose d'encore plus...débutant ^^

Noriil · 11-08-2009 09:52:52

Noobodyy a écrit :

Ayant quelques bases de programmation (xhtml et php), je pensais parvenir à suivre un minimum ce tuto et tous ceux sur lesquels je suis tombés...et bien ça a beau chauffer la haut...je m'en arrache encore les cheveux ^^
Il est très difficile de passer d'un notepadd++ à un IDE comme XCode.
Merci beaucoup pour le tuto, il garde une part d'utilité pour un débutant total.
Je m'en vais à présent chercher quelque chose d'encore plus...débutant ^^

Je pense que la notion de programmation objet est indispensable pour bien comprendre le mécanisme d'un tel langage.
Je n'ai pas de tuto à te conseiller en particulier parce que j'ai appris à la fac mais je pense qu'il faut que tu commences par là.
Bon courage !

Dernière modification par Noriil (11-08-2009 09:53:20)

Noobodyy · 13-08-2009 20:16:47

Merci pour ton message, je suis depuis peu lancé dans les bases de la programmation en C, puis j'enchainerai vers le C++ ou l'objective C en fonction de la qualité des cours que je trouverai sur le moment.

Jay64 · 07-11-2009 15:42:03

Merci pour ce tuto, pour démarer c'est nickel !!!

Par contre, je veux aller un peu plus loin mais ya un truc que je ne pige pas.
Imaginons que l'on veuille ajouter une nouvelle vue => pour cela, dans Xcode, je fais File, New File, et je choisis Cocoa Touch Class, UIViewControllerSubclass (with XIB for user interface).
Ensuite, dans mon delegate.h, je rajoute ma classe @class newView et dans l'interface newView *MyNewView; avec les property
Dans le delegate.m, je rajoute mon @synthesize et import ma classe puis effectue la modif suivante :

- (void)applicationDidFinishLaunching:(UIApplication *)application {    
    
    // Override point for customization after app launch    
    [window addSubview:MyNewView.view];// j'ai ici modifié pour afficher au lancement la nouvelle vue.
    [window makeKeyAndVisible];
}

Le build se fait sans erreur mais au lancement j'ai une jolie page blanche au lieu d'avoir la fenêtre que j'ai modifié (changement de couleur de fond) dans le newView.xib.

Que me manque t-il ?

Merci !

Dernière modification par Jay64 (07-11-2009 15:43:51)

eMxPi · 09-11-2009 15:13:18

Tu as pensé à le rajouter dans ton delegate ?

mcharlet · 09-04-2010 20:43:41

Peut-on déveloper sous linux ou windows ?

zecari · 13-06-2010 21:09:06

Incompréhensible ...

En plus tout à changer dans la nouvelle version, donc c'était peut être un minimum "suivable" avant, mais la sa devient un véritable délire !

Je n'ai rien réussi à faire, je codé le PHP avant, je ne m'était jamais mis au C, et j'en garde un souvenir plus qu'amer je me suis arracher les cheveux pendant 2 heures pour essayer de trouver une logique à ce logiciel xCode, je m'en sort même pas avec un tuto finit !

Faites un lien entre votre événement touch up inside ... euh ouai on est censé savoir le faire ?

Oui je suis un peu remonté ...

Avez vous un tuto au gout du jour ? et simple ? j'aimerai juste faire une application avec un système de page et de recherche rien de plus

Dernière modification par zecari (13-06-2010 21:17:07)

DroYze · 24-07-2010 17:54:03

Pareil, je cherche un tuto mis à jour

Souhail · 06-09-2011 15:14:27

Bonjour !

Super pour ces Tuto... je trouve que les explications sont carrément plus claire que dans certains bouquins ou certains site spécialisés.

Je rencontre néanmoins un problème, mais je rien de grave je suppose.

Je n'ai effectivement pas la même chose que les captures d'écran pour le Controller Identity. Dans le dernier onglet, je ne trouve que "Class Identiy" et "Interface Builder Identity". Cela m'empeche donc de déclarer les contrôle via Interface Builder et de le faire manuellement en tapant le code, ce qui me plait bien plus. Donc pas de soucis à ce niveau là.

Par contre lors de l'étape suivante :

//----------------------------------------------------------------------------------------------------------------------------
"Sélectionnez iPodTutoFastViewController depuis la Document Window
Dans le dernier onglet de lInspector, cliquez sur le bouton + de la section Class Actions en entrez
Code:

buttonClick:
. Laissez le Type sur id. "

//----------------------------------------------------------------------------------------------------------------------------

Je n'ai malheureusement pas la partie "Class Actions" dans cet onglet de mon Controller Indentity ... alors comment faire ?!

Merci à tous de votre aide.

Souhail · 06-09-2011 15:19:15

Noobodyy a écrit :

Merci pour ton message, je suis depuis peu lancé dans les bases de la programmation en C, puis j'enchainerai vers le C++ ou l'objective C en fonction de la qualité des cours que je trouverai sur le moment.

Bjr,

Pourrais tu me faire passer tes sources pour l'apprentissage des base en programmation C ? Je suis développeur PHP, j'ai donc quelques notions en POO mais j'avoue que j'ai du mal avec xCode et j'ai une application a faire pour un client, certes elle parait toute simple, mais le début me parait déjà inaccessible ^^.

Merci.

Sonia69 · 03-05-2016 10:15:51

Merci beaucoup pour le tuto, il garde une part d'utilité pour un débutant total.
Je pense que la notion de programmation objet est indispensable pour bien comprendre le mécanisme d'un tel langage.

Forum iPhone, iPad, Apple Watch de iPhon.fr

Annonce

#1 15-07-2009 10:25:51

[TUTO] Première Application avec Interface Builder et XCode

#2 19-07-2009 19:12:28

Re : [TUTO] Première Application avec Interface Builder et XCode

#3 31-07-2009 18:00:03

Re : [TUTO] Première Application avec Interface Builder et XCode

#4 11-08-2009 09:52:52

Re : [TUTO] Première Application avec Interface Builder et XCode

#5 13-08-2009 20:16:47

Re : [TUTO] Première Application avec Interface Builder et XCode

#6 07-11-2009 15:42:03

Re : [TUTO] Première Application avec Interface Builder et XCode

#7 09-11-2009 15:13:18

Re : [TUTO] Première Application avec Interface Builder et XCode

#8 09-04-2010 20:43:41

Re : [TUTO] Première Application avec Interface Builder et XCode

#9 13-06-2010 21:09:06

Re : [TUTO] Première Application avec Interface Builder et XCode

#10 24-07-2010 17:54:03

Re : [TUTO] Première Application avec Interface Builder et XCode

#11 06-09-2011 15:14:27

Re : [TUTO] Première Application avec Interface Builder et XCode

#12 06-09-2011 15:19:15

Re : [TUTO] Première Application avec Interface Builder et XCode

#13 03-05-2016 10:15:51

Re : [TUTO] Première Application avec Interface Builder et XCode

Pied de page des forums