Как мне установить активную вкладку в Primefaces tabView? - PullRequest
Новая
       42

Как мне установить активную вкладку в Primefaces tabView?

8 голосов
/ 29 июня 2011

У меня есть меню, в котором два элемента в подменю, оба вызывают одну и ту же страницу: 

<p:menubar autoSubmenuDisplay="true">  
   <p:submenu label="Perfil">  
       <p:menuitem value="Editar" url="perfil.xhtml" />  
       <p:menuitem value="Ver" url="perfil.xhtml" />  
   </p:submenu>  
</p:menubar>

На этой странице у меня есть вкладка с двумя вкладками: 

<p:tabView dynamic="true">  
    <p:tab id="ver" title="Ver perfil">  
        <ui:include src="verPerfil.xhtml" />    
    </p:tab>  
    <p:tab id="editar" title="Editar perfil">   
    <ui:include src="editarPerfil.xhtml" />  
    </p:tab>  
</p:tabView>

Как настроить активную вкладку, чтобы каждый пункт меню активировал соответствующую вкладку?

1 Ответ

25 голосов
/ 29 июня 2011

Если вы хотите сделать это. Вы не можете использовать url в p:menuitem, потому что мы должны вызвать метод для изменения tabindex , прежде чем перейти на страницу prefil.xhtml. Если вы используете url, метод будет вызван после того, как мы перейдем на страницу prefil.xhtml.

Во-первых, вы можете использовать поле действия p:menuitem, метод возвращает адрес, по которому вы хотите пропустить: 

<p:menubar autoSubmenuDisplay="true">  
    <p:submenu label="Perfil">  
        <p:menuitem value="Editar" action="#{some.editar}" ajax="false"/>  
        <p:menuitem value="Ver" action="#{some.ver}" ajax="false" />  
    </p:submenu>  
</p:menubar>

Эти два метода делают что-то, чтобы изменить tabindex следующим образом: 

public String editar() {
    tabindex = 0;
    return "verPerfil";
}

public String ver() {
    tabindex = 1;
    return "verPerfil";
}

Тогда p:tabView имеет атрибут с именем activeIndex. Это индекс активной вкладки, значение по умолчанию - 0. Таким образом, вы можете сделать следующее: 

<p:tabView dynamic="true" activeIndex="#{some.tabindex}" >
    <p:tab id="ver" title="Ver perfil">
        <ui:include src="verPerfil.xhtml" />
    </p:tab>
    <p:tab id="editar" title="Editar perfil">   
        <ui:include src="editarPerfil.xhtml" />
    </p:tab>
</p:tabView>

Затем каждый пункт меню активирует соответствующую вкладку.

...