TP #1 : Initiation au développement sur i Phone , i Pod Touch et ...

redtellerMobile - Wireless

Jul 19, 2012 (5 years and 1 month ago)

306 views

Université Claude Bernard – Lyon 1 – Département Informatique
TP #1 : Initiation au développement sur iPhone, iPodTouch et iPad
UE SLE (Systèmes et Logiciels Embarqués) – Département Informatique
Université Claude-Bernard Lyon 1
Auteurs : Jean-Patrick Gelas (UCBL Lyon 1), Julien Thérier (Palooza)
Publique : M2 SIR (réseaux), M2 SIR app, M2 TI et M2 Image.
Date : Janvier 2011
Afin de prendre en main l'environnement de développement (Xcode, InterfaceBuilder, etc.) et le langage Objective-
C présenté en cours, nous vous proposons d'écrire une première «

application

» très simple.
Dans un premier temps cette application se contentera d'afficher un message amical à l'écran (e.g
Hello World
). Puis

dans un second temps nous y ajouterons un bouton (UIButton) et un champs de saisie (UITextField).
L'iOS SDK (Software Development Kit), l'environnement de développement Xcode et le simulateur ont déjà été

installés sur votre poste de travail. Il n'est donc pas nécessaire d'aller le télécharger sur le site du centre de

développement d'Apple.
1.
Hommage à K&R
Lancer Xcode et créez un nouveau projet que vous pouvez appeler
HelloWorld
.
New Project → iOS application → View based application (iPhone product)
Avant tout, cliquez sur Build and Run afin de vérifier que le simulateur (iPhoneSimulator) se lance et exécute bien

votre application encore «

vide

». Stoppez alors l'application.
A présent, notez que les fichiers que nous allons modifier sont
HelloWorlViewController.[h|m]
. Comme

leurs noms l'indique, ces fichiers correspondent à un contrôleur dans le pattern MVC (cf. cours).
1.1.
Fichier d'en-tête (.h)
Les fichiers portant l’extension .h sont aussi appelés fichiers d'en-tête ou interface de la classe.
Ils permettent de déclarer les différentes variables d'instances qui sont ensuite utilisables à partir des objets instantiés

de cette classe. Certaines de ces variables peuvent correspondre à des éléments graphiques dans la vue.
Par exemple, pour déclarer un label (zone de texte d’une ligne), on écrira

UILabel

*monLabel

;
dans la partie
@interface

{




}
.
Pour lui ajouter des propriétés (déclaration de méthodes
getter
et
setter
), on écrira

@property

(nonatomic,

retain)

IBOutlet UILabel

*monLabel

;

avant le
@end.
1.2.
Fichier de classe (.m)
Les fichiers avec l’extension .m sont les implémentations des classes en Objective-C. Ils permettent d'implémenter

les méthodes de vues, des modèles ou plus généralement des contrôleurs.
Au sein de ces méthodes, on utilise le plus souvent les différents éléments déclarés précédemment dans le fichier .h.
Afin d'initialiser le texte du label au chargement de la vue, ajoutez à la méthode
viewDidLoad:
(que vous

prendrez soin de décommenter) la ligne ci-dessous (après l'appel à la méthode du même nom de la super classe i.e

[super viewDidLoad]
).
1
/
4
Université Claude Bernard – Lyon 1 – Département Informatique

monLabel.text

=

@

"Hello World";
Ajoutez également la ligne suivante qui permet d'afficher un message sur la console.

NSLog(@"viewDidLoad : ok,\nmonLabel.text = %@", monLabel.text);
Enfin ajoutez la ligne ci-dessous juste après
@implementation HelloWorldViewController
pour

demander au compilateur de nous créer les accesseurs et mutateurs de la variable
monLabel.

@synthesize monLabel;
1.3.
La vue
Les vues sont les éléments qui sont affichés à l’écran de l’iPhone. Une vue peut se composer de différents éléments

tels que des images, des boutons, du texte, etc. Pour modifier les vues, le plus simple est de passer par Interface

Builder. Cliquez deux fois sur
HelloWorldViewController.xib
situé dans la section Ressources de votre

projet. InterfaceBuilder se lance.
A partir de la bibliothèque de composants (Library) glissez-déposez un
UILabel
dans votre Vue (View) (fenêtre

grise). Vous pouvez initialiser le label avec une chaîne de caractères vide.
L'ultime étape consiste a établir la relation entre le UILabel et l'objet
monLabel
déclaré ci-avant. Pour cela, cliquez

bouton droit (ou Ctrl+click) sur le
File's owner
et établissez un lien de monLabel au UILabel proprement dit.
Compiler l'application (Build) et exécutez la (Run). Le simulateur se lance et exécute automatiquement votre

application.
Votre message devrait apparaître sur l'écran de l'iPhone.
Vérifiez que l'autre message apparaît bien sur la console.
1.4.
Exécution sur l'iPodTouch
Connectez maintenant l'iPodTouch à votre ordinateur en utilisant le câble dock-USB fournit.
Lancez l'
organizer
:
Window → Organizer
Votre iPodTouch doit être référencé sous la section DEVICES et afficher un point vert.
Vérifiez les profiles installer sur votre iPodTouch en cliquant sur l'icône dans l'Organizer. Si aucun profile n'est

disponible, vérifiez les
Provisioning Profiles
dans la section DEVELOPMENT et faites un glissé-déposé du profile

disponible sur votre iPodTouch.
Quittez l'organizer.
Dans la colonne de gauche (Group & Files), sélectionnez HelloWorld dans la section Targets. Appuyez sur

Command-I.
Properties Identifier :
fr.univ-lyon1.nautibus
.${PRODUCT_NAME...}
Build : Choisissez en haut: Configuration: All configurations, et recherchez "code signing identity". En face de Any

iOS choisissez le profile disponible “iPhone developper (… Provisioning profile TP SLE).
Passez du mode Simulateur au mode Device dans le menu déroulant "Overview"… Run à nouveau... observez que

la console affiche toujours les messages NSLog.
2
/
4
Université Claude Bernard – Lyon 1 – Département Informatique
2.
HelloWorld deLuxe
Nous allons à présent enrichir notre application afin que l'on puisse personnaliser dynamiquement le message

afficher. Notez que cette application est absolument inutile. Elle a pour simple objectif de vous familiariser avec la

mise en oeuvre d'un bouton et d'un champs de texte (et son clavier virtuel associé). Une vue unique est nécessaire à

cette application. Vous pouvez partir de l'application précédente.
(Vous pouvez consulter la version original (en Anglais) de cet exercice/tutoriel à l'URL suivante :

http://icodeblog.com/2008/07/30/iphone-programming-tutorial-connecting-code-to-an-interface-builder-view/
)
2.1.
L'interface graphique
Nous allons tout d'abord concevoir l'interface graphique de notre application. Pour ce faire ouvrez InterfaceBuilder

en double-cliquant sur
HelloWorldViewController.xib
situé dans la section Ressources de votre projet.

Pour la disposition des trois éléments inspirez-vous de l'illustration 1.
A partir de la bibliothèque (Library) d'objets, glissez-déposez un
UITextField
. Ouvrez son
Attribute

Inspector
(section Tools) si vous souhaitez modifier son comportement par défaut. Ajoutez ensuite de la même

manière un bouton (
UIButton
) dont vous modifierez l'intitulé et un label (
UILabel
) le cas échéant (inutile si

vous en avez déjà inséré un lors de l'exercice précédent). Faites en sorte que le label puisse exploiter une bonne

largeur de l'écran afin que les messages n'apparaissent pas tronqués.
2.2.
Déclaration des éléments de l'interface graphique avec l'application.
Ouvrez le fichier en-tête de votre contrôleur de vue (
HelloWorldViewController.h
) pour y déclarer toutes

les variables de notre interface. Pour ce faire modifiez le code de la façon suivante :
#import
<UIKit/UIKit.h>
@interface
HelloWorldViewController : UIViewController {
UITextField
*
monTextField
;
UILabel
*
monLabel
;
}
@property
(
nonatomic
,
retain
)
IBOutlet
UITextField * monTextField;
@property
(
nonatomic
,
retain
)
IBOutlet
UILabel * monLabel;
- (
IBAction
) updateMonLabel:(
id
)sender;
@end
InterfaceBuilder utilise les mots-clés
IBOutlet
et
IBAction
pour se connecter au code. Par exemple, la

déclaration
IBOutlet UILabel * monLabel
crée un connecteur (
outlet
) pour lier le label de l'interface

graphique au code. Nous pourrons alors modifier le label à partir du code.
Les propriétés (
@property
) nous permettent de positionner certains attributs associés aux variables. Par exemple,

retain
annonce au compilateur que c'est notre code qui gèrera la mémoire de cet objet.
La déclaration
(IBAction) updateMonLabel:(id)sender
expose le nom de la méthode qui devra être

appelée lorsque l'utilisateur appuiera sur le bouton.
3
/
4
Université Claude Bernard – Lyon 1 – Département Informatique
2.3.
Mise en relation des éléments de l'interface graphique avec l'application.
Il s'agit maintenant de lier les éléments de notre interface graphique aux variables et méthode précédemment

déclarées.
Connectez le UITextField : Ctrl-click sur le File's Owner. Etablissez un lien entre monTextField le UITextField

proprement dit (fenêtre View).
Connectez le UILabel : (cf. ci-dessus).
Connectez le bouton : Ctrl-click sur le File's Owner. Etablissez un lien entre updateMonLabel et le bouton.

Selectionnez alors
Touch Up Inside
.
A présent toutes les connexions devraient être établies. Sauvegardez et vous pouvez fermer InterfaceBuilder.
2.4.
Implémentation
Ouvrez à présent le fichier
HelloWorlViewController.m
. C'est le fichier dans lequel nous allons implémenter la

méthode
updateMonLabel:
. Ajoutez le code suivant :
#import
"HelloWorldViewController.h"
@implementation
HelloWorldViewController
@synthesize
monLabel, monTextField;
- (
IBAction
) updateMonLabel:(
id
)sender {
NSString
* texte = nil;
if
([
monTextField
.
text

length
] ==
0
) {
texte = [[
NSString

alloc
]
initWithFormat
:
@"Please enter your name"
];
}
else
{
texte = [[
NSString

alloc
]
initWithFormat
:
@"Hello %@!"
,

monTextField
.
text
];
}
monLabel
.
text
= texte;
[texte
release
];
}
La dernière ligne (
[text release]
) libère la mémoire associé au champs texte temporaire. Cela est

indispensable pour l'écriture d'une application iPhone efficace. Sachez que la plupart des applications iPhone qui

plantent le doivent aux développeurs qui gèrent mal la mémoire et introduisent des fuites mémoire (
memory leaks
)

dans leurs applications. Il n'y a pas de ramasse-miettes sur iOS (contrairement à Mac OS X).
C'est terminer. Cliquez Build-and-Go. L'application se lance. Lorsque vous cliquez le TextField, un clavier devrait

apparaître. Saisissez votre nom et appuyez sur le bouton. Le label devrait se mettre à jour en tenant compte de la

chaine de caractères que vous avez saisie.
Quelques raccourcis clavier utiles :
Pour passer du fichier .h au .m (et vice-et-versa) :
Alt+Cmd+flèche haut
.
Commande-R: Run
Command-Shift-E: Affiche/Cache l'éditeur
Commande-?: Documentation
4
/
4