Intégration de MooTools Morph Effect à GWT

Cet article présente l’intégration d’un effet de la librairie Javascript MooTools à GWT. FXMorph de MooTools permet de transformer par animations un élément, d’un état défini par une classe CSS de départ vers une classe CSS d’arrivée : le framework calcule et génère le morphing de la transition !

GWT et animations ?

GWT est un toolkit formidable pour le développement de RIA Ajax. Cependant relativement peu de démonstrations d’interfaces riches créées avec ce framework illustrent les qualités qu’il posséde en « motion design », mis à part quelques widgets souvent trop complexes pour une utilisation standard. En effet, contrairement à Adobe Flex, Microsoft Silverlight et Sun JavaFX, GWT et Ajax ne prennent pas en charge nativement les animations vectorielles ce qui limite naturellement les effets visuels standards.
Il existe fort heureusement de multiples librairies JavaScript bien conçues et performantes permettant l’élaboration d’animations de widgets comme Scriptaculous (la plus connue). Un wrapper permettant l’intégration avec GWT a été conçu (disponible dans GWT Components). Il permet de créer aisément quelques animations mais au prix de nombreuses lignes de code. L’application de ces animations à l’ensemble d’une application devient vite pénible !
La solution originale proposée par MooTools conciste à externaliser les données des animations (point départ, point d’arrivée) dans des classes CSS, et à laisser ensuite la librairie génèrer l’animation voulue sans intervention du développeur! On obtient alors un effet JS extrêmement puissant et facile d’utilisation. Intégrer ces effets à GWT représente donc une optique intéressante.

Démonstration

Voici un lien vers la démonstration de l’utilisation du MorphEffectWrapper faisant partie d’un package mootools4Gwt qui n’est autre qu’une intégration partielle de la librairie MooTools dans GWT. Voici aussi un lien vers l’effet original (hors GWT) si vous voulez comparer. Enfin, voici un lien direct vers mootools4gwt.ziples sources de ce wrapper sous la forme d’un projet GWT / Eclipse.
Cet effet JavaScript a l’avantage d’être très facilement contrôlé en Java avec GWT par l’utilisation d’une seule classe. Il est peu gourmand en temps de chargement de scripts (dans notre cas moins de 35ko), et peut être intégré facilement à GWT.
Le wrapper prend en charge les propriétés CSS : position, taille, couleur de fond, couleur et taille de police, transparence, marge et padding. Cet effet a été testé avec succès avec IE 7 et Firefox 2.

Utilisation du wrapper MorphEffectWrapper

Pour pouvoir utiliser notre wrapper, il suffit d’ajouter les deux scripts mootools.js et morph.js à votre page GWT. Ces 2 fichiers sont présents dans les sources de notre exemple dans le répertoire ‘js‘ de la partie ‘public‘ de notre application.
Une fois inclus ces fichiers, il faut ensuite définir des classes CSS dans n’importe quelle feuille de style incluse à la page ; elles serviront pour le filtre MooTools Morph. A titre d’exemple, voici deux classes proposées par le site MooTools. Elles sont idéales pour tester toutes les capacités du filtre :

1. .morph1 {
2. color: #666;
3. background-color: #ccc;
4. height: 200px;
5. width: 300px;
6. font-size: 15px;
7. overflow: hidden;
8. opacity: 1;
9. border: 2px solid #aaa;
10. margin: 0;
11. padding: 5px;
12. }
14. .morph2 {
15. color: #000;
16. background-color: #ff3300;
17. height: 100px;
18. width: 400px;
19. font-size: 10px;
20. opacity: 0.5;
21. margin: 60px;
22. padding: 60px;
23. border: 10px solid #000;
24. }

Par ailleurs dans une de vos classes de Widget / Composite / EntryPoint, créez un MorphEffectWrapper : il est important que les widgets managés par le wrapper soient déjà ajoutés au RootPanel avant l’instanciation de celui-ci, sinon votre effet risque tout simplement de ne pas avoir lieu (voir les sources pour plus de détails).
La commande à utiliser est :

1. MorphEffectWrapper wrapper = new MorphEffectWrapper(monUIObject, monStyleDeDépart, monStyleDarrivée);

NB : monUIObject est un UIObject (donc n’importe quel Widget GWT est utilisable). Les autres paramètres sont des String.
Il suffit ensuite d’appeller wrapper.morph() pour lancer l’animation et wrapper.morphBack() pour revenir à l’état initial et ce, à tout moment (cliquer sur « morphback » stoppe l’animation morph en cours et retourne à l’état initial avec une animation).
Il est possible d’utiliser plusieurs MorphEffectWrapper (comme le prouve notre démonstration) sur une même page sans conflit. Il faut néanmoins préciser un paramètre supplémentaire lors de l’instanciation de votre wrapper :

1. MorphEffectWrapper wrapper = new MorphEffectWrapper(monUIObject, monStyleDeDépart, monStyleDarrivée, monId);

NB : monId est un String que vous choisirez arbitrairement afin de distinguer vos divers MorphEffectWrapper. Un constructeur supplémentaire avec un paramètre ‘String options‘ est fourni si vous désirez ajouter des paramètres Javascript à votre effet MooTools (format JSON, se référencer à la documentation MooTools pour plus d’informations).

Pour aller plus loin

Voir :

• Notre démonstration en ligne.
• La documentation de MooTools.

En ce qui concerne MooTools, cette librairie est disponible sous licence open source MIT et son téléchargement se fait via une interface vous permettant de choisir les fonctions / effets à inclure. Pour notre exemple, nous avons choisi : tous les outils de base, l’élément ‘DOMREADY’ (très important) et tous les effets (morph est une composition d’effets de base). Le fichier téléchargé sur ce site sera toujours optimisé et obfusqué, vous trouverez dans la documentation du site la version « lisible » du code si vous le désirez.
L’effet Morph n’est pas encore disponible d’entrée avec MooTools 1.1 (il le sera dans la prochaine version 1.2) : celui-ci est toutefois présent sur leur site (attention celui de la version démo possède des bugs que n’a pas la dernière version sous SVN).
Il est possible de créer des effets personnalisés avec MooTools en JavaScript, vous pouvez par la suite les wrapper dans GWT facilement. En vérité le filtre Morph est l’un des plus complets et la réalisation d’effets moins étendus est plus aisée.