Veuillez patienter...
ajax-loader

Création d'un composant pour Primefaces

sysord

Contexte

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.

Cytoscape Web

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.

Utilisation de Graphvis avec Primefaces

la balise destinée à intégrer un Graphvis dans une page est:

<p:graphvis /> pour un rendu de graphe par CytoscapeWeb en Flash.
<p:graphvis2 /> pour un rendu de graphe par CytoscapeWeb 2 (Html5 + JQuery).

Attributs du composants Graphvis:

Name Required Type Default Description
ajax false java.lang.Boolean true Specifies the synchronization mode, when set to true (default), all local model change are replicated on the server side.
update false java.lang.String null Component(s) to be updated after synchronize.
value false org.primefaces.model.graphvis.GraphvisModel null EL for accessing graphvisModel.
style false java.lang.String null style
styleClass false java.lang.String null style classes
onItemClick false java.lang.String null Client side callback to execute when a graph element is clicked.
onItemDblclick false java.lang.String null Client side callback to execute when a graph element is double clicked.
onItemSelection false java.lang.String null Client side callback to execute when a graph element is selected.
onItemUnselection false java.lang.String null Client side callback to execute when a graph element is unselected.
onNodeClick false java.lang.String null Client side callback to execute when a graph node is clicked.
onNodeDblclick false java.lang.String null Client side callback to execute when a graph node is double clicked.
onNodeSelection false java.lang.String null Client side callback to execute when a graph node is selected.
onNodeUnselection false java.lang.String null Client side callback to execute when a graph node is unselected.
onEdgeClick false java.lang.String null Client side callback to execute when a graph edge is clicked.
onEdgeDblclick false java.lang.String null Client side callback to execute when a graph edge is double clicked.
onEdgeSelection false java.lang.String null Client side callback to execute when a graph edge is selected.
onEdgeUnselection false java.lang.String null Client side callback to execute when a graph edge is unselected.


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.

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
		xmlns="http://java.sun.com/xml/ns/javaee" 
		xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 
		xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
							http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"
>

	...

<!-- Filter for redirect CytoscapeWeb request  -->	  
  <filter>
    <filter-name>graphvisFilter</filter-name>
    <filter-class>org.primefaces.component.graphvis.GraphvisFilter</filter-class>
  </filter>
  
  <filter-mapping>
    <filter-name>graphvisFilter</filter-name>
    <url-pattern>*.swf</url-pattern>
  </filter-mapping>
  
  ...
  
</web-app>

		

Intégration de Graphvis à Primefaces

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.

Dossier src de Graphvis:

sysord

Démos

Les évènements côté client avec Graphvis.
Les comportements Ajax avec Graphvis.
Dijkstra côté serveur avec Graphvis.

sysord

Liens