Nous utilisons la suite de composants JSF Primefaces depuis plusieurs années.
Cet extraordinaire ensemble de composants JSF 2.0 permet de mettre à disposition des interfaces clients riches dans nos applications Web JEE.
Il était important pour nous après son intégration dans plusieurs de nos projets de comprendre mieux le fonctionnement interne de cette bibliothèque.
Nous avons donc franchi le pas et choisi de créer à partir de rien un nouveau composant pour PrimeFaces.
Notre choix s'est porté sur un widget qui devrait nous servir lors de nos prochains projets, il s'agit d'un composant Primefaces permettant
de visualiser un graphe et d'agir sur ses éléments au travers de l'interface Web, il se nommera "Graphvis".
Le composant Graphvis doit permettre:
La visualisation côté client d'un graphe basé sur un modèle fourni par la partie serveur de l'application.
La manipulation et la modification du graphe côté client à partir d'un simple navigateur.
La synchronisation entre le client et le serveur. Les modifications effectuées sur le graphe côté client doivent être appliquées
sur le modèle du graphe côté serveur et vice-versa.
De changer facilement la technologie sous-jascente exploitée pour le rendu du graphe côté client.
Il s'agit de parvenir au couplage le plus faible possible entre Graphvis et les fonctionnalités
dédiées au dessin du graphe, à sa manipulation et à la gestion des interactions avec l'utilisateur.
Il sera ainsi possible à tout moment de substituer la partie rendu et manipulation de graphe pour profiter des dernières évolutions
technologiques des navigateurs web: Html5, Canvas, Svg, WebGL.
Cytoscape Web
La visualisation de graphe est un domaine à part entière, il n'était pas question pour nous de nous lancer dans la réalisation d'un
tel outil. Il était donc nécessaire d'intégrer une solution existante exploitable dans un navigateur.
Dans nos application "lourdes" en Java ou VisualBasic, nous utilisons habituellement Graphviz.
C'est l'un des meilleurs moteur de rendu de graphe. Malheureusement mis à part le projet Canviz
capable de dessiner des graphes précalculés par Graphviz dans des canvas Html (une sacré performance), il n'existe pas de viewer utilisable en Web fournissant
l'intéractivité recherchée.
Lors de nos recherches sur le Web, nous avons découvert un autre superbe outil de visualisation de graphe nommé
CytoscapeWeb. C'est un composant écrit en Flash qui permet au travers d'une interface Javascript de dessiner
un graphe et de manipuler ses éléments par programme ou à partir de leur représentation graphique. C'était exactement ce qu'il fallait et notre choix s'est porté
sur ce composant.
Une nouvelle version nommée Cytoscapeweb 2 en pur Html5 et SVG avec JQuery est d'ailleurs en cours de développement.
Primefaces
Avec plus de 100 composants, une part de la contruction et du développement des composants est automatisée. Cette automatisation utilise Maven pour générer une partie
du code, assembler les différentes parties des composants JSF et effectuer la compilation et l'empaquetage (création du primefaces.jar).
Un composant Primefaces comporte les éléments suivants:
Les ressources: il s'agit des fichiers transmis côté client pour le rendu graphique du composant par le navigateur et la gestion des intéractions
avec l'utilisateur.Ces fichiers peuvent être des Css, des codes JavaScript, des composants Flash, des images etc.
Le component: il s'agit d'une classe Java chargée de stocker et représenter la description d'une instance du composant.
Les instances de composants sont créées à partir de la définition XHTML du composant et sont stockées dans l'arbre représentant la vue de la page (UIViewRoot).
La chaîne de construction de Primefaces génère la partie stockage et accès aux propriétés du composant à partir de sa description XML.
La partie spécifique du code est à fournir dans un fichier "template" qui sera ajouté à la suite du code généré.
Le renderer: il s'agit d'une classe Java chargée d'emitter (de produire) le code Html nécessaire au rendu du composant
et de traiter les requêtes liées au composant.
Le composant Graphvis
Graphvis est donc un composant JSF 2.0 intégrable à la suite Primefaces qui utilise CytoscapeWeb pour
la visualisation de graphes et la prise en compte d'interactions: sélection et déplacement de noeuds et d'arcs.
Couplage Primefaces / CytoscapeWeb:
Pour garantir la possibilité de remplacer à tout moment CytoscapeWeb par une nouvelle version ou une autre bibliothèque nous avons utilisé le pattern "Adaptateur"
pour adapter le graphe CytoscapeWeb et ses éléments. Il en résulte évidement, une utilisation réduite des fonctionnalités mises à disposition par Cytoscape mais
les fonctionnalités retenues sont celles que devrait fournir tout outil dédié à la représentation et à la manipulation de graphes.
Cette démarche n'a pas été inutile car en créant simplement de nouvelles implémentations des adaptateurs nous avons, avec un effort minimum,
réalisé une nouvelle version du composant nommée Graphvis2 qui utilise CytoscapeWeb 2 (Html5 + JQuery) pour le rendu des graphes côté client.
IMPORTANT: Pour un bon fonctionnement il est nécessaire d'ajouter le filtre graphvisFilter au web.xml de l'application utilisatrice.
Ce filtre permet de rediriger correctement les requêtes de chargement des swf de CytoscapeWeb.
La construction de Primefaces à partir des sources est décrite dans le
wiki du projet Primefaces sur googlecode.
Pour ajouter le composant Graphvis à la version actuelle de Primefaces, il suffit après avoir obtenu les sources à partir du svn
de fusionner le dossier src de Graphvis avec le dossier src de Primefaces puis de lancer le mvn install.