JSF - Créer un menu dynamique en utilisant AJAX & selectOneListbox

Question

Ce que je voudrais faire est simple à expliquer:

bean

@ManagedBean 
@ViewScoped 
public class Articles { 
    private String selectedMenu; 

    @PostConstruct 
    public void init() { 
     if(selectedMenu==null || selectedMenu.trim().isEmpty()) { 
      this.selectedMenu="0"; 
     } 
    } 

    public String getSelectedMenu() { return selectedMenu; } 
    public void setSelectedMenu(String selectedMenu) { this.selectedMenu = selectedMenu; } 
} 

page

<h:selectOneListbox onchange="..?? ajax call that render on loadMenu and pass the value of the focused listbox to Articles Bean" id="category" size="0" > 
    <f:selectItem itemLabel="first" itemValue="0" /> 
    <f:selectItem itemLabel="second" itemValue="1" /> 
    <f:selectItem itemLabel="third" itemValue="2" /> 
</h:selectOneListbox> 

<h:panelGroup layout="block" id="loadMenu"> 
    <h:panelGroup rendered="#{articles.selectedMenu=='0'}"> 
     MENU 0 
    </h:panelGroup> 

    <h:panelGroup rendered="#{articles.selectedMenu=='1'}"> 
     MENU 1 
    </h:panelGroup> 

    <h:panelGroup rendered="#{articles.selectedMenu=='2'}"> 
     MENU 2 
    </h:panelGroup> 
</h:panelGroup> 

Quand je change la valeur de la listbox, le menu devrait changer dinamiquement (en appelant une fonction sur le serveur). Je pense que le code ci-dessus exprime ce que je cherche.

Je dois savoir comment l'appeler en utilisant l'option onchange. C'est possible?

Vive

MISE À JOUR

<h:panelGroup layout="block"> 
    <h:selectOneListbox styleClass="article_combo" size="0" id="selectedMenu" > 
     <f:selectItem itemLabel="first" itemValue="0" /> 
     <f:selectItem itemLabel="second" itemValue="1" /> 
     <f:selectItem itemLabel="third" itemValue="2" /> 

     <f:ajax event="change" execute="@this" render="loadMenu" /> 
    </h:selectOneListbox> 
</h:panelGroup> 

<h:panelGroup layout="block" id="loadMenu"> 
    <h:panelGroup rendered="#{articles.selectedMenu=='0'}"> 
     MENU 0 
    </h:panelGroup> 

    <h:panelGroup rendered="#{articles.selectedMenu=='1'}"> 
     MENU 1 
    </h:panelGroup> 

    <h:panelGroup rendered="#{articles.selectedMenu=='2'}"> 
     MENU 2 
    </h:panelGroup> 
</h:panelGroup>  

Answer 1

Vous pouvez utiliser le support ajax construit pour JSF 2 pour y parvenir. Pour ce faire, insérez une balise f: ajax dans votre balise h: selectOneListbox. F: tag ajax devrait ressembler à:

<f:ajax render="loadMenu" execute="@this" /> 

Cela devrait traiter la valeur modifiée dans votre zone de liste, et réengendrer la panelGroup.

pour plus de détails, voir: http://mkblog.exadel.com/2010/04/learning-jsf-2-ajax-in-jsf-using-fajax-tag/