Forum iPhone, iPad, Apple Watch de iPhon.fr

Forum utilisateurs Apple iPhone, iPad, Apple Watch, forfaits et accessoires

Vous n'êtes pas identifié(e).

Annonce

Bienvenue sur le forum du blog iPhon.fr

Pensez à poster dans la bonne rubrique, respecter les propos des autres internautes, ne pas utiliser le langage SMS, et enfin, à utiliser la fonction 'Recherche' !
Et... Gardez le sens de l'humour, de la convivialité et de la décontraction. On n'est pas là pour se prendre la tête ! ;-)

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

eMxPi
Membre d'Honneur
Inscription : 11-06-2008
Messages : 12 915
Site Web

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

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

Image-1.png

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é, <b>lancez maintenant XCode</b>. Cliquez ensuite sur File--> New Project. Sélectionnez le template View-Based Application.

Image-2.png

Entrez le nom de projet “iPodTutoFast” puis choisissez un emplacement, vous arrivez alors sur l’interface principale d’Xcode.
Image-3.png

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 u<b>tiliser les crochets</b> ! Je sais c'est déroutant au début, mais on s'y fait très vite.

Image-4.png

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 <b>Interface Buider</b>

Comment est créée la vue ?
Une vue est ici créée à partir d’un fichier de description d’interface géré par l’interface builder : iPodTutoFastViewController.xib. Double-cliquez-dessus, l’interface suivante s’affiche alors :
Image-5.png

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

File’s 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 n’est pas visible, faites Tools > Identity Inspector

Image-6.png

Vous pouvez visualiser l’association 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.

D’une manière générale, chaque élément ajouté depuis l’Interface Builder devra être lié à une propriété du contrôleur (ou d’un délégué) via l’Interface 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 l’on traduit litéralement : c’est 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 wink.
Image-7.png

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

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 “l’Inspector” (fenêtre de droite) choisissez le dernier onglet (i) puis ajoutez les propriétés via la section “Class Outlets”
Image-9.png

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”
L’outil vous demande si vous souhaitez fusionner ou écraser : choisissez Merge (fusionner)
Comme vous pouvez le voir, le fichier .m n’est pas modifié, et vous pouvez donc le fermer, en revanche vous constaterez que le .h est modifié comme suit :
Image-11.png

sous réserve que vous choisissiez l’action “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 l’interface.
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 l’Interface 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 :
Image-12.png
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é :
Image-13.png

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 l’Inspector, cliquez sur le bouton + de la section Class Actions en entrez

buttonClick:

. Laissez le Type sur id.
Image-15.png
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 d’une 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)


Contact : @eMxPi
Co-founder: MYS - Share Music

Hors ligne

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

Noriil
Membre
Lieu : Grenoble
Inscription : 13-10-2008
Messages : 4 471

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

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


iPhone V1 8Gb 3.1.2 JB
MacBook Unibody 2008 13,3"

Hors ligne

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

Noobodyy
Membre
Inscription : 01-12-2007
Messages : 57

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

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

Hors ligne

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

Noriil
Membre
Lieu : Grenoble
Inscription : 13-10-2008
Messages : 4 471

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

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)


iPhone V1 8Gb 3.1.2 JB
MacBook Unibody 2008 13,3"

Hors ligne

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

Noobodyy
Membre
Inscription : 01-12-2007
Messages : 57

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

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.

Hors ligne

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

Jay64
Développeur iPhone Invité
Lieu : Pau
Inscription : 02-02-2009
Messages : 46
Site Web

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

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)

Hors ligne

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

eMxPi
Membre d'Honneur
Inscription : 11-06-2008
Messages : 12 915
Site Web

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

Tu as pensé à le rajouter dans ton delegate ?


Contact : @eMxPi
Co-founder: MYS - Share Music

Hors ligne

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

mcharlet
Membre
Inscription : 11-07-2008
Messages : 12

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

Peut-on déveloper sous linux ou windows ?

Hors ligne

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

zecari
Membre
Inscription : 09-06-2009
Messages : 20

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

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)

Hors ligne

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

DroYze
Membre
Inscription : 23-12-2007
Messages : 38

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

Pareil, je cherche un tuto mis à jour

Hors ligne

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

Souhail
Membre
Inscription : 06-09-2011
Messages : 2

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

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 l’Inspector, 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.

Hors ligne

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

Souhail
Membre
Inscription : 06-09-2011
Messages : 2

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

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.

Hors ligne

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

Sonia69
Membre
Lieu : Lyon
Inscription : 03-05-2016
Messages : 4

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

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.


Jeune Lyonnaise étudiante en programmation
My Google Suggest

Hors ligne

Pied de page des forums

L'iPhone sur iPhon.fr, le blog de l'iPhone - blog iPad

iPhon.fr et son forum ne sont pas liés à Apple, Orange, SFR ou autres et les marques citées sont la propriété de leurs détenteurs respectifs.