mercredi 19 juin 2013

JSF and AJAX : un mariage heureux si vous comprenez la gestion des IDs



JSF 2 apporte un support  de haut niveau pour vos cas d'usages AJAX : il faut cependant comprendre la gestion des IDs pour bien en profiter.

Les IDs


IDs, comme leur nom le laisse supposer, permettent d'identifier les composants dans la vue.

Chaque composant est à une place précise dans la vue, l'ensemble forme un arbre de composants.

Chaque ID doit être unique.

Lorsque vous utilisez la balise ajax de JSF vous utilisez des IDs pour l'attribut execute et l'attribut render.

Cas d'utilisation


Voici un exemple simple :

Loading ....



Je veux rafraîchir  3 zones lorsque ma requête AJAX est terminée :

- output à l'intérieur du formulaire principal
- output2
- output3 à l'intérieur du second formulaire


Comme un système de fichier UNIX



Tout est dans l'utilisation du caractère ":".

Qu'est ce que veut dire ":" ?

Il faut considérer ce caractère comme  le slash d'UNIX.

Les composants sont comme des fichiers, certains sont des répertoires : ils contiennent d'autres composants.

Certains répertoires sont spéciaux, ils ont une influence sur la manière dont les IDs client sont calculés.

Ces composants spéciaux sont des  naming container, ils donnent leurs IDs à leurs enfants comme un préfixe.

Si vous étudiez le XHTML vous verrez que  mainform or secondform sont des préfixes de certains IDs de composants fils.

Quand une requête AJAX est en cours alors le contexte courant pour le calcul des ID est le  naming container le plus proche dans la hiérarchie.

Tous les IDs utilisés dans la balise ajax sans ":" sont évalués depuis ce point de départ.
C'est en quelque sorte le dossier courant.

La solution


Dans l'exemple ci-dessous, ma balise AJAX doit utiliser les IDs suivants :


Loading ....

Pourquoi ?


1) Quel est le naming container le plus proche ?

C'est mainform.

2) Quelle est la relation entre output et mainform ?

output est un fils, je peux le cibler directement car je suis dans le répertoire mainform:

./output -> output

3) Quelle est la relation entre output2 et mainform ?

Il n'est pas dans mainform, je dois passer par la racine de l'arbre, comme je le ferais avec un système de fichier :

/output2 -> :output2

4) Quelle est la relation entre output3 et mainform ?

Il n'est pas dans mainform, je dois passer par la racine de l'arbre mais il est dans le "dossier" secondform :

 /secondform/output3 -> :secondform:output3

Quelques balises sont des  naming container :
- data
- form

Attention,  tous les composites sont des naming containers !

Ils ont un impact sérieux sur la manière dont vous devrez spécifier les IDs dans les balises AJAX.
Dans le doute, n'hésitez pas à inspecter le XHTML pour vérifier les clients IDs.

A vous de jouer !





Contrat Creative Commons
the jee architect cookbook by Olivier SCHMITT est mis à disposition selon les termes de la licence Creative Commons Paternité - Pas d'Utilisation Commerciale - Pas de Modification 3.0 Unported.

1 commentaire: