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

Slides:



Advertisements
Présentations similaires
Mediator 9 - Un outil de développement multimédia 3AC Techno/Informatique.
Advertisements

Informatique en L2-L3 Thèmes du niveau « Expert » G.
L’utilisation des formulaires pour un exemplarisateur Sudoc.
Présentation de Scribe Votre nouvelle organisation du Réseau Informatique Pédagogique.
Présentation LabPlus v3. Solution novatrice en Technologies de l’information Solution novatrice en Technologies de l’information Application pour la Gestion.
RMLL 2008 Isis-FISH/Gesi Benjamin Poussin Code Lutin
Made with OpenOffice.org 1 Travailler en réseau intranet à l'école Un réseau : pourquoi ? Architecture du réseau Partager un dossier Enregistrer en réseau.
1 The Nhân LUONG Éditeur visuel pour la création d'applications web géographiques Présenté par Mike Deguilhem Séminaire T2I – mercredi 16 juin 2010.
Ministère de l'Écologie, du Développement durable, des Transports et du Logement Journées EOLE 23/24 Novembre 2011 Les.
Logiciel Assistant Gestion d’Événement Rémi Papillie (Chef d’équipe) Maxime Brodeur Xavier Pajani Gabriel Rolland David St-Jean.
Présentation de Plone Gestionnaire de contenus. 2 Présentation de Plone à Toulibre Présentations Eric Bréhaut Développeur / Chef de projet Emmanuelle.
Initiation à QuickPlace, janvier Initiation à QuickPlace n Nature de l'outil n Fonctions de base (lecture, création) n Fonctions de gestionnaire.
1 TER 2012 Engilberge, Lludice, M'rah Flex Web Roster /32.
1 Créer un extension OpenOffice.org avec Eclipse Créer une extension OpenOffice.org avec Eclipse.
1. 2 Boite à outils Qt ● Boite à outils C++ pour le développement multi-plateforme d'application en environnement graphique (GUI) – des fonctions GUI.
DIAGRAMME DE DEPLOIEMENT Exposé de: MBALLA MEKONGO Michèle MBOUNA FEUZE William SIEYADJEU Alex Lionel CHOPGWE Leonard NDUMATE Landry TIDJON Lionel.
Procédures Framework LDAP
Créer un site web avec WordPress
Nouveautés Version 4.1 et mai 2017.
Les commandes externes
Cross-Plateform Cours JavaScript
Support et Maintenance SIAN : MDEL partenaires
Thèmes du niveau « Expert »
Eléments de présentation
ATS8500 Standalone Downloader.
LOG2420 – Automne 2016 Chargé de cours : Mathieu Laprise
Projet SI6 Phase 1 Phase 2 Présentation du jeu
Déploiement de Octopus au CISSS de la Montérégie-Ouest
Usine de Développement.
Publication site AROEVEN
Séminaire Novembre 2006 Zephir : Déploiement et supervision des serveurs Eole.
Séminaire EOLE Dijon octobre 2010
Les Bases de données Définition Architecture d’un SGBD
AugerDb / SimDb Gestion des simulations Auger Java
Références.
Plugin POSH.
Réalisation d'agents de surveillance Zephir
Asynchronous Javascript And Xml
Virtualisation d’applications mobiles dans un réseau de Cloudlets
Piloter un robot mbot à distance avec retour vidéo
Présentation du projet FederID ■ ■ ■
Programmation en C++ Classes
Windev.
Notion De Gestion De Bases De Données
PROGRAMMATION INFORMATIQUE D’INGÉNIERIE II
Package R Markdown: Un outil pour générer des pages html avec R Studio
Formation sur les bases de données relationnelles.
Développement d’applications interactives
Integrated Business intelligence
Diagrammes UML 420-KE2-LG.
USER GUIDE : BASE DE DOCUMENTATION
Programmation Android Première application Android
Projet d’Appui à la Gouvernance Economique (PAGE)
L1 Technique informatique
5 Analyse avec Designer d'Oracle
Programmation Android Composantes d’une application
Utiliser PowerPoint dans le cadre des TPE
Base de donnée de support
Langages de programmation TP11
FORMATION POWERPOINT 2007/2010
Catherine Cyrot - bibliothèques numériques - Cours 5
20 Données semi-structurées et XML
JDepend - Analyse de la qualité du code Java -
Donnez votre avis ! Depuis votre smartphone, sur :
Analyse et Mise en place de fvpat Webdev Server
Retour sur les interfaces
nouvelle interface de visualisation et de correction des liens
JQuery (Débutant) 24 Mars SUPINFO Orléans.
Parcours vers l’adoption d’une méthode de prestation DevOps (Opérations de développement) Applications offertes sur le marché et applications de SPC.
Role-Based Access Control (RBAC) Les permissions d’administration
Transcription de la présentation:

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