Ellipse Tutorial

ATTENTION : Tutorial en cours d'écriture ! N'hésitez pas à nous signaler toute erreur ou suggestion.

Accès rapide :
   Les pseudo classes proposées par le fichier JwtUtility.js
   Les fonctions proposées par le fichier JwtUtility.js
   Le modèle objet JWT et ses principales pseudo classes

L'API JWT trouve sont inspiration au niveau de l'API Swing du Java SE 6.0(Java Standard Edition 6.0) . Effectivement l'API Swing(API permettant la mise en oeuvre d'interfaces graphiques en Java) propose de nombreux composants graphiques qui peuvent être assemblés les uns aux autres avec une très grande facilité et une très grande clarté au niveau du code. D'où l'idée suivante : pourquoi ne pourrait-on pas avoir un modèle équivalent au sein d'un navigateur et qui soit manipulable via Javascript. De nombreuses autres librairies Javascript en font de même. Notre petit "plus" résidant dans le fait que ces composants JWT peuvent de plus être manipulés coté serveur via la notion de composants Ellipse (mais ce dernier point ne sera pas appréhendé dans ce document).

Notez que la librairie JWT propose de nombreuses fonctionnalités. Ces fonctionnalités sont exploitées par les composants graphiques JWT. Mais pourquoi ne pourrait-on pas les utiliser sur les tags HTML classiques ? C'est pour cette raison que la librairie JWT est découpée en deux grandes parties. Tous d'abord, un ensemble de fonctions sont proposées dans le fichier corelib/services/web/javascript/jwt/JwtUtility.js : ces fonctions travaillent, la plupart du temps, sur des ids ou des éléments du DOM (des tags). Ensuite ces fonctions sont encapsulées dans un modèle objet proche de celui de l'API Swing : ce modèle objet propose de nombreux composants tels que le calendrier web, les barres de progression, ... Nous allons donc étudier plus en détail chacune de ces deux parties.

Trois types de données, relativement de petites tailles, permettent de gérer le positionnement des éléments dans la page. Il s'agit des types Point, Dimension et Rectangle. Voici la liste des attributs et des méthodes exposés par ces trois types de données.

• Point : expose les attributs x et y ainsi qu'une méthode toString (elle facilite le débuggage de vos scripts).

• Dimension : expose les attributs width et height ainsi qu'une méthode toString (elle facilite le débuggage de vos scripts).

• Rectangle : expose les attributs x, y, width et height ainsi qu'une méthode toString (elle facilite le débuggage de vos scripts).

• Color : une classe de manipulation de couleurs. Elle stocke une couleur sous forme de composantes RGB. Elle expose notamment les méthodes suivantes :

• getRed, getGreen, getBlue : ces méthodes permettent de récupérer chacune des composantes RGB de la couleur considérée. La valeur de ces composantes est exprimer via un entier compris en 0 et 255 (un octet).

• setRed, setGreen, setBlue : ces méthodes permettent de modifier les composantes RGB de votre instance de couleur. La valeur de ces composantes est exprimer via un entier compris en 0 et 255 (un octet).

• brighter : permet de calculer une nouvelle couleur plus claire (à partir de la couleur considérée).

• darker : permet de calculer une nouvelle couleur plus sombre (à partir de la couleur considérée).

• toString : retourne la même valeur que la méthode toHtmlString. Néanmoins, notez bien que la redéfinition de la méthode toString (par rapport à la classe même Object) ne fonctionne pas correctement sous IE (raison inconnue). Il vous est donc conseillé d'utiliser toHtmlString.

• toHtmlString : calcule une chaîne de caractère de représentation de la couleur au format HTML (#RRGGBB).

• toCssString : calcule une chaîne de caractère de représentation de la couleur au format CSS (rgb( redValue, greenValue, blueValue)).

A titre d'exemple, voici un petit exemple vous montrant comment utiliser la classe Color. Notez le résultat produit par cet exemple : il est présenté sur la partie droite de l'exemple.

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 

addEventHandler( window, "onload", function( event ) {
    var color = new Color( 0, 0, 255 );
    
    for( var i=0; i<8; i++ ) {
        var node = document.getElementById( "line" + i );
        node.style.background = color.toCssString();
        color = color.brighter();
    }
} );

Notez aussi que la classe Color propose aussi de nombreuses couleurs prédéfinie dont voici la liste :

Voici une liste des principales fonctions proposées par le fichier JwtUtility.js.

• var position = computeAbsolutePosition( node ); : permet de calculer les coordonnées (en pixels) de l'élément relativement au coin haut-gauche de la page Web. Ces coordonnées sont bien entendu stockées dans une instance de la pseudo-classe Point.

• var size = computeSize( node ); : permet de calculer la taille de l'élément considéré. Cette taille sera renvoyée sous forme d'une instance de la pseudo-classe Dimension.

• changeOpacity( node, opacity ); : permet de changer l'opacité d'un noeud du document (d'un tag du document si vous préférez). L'opacité doit être comprise entre 0 et 100. 0 signifiant que le noeud sera complétement transparent et donc non visible. 100 signifiant une opacité totale.

• moveAndResizeElement( id, x, y, width, height, sequenceNumber, interval, callback ); : permet, à partir de la position actuelle d'un noeud, de le déplacer (et de le retailler) à une nouvelle position. Cette fonction se base sur des appels à window.setTimeout. C'est notamment pour cela que vous devez utiliser l'identifiant du noeud considéré et non directement le noeud. Les paramètres x, y, width et height correspondent à la position définitive de l'élément. Les paramètres sequenceNumber et interval permettent de controler la qualité de l'animation en indiquant respectivement le nombre de séquences à utiliser pour l'animation et l'interval de temps (en milliseconde) entre chaque séquence de l'animation. Le dernier paramètre est facultatif. Il s'agit d'une procédure de rappel (on parle de callback, en anglais - il s'agit en fait d'une simple fonction Javascript) qui sera invoquée lorsque l'animation se terminera : cela pouvant vous permettre de finaliser un aspect quelconque, voir même d'enchaîner une autre animation. A titre d'exemple, vous pouvez consulter le site http://www.adc-recrutement.fr : il met en oeuvre cette technique pour enchaîner les quatre animations au démarrage du site. IMPORTANT : pour qu'un élément puisse être repositionné sur la page, sa caractéristique CSS position doit être fixée à la valeur absolute.

L'environnement Java SE définie deux librairies de mise en oeuvre d'interfaces graphiques : l'AWT (Abstract Window Toolkit) et Swing. D'un certain point de vue, on peut voir la librairie JWT (Javascript Widget Toolkit) comme une simplification des modèles object de ces deux librairies appliquées au langage Javascript. Comme nous l'avons déjà vu, il n'existe pas à proprement parler, de concept de classes en Javascript. Néanmoins le concept de prototypes Javascript permet d'approcher le concept de classes. JWT propose donc un certain nombre de pseudo-classes (nous parlerons néanmoins de classes dans la suite de ce document) donc les noms et les membres ressembleront souvent à ceux proposés dans les librairies Java considérées. Notez aussi que nous allons utiliser une notation proche de celle de Java en terme de package : même si Javascript n'utilise pas de package à proprement parler, les fichiers de définition de classes de la librairie JWT sont classifiés en dossiers.

La classe corelib.services.web.javascript.jwt.Component représente le comportement commun à tout composant graphique de la librairie JWT. Cette classe expose notamment les méthodes getId, setId, getLocation, setLocation, getSize, setSize, getBounds, ... Notez aussi la présence de la méthode injectInDocument : elle permet d'injecter le composant JWT dans un noeud du document.

La classe corelib.services.web.javascript.jwt.Container permet de contenir d'autres composants JWT. De même qu'en Java, des stratégies de placement (des Layout) peuvent être utilisées pour positionner automatiquement les sous composants du document. Cette classe expose notamment la méthode add permettant d'ajouter des composants au conteneur.