Mettez en œuvre MVC avec le framework ExtJS 4. Créez progressivement controlleur , vue et model ExtJS 4. Comprenez les interactions Controlleur/Vue à travers la méthode control() du controlleur.
Augmentez la productivité de vos développements ainsi que la maintenance de vos applications ExtJS en produisant du code structuré.
Prérequis
Connaissance HTML, javascript.
Objectifs
Comprendre l’architecture MVC ExtJS 4
Mettre en oeuvre Controlleur, Model, Store, Vue ExtJS 4
Programme
Nos petits déjeuners ExtJS
Introduction
Partie 1 : Squelette application
Partie 2 : Création Controleur
Partie 3 : Création Vue ‘lister les employés’
Partie 4 : Gestion évènement ‘double-click’
Partie 5 : Création nouvelle vue ‘Editer un employé’
Partie 6 : Création d’un store
Partie 7 : Création ‘Model’
Durée
30min
Démos
Démo Application ExtJS4 version classique et version MVC
Démo GridPanel ExtJS 4
Démo V2 Data
Liens utiles
CSS Selectors
Ext.ComponentQuery API
Tutoriel ExtJS 4 MVC : comprendre le ComponentQuery
Ext Loader Configuration
Introduction
Les développeurs Java et Php connaissent la valeur ajoutée du pattern MVC (Modèle – Vue – Controleur). L’équipe ExtJS leur permet de mettre également cette approche coté client avec ExtJS 4.
Partie 1 : squelette application
Analysez l’écran suivant :
Il est le résultat du squelette HTML suivant :
et du code suivant :
Expliquez
Quel est l’impact des lignes de code 1, 4, 6, 8 ?
Notez l’arborescence du projet :
QUESTION : A quoi sert le répertoire ‘app’ ?
Partie 2 : création Controleur
2 étapes clés :
— Etape 1 : création classe Controlleur
— Etape 2 : branchement controlleur / application
Etape 1 : création de la classe Controlleur
Dans le répertoire ‘app’, créer un répertoire ‘controller’
Dans le répertoire ‘controller’, créer un nouveau fichier ‘Employes.js’ ayant pour contenu le code suivant
INFO : Lors du lancement de l’application (index.html), le controlleur Employes est chargé automatiquement, et sa fonction ‘init’ est appelée avant le lancement de l’application (‘launch’).
init est associé à this.control afin d’associer vue / controlleur. Ici lors de l’affichage (render) de toute vue de type ‘panel’ (ou descendant) directement interne du ViewPort (relation parent/enfant), le framework appelle la méthode ‘onPanelRendered’ interne à la classe.
Notez l’utilisation du ‘ComponentQuery’ . Expliquez.
Etape 2 : branchement controlleur / application
Rendu
Expliquez l’apparition du message ‘Panel affiché’ dans la console de log Firebug
Partie 3 : Création vue ‘Lister employés’
Une vue est généralement une classe qui hérite d’un ‘composant’ ExtJS (Ex : Panel, GridPanel, Window…).
3 étapes clés :
— Etape 1 : création classe Vue +
— Etape 2 : branchement controlleur / vue +
— Etape 3 : branchement application / vue (via xtype –> Meilleure performance & maintenabilité)
Etape 1 : création de la classe Vue
Dans le répertoire ‘app’ Créer un répertoire ‘view’
Dans le répertoire ‘view’ Créer un répertoire ’employe’
Dans le répertoire ’employe’ Créer un fichier List.js
Ajoutez le code suivant dans List.js :
QUESTION : Quel composant vue est utilisé ici ?
QUESTION : à quoi sert la clé ‘alias’ ? et la clé ‘initComponent’ ? du composant vue.
QUESTION : à quoi sert la ligne 23 : this.callParent(arguments); ? Est’elle obligatoire ? Pourquoi ?
INFO 1 : L’objet arguments est un objet, semblable à un tableau, correspondant aux arguments passés à une fonction. + d’infos ici
INFO 2 : la méthode callparent permet d’appeler la méthode parente de la méthode courante.
Etape 2 : branchement controlleur / vue
Analysez le code ci-dessous :
Expliquez
Etape 3 : branchement application / Vue
Vous venez de créer votre vue. Vous allez demander que ce soit cette vue qui apparaîsse au lancement (launch) de l’application.
Modifier en conséquence le code de l’Application :
Expliquez
Rendu
Partie 4 : Gestion évènement ‘double-click’
Etape clé : Mise à jour du controlleur
Expliquez
Rendu
Expliquez
Partie 5 : Création vue ‘Edition employé’
Etape 1 : création de la classe Vue
Expliquez
Etape 2 : association controlleur / vue
— > spécifier que le controleur gère désormais la vue d’Edition (en plus de la vue de liste) . Quelle ligne de code ci-dessous correspond à cela ?
— > Modifier le traitement associé au double-click.
Expliquez
Rendu
Partie 6 (refactoring) : création Store
Un store est une représentaton ExtJS d’une table de données.
Les données métiers sont pour l’instant codées ‘en dur’ dans la vue List.js . Nous allons utiliser un store ExtJS pour mieux découpler vue / données .
Créez un répertoire ‘store’ dans le répertoire ‘app’ :
Dans le répertoire ‘store’, créez un fichier Employes.js suivant :
Nous avons donc déporté la création des données. Nous allons réaliser en conséquence un refactoring de notre controlleur et de notre vue :
Modifiez le controlleur app/controller/Employe.js (nouvelle clé : ‘stores’) :
Modifiez également la vue (app/view/employe/List.js)
Ce travail de refactoring n’a en principe aucun impact sur le rendu visuel de l’application.
Rafraîchissez l’écran de l’application.
Partie 7 : Mise à jour liste Employés
Modifiez l’implémentation de la logique métier associée à l’appui bouton ‘Enregistrer’
Modifiez le contenu du champs Nom dans le formulaire
Analysez le rendu après appui sur bouton ‘Enregistrer’
Expliquez
Partie 8 : Enregistrer modifications
Refactoring du store afin que les données ne soient pas écrites en dur mais proviennnent plutôt d’un fichier JSON suivant (à créer dans un répertoire ‘data’ à la racine de l’application):
Etape 1 : Définition du ‘Model’
Crééz un répertoire app/model
Dans ce répertoire model, créez un fichier Employe.js au contenu suivant :
Etape 2 : Branchement Controlleur / Model
Etape 3 : Branchement Store / Model
Pour aller plus loin : formation ExtJS 4 Objis
A FAIRE : modifier notre application pour que le flux JSON vienne d’un script php ou java coté serveur, et les données d’une base MySQL.
A FAIRE : Synchroniser l’état du store ExtJS avec l’état des données en base de données
A FAIRE : avec Firebug : constater les différents flux entre client et serveur (GET / POST)
Développez ce savoir-faire lors de notre formation de 3 jours :
Objis propose depuis 2009 une formation ExtJS, mise à jour en 2011 avec la version 4 du framework. En plus des fondamentaux ExtJS, notre formation ExtJS 4 vous apporte un savoir-faire opérationnel sur les deux modules fondamentaux : MVC et Accès données ExtJS 4.
Ci-dessous sommaire de notre support de 120 pages.
]
Pour une formation ExtJS 4 sur mesure dans nos locaux ou dans vos locaux, contactez Douglas MBIANDOU (douglas.mbiandou @ objis.com), responsable des formations OBJIS, et concepteur de la formation ExtJS Objis.
