vers l'accueil formulaire de contact

Tutoriel ExtJS N°2 : votre première application ExtJS

PNG - 16.5 ko
formation-extjs

Crééz votre première application ExtJS ; Découvrez l’objet Ext.Window : propriétés, méthodes, évènements. Modifiez les propriétés par défaut de d’une fenêtre ExtJS. Comprenez la différence entre ExtJS et d’autres frameworks Javascript (Dojo, Yui, jquery), en particulier dans la lisibilité du code et l’utilisation de constructeurs d’objets.

Ce tutoriel est un extrait de séances pratiques de la formation ExtJS dispensée par Objis.

Les + objis
- 70% de travaux pratiques
- Clé USB avec tous les outils utilisés + Corrigés TPs
- Bilan pédagogique individuel + conseils

Liens utiles

- + de 100 tutoriaux java/jee Objis
- Tutoriel et formation ExtJS
- Objis, spécialiste formation java depuis 2005
- Site du framework ExtJS
- Site de l’application conjoon.org (à télécharger) utilisant 100% EtxJS
- Site du Dow Jones utilisant composant ExtJS

Prérequis

- Connaissance HTML, javascript.

Objectifs

- Comprendre les étapes de codage d’une application ExtJS simple
- Comprendre la différence entre lancement via serveur http et appel direct

Programme

- Introduction
- Partie 1 : Téléchargement ExtJS et installation serveur web
- Partie 2 : préparation arborescence application
- Partie 3 : analyse

Durée

- 30min

Introduction

Exemple de sites web utilisant (entre autre) ExtJS
- Dow Jones (informations financières en temps réel)

Exemple d’applications 100% ExtJS
- conjoon.org : Gestionnaire d’informations personnelles

Partie 1 : Téléchargement ExtJS et Installation serveur web

- Allez sur la page de téléchargement du framework ExtJS : http://extjs.com/products/extjs/download.php

- Téléchargez le zip de a librairie ExtJS

tutoriel telechargement extJS

- Installez un serveur web type Apache/IIS. Nous avons installé WAMP5, qui est un serveur apache/php/mysql.

WAMP s’installe par défaut dans le répertoire c :\wamp.

Partie 2 : Arborescence projet

La page principale de l’application (index.html) affiche une fenêtre dont le contenu est encapsullé dans une autre page (objis.html).

arborescence application ExtJS

Téléchargez l’arborence suivante.

Zip - 1.4 ko
tutoriel ExtJS 1

Partie 3 : Analyse

Rendu visuel

— 1 : Appel à partir d’une requête http. Si double-click direct sur la page, alors ExtJS ne saura trouver la page bonjour.html.
— 2 : Fenêtre principale, créée via Ext.window qui prend en paramêtre un objet dont les attributs sont explicites et fournis.
— 3 : contenu du fichier objis.html

Page html

— 1 : la feuille de style ext-all.css concatène toutes les feuilles de style de tous les composants graphiques d’ExtJS (boutons, labels, panels,...)
— 2 : la librairie javascript ext-base.js contient les objets fondamentaux comme la gestion évènementielle et la manipulation HTML DOM. La librairie ext-debug-all.js est utilisée uniquement en phase de développement, pour des besoins de déboguage.
— 3 : La variable BLANK_IMAGE_URL permet de connaitre le lieu de stockage de l’image représentant 1 pixel (1*1). par défaut c’est celle du site extjs.com. Mais s’il n’y a pas internet...
— 4 : Lien vers un script js spécifique à l’application. ici helloObjis.js (voir ci-dessous). C’est ici que va se créer la fenêtre.

script

— 1 : Création d’une fenêtre à partir du constructeur de la classe Window d’ExtJS.
— 2 : Les arguments du constructeur Ext.Window. l’id permettra de faire référence à la fenêtre via Ext.getCmp(’maFenetre’) ;
— 3 : pour voir la fenêtre créée
— 4 : Permet d’exécuter le script uniquement lorsque tous les éléments de la page HTML (hors images) sont chargés par le navigateur .

Comprendre l’Objet Ext.Window

La documentation ExtJS va nous permettre de mieux comprendre l’Objet Ext.Window utilisé ci-dessus.

- Accédez à la documentation via serveur web et URL http://localhost/lieu_installation_extjs/Ext-3.0.0/docs/

PNG - 57.9 ko
tutoriel-extjs-objis-slide-4bis

- Entrez le nom de la classe ’Window’ dans la fenêtre de recherche située en haut à gauche. Puis entrée. L’écran suivant apparaît.

PNG - 5.3 ko
tutoriel-extjs-objis-slide-4ter

Sélectionnez le ’noeud’ Window. Un appel Ajax à une page html contenant les la documentation est réalisé (exemple ici : \ext-3.0.0\docs\output\Ext.Window.html) et la fenêtre centrale se remplit avec les informations associée au noeud (ici ’Window’) sélectionné.

L’écran suivant apparaît.

PNG - 110 ko
tutoriel-extjs-objis-slide-5

- A partir du menu ’properties’ (haut fenêtre centrale), précisez le rôle et la valeur par défaut des propriétés suivantes :
— resizable
— draggable
— maximized

- Modifiez le code de création de la fenêtre afin qu’on ne puisse faire de glisser-déposer de la fenêtre par défaut, ni redimensionner la fenêtre.

- Comment faire en sorte que la fenêtre épouse la totalité du body de la page ?

- A l’aide du menu ’methods’ de l’objet Window, citez 3 méthodes de cet objet. En particulier, expliquez le constructeur :

PNG - 8.9 ko
tutoriel-extjs-objis-slide-6

- A l’aide du menu ’events’ de l’objet Window, citez 3 évènements gérés par cet objet.

- Ajoutez une deuxième fenêtre à coté de la première.

- Expliquez ce qu’est un WindowGroup ExtJS

- Expliquez ce qu’est un WindowMgr ExtJS

Améliorer performance et rapidité

Le point ’4’ ci-dessus met en évidence une bonne pratique à utiliser dans les applications riches modernes.

Le problème : Manipuler DOM sans attendre que les images soient totalement chargées

En utilisant la technique d’initialisation au chargement du body () , le onLoad est chargée à différents moments par différents navigateurs.

Par exemple certains navigateurs lancent le script lorsque TOUS les objets DOM de la page (id=’monID’) sont chargés ET toutes les images affichées. En particulier les images, ce qui peut entrainer des problèmes de performance...)

Dans les applications modernes, vous souhaitez souhaitent pouvoir manipuler les objets DOM de la page avant que les images ne soient chargées.

La solution avec ExtJS : Ext.OnReady()

L’instruction Ext.OnReady(mafonction) garantit que la fonction ’mafonction’ sera exécutée lorsque tous les objets DOM de la page seront bien chargés.

La solution sans framework Javascript

Sans framework Javascript (ExtJS mais aussi, Dojo, Yui, jQuery...) vous devrez gérer vous même la détection du navigateur ainsi que vous adapter à la façon d’informer le navigateur de lancer le script lorsque chargement DOM est terminé :
- Sous FireFox et Opéra : gérer l’évènement DOMContentLoaded, envoyé par ces navigateurs après le chargement des objets DOM mais avant le chargement de toutes les images.
- Sous IE, ajouter l’attribut ’defer’ à la balise du script d’initialisation.
- Sous Safari, vérifier la valeur de document.readyState (mis à ’complete’).

DEMONSTRATION

Zip - 1.2 ko

Voici le code que vous auriez du écrire pour avoir un résultat similaire.

Pour aller plus loin

- Si vous appréciez notre sens du partage, devenez membre ’classic’ du Club Objis.
- Accélérez significativement votre maîtrise d’ExtJS avec un coach Objis : devenez membre Silver / Gold du Club Objis.

Prochaine formation AJAX

PNG - 16.5 ko
formation-extjs