accordionPanel tabChangeListener and activeIndex

UI Components for JSF
Post Reply
esl
Posts: 8
Joined: 02 Aug 2011, 13:32

05 Aug 2011, 10:37

Hello,

I'm trying to implement some sort of menu with an accordionPanel, something like this:

xhtml:

Code: Select all

<h:form>
            <p:accordionPanel id="menu" style="font-size: 12px" event="mouseover" autoHeight="false" tabChangeListener="#{menuStateBean.save}" activeIndex="#{menuStateBean.openTabIndex}">
                <p:tab id="tab_0" title="#{men['mistareas']}">
                    <p:menu style="border: none">
                        <p:menuitem value="#{men['tarea1']}" url="#"/>
                        <p:menuitem value="#{men['tarea2']}" url="#"/>
                        <p:menuitem value="#{men['tarea3']}" url="#"/>
                    </p:menu>
                </p:tab>
                <p:tab id="tab_1" title="#{men['procesos']}">
                    <p:menu style="border: none">
                        <p:menuitem value="#{men['procesos1']}" url="#"/>
                        <p:menuitem value="#{men['procesos2']}" url="#"/>
                    </p:menu>
                </p:tab>
            </p:accordionPanel>
</h:form>            
bean:

Code: Select all

 @SessionScoped
 @Named
public class MenuStateBean implements Serializable {

    private int openTabIndex;

    public MenuStateBean() {
    }

    //openTabIndex getter and setters
    ...    
    
    public void save(TabChangeEvent event) {
        System.out.println(event.getTab().getId()+":"+openTabIndex);        
    }
}


The problem is that i can´t keep the active index into the backing bean instantly everytime i change the active tab, because menuStateBean.openTabIndex doesn't get updated. Is this the normal behaviour or i'm doing something wrong?

I realized that the ajax request doesn't send the active index param, only the name of the active tab is sent:
javax.faces.ViewState=-7492513648605843959:-4761100924695374686&javax.faces.partial.ajax=true&javax.faces.source=menu&javax.faces.partial.execute=menu&menu=menu&menu_tabChange=true&menu_newTab=tab_3

I think it would be easy if we could ajaxify the accordionPanel putting the element <p:ajax event="" process="" update=""/> into it.

thanks,

PD: i'm using primefaces 2.2.1 and mojarra 2.1
Using: Primefaces 3.2, Netbeans 7.0.1, Mojarra 2.1, Glassfish 3.1

esl
Posts: 8
Joined: 02 Aug 2011, 13:32

11 Aug 2011, 10:35

Workarounds to this problem, if anyone is interested:
1. Taken from
http://code.google.com/p/primefaces/is ... 20Summary

Code: Select all

    
public void save(TabChangeEvent event) {
        
        String activeTab = event.getTab().getId();
        int activeTabIndex = 0;

        for (UIComponent comp : event.getTab().getParent().getChildren()) {
          if (comp.getId().equals(activeTab)) {
            break;
          }
          activeTabIndex++;
        }
        openTabIndex=activeTabIndex;
    }
2. Using p:remoteCommand in order to submit the form for getting the activeIndex updated in the backing bean

Code: Select all

<p:remoteCommand process="@this,menu" name="updateIndex" actionListener="#{menuStateBean.doNothing}"/> 
<p:accordionPanel id="menu" style="font-size: 12px" event="mouseover" 
                              autoHeight="false" 
                              [color=#FF4000]onTabChange="updateIndex();"[/color]
                              activeIndex="#{menuStateBean.openTabIndex}">
....
With this approach you will get the previous activeIndex, not the current one, if you wanna get the current one just add this before updateIndex(); on onTabChange

Code: Select all

document.getElementById('[b]topForm:menu_active[/b]').value=ui.options.active;
you'll have to browse html code to know the name of the form parameter that sends the active index, in my case topForm:menu_active
Using: Primefaces 3.2, Netbeans 7.0.1, Mojarra 2.1, Glassfish 3.1

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 63 guests