Le blog de Florent

Un article de millie    2 Commentaires

J’ai découvert récemment un projet permettant d’intégrer facilement du Javascript/AJAX dans des applications Web : Ext JS.

Qu’est-ce qu’Ext JS

Ce projet est une bibliothèque de fonction écrite exclusivement en Javascript, ceci permettant de l’intégrer sur n’importe quelle plateforme (php, Java EE etc.).

Ext JS offre un ensemble de fonctionnalité/bibliothèque permettant de d’écrire rapidement (du moins en théorie) des RIA (Rich Internet Applications) en offrant un ensemble de composants graphiques (fenêtre, panel, gestion de desktop, structure arborescente) pouvant être remplis automatiquement en utilisant des requêtes asynchrones (AJAX) ou synchrones.
Ext JS fonctionne en théorie sous Firefox, IE (6 et plus), Safara 3 et plus et Opera (9 et plus).

Le projet dispose de 2 licences :

• Une licence open-source GNU GPL license v3 permettant d’utilisant Ext JS dans n’importe quelle projet sous même licence ;
• Une licence commerciale permettant d’utiliser le projet dans des applications commerciales (les prix sont indiqués ici

Les composants graphiques disponibles

A l’heure actuelle, le projet permet de définir les composants suivants :

• des fenêtres (avec des boutons optionnels pour fermer, agrandir, redimensionner)
• des composants relatifs au grid (grid éditable, grid sur plusieurs pages etc.)
• structures sous formes d’arbres
• intégration d’onglets dans des panels (les onglets peuvent être ouverts dynamiquement, fermés etc.)
• des boutons et des composants pour l’écriture des formulaires (text field, combobox, box pour les dates etc.)
• possibilité de faire du drag and drop sur les composants
• toolbar et bar de menus
• barre de statuts (possibilité d’en afficher automatiquement lors de l’envoi de requête synchrones)
• effet spotlight
• internationalisation du texte
• bureau proche d’un bureau windows (peut contenir plusieurs fenêtres, une barre de menu etc.)

Chaques composants (notamment les grids) peuvent être remplis automatiquement en utilisant des Store et des Reader.

Un formulaire simple

Voici un exemple simple de formulaire de login :

Pour le simple formulaire, voici le code qu’il faudra écrire.

var win = new Ext.Window({
   id:'imginform-win'
   ,width:320
   ,height:250
   ,layout:'fit'
   ,border:false
   ,closable:false
   ,renderTo:Ext.getBody()
   ,frame:true
   ,title:'Login'
   ,items:[{
     xtype:'form'
     ,id:'imginform-form'
     ,defaultType:'textfield'
     ,frame:true
     ,method:'post'
     ,defaults:{anchor:'95%'}
     ,items:[
       {
         xtype:'box'
         ,anchor:''
         ,autoEl:{
           tag:'div', style:'margin:8px 0 8px 105px', children:[
           
          {
             tag:'img'
             ,src:'./image/logo2.gif'
           }
          ]
         }
       },
      {
         fieldLabel:'Library'
         ,id:'libraryid'
         ,xtype: 'textfield'
       },
       {
         fieldLabel:'Login'
         ,id:'loginid'
         ,xtype: 'textfield'
       },{
         fieldLabel:'Password'
         ,id:'passwordid'
         ,xtype:'textfield'
         ,inputType: 'password'
       }
    ]
     ,buttonAlign:'right'
     ,buttons:[{text:'Submit'}]
   }]
   });
 
    win.show();

On se rend assez vite compte que pour des interfaces évoluées, certes cela est beaucoup simple à écrire que du Javascript pure, il faut tout de même beaucoup de ligne de codes.

Quelques mécanismes AJAX

Pour chaque formulaire ou bouton, il est possible d’y adjoindre une action synchrone ou asynchrone en transmettant les données du formulaire.

Par exemple, il est possible de définir la propriété submit directement sur le formulaire :

,submit:function() {
 this.getForm().submit({
 url:servicesAppel
 ,scope:this
 ,success:fonctionSuccess
 ,failure:fonctionFailure
 ,waitMsg:'Message d'attente'
 });
 }

Ou bien directement sur un bouton indépendant du formulaire :

 formRequest.addButton('Load', function() {
        Ext.Ajax.request( {
         url: 'ListDocumentsServlet',
         success: successFunction,
        failure: function(response) { alert(action.failureType);    }
        ,waitMsg: 'attente'
        ,params: formRequest.getForm().getValues(true)
       });
 });

Ext JS offre plusieurs objets permettant de traiter automatiquement les retours sous forme de XML ou sous forme JSON avec les objets : Ext.data.Store et Ext.data.XmlReader.

Quelques défauts

Personnellement, je trouve que la version actuelle d’Ext JS souffre de quelques défauts qui seront en partie résolue avec la version future (3.0).

• Il n’y a pas d’outils à l’heure actuelle permettant de faire le design des composants. Cela peut devenir rapidement très long à gérer, notamment si l’on souhaite faire uniquement une maquette
• Je n’ai pas vraiment trouvé de méthode correcte à l’heure actuelle permettant de concevoir une application importante avec Ext JS (je parle surtout au niveau de la communication entre les éléments, que faut-il faire ?)
• Dès que l’on sort des exemples de bases donnés sur le site d’Ext JS, il faut passer pas mal de temps à trouver la méthode pour arriver à ses fins (j’ai par exemple perdu pas mal de temps à ajouter un traitement AJAX sur un bouton indépendant du formulaire)
• la compatibilité avec les différents navigateurs n’est pas 100% fonctionnelle. Le code fonctionne sous Firefox lorsqu’il y a des virgules en trop mais ne fonctionne plus sous IE. Il est donc nécessaire de disposer d’un très bon éditeur de code