Formation ExtJS 5

ExtjS 5 le Framework javaScript de Sencha ,vous permettra de développer des applications Web riches (RIA) et interactives pour mobiles ou Desktop. Ce standard du développement d'application Web respecte le modèle MVC (et même MVVM avec la version 5) et le HTML5 avec tous les navigateurs sur lesquels il s'exécute. Il propose de nombreux composants visuels d'une grande qualité (formulaire avancé, arbre, tableau, onglets,...), et une philosophie d'encapsulation du modèle événementiel qui facilite l'interactivité avec l'utilisateur.
Le design et la richesse de son arborescence de classes en font un modèle particulièrement apprécié des développeurs tant au niveau de la qualité du code que du rendu graphique mais aussi sur le plan professionnel car il facilite le travail en équipes.
Les nouveautés (tactiles, MVVM, responsive, etc.) apportées par ExtJS 5 par rapport à ExtJS 4 seront abordées.

Public :

Cette formation s'adresse aux développeurs et aux chefs de projet.

Prérequis :

Afin de suivre ce stage dans de bonnes conditions, une connaissance minimale de JavaScript est conseillée.

Philosophie et premiers pas avec ExtJS 5

Philosophie et concepts Positionnement dans le monde des RIA (Flex, Silverlight, GWT, etc.) Valeur ajoutée de ExtJS sur d'autres Framework (Dojo, Yui, jQuery, Gwt, ...) Installation et paramétrage Ou trouver de l'aide ? Structure générale d'une application utilisant ExtJS

Le modèle MVVM avec ExtJS 5

Vocabulaire et concepts Qu'est-ce qu'une vue (view) ? Rôle de l'élément ViewModel (databinding avec la View) Rôle de l'élément Model (méthodes et événements avec le ViewModel) Classes extJS permettant la mise en oeuvre du modèle MVVM (View, ViewModel, Model) Organisation des fichiers et des répertoires La gestion des événements dans Ext JS (contrôleur, listener, ...) Analyse détaillée du cycle de vie de l'ensemble de l'application (chargement, événements utilisateurs, accès serveur, affichage, etc.) Exemple de mise en oeuvre

Communication avec le serveur (XML, JSON, Ext Direct)

Ajax dans le contexte de ExtJS Accéder aux données du serveur par flux XMl ou JSON Config object et JSON Règles syntaxiques des objets JSON Transformer une chaîne JSON en objet, tableau, etc. Quel intérêt d'utiliser Ext Direct ? Quelques exemples de synthèse Le gestionnaire de session (Ext.data.Session)

Gérer les données avec ExtJS 5

Accès local et distant Manipulation des données statiques Template et Xtemplates Tri et regroupement Utilisation d'un Proxy pour accéder aux données Associer des modèles de données (Ext.data.Model, Ext.Data.Store) Graphe des objets du modèle métier La validation des données

Construire une interface (conteneur, panel, layout)

Différences entre composant et conteneur Les conteneurs et les panels Un layout pour gérer la disposition des panels Variantes avec les layouts (fit, absolute, accordion, ...) Personnaliser un layout Exemples de combinaisons

Les composants de base (fenêtre, formulaire, etc. )

Fenêtres Création d'un formulaire Cycle de vie d'un formulaire (chargement, validation, etc. ) Les fondamentaux (champs, toolbar, checkbox, bouton radio, etc. ) Les styles CSS Composants personnalisés Navigation entre les composants Le drag and drop

Présentation avancée (grille, arbre, etc. )

Affichage de données structurées dans une grille Formatage et mise en forme de cellule Evénements et cellules Manipulation de la grille Treeview et variantes (multiple trees) Chargement de données dans un arbre Filtrage et édition des données Graphiques et dessin Ajouter un composant dans les cellules d’une grille pour la visualisation des données

Professionnaliser son application avec Ext JS 5

La charte du développeur Conseils sur l'organisation du code Recommandations sur les types de données Anticiper les problèmes classiques avec les différents navigateurs Internationaliser son application (traduction) Localisation (langue, fuseau horaire) Quel format pour le livrable ? Le déploiement La gestion des URL dans le routage La mise en commun d’un core pour les programmes ExtJS et Touch

Le développement mobile pour ExtJS 5

Le support des plateformes tactiles avec ExtJS 5 Classes et composants utilisés Comment gérer une mise en page « responsive » ? Une charte graphique optimisée pour les équipements mobiles

Les nombreux exercices pratiques permettent une mise en œuvre concrète des différents concepts et composants de ExtJS.