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

Présentation au sujet: "Formation ExtJS 1 Vendredi 21 aout 2009 – Villeurbanne – Société IZEO."— Transcription de la présentation:

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

2 www.objis.com - 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

3 www.objis.com - Formation SPRING Exemple ExtJS dans HTML : www.djindexes.com/ 3

4 www.objis.com - Formation SPRING Exemple complet ExtJS : www.conjoon.orgwww.conjoon.org (webmail & Rss) 4

5 www.objis.com - Formation SPRING Architecture ExtJS : 6 modules clés 5

6 www.objis.com - 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

7 www.objis.com - 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

8 www.objis.com - Formation SPRING Exemple d'interface 8

9 www.objis.com - Formation SPRING Exemple d'interface 9

10 www.objis.com - 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

11 www.objis.com - 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

12 www.objis.com - Formation SPRING Téléchargement ExtJS  http://extjs.com/products/extjs/download.php http://extjs.com/products/extjs/download.php 12

13 www.objis.com - 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

14 www.objis.com - Formation SPRING Intégration YUI, jQuery, Prototype 14

15 www.objis.com - Formation SPRING Hello ExtJS : la page web 15 1 4 3 2 index.html

16 www.objis.com - Formation SPRING Hello ExtJS : démo 16 1 3 2 index.html

17 www.objis.com - Formation SPRING Hello ExtJS : le script js 17 1 4 3 2 helloExtJS.js

18 www.objis.com - Formation SPRING Modèle composant ExtJS 18

19 www.objis.com - Formation SPRING Cycle de vie composant 19 Initialisatio n Destruction Render

20 www.objis.com - Formation SPRING Cycle de vie : Initialisation 20 1 7 6 5 4 3 2

21 www.objis.com - 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

22 www.objis.com - Formation SPRING Cycle de vie : render 22

23 www.objis.com - 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

24 www.objis.com - Formation SPRING Cycle de vie : destruction 24

25 www.objis.com - 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

26 www.objis.com - Formation SPRING Bonnes pratiques développement ExtJS 26

27 www.objis.com - 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

28 www.objis.com - Formation SPRING Liens utiles  Exemples et retour expérence d'un membre équipe support ExtJS : Http://examples.extjs.eu/Http://examples.extjs.eu/  Lien entre 2 combos (via listeners : select): http://extjs.com/learn/Tutorial:Linked_Combos_Tutorial_for_Ext_2_(French)  Méthodologie pour 'grosses applis' ExtJS : http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/ 28