Description

Ce stage vous permettra de prendre en main la bibliothèque Sencha Touch 2 permettant de concevoir des applications mobiles cross-platform. Vous installerez Sencha Touch et son environnement, mettrez en oeuvre ses composants graphiques, créerez vos propres composants, élaborerez vos thèmes et gérerez vos données.

À qui s'adresse cette formation ?

Pour qui ?

Développeurs et chefs de projets.

Prérequis

Avoir une première expérience dans le développement mobile (Javascript, HTMl, CSS, XML, ...).

Les objectifs de la formation

Maîtriser les concepts fondamentaux de Sencha Touch 2

Développer des applications mobiles riches avec Sencha Touch 2

Packager une application Sencha Touch 2 dans une application native

Programme de la formation

• Présentation du framework
  • Vue d'ensemble du framework Sencha Touch.
  • L'environnement : Sencha Cmd.
  • Exécuter et Débugger une application.
  • État des lieux des solutions de Test.
  • Documentation.
  • Structure d'une application Sencha Touch, le modèle MVC.
  • Responsive Design vs Adaptive Design.
  • Travaux pratiques Installation de Sencha Touch et de son environnement.
  • Création d'un espace de travail.
  • Création du squelette d'une application MVC avec Sencha Cmd.
• Concepts fondamentaux
  • Instanciation d'un objet : procédurale vs déclarative, Ext.
  • create() vs new.
  • La gestion du DOM.
  • Les éléments de base : composants, conteneurs et événements.
  • Le système de classes.
  • Les objets "Toolbars" et "Button".
  • Comprendre les "Layouts".
  • Les fenêtres.
  • Travaux pratiques Créer des composants personnalisés.
  • Créer des boutons et des fenêtres.
• Le modèle MVC
  • Concepts du modèle.
  • Le Contrôleur.
  • Les dépendances : requires, controllers, views, models et stores.
  • Références aux composants : ComponentQuery.
  • Envoi d'événements personnalisés.
  • Travaux pratiques Définition et utilisation d'un Contrôleur.
  • Envoi d'événements personnalisés.
• Gestion des données
  • L'ensemble des données : Models, Proxies, Stores.
  • Envoi et réception de données : requêtes et réponses HTTP, Ajax/JsonP.
  • Travaux pratiques Gérer les données.
• Composants graphiques orientés données
  • Liste : le composant Ext.
  • List, XTemplate.
  • Vue de navigation : Ext.
  • NavigationView, bouton retour.
  • Les Arbres : noeud racine/enfants, TreeStore, Proxy.
  • Formulaires : l'objet de soumission, les champs, mise en page, soumission, validation, chargement.
  • Travaux pratiques Mise en place de liste, vue de navigation d'arbres et de formulaires.
• Thèmes
  • Thèmes par défaut.
  • Créer des thèmes personnalisés.
  • Modifier les CSS et les thèmes avec Sass et Compass.
  • Travaux pratiques Modifier le thème de l'application.
• Utilisation des API natives
  • Les applications hybrides : Build de l'application pour iOS, Android.
  • API natives : Camera, notification, gyroscope.
  • Travaux pratiques Utilisation de l'API Device.