storyboard, introduction sous ios
DESCRIPTION
TRANSCRIPT
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