Introduction à Ext JS

Ajouté le 10 Feb 2009

Tags: Web, Ext JS, Javascript

La libraire Ext JS est disponible à l'adresse suivante: http://extjs.com. La libraire est disponible sous 2 licences difféerentes. Une license open source pour les applications distribuées avec GPL (http://www.gnu.org/licenses/gpl.html) et une license commerciale. Pour plus d'informations sur les prix, consultez le lien suivant: http://extjs.com/store/extjs/

Parmi les nombreux avantages offert figure la portabilité entre les principaux navigateurs (en autre Internet Explorer 6+, FireFox 1.5+ (PC, Mac), Safari 3+, Opera 9+ (PC, Mac).)

EXT JS permet de développer des applications Web ayant une interface très proche des applications clientes. Ainsi donc la librairie offre une pléthore de contrôles (widgets) parmi lesquels on retrouve les DataGrid, DatePicker, ProgressBar, Toolbar, etc.

Vous pouvez vous faire une idée de la puissance et de la robustesse de Ext JS en jettant un coup d'oeil aux différents exemples disponibles sur le site officiel: http://extjs.com/products/extjs/

Dans cet article nous travaillerons avec la dernière version de la libraire qui, en ce moment, est la version 2.2.1. Vous aurez besoin de télécharger le SDK (Software Development Kit) disponible à cette adresse: http://extjs.com/products/extjs/download.php. Une autre option serait d'utiliser le lien direct: http://extjs.com/products/extjs/download.php?dl=extjs221

La figure ci-dessous montre ce à quoi ressemble la stucture de l'archive




Description des principaux répertoires:

adapter: contient les fichiers nécessaires pour utiliser Ext JS avec d'autres librairies Javascript telles que JQuery, Prototype, YUI (Yahoo! User Interface Library)

docs: comme son nom l'indique, ce répertoire contient la documentation de Ext JS

examples: Le code source des exemples disponibles sur le site (cf. lien indiquié plus haut)

resources: les fichiers sur lesquels la librairie dépend. ex: css, images, etc..

sources: Le code source au complet de Ext JS

Parmi tous ces répertoires, les répertoires adapter et resources sont indispensables à la bonne éxecution de Ext JS.

Inclusion de Ext JS dans vos pages


En prélude à l'utilisation de la librairie dans une page web, il faut commencer par charger les scripts nécessaires. Commençons par créer un nouveau répertoire qui servira de répertoire racine pour notre site. Dans le nouveau répertoire créons un sous répertoire nommé js (pour Javascript). Ce nouveau sous répertoire contiendra lui aussi un autre sous répertoire nommé ext dans lequel nous copierons les répertoires adapter et resources disponibles dans le SDK. En plus des répertoires, copions aussi les fichiers javascript suivants:

ext-all.js
ext-all-debug.js
ext-core.js
ext-core-debug.js

On obtient la structure suivante:



Note: On inclura ext-all-debug.js lors du développement de nos applications Web. Par contre, une fois le développement achevé, donc lorsque notre site passera en production, on utilisera le fichier ext-all.js

L'exemple ci-dessous montre comment charger Ext JS dans une page web.

  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  5. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. 	<title>Utilisation de Ext JS</title>
  7. 	<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css" />
  8. 	<script src="js/ext/adapter/ext/ext-base.js"></script>
  9. 	<script src="js/ext/ext-all-debug.js"></script>
  10. </head>
  12. </body>
  13. </html>
  14.  


Rôle de chaque fichier
ext-all.css contient l'apparence des contrôles
ext-base.js fournit les fonctionnalités de base de la librairie
ext-all-debug.js/ext-all.js déclare les différents contrôles et composantes.

Premier script Ext JS


Une fois le décor planté, c'est le temps de passer à l'action. Nous allons écrire notre tout premier script Ext JS. Étant donné qu'il s'agit de notre toute première expérience, nous allons y aller en douceur. Ainsi donc, au chargement de la page, nous afficherons une boîte de dialogue posant une question à l'internaute. La boîte de dialogue aura deux boutons: Yes, No. En fonction du choix de l'utilisateur une autre boite de dialogue sera affichée. Ci-dessous se trouve le script à inclure dans notre fichier html (n'importe où après l'instruction à la ligne 9 du listing précédent)

  1.  
  2. <script type="text/javascript">
  3. 	Ext.onReady(function(){
  4. 		Ext.Msg.show({
  5. 			title: 'Question',
  6. 			msg: 'Le nouveau design de DevAfrique est-il mieux?',
  7. 			buttons: {
  8. 				yes: true,
  9. 				no: true
  10. 			},
  11. 			fn: function(btn) {
  12. 				if (btn == 'yes') 
  13. 					Ext.Msg.alert("Réponse", "Merci, C'est une bonne chose") ;
  14. 				else
  15. 					Ext.Msg.alert("Réponse", "Pas bien grave... I will do better next time") ;
  16. 			}
  17. 		}) ;
  18. 	}) ;
  19. </script>
  20.  


L'éxécution nous donne ceci:



Explixation du code
Notre code est placé au sein de la fonction onReady (Ext.onReady()) dans le but d'attendre la fin du chargement de la page. Étant donné que le javascript est un langage interprèté par le navigateur, les instructions sont exécutées l'une après l'autre. Cependant, en fonction des cas, certains élements ne sont pas disponibles lorsque notre code est exécuté. La fonction Ext.onReady est donc la solution offerte par la libraire pour contourner ce problème.

La fonction Ext.Msg.show nous permet de créer des boîtes de dialogue. Elle reçoit en paramètre un objet de configuration. Cette manière de passer des paramètres à une fonction en Javascript est pratique courante procurant beaucoup de flexibilité.

Finalement, Ext.Msg.alert est un raccourci (au lieu d'utiliser Ext.Msg.show) pour avoir une boite de dialogue simple, affichant un message et un bouton OK.

Ici prend fin notre premier article sur Ext JS. L'idée ici n'était pas de couvrir toutes les fonctionnalités de la libraire, mais d'établir les fondations et aussi de donner un aperçu d'utilisation.