Tabview Primefaces: imposta l'indice attivo su modifica scheda

Question

Ho una vista a schede che contiene due schede.

Quando passo dalla scheda 1 alla scheda 2, chiamo un codice che esegue una convalida e aggiorna alcuni valori. A seconda del risultato di questa convalida, desidero rimanere nella scheda 1 o andare alla scheda 2 e aggiornare il contenuto delle schede.

mio TabView:

<h:form id="form"> 
    <p:tabView id="tabview" activeIndex="#{ctrl.idx}" dynamic="true" cache="false"> 
     <p:ajax event="tabChange" listener="#{ctrl.doStuff}" update=":form:tabview"/> 
     <p:tab title="Tab 1" id="t1"> 
      <h:panelGrid columns="1" cellpadding="10"> 
       <h:outputText value="#{ctrl.s1}"/> 
      </h:panelGrid> 
     </p:tab> 
     <p:tab title="Tab 2" id="t2"> 
      <h:panelGrid columns="1" cellpadding="10"> 
       <h:outputText value="#{ctrl.s2}"/> 
      </h:panelGrid> 
     </p:tab> 
    </p:tabView> 
</h:form> 

mio codice di prova che cambia simly i valori:

public void doStuff() { 
    s1 = String.valueOf(Math.random()); 
    s2 = String.valueOf(Math.random()); 
} 

ho pensato che cambiare l'indice di scheda attiva nel mio metodo sarebbe sufficiente, come quella:

public void doStuff() { 
    // ... 
    idx = 0; 
} 

Su evento tabChange, il metodo viene chiamato ma i componenti TabView va al ta cliccato b, ignorando il nuovo valore idx.

Ho pensato di aggiungere un attributo di aggiornamento a p:ajax per eseguire il rendering dell'intera tabview ma solo il rendering delle schede e/o del contenuto delle schede.

E più strana di tutte, se cambio update=":form:tabview" a update=":form" o update="@form", ricevo solo il contenuto della scheda nella risposta Ajax -> la componente scompare dalla pagina!

mio fagiolo è viewscoped, sto usando primefaces 3.5, JSF 2.1 e Tomcat 7.

Qualche idea? Grazie.

Answer 1

cercare di mantenere la visualizzazione a scheda in panelgrid come questo senso e aggiornare questa h:panelgrid

h:panelGrid id="mainPanel"> 

<p:tabView id="tabview" activeIndex="#{ctrl.idx}" dynamic="true" cache="false"> 
     <p:ajax event="tabChange" listener="#{ctrl.doStuff}" update=":form:mainPanel"/> 
     <p:tab title="Tab 1" id="t1"> 
      <h:panelGrid columns="1" cellpadding="10"> 
       <h:outputText value="#{ctrl.s1}"/> 
      </h:panelGrid> 
     </p:tab> 
     <p:tab title="Tab 2" id="t2"> 
      <h:panelGrid columns="1" cellpadding="10"> 
       <h:outputText value="#{ctrl.s2}"/> 
      </h:panelGrid> 
     </p:tab> 
    </p:tabView> 


</h:panelGrid> 

Answer 2

tenta di associare il tuo TabView al lato server istanza del componente nel backing bean.

1.Add TabView istanza del componente per il vostro sostegno di fagioli

org.primefaces.component.tabview.TabView tabview=null; 

e getter e setter coresponding esempio lato

public TabView getTabview() { 
    return tabview; 
} 

public void setTabview(TabView tabview) { 
    this.tabview = tabview; 
} 

2.Bind server al TabView

<p:tabView id="tabview" binding=#{yourBean.tabview} dynamic="true" cache="false"> 
... 
</p:tabView> 

3 Modifica il tuo metodo doStuff()

public void doStuff() { 
    // ... 
    //idx = 0; 
    tabview.setActiveIndex(0); 
} 

E si spera farà il trucco.

Answer 3

ho facile risolvere questo problema con:

public void onSPTabChange(TabChangeEvent event) 
    { 
    TabView tabView = (TabView) event.getComponent(); 
    currentData.setSP_Index(tabView.getChildren().indexOf(event.getTab())+1); 
    } 

in CurrentData ho SP_Index di proprietà con il numero di scheda (primo, secondo ....)

<p:tabView id="tabView" styleClass="tabView"> 
<p:ajax event="tabChange" listener="#{dataAccess.onSPTabChange}" /> 
.... 

e aggiungere lo script jquery

<script> 
    $("#tabView li:nth-child(#{currentData.SP_Index})").click(); 
</script>