Formation iPhone ENSI by (Orange Tunisie)

SDK iPhoneSDK iPhoneProgramme de formation

PrésentationLancé en mars 2008

Compatible avec Mac OS X

Langage : Cocoa

Environnement de développement : Xcode et Interface Builder

Développement pour iPhone et iPod Touch

100 000 applications disponibles

3 milliards de téléchargements (21 milliards en 2013)

75% des applications sont gratuites

Plan de formation1. Introduction

2. Création d’un projet

3. Programmation

4. Interface utilisateur

5. Rotation et dimensionnement

6. Applications à vues multiples

7. Tab Bars et Pickers

8. Table Views

Plan de formation9. Navigation Controllers

10.Paramètres de l’application

11. Persistance des données

12. Dessiner avec Quartz

13. Interaction de l’utilisateur

14. Utilisation de la caméra et de l’album photo

15. Publication sur l’AppStore

1. Introduction1. Introduction

1. Introduction

Ouvrir un compte Apple

http://developer.apple.com/iphone/

SDK version 3.1.2

Téléchargement du SDK



1. Introduction

Uniquement une application en exécution

Uniquement une fenêtre à la fois

Accès limité au workspace de l’application

Temps de réponse limité

Ecran limité

Ressources systèmes limitées

Pas de souris ni de clavier physique

Caractéristiques d’une application


1. Introduction

Programmation Cocoa

Objets Objective-C

NSStringNSNumberNSArrayNSMutableArrayNSDictionaryNSMutableDictionaryNSDateintBOOL

Envoyer des messages aux objets

Autres langages : alert.show();En Objective-C : [alert show];

1. Introduction

Programmation Cocoa

Envoyer des messages aux objets avec des paramètres

Autres langages : alert.show("A Funny Message", 3);

En Objective-C : [alert show:@"I say this!" thisManyTimes:3];

Instancier des objets

myClass *myObject = [[myClass alloc] init];

Libération des objets

[myObject release];

1. Introduction

Programmation Cocoa

Pattern de l’utilisation des objets

Management de la mémoireManagement manuel de la mémoire avec le «Comptage des références»Le système garde en mémoire les objets dont leur référence est différente à 0.Chaque composant qui nécessite d’utiliser un objet augmente sa référence de 1.

myClass *myObject = [[myClass alloc] init];...[myObject doStuff];...[myObject release];

1. Introduction

Programmation Cocoa

Classe NSString

NSString *lotsOfInsertedStuffString = [NSString stringWithFormat:@"I am adding this number: %i and this string:%@.", 45, myString];

NSLog(lotsOfInsertedStuffString);

NSString *myString = [[NSString alloc] initWithString:@"A String"];NSLog(myString);[myString release];

Ou

NSString *myString = @"A String";NSLog(myString);

1. Introduction

Programmation CocoaClasse NSNumber

On peut utiliser de la classe NSNumber ou les types en C :

int i = 3;NSLog(@"i = %i", i);double d = 3.4;NSLog(@"d = %f", d);double dPlusi = d + i;NSLog(@"d + i = %f", dPlusi);

1. Introduction

Programmation CocoaClasse NSArray

NSMutableArray *myArray = [[NSMutableArray alloc] init];

[myArray addObject:@"Element 1"];[myArray addObject:@"Element 2"];

NSLog([myArray objectAtIndex:0]); NSLog([myArray lastObject]);

for (NSString *s in myArray) {NSLog(s);

}

[myArray release];

2. Création d’un projetXcode


Application Delegate

Il s’agit de la classe en charge du lancement de l’application et de l’affichage de la fenêtre principale.Vous pouvez vous en servir pour initialiser des éléments particuliers communs à l’ensemble des éléments de votre application :■connexion à une base de données,■configuration générale,

Cette classe est obligatoire pour toute application IPhone, elle se conforme au protocole UIApplicationDelegate et implémente la

méthode-(void)applicationDidFinishLaunching...

Cette méthode est appelée directement après le lancement de l'application.


Frameworks

Comme son nom l'indique, cette partie contient les "includes" des Frameworks utilisés dans le projet.

Par défaut, vous avez les 3 principaux: UIKit, Foundation et CoreGraphics.

ProductsContient le fichier généré par la compilation, à savoir l’application


File’s Owner : instance de l’objet qui a chargé le fichier nib (NeXT Interface Builder) du disque

First Responder : objet avec lequel l’utilisateur intéragit

Autres objets : Instances d’objets qui seront créés lorsque le fichier nib se chargera

Interface Builder


MainWindow.xib

Ce fichier permet de créer les instances de «Application Delegate», de la fenêtre principale et du «View Controller» lors de la compilation

Instance de Button_FunAppDelegate

Instance de Button_FunViewController

Fenêtre unique de l’application


Image .png obligatoire et de taille de 57 x 57 pixels

Importer l’image dans le projet

Spécifier dans les paramètres de l’application («mon_prj-Info.plist») une icône

Ajout d’une icône à l’application


Exercice 1 :

•Créer un projet Hello World

•Placer un label «Hello World» sur la vue

•Changer ses attributs (Taille, couleur ...)

•Ajouter une icône à l’application

•Compiler

3. Programmation3. Programmation

3. Programmation

Architecture et méthode de conception qui organise l’interface homme-machine (IHM)

Division de l’IHM en :

Un modèle (Modèle de données)

Une vue (Présentation, interface)

Un contrôleur (Logique de contrôle, gestion des évènements, synchronisation)

Concept du «Modèle-Vue-Contrôleur»

Lorsqu'un client envoie une requête à l'application :

la requête est analysée par le contrôleur

le contrôleur demande au modèle approprié d’effectuer les traitements

le contrôleur renvoie la vue adaptée




3. Programmation

Exercice 2 :

•Créer un projet Button Fun

•Ajouter deux boutons et un label

3. Programmation

Classe Controller.h

Sous classe de UIViewController

3. ProgrammationLes pointeurs

Déclaration :

Les fonctionsDéclaration :

Eviter de devoir définir les accesseurs et les mutateurs

Options de création des accesseurs et mutateurs

par le compilateur

Les accesseurs

Identiques

3. ProgrammationLes types de données :

NSStringNSNumberNSArrayNSMutableArrayNSDictionaryNSMutableDictionaryNSDateintBOOL

Exemple :

.h :NSNumber *my_number;

@property (nonatomic, retain) NSNumber * my_number;

.m :@synthesize my_number;

3. Programmation

Classe Controller.m

3. ProgrammationClasse Controller.m

3. Programmation

Exercice 2 (suite) :

Déclarer un pointeur «statusText» sur le label

Déclarer une fonction «buttonPressed»

3. Programmation

Exercice 2 : Correction

.h

.m

Création des accesseurs et mutateurs

Implémentation de la fonction

3. Programmation

Exercice 2 : Correction

.m

Concernant l’allocation ...

...ou

3. Programmation

Connecter des pointeurs

1. Relier le File’s Owner au Label pour créer la

connexion

2. Choisir le pointeur

3. Programmation

Spécifier les actions

1. Choisir l’action

2. Choisir l’évènement et glisser à partir du cercle à

droite jusqu’au File’s Owner

3. Sélectionner dans la pop-up la méthode à exécuter

3. Programmation


Relier les pointeurs avec les objets présents dans Interface Builder

Tester l’application


Liste des contrôles disponibles dans IB :

Image View

Text Field

Slider

Segmented Control

Button

Label

Switch

Les contrôles peuvent être du type :

• Actif (Button ...)

• Statique (Label ...)

• Passif (Text Field ...)


Liste des images disponibles

Paramètres de Image View :

Permet de définir comment l’image se trouve par rapport à la vue dans laquelle elle se situeAppliquer un effet de transparence à l’image

Pas d’impact sur une imageAssigner un identifiant à cette imagePermet de modifier la manière dont l’image est dessinéePermet à l’utilisateur d’effectuer des interactionsPermet de recevoir plusieurs évènement de multi touche


Valeur par défaut

Paramètres de Text Field :

Afficher une légende dans le champs

Alignement

Modifier l’apparence

Type de valeurs possibles dans un Text Field

Attributs hérités de UIControl

(Peu sont utiles à ce contrôle)


Exercice 3 :

Créer un projet «Control Fun»

Créer l’interface comme celle présentée à droite

Déterminer le nombre de pointeurs nécessaires

Déterminer le nombre d’actions nécessaires

Implémenter l’ImageView et les deux TextFields


Exercice 3 :Image View : image statique (pas besoin de pointeurs)

Labels : pas besoin de pointeurs

TextFields : pointeurs à déclarer

(nameField et numberField)

•Slider : un pointeur pour le label et une action pour le slider

(sliderLabel et fonction sliderChanged)

Segmented Control : pas besoin de pointeurs, une action

(fonction toggleControls)

•Button : pointeur et action

(doSomethingButton et fonction buttonChanged)

•Switches : un pointeur pour chaque et une action

(leftSwitch et rightSwitch)


Cacher le clavier lorsque la touche Done est enfoncée

Evénement lié : Did End On Exit

.h

.m

FirstResponder : c’est le contrôle pour lequel l’utilisateur est en train de interagir avec

4. Interface utilisateurCacher le clavier lorsqu’on touche l’arrière

plan.h

.m

4. Interface utilisateurCacher le clavier lorsqu’on touche l’arrière

plan

Pour que la vue soit capable de capturer les actions, elle doit faire

partie de la classe UIControl

Evénement lié : Touch Down


Valeurs minimum et maximum du slider

Paramètres du Slider :

Valeur initiale

Propriétés habituelles

Images du début et de la fin



Implémenter le Slider


Implémentation du Slider

.h

.m



Implémenter le SegmentedControl ainsi que les Switches

4. Interface utilisateurImplémentation du Switch et du Segmented

Control

.h

4. Interface utilisateurImplémentation du Switches, des Buttons et

du Segmented Control

.m

Permet de cacher les boutons ou les switches en fonction de la

valeur du segmentedContro

l



•Implémenter le Button «Do Something»

UIActionSheet UIAlertView


Implémentation de l’ActionSheet

.h

.m

Déclaration du protocole


.mImplémentation de l’AlertView

Méthode déléguée

Créer une alerte

L’AlerteView possède aussi des méthodes déléguées (Il faut donc les déclarer en protocole dans le .h) mais ici, on ne s’en sert pas donc pas de

déclaration


viewDidLoad et viewDidUnload

viewDidLoad : Permet d’initialiser la vue, les variables, fonctions ... lorsqu’elle se charge

viewDidUnload : permet d’éviter de surcharger la mémoire. Lorsque vous spécifiez des pointeurs dans le contrôleur, ces derniers sont retenus (Retain) et lorsque la vue est libérée, il faut donc libérer ces pointeurs dans viewDidUnload. Lorsque le fichier nib sera rechargé, Cocoa connectera automatiquement les pointeurs.


Taille de l’écran :

320 pixels x 460 pixels (ou 480 s’il n’y a pas de barre de statut)

Trois approches pour la rotation :

Dimensionnement automatique : rapide et simple mais pas approprié pour des applications complexes

Positionnement manuel lors de la rotation

Créer deux versions de la vue (Portrait et paysage)


Autosizing :

Pour autoriser n’importe quel sens d’orientation :

5. Rotation et dimensionnementRedimensionneme

nt :

Examiner l’ exemple fournit en annexe :

«05 Autosize 1»

5. Rotation et dimensionnementRedimensionnement manuel :

Examiner l’exemple fournit en annexe : «05 Autosize 2»


Création de deux vues :

Examiner l’exemple fournit en annexe : «05 Swap»


Navigation Bar Tab Bar et Navigation BarClasse :

UINavigationControllerClasse : UITabBarController


Exercice 4 : Création du projetCréer un projet «View Switcher»

Choisir «Window-based Application» (Contient uniquement une Window et une application delegate)

On créé un «Root Controller» qui va coordonner l’affichage des deux vues


Exercice 4 : Création des contrôleurs

Ajouter au projet le template «UIViewController subclass»

Nommez le «SwitchViewController.m»

Faire de même en créant : «BlueViewController.m» et «YellowViewController.m»


Exercice 4 : Création des vuesAjouter au projet deux templates «View XIB»

Ils correspondent à deux fichiers «nib» qui représentent nos deux vues

Nommez les «BlueView.xib» et «YellowView.xib»


Exercice 4 : Modification de l’App Delegate

View_SwitcherAppDelegate.h

Déclaration d’un pointeur sur notre «root controller» car il sera intégré à l’application lorsqu’elle sera lancée


Exercice 4 : Modification de l’App Delegate

View_SwitcherAppDelegate.m


Exercice 4 : SwitchViewController.h

Déclaration des pointeurs et des actions dont nous aurons besoin

Pointeurs sur les deux classes sur lesquelles on va switcher

Action pour switcher les vues (Appelée lorsque le bouton sera enfoncé)


Exercice 4 : Modification de MainWindow.xibAjout d’une instance de SwitchViewController dans le MainWindow.xib

Changer la classe de l’objet en

SwitchViewController

Construire l’interface (Toolbar) et connecter le bouton à l’action «switchViews»

6. Applications à vues multiplesExercice 4 : Implémentation de SwitchViewController.m

Allocation de la vue bleue

On l’insère dans le contrôleur

On alloue la vue jaune

Si le contrôleur jaune existe mais sa vue n’est pas au premier plan ou si le contrôleur n’a pas encore été instancié

On retire la vue bleue et on la remplace par la vue jaune

Si la vue jaune n’est pas allouée

6. Applications à vues multiplesExercice 4 : Implémentation de SwitchViewController.m

On alloue la vue bleue

Sinon le contrôle bleu existe mais sa vue n’est pas au premier plan ou si le contrôleur n’a pas été instancié

On retire la vue jaune et on la remplace par la vue bleue

Si la vue bleue n’est pas allouée

Ne pas oublier de désallouer


Exercice 4 : Implémentation des alertes

Implémenter les alertes (UIAlertView) dans chacune des deux vues


Exercice 4 : Appliquer une transition

...

...

Timming de transitionDuréeDéclaration

Type de transition

A utiliser si on a surchargéces méthodes dans les contrôleurs

A utiliser si on surcharge ces méthodes dans les contrôleurs

Permet d’enregistrer les animations et de lancer les transitions

7. Tab Bars et Pickers7. Tab Bars et Pickers


Exercice 5 : Création du projetCréer un projet «Pickers»

Choisir «Window-based Application» (Contient uniquement une Window et une application delegate)

On créé 4 «Root Controller» : DatePickerViewController.h, SingleComponentPickerViewController.m, DoubleComponentPickerViewController.m, DependentComponentPickerViewController.m


Exercice 5 : Ajout du Root View Controller

.h

.m

7. Tab Bars et PickersExercice 5 : Ajout du Root View Controller

Icônes de la Tab Bar : 24 x 24 pixels, fond transparent, format .png

Ouvrir «MainWindow.xib», ajouter une «Tab Bar Controller»

Ajouter 4 items qui correspondent à nos 4 vues

Associer chaque Table View Controller avec le fichier nib correspondant

7. Tab Bars et PickersExercice 5 : Ajout du Root View Controller

Changer la classe en «DatePickerViewController» dans «Identity Inspector»

Répéter la procédure pour les 4 autres items

Control Drag de «Pickers App Delegate» au «Tab Bar Controller» et connecter le pointeur «rootController»

Icône rouge pour afficher des infosAppliquer un style prédéfini à l’item

Customiser l’apparence de l’item

7. Tab Bars et PickersExercice 5 : Implémentation de Date Picker

Ajouter un pointeur (Pour récupérer la date sélectionnée) : datePicker

Ajouter une action (Pour afficher une «AlertView» avec la date sélectionnée)

buttonPressed

Ouvrir DatePickerViewController.xib

Redimensionner la fenêtre en spécifiant dans «BottomBar», Tab Bar

Ajouter à partir de la librairie un DatePicker et un bouton

7. Tab Bars et PickersExercice 5 : Implémentation de Date Picker

7. Tab Bars et PickersExercice 5 : Single Compenent Picker

Ajouter un pointeur (Pour récupérer le choix sélectionnée) : singlePicker

Ajouter une action (Pour afficher une «AlertView») buttonPressed

Inclure les protocoles UIPickerViewDelegate et UIPickerViewDataSource

.h

Ouvrir SingleCompenentPickerViewController.xib

Redimensionner la fenêtre en spécifiant dans «BottomBar», Tab Bar

Ajouter à partir de la librairie un PickerView et un bouton et les relier aux pointeurs et actions correspondants (ne pas oublier de relier Delegate et DataSource)


Exercice 5 : Single Compenent Picker

Initialisation d’un array


Exercice 5 : Single Compenent Picker

Instructions pour le compilateur

Fournir au Picker, la valeur à mettre dans un champ donné pour un composant donné

7. Tab Bars et PickersExercice 5 : Multicompenent Picker

Ajouter un pointeur (Pour récupérer le choix sélectionnée) : doublePicker


Ajouter deux Array et inclure les protocoles UIPickerViewDelegate et UIPickerViewDataSource

.h

Ouvrir SingleCompenentPickerViewController.xib et créer l’interface


Exercice 5 : Multicompenent Picker

7. Tab Bars et PickersExercice 5 : Multicompenent Picker


NSDictionary et NSArray

7. Tab Bars et PickersExercice 5 : Depedent Components

Ajouter un pointeur (Pour récupérer le choix sélectionnée) : picker


Ajouter deux Array, un Dictionary et inclure les protocoles UIPickerViewDelegate et UIPickerViewDataSource

.h

Ouvrir DependentCompenentPickerViewController.xib et créer l’interface


Exercice 5 : Depedent Components


Permet de récupérer les ressources que l’on a importé

dans le projet

Permet de récupérer toutes les clés du

dictionnairePermet de trier par ordre alphabétique

l’array

8. Table Views8. Table Views

8. Table Views

Principe des vues sous forme de listes

Une seule colonne par vue, lignes facilement modifiables

Chaque ligne peut contenir des sous-vuesStockage uniquement des lignes visibles à l’écranUITableViewDataSource et UITableViewDelegate

8. Table Views

Styles des Table Views

Grouped table Plain table sans indexPlain table avec index

8. Table Views

Les sections dans une Table Views

8. Table Views

Exercice 6 : Une simple Table ViewCréer un projet «Simple Table»

Placer une Table View sur la vue

Connecter les DataSource et Delegate avec File’s Owner

Implémenter le Simple_TableViewController (Ajouter les protocoles ainsi que un array qui contiendra les données)

8. Table Views

Exercice 6 : Une simple Table View

Nombre de lignes par sections

Pour afficher une ligne donnéeindexPath contient la section et la ligne

Pour créer une cellule en réutilisant l’id défini

précédemment

Identifiant unique d’une cellule

Si la tableView ne possède pas de cellule partagée

On retourne la cellule

8. Table ViewsExercice 6 : Ajout d’une image dans chaque ligne

propriété imageView

8. Table Views

Style des lignes

■ Image: permet d’afficher une image à gauche de la ligne

■ Text Label: correspondant au texte principal de la ligne

■ Detail Text Label: permet d’ajouter une note, un label à ligne en dessous du texte principal

Indentation des lignes

8. Table Views

Sélection d’une ligne■ Avant de sélectionner une ligne

■ Après sélection d’une ligne

8. Table Views

Taille d’une ligne

Taille du texte

8. Table ViewsExercice 7 : Créer ses propres cellules, exemple 1

Créer un projet «Cell»

Placer une Table View sur la vue

Connecter les DataSource et Delegate avec File’s Owner


Déclaration de nos sources de données


Création manuelle de la cellule : ajout du label

«Name»



«Color»


«nameValue»


«colorValue»


Ajout les valeurs aux deux champs

8. Table ViewsExercice 8 : Création de CustomCell.h, exemple 2

Ajouter au projet, un UITableViewCell

Ouvrir CustomCell.xib

Ajouter une «Table View Cell» à partir de la librairie

Changer la classe de UITableViewCell en CustomCell

Changer la taille de la cellule en 65 pixels


Double clic sur l’icône CustomCell

Déposer l’objet «View» sur cette vue

Changer la taille de la vue :

x = 0, y = 0, w = 320 et h = 65

Déposer 4 labels sur la vue et relier les pointeurs sur ces labels


Effectuer les changements suivants

Création de la cellule à partir du

nib

Obtenir tous les objets du nib


Effectuer les changements suivants

Pour spécifier que l’on a changé la taille de la cellule

.h

8. Table Views

Exercice 9 : Etudier l’exemple de projet intitulé « 08 Section 1» et « 08 Section 2 »

8. Table Views

Points importants

Ajouter un index

Implémentation d’un barre de recherche

PrincipeCréer un dictionnaire immutable qui contient tout les

données ainsi qu’un dictionnaire mutable qui contiendra tous les résultats lors d’une recherche

Problème : mutableCopy ne copie pas en profondeur les array et copie uniquement les références

Solution : Créer soit meme une fonction qui copie en profondeur

8. Table ViewsImplémentation d’un barre de

rechercheDeep Mutable Copy .h.m

Parcours du dictionnaire original

On essaye de copier l’objet viamutable deep copy

Si l’objet ne répond pas au message, on tente une mutable

copySi l’objet ne répond pas au

message, on tente une simple copie

9. Navigation Controllers

9. Navigation Controllers

9. Navigation ControllersEtude de l’exemple « 09 Nav»

Mise en place de Navigation Controller

10. Paramètres de l’application

10. Paramètres de l’application

10. Paramètres d’une application

Exercice 10 : Utility ApplicationCréer un projet «AppSettings»


Exercice 10 : Settings BundleProperty list nommée ‘Root.plist» permet de spécifier les paramètres de

l’application.

Ce fichier suit une structure très précise

Ajouter un «Settings Bundle» au projet : «Settings»

Analyse du fichier Root.plist


Analyse du fichier Root.plist


Lecture des paramètres dans l’application

Classe NSUserDefaults


Ecriture des paramètres dans l’application

11. Persistance des données3 possibilités pour sauvegarder des données

Proporty List

Archive Object

SQLite 3

Core Data

Créer un chemin d’un fichier

Récupérer le dossier de stockage des documents sur l’iPhone

Accès au dossier tmp


Méthode 1 : Property ListListe des objets pouvant être sauvegardé dans un fichier «plist»

Méthode

Inconvénient : Les autres objets ne peuvent pas être sauvegardés


Méthode 1 : Property List

Lecture des données

Ecriture des données

11. Persistance des donnéesMéthode 2 : Archiver les objets

Protocole NSCoding possède deux méthodes obligatoires pour archiver

Avant de pouvoir sauvegarder une archive, il faut que la classe soit conforme à NSCoding et NSCopying

Encoder

Décoder Si on surclasse une classe qui ne conforme pas à NSCoding


Méthode 2 : Archiver les objetsProtocole NSCoding possède deux méthodes obligatoires pour archiver

Décoder Si on surclasse d’autre classes qui ne conforme pas NSCoding

NSCopying

On crée une nouvelle instance de notre classe et ensuite on assigne les mêmes valeurs aux propriétés

Pointeur sur une structure pour la gestion mémoire (Peut important)


Méthode 2 : Archiver les objetsPersistance du «Data Object»

Archiver les objets dans un NSMutableData

Contiendra l’objet encodé

Création d’une clé pour encoder n’importe quel objet dans l’archive

Désallocation

On prévient l’archive que l’on a fini d’encoder nos objets

On enregistre l’archive


Méthode 2 : Archiver les objetsPersistance du «Data Object»

Décoder l’archive

Contiendra l’objet décodé

Lecture des objets désarchivés avec la clé définie précédemment

Désallocation

Explorer l’exemple «11 Persistence Archiving»


Méthode 3 : SQLite 3

Ouverture de la base de données

Importer le frameworks «libsqlite3.dylib»

Fermer la base de données

Créer une table


Méthode 3 : SQLite 3Effectuer des requêtes


Méthode 3 : SQLite 3Bind Variables pour insérer des champs

Explorer l’exemple «11 Persistence SQLite»


Méthode 4 : Core DataClasses permettant de gérer facilement la persistance des donnéesPrincipe de Core Data basé sur la description des donnéesPour se faire : création d’entités et d’attributs (un peu comme en UML)

1. Déclaration de l’entité

2. Déclaration d’un attributs

3. Modification des propriétés de l’attribut


Méthode 4 : Core Data

Etablir des relations entre les entités

Explorer l’exemple «11 Core Data Persistence»


QuartzClasse UIView, fonction drawRect

Le dessin s’effectue avec un context. Chaque vue à un contexte associé

Fonctions de dessin

CouleursStrokeColor : pour la couleur d’une ligne et le contour d’une forme

FillColor : pour la couleur interne d’une forme


Explorer le projet «QuartzDemo»

Formation iPhone ENSI by (Orange Tunisie)

Education

Transcript of Formation iPhone ENSI by (Orange Tunisie)