Formation ExtJS 1 Vendredi 21 aout 2009 – Villeurbanne – Société IZEO

- Formation SPRING Sommaire Exemples applications ExtJS Installation + Hello ExtJS Architecture : 6 modules clés Modèle de composant Cycle de vie d'un composant Bonnes pratiques développement ExtJS Communication entre composants Liens utiles 2

- Formation SPRING Exemple ExtJS dans HTML : 3

- Formation SPRING Exemple complet ExtJS : (webmail & Rss) 4

- Formation SPRING Architecture ExtJS : 6 modules clés 5

- Formation SPRING Module Base & Core  Manipulations DOM  Gestion d'évènements  Communications Ajax  Tous les autres modules en dépendent  Ce module ne dépend d'aucun autre module 6

- Formation SPRING Module UI Components  Composants interface utilisateurs  Widgets, Panel, Layout,  Conteneurs Widget qui peut contenir un ou plusieurs autres widgets (enfants) Ex : Panel, Window Ex : Tabpanel (parent) contient des Tabs (enfants)  Layouts Utilisé par conteneur pour organisation visuelle des enfants dans le conteneur. 7

- Formation SPRING Exemple d'interface 8

- Formation SPRING Exemple d'interface 9

- Formation SPRING Module Data Services  Chargement, récupération données à partir d'une source (XML, base de données...)  2 parties : DataStore + Dataview  DataStore : stockage des données  DataView : représentation des données 10

- Formation SPRING Module Utilities  Outils utiles dans le cadre du développement  Ex : Util.Format pour formater/transformer données  Ex : CSS singleton Pour créer, maj, supprimer CSS ou requête navigateur 11

- Formation SPRING Téléchargement ExtJS 

- Formation SPRING Contenu zip  Adapter : ext-base.js + intég. Prototype, jquery, yui  Air : intég AIR (= Adobe Flex sur client lourd)  Docs  Examples  Pkgs : plusieurs fichiers.js (packages)  Resources : CSS et images des widgets ext-all.css = concaténation de toutes les CSS  Src : code source  ext-all.js : concaténation de tous les fichiers js  ext-debug.js  INCLUDE-ORDER.txt  licence.txt 13

- Formation SPRING Intégration YUI, jQuery, Prototype 14

- Formation SPRING Hello ExtJS : la page web index.html

- Formation SPRING Hello ExtJS : démo index.html

- Formation SPRING Hello ExtJS : le script js helloExtJS.js

- Formation SPRING Modèle composant ExtJS 18

- Formation SPRING Cycle de vie composant 19 Initialisatio n Destruction Render

- Formation SPRING Cycle de vie : Initialisation

- Formation SPRING Initialisation (phase la + rapide : JS)  1 : durant instanciation, passage d'un objet config avec paramètres adéquat (largeur,hauteur,layout...)  2 : Enregistrements des évènements 'de base', c à dire issus de Ext.Component & Observable (interveant lors de show,hive,render,destroy...)  3 : Enregistrement du composant dans le ComponentMgr (avec son identifiant unique)  4 : Exécution méthode initComponent() Enregistrement évènements spécifiques Complémentaire du constructeur  5 : Initialisation Plugins (init()), si passés avec config  6 : Initialisation de l'état. StateManager  7 : Rendu visuel si renderTo() ou applyTo() appelés 21

- Formation SPRING Cycle de vie : render 22

- Formation SPRING Rendu visuel (phase couteuse)  REM : si pas de renderTo(), alors lancement à postériori monComposant.render(‘unDivId’);  1 : beforerender(), appel évènements 'de base'  2 : Mise en place conteneur  3 : exécution de onRender() Insertion ds conteneur des éléments DOM visuels Appel du superclass.Render  4 : un-hidden ... 23

- Formation SPRING Cycle de vie : destruction 24

- Formation SPRING Bonnes pratiques développement ExtJS  Décomposer un écran complexe en plusieurs composants.  Créer des classes pré-configurés = Extensions de composants ExtJS avec toutes les options de configuration paramétrés.  Metre ces classes dans fichiers js individuels Ex : personnelgrid.js var win = new Ext.Window({ title:'Personnel',widht:600,height:400,items:{xtype:'personnelgrid'} }); win.show(); 25

- Formation SPRING Bonnes pratiques développement ExtJS 26

- Formation SPRING Bonnes pratiques développement ExtJS  Mettre code source dans répertoires : css, js, ext, Ex : js/Application.PersonnelGrid.js  Pour grosse application (20, 50, 100 fichiers.js) regrouper pour la production les composants js dans un seul fichier : appli-js-all.js  Pour faire communiquer deux composants, passer par le conteneur 27

- Formation SPRING Liens utiles  Exemples et retour expérence d'un membre équipe support ExtJS :  Lien entre 2 combos (via listeners : select):  Méthodologie pour 'grosses applis' ExtJS : 28