Introduction au framework Javascript EXT JS

Transcription

1 Introduction au framework Javascript EXT JS Par Gilles Février ( VERSION 1.0 (Mai 2014) 1 / 14

2 Sommaire SOMMAIRE Introduction... 3 Présentation rapide du framework javascript ExtJS...3 Récupération, installation et configuration de ExtJS...4 Premiers pas... 4 La première fenêtre... 5 Notions de base : composant, conteneur et layout...6 Manipulation du DOM... 7 Gestion des événements... 8 Un formulaire Ajax facile... 9 Conclusion L'auteur Contact / 14

3 Introduction Si vous avez déjà été amené à développer une application web interactive, avec une interface utilisateur riche et complexe comprenant des menus, des onglets, des tableaux de données, des formulaires dynamiques, des fenêtres ou des boîtes de dialogue, des widgets... vous vous êtes rendu compte de la difficulté à gérer les différentes couches, à programmer les interactions avec l'utilisateur, le tout en garantissant une compatibilité avec les différents navigateurs... Nous allons découvrir dans ce tutoriel le framework javascript ExtJS qui devrait grandement vous simplifier la vie pour le développement de ce type d'application. Ce framework étant extrêmement riche, nous ne verrons ici que les bases, comment installer, configurer et utiliser ExtJS et nous terminerons par un exemple simple. Présentation rapide du framework javascript ExtJS ExtJS est un framework javascript destiné au développement d'applications web interactives avec une interface riche (RIA). Il fournit un grand nombre de fonctions de manipulation du DOM et de composants visuels d'une grande qualité (formulaires avancés, onglets, boîtes de dialogue, arbres, tableaux, menus...). Il amène également une suite complète d'outils de gestion de l'interface permettant d'avoir un contrôle total sur l'organisation et la manipulation de ses composants. La plupart des widgets sont personnalisables, ce qui permet d'activer ou de désactiver des fonctionnalités et d'utiliser des extensions et des plugins. ExtJS est clairement orienté interface utilisateur et peut être utilisé avec Prototype, Jquery, Mootools ou seul. ExtJS assure la compatibilité avec les navigateurs suivants (HTML5 est utilisé pour les navigateurs les plus récents et des alternatives sont utilisées pour les navigateurs plus anciens) : Internet Explorer 6+, Firefox 3.6+ (PC, Mac), Safari 4+, Chrome 10+, Opera 11+ (PC, Mac). Le framework est développé, maintenu et soutenu par la société Sencha Inc., basée en Californie, ainsi que par une importante communauté, principalement anglophone. La documentation est bien faite, accessible et assez complète (en anglais), et un certain nombre d'exemples clairs sont disponibles. On peut compter également quelques tutoriels en anglais et en français. Trois licences sont disponibles : Une licence commerciale : appropriée si vous voulez utiliser ExtJS pour développer des applications commerciales avec du code source propriétaire, Une licence OEM : appropriée si vous voulez utiliser ExtJS pour créer votre propre SDK sous licence, Une licence Open Source : appropriée si vous voulez utiliser ExtJS pour créer une application open source avec une licence compatible GNU GPL v3. La société Sencha Inc. propose également d'autres produits que nous ne détailleront pas ici (d'autant plus qu'ils existent à la date à laquelle je rédige ce tutoriel, mais ils risquent d'évoluer, peut-être de changer de nom, voir de disparaître) : Sencha Complete : solution complète de développement regroupant divers produits comme Sencha Architect, Sencha ExtJS, Sencha Touch, Sencha Eclipse Plugin, Sencha Touch Charts, Sencha Touch Grid, Sencha Mobile Packaging, Enterprise Data Connectors et Sencha Support Package, Sencha Touch Bundle : suite de développement mobile incluant Sencha Architect, Sencha Touch, Sencha Eclipse Plugin, Sencha Touch Charts, Sencha Touch Grid, et Sencha Support Package, Sencha Touch : framework pour le développement d'applications mobiles (licences commerciale, OEM et open source), Ext JS : bibliothèque javascript pour la création de pages web dynamiques (licence MIT open source), Ext GXT : framework de développement d'applications web pour Google Web Toolkit (licences commerciale, OEM et open source), Ext Architect : éditeur d'ihm pour ExtJS (version d'évaluation et licence commerciale), 3 / 14

4 Ext Animator : framework de création d'animations CSS3, Ext Space : plateforme sécurisée de déploiement d'applications web. Récupération, installation et configuration de ExtJS Le but de ce tutoriel n'étant pas d'apprendre à installer et configurer un serveur web (vous pouvez consulter mon tutoriel traitant de l'installation d'un serveur web de développement sous Linux avec VirtualBox, nous partirons du principe qu'un serveur web avec PHP est disponible. Pour nos exemples, nous utiliserons WAMP (disponible sur le site L'installation d'extjs est on ne peut plus simple. Pour commencer, il vous faut récupérer la dernière version stable d'extjs : Une fois le téléchargement terminé, vous obtenez un fichier compressé. Créez un nouveau répertoire à la racine de votre serveur web "extjs" (par exemple) et décompressez-y le fichier téléchargé. Créez un nouveau répertoire à la racine de votre serveur web, "tutoriel_extjs" par exemple. Vous remarquerez sans doute que le volume décompressé est assez énorme pour une bibliothèque Javascript. Si vous regardez attentivement le contenu du répertoire, vous verrez que vous avez également décompressé des exemples, de la documentation... Bref, un certain nombre d'éléments qui n'auront pas leur place sur un serveur de production mais qui durant la phase d'apprentissage et/ou de développement vous seront bien utiles. Quelques éléments importants à retenir : Le fichier ext-all-debug.js : contient le code source non compressé de la bibliothèque ExtJS, à utiliser en développement. Le fichier ext-all.js : contient le code source compressé de la bibliothèque ExtJS, à utiliser en production. C'est l'intégralité du framework qui sera chargé la première fois. Le fichier ext.js : contient le code de base qui chargera dynamiquement les composants en fonction des besoins. Le chargement sera plus rapide dans un premier temps, mais pourra ralentir l'application par la suite en fonction des composants à charger. Voila, ExtJS est prêt à être utilisé! Premiers pas... Dans le répertoire destiné à accueillir nos fichiers sur le serveur web, nous allons créer un répertoire et deux fichiers : répertoire "js" : contiendra le ou les fichiers Javascript nous permettant de manipuler les composants ExtJS, "index.html" : ce fichier chargera la bibliothèque ExtJS, "js/test_extjs_1.js" : fichier qui contiendra tout notre code Javascript. Dans le fichier "index.html", nous allons inclure les fichiers nécessaires à ExtJS : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>introduction à ExtJS</title> <!-- Chargement de ExtJS --> <script type="text/javascript" src="../extjs/ext-all-debug.js"></script> <!-- Chargement des fichiers CSS --> <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css"> <!-- Chargement du code source de l'application --> <script type="text/javascript" src="js/test_extjs_1.js"></script> 4 / 14

5 </head> <body> </body> </html> La première ligne est l'inclusion du fichier source principal de ExtJS qui contient le cœur de la bibliothèque. La deuxième ligne est l'inclusion du fichier de styles utilisé par défaut. Éditez maintenant le fichier "test_extjs_1.js" et ajoutez les lignes suivantes : // Initialisation de l'application lorsque le DOM est complètement chargé Ext.onReady(function(){ alert('extjs est correctement configuré!'); ); Nous appelons ici "Ext.onReady". C'est sans doute la première méthode qui sera appelée dans vos applications. Les instructions comprises dans cette méthode seront automatiquement exécutées lorsque le DOM sera entièrement chargé. Cela nous garanti que l'intégralité des éléments présents dans la page seront disponibles au moment où ce code sera exécuté. Ouvrez la page «index.html» dans votre navigateur, vous obtenez le résultat suivant : Comme on peut le voir, le rendu du message généré par la fonction "alert" n'est déjà plus celui de base. Remplacez maintenant la ligne "alert" par la ligne suivante : Ext.MessageBox.alert('Information','Extjs4 est prêt'); Actualisez la page «index.html», le rendu n'est plus tout à fait le même : Sans aucune peine, nous avons maintenant une boîte de dialogue nettement plus jolie que la précédente! La première fenêtre Maintenant que l'on sait que la bibliothèque est correctement configurée, nous allons voir comment créer une fenêtre. Remplacer le contenu du fichier "test_extjs_1.js" par le code suivant : 5 / 14

6 // Déclaration de la fonction permettant de créer un objet fenêtre function mafenetre() { // On instancie un objet ExtJS Window var fenetre = new Ext.Window({ id : 'mafenetre', // Identifiant pour le DOM title : 'Ma première fenêtre ExtJS', // Titre qui sera affiché width : 350, // Largeur de la boîte de dialogue height : 100, // Hauteur de la boîte de dialogue layout : 'fit', // Layout utilisé ("fit" = prend toute la place disponible autoload : { // Lorsque l'objet est créé, chargement Ajax automatique... url : 'fenetre.html', //... de la page "fenetre.html" scripts : true ); fenetre.show(); // Affichage de la fenêtre // Exécution de la fonction "mafenetre" lorsque le DOM est entièrement chargé Ext.onReady(maFenetre); Nous définissons ici la fonction "mafenetre" qui va ensuite être passée en paramètre à la méthode "Ext.onReady" pour être exécutée au chargement de la page. Dans cette fonction, nous créons une nouvelle instance d'un objet "Ext.Window" que nous appelons "fenetre". Nous lui passons un objet de configuration (nous verrons que l'on utilise très souvent les objets de configuration qui seront la clé de la programmation avec ExtJS) contenant toutes les propriétés dont nous avons besoin : id : identifiant grâce auquel notre fenêtre pourra être référencée dans le DOM par la suite, title : titre de la fenêtre, width : largeur en pixels de la fenêtre, height : hauteur en pixels de la fenêtre, layout : défini le "layout" utilisé dans la fenêtre pour gérer l'affichage des éléments qu'elle pourra contenir (voir le chapitre sur les notions de base). Le layout "fit" permet de s'assurer que les éléments qui seront contenus dans la fenêtre occuperont toute la place disponible. autoload : cet objet de configuration (oui, encore un) indique à la fenêtre qu'elle doit par défaut, dès qu'elle est prête, charger automatiquement le contenu du fichier spécifié dans la propriété "url". Une fois la fenêtre créée, il faut l'afficher. C'est le rôle de la méthode "show()". Il faut également créer le fichier "fenetre.html" qui doit être affiché dans notre fenêtre. Il ne contiendra qu'une seule ligne de code : <!-- Contenu HTML du fichier "fenetre.html" qui sera chargé dans la fenêtre --> <div>ma première fenêtre avec ExtJS.</div> Appelez de nouveau la page "index.html" dans votre navigateur. Vous obtenez le résultat suivant : Notions de base : composant, conteneur et layout Les composants ("component") et les conteneurs ("container") sont la clé de la gestion des interfaces utilisateurs avec ExtJS. Le composant défini la façon dont les widgets sont instanciés, affichés, et détruits. Tous les composants héritent de la classe "Component". Par exemple, tous les éléments visuels de l'interface utilisateur utilisent le 6 / 14

7 composant "Element" ("Ext.Element"), dont nous verrons quelques exemples plus loin, ce qui en fait le composant le plus utilisé par le cœur du framework. Le conteneur est une zone de la page pouvant contenir des éléments visuels ou d'autres conteneurs. Il contrôle la façon dont les widgets peuvent gérer leurs propres enfants. Tous les conteneurs héritent de la classe "Container". Un exemple classique de conteneur est le Panel (conteneur de base dont plusieurs autres héritent tels que GridPanel (pour les tableaux de données), FormPanel (pour les formulaires)... Le layout contrôle l'affichage des éléments enfants d'un conteneur. Par défaut (si on ne spécifie pas de layout), les éléments sont simplement affichés les uns en dessous des autres. On associe un layout à un conteneur. Les différents layout sont les suivants : Absolute : permet de positionner les panneaux à une position précise à l'aide de coordonnées x et y, Accordion : permet d'empiler les panneaux sous forme d'accordéon de façon à ce qu'un seul soit visible à la fois, Anchor : permet de dimensionner les panneaux en fonction d'un pourcentage de la largeur et/ou de la hauteur de la page, Border : permet de découper le conteneur en cinq régions maximum (north, east, west, south et center). Seule la région "center" est obligatoire, Card : permet d'afficher plusieurs éléments superposés, chacun occupant toute la place libre (des boutons "précédent" et "suivant" permettant généralement de passer d'un élément à l'autre), Column : permet de répartir le contenu sur plusieurs colonnes, Fit : l'élément présent dans le conteneur occupe toute la place disponible, Table : permet d'organiser les éléments dans une table HTML, Hbox : permet d'arranger horizontalement plusieurs éléments, VBox : permet d'arranger verticalement plusieurs éléments. Manipulation du DOM Dans une application web, vous êtes forcément amené à manipuler le DOM, dont le plus petit objet et l'élément HTML. L'accès au DOM par le Javascript permet facilement de modifier un élément, de changer son style, de le supprimer, d'en ajouter... La méthode classique en Javascript pour accéder à un élément du DOM est la suivante : var mydiv = document.getelementbyid('mondivid'); La méthode getelementbyid est suffisante pour effectuer des tâches simples comme modifier le contenu de la propriété innerhtml ou modifier la classe css d'un élément. Mais quand il s'agit d'effectuer des tâches plus complexes comme la gestion des événements, c'est tout de suite plus difficile, ne serait-ce que pour assurer la compatibilité entre navigateurs. L'objet Ext.Element est au cœur du framework et joue un rôle primordial dans son fonctionnement. Il permet d'accéder aux éléments de la page et d'agir sur ceux-ci. La classe Ext.Element fournit un ensemble complet d'outils permettant de gérer le DOM. Ajoutons la déclaration de styles dans le «head» de la page «index.html» : <!-- Style utilisé pour le "div" --> <style type="text/css">.mondiv { border: 1px solid #AAAAAA; width: 200px; height: 35px; cursor: pointer; padding: 2px 2px 2px 2px; margin: 2px 2px 2px 2px; </style> 7 / 14

8 Ajoutons le code suivant dans le "body" de la page "index.html" : <!-- Déclaration du "div" qui sera manipulé avec ExtJS --> <div id='div1' class='mondiv'> </div> On définit un élément de type "div" de taille 200 x 35 pixels avec une bordure. Voyons quelques exemples de manipulations simples de cet élément. Remplacer le contenu du fichier "test_extjs_1.js" par le code suivant : // Exécution automatique des instructions à la fin du chargement du DOM Ext.onReady(function() { var mondiv1 = Ext.get('div1'); // On récupère une référence à l'élément"div1" mondiv1.setheight(200); // On définit sa nouvelle hauteur : 200 pixels mondiv1.setsize(350, 350, {duration: 1, easing:'bounceout'); // On définit ses nouvelles dimensions, 350 x 350 pixels, avec un effet de transition pour sa transformation ); Que se passe-t-il lorsque l'on recharge la page? Si on analyse le code source ci-dessus, on distingue trois opérations : 1. Appel de la méthode Ext.get : cette méthode renvoie une instance de Ext.Element correspondant à l'élément dont l'identifiant est "div1". A partir de là, il est facile de le manipuler. 2. Appel de la méthode setheight : on redéfinit la hauteur de l'élément à 200 pixels. Nous avons maintenant un carré. 3. Appel de la méthode setsize : cette fois, on redéfinit à la fois la hauteur et la largeur de l'élément (350 x 350 pixels), en ajoutant un effet de transition (il suffit d'omettre le dernier argument pour supprimer l'animation). Après l'exécution du script, on obtient un carré de 350 pixels de côté. L'objet Ext.Element comporte un grand nombre de méthodes permettant de manipuler le DOM. Il est impossible de les énumérer ici. Le mieux est de vous rendre sur la documentation en ligne de l'api pour vous rendre compte de la puissance de cet objet. Parfois, il est impossible de sélectionner des nœuds du DOM par leurs ID parce qu'ils ne sont pas connus. Il est alors possible de se baser sur un attribut ou un nom de classe CSS. Le sélecteur ExtJS DomQuery est là pour ça. //Surligne tous les éléments de type "p" (paragraphes) Ext.select('p').highlight(); L'instruction ci-dessus permet d'appliquer la méthode highlight (surlignage du paragraphe) à tous les paragraphes de la page. Gestion des événements L'une des tâches les plus complexes dans le développement d'une application web est la gestion des événements. Il est indispensable de comprendre le fonctionnement des événements si l'on veut développer une interface riche. Par exemple, comment faire pour afficher un menu contextuel sur un tableau de données lorsque l'utilisateur utilise le clic droit de la souris sur une ligne? Il suffit de mettre en place un gestionnaire d'événement pour l'événement rowcontextmenu, qui créera et affichera le menu contextuel. Les événements peuvent provenir d'une action de l'utilisateur ou de l'application elle-même. La solution basique consiste à attacher un "listener" directement aux éléments HTML, comme l'attribut onclick. <!-- Gestion de l'événement "onclick" à l'ancienne --> <div id="div1" onclick="alert(this.id + ' Clic!');">Cliquez ici</div> Lorsque l'utilisateur clique sur l'élément "div1", un message d'alerte est affiché " div1 clic!". 8 / 14

9 L'inconvénient de cette méthode, standardisée par Netscape il y a des années, est qu'elle implique une dépendance entre le HTML et le Javascript, augmentant la complexité de maintenance du code. ExtJS fournit toutes les fonctionnalités nécessaires à une gestion avancée des événements. //Gestion de l'événement "onclick" avec ExtJS Ext.get('div1').on('click', function(eventobj, elref) { // On déclare le "listener" sur "div1" pour l'événement "click" alert('clic sur div1 : ' + elref.id); // Code à exécuter lorsque l'utilisateur clique sur "div1" ); La méthode Ext.get permet de récupérer une référence à l'élément "div1". La méthode on permet de déclarer un "listener" sur l'événement "click" sur l'élément "div1". Lorsque l'utilisateur clique sur l'élément "div1", la fonction déclarée dans le "listener" est exécutée (elle accepte comme paramètres l'événement et la référence de l'élément) : un message d'alerte est affiché. Un formulaire Ajax facile Le formulaire est un élément incontournable dans une application web. Il y a deux pratiques courantes pour échanger des informations entre le navigateur et le serveur. La première, "à l'ancienne", consiste à soumettre le contenu d'un formulaire de façon classique : les données sont envoyées au serveur et la page complète est rechargée avec le résultat. La seconde, beaucoup plus élégante et pratique, consiste à utiliser un appel Ajax pour effectuer la même opération. Un objet XMLHttpRequest est utilisé pour échanger les données avec le serveur, DOM et Javascript sont utilisés pour modifier les informations contenues dans la page en fonction de la réponse obtenue. Les formats XML, texte ou JSON peuvent être utilisés pour structurer les informations échangées. La page n'est pas rechargée. Pour illustrer la simplicité d'utilisation d'ajax avec ExtJS, nous allons créer un formulaire. Il contiendra trois champs : Nom : un champ texte permettant de saisir une chaîne de caractères, Prénom : idem, Age : un champ permettant de saisir un nombre compris entre 1 et 99. Nous aurons un bouton "Envoyer" permettant de déclencher l'échange de données avec le serveur. Nous allons reprendre notre fichier "index.html" et supprimer tout ce qu'il y a entre les balises "<body>" et "</body>", et modifier le nom du fichier Javascript que nous allons charger. <script type="text/javascript" src="js/test_extjs_ajax.js"></script> Nous allons ensuite créer le fichier "test_extjs_ajax.js" et y copier le code suivant : // Code exécuté lorsque le DOM est entièrement chargé Ext.onReady(function() { // Clic sur le bouton "Envoyer" : gestion de l'envoi du contenu du formulaire // Création du gestionnaire d'événement associé au bouton "Envoyer" var btnenvoyerhandler = function() { // (2) // On vérifie si les valeurs saisies respectent les contraintes définies pour les champs 9 / 14

10 les données if ( Ext.getCmp('nom').validate() == true) { // Validation du champ // On récupère une référence à l'élement "formulaire" var formpanel = Ext.getCmp('formulaire'); // On applique un masque au formulaire (qui devient grisé) avec un message d'attente formpanel.el.mask('traitement des données...', 'x-mask-loading'); // Envoi des données du formulaire formpanel.getform().submit({ url : 'traitement.php', // Url vers laquelle sont envoyées ); success : resultattraitement, failure : resultattraitement // Gestionnaire utilisé en cas de succès // Gestionnaire utilisé en cas d'échec // Gestion du retour de l'envoi du contenu du formulaire // Création de la fonction gérant le retour de l'appel Ajax var resultattraitement = function(form, action) { // (3) var formpanel = Ext.getCmp('formulaire'); // On récupère une référence à notre formulaire // On supprime le masque appliqué au formulaire (qui redevient disponible) par le gestionnaire d'événements lors du clic formpanel.el.unmask(); var result = action.result; // On récupère le résultat // Si on récupère "success : true" dans le retour Ajax if (result.success) { // Affichage d'une boîte de dialogue à l'utilisateur Ext.MessageBox.alert('Traitement terminé', result.msg); else { // Affichage d'une boîte de dialogue à l'utilisateur Ext.MessageBox.alert('Echec', result.msg); // Création du formulaire // Création d'un objet "FormPanel" pour la gestion des éléments du formulaire var fp = new Ext.form.FormPanel({ // (1) renderto : Ext.getBody(), // Le formulaire sera affiché dans le <body> width : 350, // Largeur du formulaire height : 150, // Hauteur du formulaire title : 'Mon formulaire Ajax', // Titre affiché dans la barre de titre id : 'formulaire', // Identifiant du formulaire pour le DOM frame : true, // Affichage avec des coins arrondis labelwidth : 126, // Largeur des libellés des champs defaulttype : 'textfield', // Les objets seront traités comme des champs texte items : [ // Liste des champs du formulaire { // Objet de type "TextField" champ "Nom" fieldlabel : 'Nom ', // Champ texte "Nom" id : 'nom', // Identifiant pour le DOM allowblank : false, // Valeur vide interdite (champ obligatoire) blanktext : 'Ce champ est obligatoire.' // Texte affiché après une validation si le champ est vide, { // Objet de type "TextField" champ "Prénom" fieldlabel : 'Prénom ', // Champ texte "Prénom" id : 'prenom' // Identifiant pour le DOM, { // Objet de type "NumberField" champ "Age" fieldlabel : 'Age ', // Champ numérique "Age" id : 'age', // Identifiant pour le DOM xtype : 'numberfield', // Type "NumberField" / champ numérique minvalue : 1, // Valeur minimum acceptée (pour la validation) maxvalue : 99 // Valeur maximum acceptée (pour la validation) ], buttons : [ // Liste des boutons { // Objet de type "Button" bouton "Envoyer" text : 'Envoyer', // Libellé id : 'btnenvoyer', // Identifiant pour le DOM handler : btnenvoyerhandler // Gestionnaire d'événements ] ); 10 / 14

11 ); Analysons ensemble le code source de notre formulaire. L'ensemble du code est placé dans la méthode Ext.onReady. De cette façon, il sera automatiquement exécuté lorsque le DOM sera totalement chargé. L'instruction var fp = new Ext.form.FormPanel (1) permet d'instancier un objet conteneur de type FormPanel. Il servira à regrouper tous les champs de notre formulaire. Nous définissons sa largeur, sa hauteur, son titre, son id et la propriété renderto nous permet d'indiquer qu'il sera affiché dans le "body" de la page. La propriété labelwidth nous permet de fixer la largeur des libellés des champs à 126 pixels. La liste des champs du formulaires est définie dans le tableau d'objets items. Les deux premiers "Nom" et "Prénom" sont des champs texte. La propriété defaulttype ayant la valeur textfield (indiquant que le type de champ par défaut du formulaire est text), il n'est pas nécessaire de donner plus de précisions. Pour le champ "Nom", les propriétés suivantes sont ajoutées : allowblank : false : indique que le champ ne peut être vide, blanktext : 'Ce champ est obligatoire.' : détermine le message à afficher si le champ est laissé vide. Ces deux propriétés servent à la validation automatique du formulaire. Le dernier champ, "Age" a lui aussi quelques propriétés supplémentaires : xtype : 'numberfield' : indique qu'il s'agit d'un champ numérique. La propriété xtype permet de simplifier la création de formulaires avec des champs ayant un type particulier (numérique, date, ...). Un certain nombre de comportements sont pris en compte automatiquement par ExtJS, ce qui fait d'autant moins de code à écrire. minvalue : 1 : indique que le champ n'accepte pas de valeur inférieure à 1. maxvalue : 99 : indique que le champ n'accepte pas de valeur supérieure à 99. Ces propriétés servent également à la validation automatique du formulaire. Un bouton "Envoyer" est ajouté à la fin du formulaire. On définit son libellé (text), son id (id) et on lui associe un gestionnaire d'événements (handler), en l'occurrence btnenvoyerhandler. C'est ce gestionnaire qui sera appelé automatiquement lorsque l'utilisateur cliquera sur le bouton. De nombreuses autres propriétés sont disponibles pour personnaliser la configuration du conteneur, du formulaire et de ses champs. Il est impossible de toutes les détailler ici. Je vous recommande de consulter la documentation en ligne très bien faite. Voyons maintenant à quoi ressemble notre formulaire, sympathique non? Nous n'avons presque pas écrit de fonctions mais principalement décrit les propriétés du formulaire. Et pourtant, nous avons un rendu plutôt sympathique, une validation simple, et la possibilité d'envoyer le contenu du formulaire au serveur en Ajax. C'est là une des grandes forces du framework! Nous avons une validation basique pour notre formulaire : nous avons défini que le champ "Nom" était obligatoire (allowblank : false) et que le champ "Age" devait être un nombre compris entre 1 et 99 (xtype : 'numberfield', minvalue : 1, maxvalue : 99). 11 / 14

12 Si le champ "Nom" n'est pas renseigné, on obtient le résultat suivant : Le champ invalide est indiqué en rouge et une information est affichée au survol de la souris (son emplacement et son apparence sont personnalisables). Si vous essayez de saisir autre chose qu'un nombre entre 1 et 99 dans le champ "Age", la saisie n'est pas prise en compte. Comme il s'agit d'un champ de type "numberfield", sans plus de code, nous avons automatiquement des flèches permettant d'incrémenter ou de décrémenter sa valeur. Voyons maintenant comment envoyer les données du formulaire au serveur... Dans la description du bouton, nous avons défini une propriété handler. Il s'agit du nom du gestionnaire d'événements que nous souhaitons associer au bouton "Envoyer". Ce gestionnaire d'événements btnenvoyerhandler est défini en (2). L'instruction Ext.getCmp('nom').validate() permet de valider le champ "Nom" à partir des propriétés que nous avons définies. Si le contenu du champ ne remplit pas les conditions définies dans la configuration, la méthode renvoie false. var formpanel = Ext.getCmp('formulaire'); nous permet de récupérer une référence à notre formulaire. formpanel.el.mask('traitement des données...', 'x-mask-loading'); affiche un masque sur le formulaire durant le transfert des données et en attendant le traitement du résultat. formpanel.getform().submit({...); déclenche l'envoi du formulaire en mode Ajax. Les paramètres suivants sont définis : url : 'traitement.php' indique l'url vers laquelle sont envoyées les données. success : resultattraitement indique le nom de la fonction à exécuter en cas de succès. failure : resultattraitement indique le nom de la fonction à exécuter en cas d'échec. Nous voyons donc qu'un clic sur le bouton "Envoyer" déclenche la transmission des données vers la page "traitement.php". Pour l'instant, elle n'existe pas, il nous faut donc la créer. Tout ce que nous voulons pour l'instant, c'est vérifier la façon dont les échanges entre le client et le serveur se passent. Le fichier "traitement.php" ne contiendra donc que très peu de choses. <?php // Chaîne au format JSON renvoyée par le script qui sera traitée par la fonction Javascript "resultattraitement" echo "{success: true, msg : 'Les informations ont été traitées.'"; Nous renvoyons ici une réponse au format JSON. 12 / 14

13 La réponse contient deux informations : success : indique si le traitement a fonctionné (conditionne la partie du code exécutée à la réception de la réponse côté navigateur), msg : message que l'on affichera à l'utilisateur. Ceci n'est bien entendu qu'un exemple très simple. Le script PHP pourrait très bien interroger une base de données, effectuer des calculs... et renvoyer une réponse au format JSON (la fonction json_encode sera alors bien utile...). Nous avons vu comment valider les données, les envoyer à un traitement côté serveur, il nous faut maintenant traiter la réponse. C'est la fonction resultattraitement qui va le faire. Nous lui avons associé ce rôle dans la déclaration success : resultattraitement. L'instruction var result = action.result; nous permet de récupérer le résultat en provenance du fichier "traitement.php". On accèdera à tous les éléments de ce résultat par leur nom : result.success : va nous renvoyer true. result.msg : va nous renvoyer la chaîne de caractères "Les informations ont été traitées." En fonction du résultat, nous allons afficher un message différent. Comme ici, result.success vaut true, nous allons exécuter le code suivant : Ext.MessageBox.alert('Traitement terminé', result.msg); Le résultat final est le suivant : Conclusion ExtJS est complètement orienté développement d'application web riches et peut-être moins adapté à la création de sites web plus grand public. Mais utilisé dans le cadre pour lequel il est fait, il vous permettra de créer et de déployer une application web riche rapidement et simplement. Avec un peu d'expérience, vos scripts resteront simples, clairs et légers et vous gagnerez énormément en productivité. Nous n'avons fait ici que survoler le framework, effleurer ses possibilités. Vous savez l'installer, utiliser quelques fonctionnalités de base, afficher une boîte de dialogue, créer une fenêtre, un formulaire, envoyer les données et récupérer les résultats en utilisant Ajax. Dans un prochain tutoriel, nous irons un peu plus loin en regardant comment développer une petite application web simple permettant de consulter et de manipuler des informations en provenance d'une base de données et en utilisant des fonctions avancées pour construire l'interface. Vous retrouverez les codes sources présentés dans ce document à l'adresse suivante : 13 / 14

14 L'auteur... Diplômé de l'université de Technologie de Compiègne (UTC, promotion 1997), je travaille comme Ingénieur de Développement pour la société Bull depuis J'ai été amené à travailler sur différents projets (allant d'un seul développeur à une équipe d'une quinzaine de personnes) un peu partout en France, beaucoup pour des clients publics (Bibliothèque Nationale de France, Ministère de l'intérieur, Direction Générale des Impôts, Ministère de l'éducation nationale...) et des sociétés ou des entités chargées de services publics (CNAMTS, EDF...). La grande majorité des projets sur lesquels j'ai travaillé portaient sur des applications web apportant des fonctionnalités liées au métier, et très peu des sites web plus «traditionnels». Je suis certifié Zend PHP 5.3, membre de l'afup, et je m'intéresse à tout ce qui touche à l'écosystème PHP, et web de façon plus générale. Contact LinkedIn : Viadeo : 14 / 14