Tutoriaux

Introduction à la librairie Javascript Ext JS

Administrateur

Nov 03 |19:29

Que vous soyez un nouvel utilisateur de la librairie Ext ou simplement curieux de découvrir celle-ci vous à la bonne place. Parmis ce monde de plus en plus nombreux qu'est celui des librairies Javascript, la concurrence est de plus en plus féroce. Face à la monté en flèche de JQuery ou Mootools, d'autre on emboîté le pas afin de rester dans la course. Nous allons donc vous faire découvrir les concepts de base de Ext et comment obtenir rapidement une page dynamique pleinement fonctionnelle. On suppose que vous avez une certaine expérience du Javascript et possédez les bases du document model object HTML (DOM).

Télécharger Ext JS

Vous pouvez télécharger la version courante de Ext ici : http://extjs.com/download.

Introduction

Nous allons voir ici la plupart des tâches courantes généralement réalisées en Javascript et comment exéctuter celles-ci grâce à Ext JS.

Ext.onReady(function() {
alert("Hello world!");
});

Ext.onReady est probablement la première méthode que vous utiliserez dans chacune de vos pages. Cette méthode est appelée automatiquement quand le DOM est entièrement chargé garantissant ainsi la disponibilité des elements de la page que vous pourriez utiliser dans vos scripts. Le code ici présent, sera exécuté lorsque le chargement de la page sera terminé et il affichera une boite de message "Hello world!".

Element: le coeur de Ext JS

Presque tout ce que vous faites avec Javascript implique de référencer les éléments spécifiques de votre page de sorte que vous puissiez les utiliser par la suite. En Javascript traditionnel, sélectionner un noeud DOM en fonction de son ID se fait de la façon suivante :

var monDiv = document.getElementById('monDiv');

Ceci fonctionne bien mais l'objet qui est retourné (un noeud DOM) offre peu de possibilité. Afin de pouvoir faire ce que vous souhaitez avec ce noeud il est souvent nécessaire d'écrire beaucoup de code sur mesure. De plus, chaque navigateur aura ces petits caprice ce qui ajoute à la complexité.

Voyons l'objet Ext.Element. Element est réellement au coeur de Ext, fournissant l'accès aux éléments de la page et permettant d'agir sur ceux-ci. Son API est fondamentale pour toute la librairie Ext JS et si vous deviez passer du temps pour apprendre une classe Ext, ce devrait-être la classe Element pour commencer!

Le code Ext JS pour obtenir un élément par son ID resemble à ceci :

Ext.onReady(function() {
var monDiv = Ext.get('monDiv');
});

Nous avons maintenant un objet Element, mais qu'y a t'il de si intéressant dans tout celà ?

Element englobe la plus part des méthodes et propriétés DOM dont vous pourriez avoir besoin, fournissant ainsi une interface DOM pratique, unifiée et commune à tous les navigateurs (vous pouvez toujours accéder directement au noeud DOM quand cela est nécessaire via Element.dom).
La méthode Element.get() possède un cache interne, ainsi les multiples appels pour retrouver le même objet sont très rapides.
Les actions les plus courantes réalisées sur les noeuds DOM sont directement intégrées de façon indépendantes du navigateur (ajouter/supprimer une classe CSS, ajouter/supprimer un gestionnaire d'évènement, positionner l'élement, opérations sur les dimensions, animation, glisser/déposer, etc.).

Ceci signifie que vous pouvez faire toute sorte d'opérations avec un minimum de code. Voici quelques exemples : (la variable monDiv, fait référence à l'exemple plus haut, où nous avons récupéré grâce à la méthode .get, l'élément #monDiv.

monDiv.highlight(); // Le fond de l'élement va être surligné en jaune
monDiv.addClass('red'); // Ajoute une classe CSS (définie dans ExtStart.css)
monDiv.center(); // Centre l'élément
monDiv.setOpacity(.25); // Rend l'élément partiellement transparent

Sélection des noeuds DOM

Il est souvent impraticable voire impossible de choisir des noeuds DOM par leur ID. Peut-être à cause du fait que l'ID n'est pas présent, que vous ne le connaissez tout simplement pas ou bien parcequ'il y a trop d'éléments à référencer. Parfois, vous pouvez vouloir choisir des noeuds basés sur quelque chose d'autre que l'identifiant, comme un attribut ou un nom de classe CSS. C'est pour toutes ces raisons que Ext JS possède un sélecteur DOM extrêmement puissant appelé DomQuery. Le concurent directe à Ext JS, JQuery possède lui aussi ce type de sélecteur.

DomQuery peut être employé comme librairie autonome, mais le plus souvent en utilisant Ext JS, vous l'emploierez dans le contexte de la sélection d'élément de sorte que vous pourrez alors agir par l'intermédiaire de l'interface Element. L'objet Element utilisera de lui même DomQuery pour la sélection d'élements par l'intermédiaire de la méthode Element.select. Voici un exemple simple de la façon dont vous pouvez employer ceci :

Ext.select('p').highlight(); // Sélection de tous les paragraphes (<p>) d'une page afin d'exécuté une action highlitgh()

Cet exemple démontre un aspect très pratique de Element.select - cette méthode retourne en effet un CompositeElement qui permet d'accéder à chaque élément de base par l'intermédiaire de l'interface Element. Ceci permet d'agir facilement sur chaque instance Element retournée par Element.select sans pour autant faire de boucle sur ceux-ci pour les modifier individuellement.

DomQuery supporte une large gamme d'options de sélection incluant la plupart des sélecteurs du DOM W3C CSS3, les bases de XPath, les attributs HTML et beaucoup plus. Voyez la documentation de l'API DomQuery pour plus de détails sur cette puissante librairie.

Répondre aux événements

Jusqu'ici, dans nos exemples, tout le code que nous avons écrit se trouvait directement à l'intérieur de la fonction onReady. Ceci signifie que le code était exécuté automatiquement après le chargement de la page. Ceci ne nous donne pas beaucoup de contrôle - la plupart du temps, vous allez vouloir que votre code s'éxécute en réponse à des actions ou évènements spécifiques. Pour faire ceci, vous définissez des handler d'événement qui pourront répondre aux événements en utilisant les fonctions que vous aurez assignée.

Commençons avec un exemple simple :

Ext.onReady(function() {
    Ext.get('monBouton').on('click', function(){
        alert('Vous avez cliqué sur le bouton!');
    });
});

Le code s'exécute toujours quand la page est chargée mais il y a une différence importante ici. La fonction contenant le code alert() est définie mais ne s'éxécute pas immédiatement - elle est assignée comme "handler" de l'événement clique du bouton.

Sans surprise, Element.select permet de faire la même chose mais avec un groupe d'éléments. Par exemple, pour montrer notre message quand n'importe le quel des paragraphes de notre page est cliqué, nous pourrions faire ceci :

Ext.onReady(function() {
    Ext.select('p').on('click', function() {
        alert('Vous avez cliqué sur le paragraphe!');
    });
});

Dans ces deux exemples, la fonction gérant l'événement est simplement déclarée en ligne sans lui donner de nom. Le terme pour ce type de fonction est "fonction anonyme" puisqu'on la déclare sans lui attribuer de nom. Vous pouvez également manipuler un évènement par une fonction nommée, ce qui est particulièrement utile si vous souhaitez réutiliser la fonction pour lui faire manipuler des événements multiples. Le code suivant, par exemple, est équivalent au précédent :

Ext.onReady(function() {
    var paragraphClicked = function() {
        alert('Vous avez cliqué sur le paragraphe!');
    }
    Ext.select('p').on('click', paragraphClicked);
});

Jusqu'ici nous avons effectué une action générique quand notre événement arrive, mais comment connaître quel élément spécifique a généré l'événement afin d'effectuer une action ? La méthode Element.on passe trois paramètres extrêmement utiles à la fonction gérant l'événement. Dans nos exemples précédents notre fonction de manipulation ignorait ces paramètres, mais avec un simple changement, nous pouvons lui ajouter un niveau de fonctionnalité. Le premier, et le plupart important, paramètre est l'événement qui s'est produit. C'est un objet d'événement Ext, qui fournit plus d'informations que l'événement standard des navigateurs. Par exemple, le noeud de la cible DOM de l'événement peut être recherché avec :

Ext.onReady(function() {
    var paragraphClicked = function(e) {
        Ext.get(e.target).highlight();
    }
    Ext.select('p').on('click', paragraphClicked);
});

Notez que la cible est un noeud DOM, c'est pouquoi nous recherchons d'abord l'élément correspondant avant d'effecter une action sur celui-ci. Dans le cas de notre example, nous surlignons le paragraphe qui a été cliqué. La plupart des langages de développement utilise ce concept qui vous sera des plus utiles au fur et à mesure de votre développement personnel.

Envoyer par mail

Vu: 6388

Commentaires (2) Add Comment