RichFaces - Désélectionner un rich:panelMenuItem

Version imprimable

11/03/2011, 10h23
Lordsephiroth

RichFaces - Désélectionner un rich:panelMenuItem

Bonjour à tous,

Je viens une fois de plus en quête d'informations concernant certains points de JSF et Richfaces. Je me trouve confronté à un problème que je résoudrais en une douzaine de secondes par du code javascript si je faisais du servlet ou du jsp, mais avec JSF... j'ai encore des blocages :(

Mon problème est relativement simple : mon menu est formé d'un rich:panelMenuGroup contenant plusieurs rich:panelMenuItem. Rien de bien sorcier jusqu'ici. Le moteur JSF s'arrange pour placer la classe rich-pmenu-selected-element sur la balise <tr> de l'élément de menu sur laquelle le clic est effectué. Tout marche très bien, le texte de mon menu est correctement mis en gras lorsque je clique dessus.

Mon problème vient quand je change de page par des liens qui ne sont pas dans le menu mais à l'intérieur de la page. Tant que je ne reclique pas sur un élément du menu, celui qui est sélectionné ne change pas.

Typiquement : je clique sur la page de recherche d'objet et une liste s'affiche. Je clique sur le lien "ajouter un élément" tout en bas de la liste. Je suis donc sur la page d'ajout / d'édition d'objet. L'élément de menu dont le texte est en gras est par contre toujours "Rechercher" et non "Ajouter un élément" vu que je n'ai pas cliqué dans le menu.

Dans un premier temps j'ai cherché à comparer lors du rendu du panelMenuItem la page sur laquelle je suis avec celle cible du lien, et de changer la classe en utilisant styleClass="rich-pmenu-item" (si la cible du lien n'est pas la page actuelle) et styleClass="rich-pmenu-selected-element" (si la cible du lien est la page actuelle.

Je tombe sur deux problèmes avec cette tentative :
1) styleClass pose la classe CSS sur la balise <table> de l'élément de menu, alors que JSF pose rich-pmenu-selected-element sur le <tr>, donc au niveau du dessous. Je n'arrive donc pas à accéder par ce biais à la bonne balise pour y changer la classe.
2) styleClass ajoute des classes CSS mais n'en enlève visiblement pas, je me retrouve donc souvent avec sur la balise <table> plusieurs fois la même classe.

Mon autre tentative a été dans la balise onClick de mon lien à l'intérieur de la page de déplacer la classe rich-pmenu-selected-element en la supprimant du <tr> qui était sélectionné et en la plaçant sur le <tr> qui devrait l'être après le changement de page (en javascript natif avec un getElementById('tr')...). Seulement... les identifiants que place JSF sur les éléments de menus sont un peu spéciaux et contiennent des préfixes et des suffixes numériques, par exemple tablehidetemplateForm:j_id18 si on est dans un formulaire nommé templateForm, ce qui est peu pratique.

Mes questions donc :

1) est-ce une bonne idée de mêler du javascript natif dans des onClick à toute la mécanique Ajax (dont on n'écrit pas une seule ligne) généré par richfaces ? J'ai l'impression que non, je trouve ça pas terrible mais il fallait bien tester quelque chose.
2) existe-t-il un moyen autre que styleClass dans le panelMenuItem pour changer les classes des éléments HTML générés par ce tag ? visiblement il y a <div><table><tbody><tr><td> généré pour chaque élément de type panelMenuItem, et les classes sont réparties sur ces éléments HTML.
3) la solution est-elle tout autre ? ou ai-je fait une grossière erreur de conception en ayant une navigation à l'intérieur de ma page et en voulant adapter le menu en fonction de la navigation interne ?

Je débute, je suis navré si l'explication de mon problème ci-dessus n'est pas super bien formulé et pas dans le langage habituel du monde JSF / richfaces.

Merci et bonne journée !

Bonjour,

Après avoir laissé tombé ce point pendant un bon moment, j'ai repris mes recherches et j'ai trouvé dans la documentation officielle RichFaces :

Citation:

12.3.9.5. JavaScript API

The <rich:panelMenuGroup> component can be controlled through the JavaScript API. The JavaScript API provides the following functions:

expand()

Expand this panel menu group.
collapse()

Collapse this panel menu group.
select(id)

Select the menu item with the id identifier.

Le code de mon menu est tout simple :
Code:

1 2 3 4 5 6 <rich:panelMenuGroup label="#{msgs.data}" id="menuAgendaData" iconCollapsed="disc" iconExpanded="disc"> <rich:panelMenuItem .... des paramètres... /> <rich:panelMenuItem .... des paramètres... /> .... </rich:panelMenuGroup> // autres panelMenuGroup
Je cherche donc à appeler la fonction expand() sur mon panelMenuGroup lorsque l'internaute clique un lien le menant vers une page qui doit avoir ce panelMenuGroup ouvert. Pour le moment, le lien me mène à la bonne page, mais le panelMenuGroup est en état "collapsed".

Je n'ai pas trouvé un seul exemple d'utilisation de cette fonction expand(), ni sur Google ni sur ce forum. Premièrement je ne sais pas trop où placer le code, et deuxièmement je ne sais pas trop comment faire l'appel.

Pour le moment j'ai tenté de mettre l'appel à expand() dans le "oncomplete" du lien qui mène à la page (en me disant que le rendu devait être fait pour que le menu soit présent afin de pouvoir l'ouvrir, mais je me trompe peut être complètement).

J'ai donc tenté

Code:

oncomplete="document.getElementById('menuAgendaData').expand();"

ainsi que

Code:

oncomplete="expand('menuAgendaData');"

. Comme d'habitude dans les problèmes RichFaces, je ne vois aucune erreur javascript dans ma console FireFox, rien d'étrange du côté du serveur, pas d'erreur... le bonheur du débug Ajax dans ce langage ;)

Quelqu'un aurait une idée de l'endroit où je devrais placer mon code pour ouvrir le menu ainsi que tu morceau de code à exécuter pour utiliser cette fonction expand() ?

Merci d'avance :mrgreen:

20/04/2011, 15h17
Sniper37

l'id n'est pas le bom, les id en JSF sont générés comme ça: viewId:formId,componentId

utilise firebug tu vois bien l'id généré,
tu peux aussi utiliser a4j:log pour voir les logs de la requête ajax.

tu peux aussi faire le expand on java.
n'oublie pas de changer la valeur de expandMode ou mode, par defaut c'est none.
Si tu le fais en java, il faut prendre ajax ou client pour le javascript.
20/04/2011, 16h31
Lordsephiroth
Citation:

Envoyé par Sniper37

l'id n'est pas le bom, les id en JSF sont générés comme ça: viewId:formId,componentId

Effectivement, Firebug m'a donné l'information immédiatement, l'identifiant généré est "leftNavigationForm:menuAgendaData", mon formulaire se nommant leftNavigationForm.

Citation:

Envoyé par Sniper37

tu peux aussi utiliser a4j:log pour voir les logs de la requête ajax.

Merci du conseil. J'ai placé un panel en dessous de la zone de mon site qui est cible des reRender et les logs s'affichent parfaitement correctement. Je vois donc le message d'erreur de la requête. Lorsque j'utilise le code javascript expand('...'), j'obtient ces lignes tout en fin de log :
Code:

1 2 3 4 .... debug[16:27:50,165]: Script evaluation succeeded debug[16:27:50,165]: call getElementById for id= _ajax:data error[16:27:50,165]: Error evaluate oncomplete function undefined
Lorsque j'utilise l'autre syntaxe que j'ai testée, à savoir document.getElementById('...').expand(), j'obtient pareil :
Code:

1 2 3 4 .... debug[16:19:34,247]: Script evaluation succeeded debug[16:19:34,247]: call getElementById for id= _ajax:data error[16:19:34,247]: Error evaluate oncomplete function undefined
A noter que lorsque je tente la seconde syntaxe sans expand(), je n'ai pas de message d'erreur. Le document.getElementById('...') a donc l'air d'être correctement réalisé. Je suis vraiment pas sûr d'avoir bien compris comment accéder à cette Javascript API présentée sur la doc officielle RichFaces, où sont mentionnées les fonctions expand(), collapse() et select().

Citation:

Envoyé par Sniper37

tu peux aussi faire le expand on java.

Je ne suis pas sûr de comprendre cette remarque. Tu proposes de passer par le getViewRoot() du context JSF, d'y trouver le composant panelMenuGroup et d'y appliquer la fonction expand() ?

Citation:

Envoyé par Sniper37

n'oublie pas de changer la valeur de expandMode ou mode, par defaut c'est none.

C'est fait au travers de mon panelMenu parent du panelMenuGroup, où j'ai mis un mode="ajax". J'ai lu quelque part que les tags enfants du panelMenu hériteraient de ce paramétrage (ce qui a l'air d'être le cas, la sousmission se fait bien en Ajax et correctement).

Citation:

Envoyé par Sniper37

Si tu le fais en java, il faut prendre ajax ou client pour le javascript.

Je n'ai strictement rien compris à cette phrase. Que veux dire "prendre ajax ou client pour le javascript" ?
26/04/2011, 15h56
Lordsephiroth

Le forum de JBoss m'ayant permis de trouver la réponse à ma question, je la poste ici à tout hasard au cas où quelqu'un passerait et serait intéressé.

Voici le lien qui résume tout :

http://mkblog.exadel.com/2009/12/ric...ent-functions/

A noter que

Code:

#{rich:component('identifiant_de_mon_composant')}.expand()

n'a pas fonctionné comme je l'aurais pensé. Par contre, j'ai écris le code javascript en entier, c'est à dire

Code:

document.getElementById('identifiant_de_mon_composant').component.expand()

et là, ça fonctionne parfaitement. Ce code se situe dans le "oncomplete" du lien qui effectue le changement de page, je l'avais visiblement placé dans un endroit cohérent.

J'avais pourtant testé de mettre du code javascript natif, le seul point qui me manquait était ce champ "component" qui est accessible sur les composants RichFaces... la réponse était si simple... comme je le supposais...

Merci pour vos réponses, et à bientôt ;)