Tutoriel ExtJS N°1 : installation et analyse ExtJS 4

Téléchargez ExtJS 4, la version 4 du framework javascript le plus professionnel : ExtJS. Identifiez les nouveautés de ExtJS 4. Comprenez l’arborescence du produit. Découvrez le kit de migration ExtJS 3 vers ExtJS 4, ainsi que les nouveaux outils contribuant à une meilleure productivité de vos développements et à un meilleur déploiement de vos applications en production.

Prérequis

Installation serveur web (ici WAMP)

Objectifs

Télécharger la version 4.0 de ExtJS
Analyser le contenu de extJS 4 GPL
Comparer ExtJS 3.x et ExtJS 4.x
Comprendre la migration de ExtJS 3 vers ExtJS 4

Programme

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

Durée

30min

IntroductionExtJS 4

ExtJS 4 a été créé avec 4 objectifs majeurs :
— 1) améliorer les performances
— 2) améliorer la stabilité
— 3) faciliter l’apprentissage
— 4) faciliter l’utilisation


ext4-objectifs

Afin d’atteindre ces objectifs, l’équipe ExtJS a réécrit (refactoring) le code de ExtJS 3 (classes, fonctions, propriétés) et revu la documentation du produit en profondeur.

Notez de plus les points suivants :

Dessins & Graphes

Notez la refonte du moteur de dessin (Charts) & graphe qui a été complètement réécrit en Javascript pour ExtJS 4 (nécessitait Flash sous ExtJS 3), ajoutant ainsi plus de flexibilité pour le développeur pour le rendu des graphes.

La mise à jour des données peut être automatiquement suivie par une mise à jour du graphe. Chapeau !

Architecture & MVC

Notez la mise en oeuvre du pattern MVC dans ExtJS. Cela va permettre à différentes personnes d’une équipe de développement de travailler en même temps sur différentes parties de la l’application (Modèle, vue, controlleur).

De plus ExtJS propose des assistants pour la génération de code (Application, Modèle, Vue, Controleur, Store) et le Build de l’application via JSBuilder (améliore compression pour déploiement)

Thèmes graphique & CSS

Notez la souplesse apportée dans la possibilité de modifier le CSS et thèmes de vos interfaces. En particulier via l’utilisation des frameworks Compass et Saas.

Partie 1 : Téléchargement ExtJS

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


ttutoriel-installation-extjs-1

Plusieurs remarques à noter :

— Possibilité de télécharger la dernière version des branches 3.x (ici 3.3.3) et 2.x (ici 2.3.0) d’ExtJS
— Possibilité de télécharger le kit de migration Extjs 3.x vers Extjs 4.x
— Possibilité de télécharger le JSBuilder : une application JAVA permettant de personnaliser vos livraison css et javascript. En particulier fonctionalités de compression de vos JS. Idéal pour le déploiement en prod !
— Possibilité de télécharger le pack Air : permet de transformer vos applications web ExtJS en des équivalent ’client lourd’
— Possibilité de télécharger le pack Directx : technologie de push Server créée avec ExtJS 3

Cliquez sur le bouton ’download ExtJS 4’. cela télécharge la version open source (ext-4.0.0-gpl.zip) de la librairie ExtJS sur votre ordinateur.


telechargement-extjs-4

Partie 2 : Analyser le contenu de extJS 4 GPL

Dézippez le zip ExtJS 4.

Dans notre exemple, nous avons créé un répertoire ’lib’ dans le répertoire www de wamp. Puis nous avons dézippé ext-4.0.0-gpl.zip à l’intérieur .


arborescence-extjs-4

En lancant le navigateur le localhost sur ce répertoire (via http://localhost/lib/ext-4.0.0/) , on obtient l’écran suivant :


documentation-extjs-4

Cliquez sur le boutons ’view examples’ pour voir ExtJS en action.

Fichiers racine ExtJS 4

— ext-all.js (utiliser phase de déploiement)
— ext-all-debug.js (utiliser phase de développement pour localiser erreurs. Sans commentaire)
— ext-all-debug-w-comments.js (utiliser phase de dévelopement. Avec commentaires)
— ext.js
— ext-debug.js
— index.html
— licence.txt
— release-notes.html

Les répertoires suivants :

Répertoire ’builds’


arborescence-extjs-4-builds

Répertoire ’docs’

INFO : y accéder via serveur web et non en doublecliquant sur index.html !


arborescence-extjs-4-docs

Notez la présence de ’Guides’ qui contribuent à l’objectif de facilité d’apprentissage et d’utilisation. Ils n’existaient pas dans ExtJS 3.

facilité d’utilisation

Comparez la documentation de la Classe Button en ExtJS 4 ...


extjs-4-plus-facile-a-utiliser-bouton-2

...et son équivalent en ExtJS 3


extjs-4-plus-facile-a-utiliser-bouton-1

Expliquez.

Répertoire ’examples’

Contient + de 200 exemples de démonstration extJS 4, ainsi que des extensions et plugins. Il n’y en avait ’que’ 100 dans ExtJS 3.


documentation-extjs-4-samples

parmi ces exemples, notez le lecteur de flux


arborescence-extjs-4-examples-feed-parser

REMARQUE : les exemples ont été intégré à l’API. ce qui signifie que pour toute classe d’ExtJS 4, vous pouvez identifier tous les exemples d’applications / codes dans lesquelles cette classe est utilisée !

Répertoire ’locale’

Permet de gérer de façon modulaire l’internationalisation (I18N) : avoir une application multi langues.


arborescence-extjs-4-locale

Répertoire ’overview’

Pour avoir une vue d’ensemble de ExtJS 4.

Y accéder via http://localhost/lib/ext-4.0.0/overview/


arborescence-extjs-4-overview

Répertoire ’pkgs’

Modules ExtJS packagés. Utile pour le build ExtJS.


documentation-extjs-4-pkgs

Répertoire ’resources’

contient les feuilles de styles et les images necessaires pour utiliser les composants ExtJS. Il contient aussi (dans répertoire css) le fichier ext-all.css, une concatenation de tous les CSS de tous les composants.