mercredi 9 janvier 13

LE STORYBOARDING SOUS IOS

Introduction à l’utilisation des storyboards

Human Talks. Mardi 8 Janvier 2013 par Pierre Gasté

mercredi 9 janvier 13

DANS L’ORDRE ...

mercredi 9 janvier 13

DANS L’ORDRE ...

1. Histoire et objectifs du Storyboarding

mercredi 9 janvier 13

DANS L’ORDRE ...

1. Histoire et objectifs du Storyboarding

2. Les vues sous iOs

mercredi 9 janvier 13

DANS L’ORDRE ...

1. Histoire et objectifs du Storyboarding

2. Les vues sous iOs

3. Comparatif entre les différents modes de gestion des vues

mercredi 9 janvier 13

DANS L’ORDRE ...

1. Histoire et objectifs du Storyboarding

2. Les vues sous iOs

3. Comparatif entre les différents modes de gestion des vues

4. Fonctionnement

mercredi 9 janvier 13

DANS L’ORDRE ...

1. Histoire et objectifs du Storyboarding

2. Les vues sous iOs

3. Comparatif entre les différents modes de gestion des vues

4. Fonctionnement

5. Avantages

mercredi 9 janvier 13

DANS L’ORDRE ...

1. Histoire et objectifs du Storyboarding

2. Les vues sous iOs

3. Comparatif entre les différents modes de gestion des vues

4. Fonctionnement

5. Avantages

6. Inconvénients

mercredi 9 janvier 13

LE STORYBOARDING

mercredi 9 janvier 13

LE STORYBOARDING

LES OBJECTIFS

L’ORIGINE

mercredi 9 janvier 13

LE STORYBOARDING

LES OBJECTIFS

L’ORIGINE

• Terme emprunté au monde du cinéma

mercredi 9 janvier 13

LE STORYBOARDING

LES OBJECTIFS

L’ORIGINE

• Terme emprunté au monde du cinéma

• Définit le cheminement d’une application

mercredi 9 janvier 13

LE STORYBOARDING

LES OBJECTIFS

• Simplifier la création des UI de vos applications

L’ORIGINE

• Terme emprunté au monde du cinéma

• Définit le cheminement d’une application

mercredi 9 janvier 13

LE STORYBOARDING

LES OBJECTIFS

• Simplifier la création des UI de vos applications

• Organiser vos vues à partir des histoires utilisateur

L’ORIGINE

• Terme emprunté au monde du cinéma

• Définit le cheminement d’une application

mercredi 9 janvier 13

LE STORYBOARDING

LES OBJECTIFS

• Simplifier la création des UI de vos applications

• Organiser vos vues à partir des histoires utilisateur

• Synthétiser l’affichage de votre application

L’ORIGINE

• Terme emprunté au monde du cinéma

• Définit le cheminement d’une application

mercredi 9 janvier 13

LE STORYBOARDING

LES OBJECTIFS

• Simplifier la création des UI de vos applications

• Organiser vos vues à partir des histoires utilisateur

• Synthétiser l’affichage de votre application

• Mettre en avant les relations entre vos vues

L’ORIGINE

• Terme emprunté au monde du cinéma

• Définit le cheminement d’une application

mercredi 9 janvier 13

mercredi 9 janvier 13

LES VUES SOUS IOSProgrammation Interface Builder Storyboard

mercredi 9 janvier 13

LES VUES SOUS IOSProgrammation Interface Builder Storyboard

mercredi 9 janvier 13

LES VUES SOUS IOSProgrammation Interface Builder Storyboard

mercredi 9 janvier 13

LES VUES SOUS IOSProgrammation Interface Builder Storyboard

mercredi 9 janvier 13

LES VUES SOUS IOS

mercredi 9 janvier 13

LES VUES SOUS IOSProgrammation Interface Builder Storyboard

Instanciation des objets graphiques Par programmation

Implicite(ou par programmation)

Implicite(ou par programmation)

Personnalisation des objets graphiques Par programmation Graphique

(ou par programmation)Graphique

(ou par programmation)

Placement des objets graphiques Par programmation

Graphique(ou par programmation)

Graphique(ou par programmation)

Enregistrement des objets graphiques

Dans les fichiers programmés

Fichiers individuels (.xib)

Un seul fichier par device (.storyboard)

Définition des relations entre les vues Par programmation Par programmation

Graphique(ou par programmation)

Personnalisation des transitions Par programmation Par programmation Par programmation

(et un peu graphiquement)

mercredi 9 janvier 13

LES VUES SOUS IOSProgrammation Interface Builder Storyboard

Instanciation des objets graphiques Par programmation

Implicite(ou par programmation)

Implicite(ou par programmation)

Personnalisation des objets graphiques Par programmation Graphique

(ou par programmation)Graphique

(ou par programmation)

Placement des objets graphiques Par programmation

Graphique(ou par programmation)

Graphique(ou par programmation)

Enregistrement des objets graphiques

Dans les fichiers programmés

Fichiers individuels (.xib)

Un seul fichier par device (.storyboard)

Définition des relations entre les vues Par programmation Par programmation

Graphique(ou par programmation)

Personnalisation des transitions Par programmation Par programmation Par programmation

(et un peu graphiquement)

mercredi 9 janvier 13

LES VUES SOUS IOSProgrammation Interface Builder Storyboard

Instanciation des objets graphiques Par programmation

Implicite(ou par programmation)

Implicite(ou par programmation)

Personnalisation des objets graphiques Par programmation Graphique

(ou par programmation)Graphique

(ou par programmation)

Placement des objets graphiques Par programmation

Graphique(ou par programmation)

Graphique(ou par programmation)

Enregistrement des objets graphiques

Dans les fichiers programmés

Fichiers individuels (.xib)

Un seul fichier par device (.storyboard)

Définition des relations entre les vues Par programmation Par programmation

Graphique(ou par programmation)

Personnalisation des transitions Par programmation Par programmation Par programmation

(et un peu graphiquement)

mercredi 9 janvier 13

LES VUES SOUS IOSProgrammation Interface Builder Storyboard

Instanciation des objets graphiques Par programmation

Implicite(ou par programmation)

Implicite(ou par programmation)

Personnalisation des objets graphiques Par programmation Graphique

(ou par programmation)Graphique

(ou par programmation)

Placement des objets graphiques Par programmation

Graphique(ou par programmation)

Graphique(ou par programmation)

Enregistrement des objets graphiques

Dans les fichiers programmés

Fichiers individuels (.xib)

Un seul fichier par device (.storyboard)

Définition des relations entre les vues Par programmation Par programmation

Graphique(ou par programmation)

Personnalisation des transitions Par programmation Par programmation Par programmation

(et un peu graphiquement)

mercredi 9 janvier 13

LES VUES SOUS IOSProgrammation Interface Builder Storyboard

Instanciation des objets graphiques Par programmation

Implicite(ou par programmation)

Implicite(ou par programmation)

Personnalisation des objets graphiques Par programmation Graphique

(ou par programmation)Graphique

(ou par programmation)

Placement des objets graphiques Par programmation

Graphique(ou par programmation)

Graphique(ou par programmation)

Enregistrement des objets graphiques

Dans les fichiers programmés

Fichiers individuels (.xib)

Un seul fichier par device (.storyboard)

Définition des relations entre les vues Par programmation Par programmation

Graphique(ou par programmation)

Personnalisation des transitions Par programmation Par programmation Par programmation

(et un peu graphiquement)

mercredi 9 janvier 13

LES VUES SOUS IOSProgrammation Interface Builder Storyboard

Instanciation des objets graphiques Par programmation

Implicite(ou par programmation)

Implicite(ou par programmation)

Personnalisation des objets graphiques Par programmation Graphique

(ou par programmation)Graphique

(ou par programmation)

Placement des objets graphiques Par programmation

Graphique(ou par programmation)

Graphique(ou par programmation)

Enregistrement des objets graphiques

Dans les fichiers programmés

Fichiers individuels (.xib)

Un seul fichier par device (.storyboard)

Définition des relations entre les vues Par programmation Par programmation

Graphique(ou par programmation)

Personnalisation des transitions Par programmation Par programmation Par programmation

(et un peu graphiquement)

mercredi 9 janvier 13

LES VUES SOUS IOSProgrammation Interface Builder Storyboard

Instanciation des objets graphiques Par programmation

Implicite(ou par programmation)

Implicite(ou par programmation)

Personnalisation des objets graphiques Par programmation Graphique

(ou par programmation)Graphique

(ou par programmation)

Placement des objets graphiques Par programmation

Graphique(ou par programmation)

Graphique(ou par programmation)

Enregistrement des objets graphiques

Dans les fichiers programmés

Fichiers individuels (.xib)

Un seul fichier par device (.storyboard)

Définition des relations entre les vues Par programmation Par programmation

Graphique(ou par programmation)

Personnalisation des transitions Par programmation Par programmation Par programmation

(et un peu graphiquement)

mercredi 9 janvier 13

COMMENT ÇA MARCHE ?

mercredi 9 janvier 13

COMMENT ÇA MARCHE ?1.Création des vues via l’outil graphique

mercredi 9 janvier 13

COMMENT ÇA MARCHE ?1.Création des vues via l’outil graphique★ Placement des champs★ Personnalisation des champs

mercredi 9 janvier 13

COMMENT ÇA MARCHE ?1.Création des vues via l’outil graphique★ Placement des champs★ Personnalisation des champs

2.Définition des transitions (segues)

mercredi 9 janvier 13

COMMENT ÇA MARCHE ?1.Création des vues via l’outil graphique★ Placement des champs★ Personnalisation des champs

2.Définition des transitions (segues)★ Nommage des segues★ Définir le type de segue★ Personnalisation des animations

mercredi 9 janvier 13

COMMENT ÇA MARCHE ?1.Création des vues via l’outil graphique★ Placement des champs★ Personnalisation des champs

2.Définition des transitions (segues)★ Nommage des segues★ Définir le type de segue★ Personnalisation des animations

3.Personalisation des transitions

mercredi 9 janvier 13

COMMENT ÇA MARCHE ?1.Création des vues via l’outil graphique★ Placement des champs★ Personnalisation des champs

2.Définition des transitions (segues)★ Nommage des segues★ Définir le type de segue★ Personnalisation des animations

3.Personalisation des transitions★ Passage de paramètres, pointeurs, etc.

mercredi 9 janvier 13

AVANTAGES

mercredi 9 janvier 13

AVANTAGES• La vue d’ensemble regroupant toutes les vues

mercredi 9 janvier 13

AVANTAGES• La vue d’ensemble regroupant toutes les vues

• La représentation graphique des relations entre les vues

mercredi 9 janvier 13

AVANTAGES• La vue d’ensemble regroupant toutes les vues

• La représentation graphique des relations entre les vues

• L’utilisation des fonctions de callback pour personnaliser les segues

mercredi 9 janvier 13

AVANTAGES• La vue d’ensemble regroupant toutes les vues

• La représentation graphique des relations entre les vues

• L’utilisation des fonctions de callback pour personnaliser les segues

• L’absence d’encombrement du code par le UI code

mercredi 9 janvier 13

AVANTAGES• La vue d’ensemble regroupant toutes les vues

• La représentation graphique des relations entre les vues

• L’utilisation des fonctions de callback pour personnaliser les segues

• L’absence d’encombrement du code par le UI code

• La cohabitation Storyboard / Fichiers XIB est possible

mercredi 9 janvier 13

INCONVÉNIENTS

mercredi 9 janvier 13

INCONVÉNIENTS

• Le méli-mélo entre les segues

mercredi 9 janvier 13

INCONVÉNIENTS

• Le méli-mélo entre les segues

• L’absence de certains types de segues

mercredi 9 janvier 13

INCONVÉNIENTS

• Le méli-mélo entre les segues

• L’absence de certains types de segues

• Utilisation plus complexe avec des composants non natifs

mercredi 9 janvier 13

INCONVÉNIENTS

• Le méli-mélo entre les segues

• L’absence de certains types de segues

• Utilisation plus complexe avec des composants non natifs

• Uniquement à partir de iOs 5

mercredi 9 janvier 13

S’INITIER EN 2 MINUTES CHRONO

mercredi 9 janvier 13

S’INITIER EN 2 MINUTES CHRONO

mercredi 9 janvier 13

POUR APPROFONDIR ...

• L’originehttp://en.wikipedia.org/wiki/Storyboard

• Apprendrehttp://developer.apple.com/library/ios/#documentation/iPhone/Conceptual/SecondiOSAppTutorial/Introduction/Introduction.html

http://kurrytran.blogspot.fr/2011/07/simple-ios-5-tutorial-using-storyboard.htmlhttp://www.raywenderlich.com/5138/beginning-storyboards-in-ios-5-part-1

• Retrouver la présentation sur slideshare !

mercredi 9 janvier 13