使用JSF 2.0從Backing bean更改選項卡

Question

我想要從支持bean更改選項卡，我該怎麼做？

<h:form id=form> 

    <p:growl id="growl" showDetail="true" /> 

    <p:tabView id="tabView" dynamic="true" widgetVar="detailsTab"> 

     <p:ajax event="tabChange" listener="#{bean.onTabChange}" update=":form:growl"/> 

     <p:tab title="Tab1" id="emp"> 
      <h:panelGrid columns="2" cellpadding="10"> 


       </h:panelGrid> 
     </p:tab> 

     <p:tab title="Tab 2 " id="schedule1"> 
      <h:panelGrid columns="2" cellpadding="10"> 


      </h:panelGrid> 



     </p:tab> 

     <p:tab title="Tab 3" id="schedule2"> 
     <p:schedule value="#{bean.eventModel}" slotMinutes="15" 
          resizable="false" widgetVar="schdule" initialDate="#{bean.dates}" draggable="true" styleClass="#{bean.selDates}" 
          > 
          <p:ajax event="dateSelect" listener="#{bean.onDateSelect}" 
           update="dialogBox" oncomplete="patScheduleDialog.show()"/> 
           <p:ajax event="eventSelect" listener="#{bean.onEventSelect}" 
           update="dialogBox :form:growl" oncomplete="#{bean.pevent}"/> 
           <p:ajax event="eventMove" listener="#{bean.onEventMove}" 
           update="dialogBox, :form:growl" /> 
         </p:schedule> 

     <p:dialog id="dialogBox" header="Patient's Appointment Details" widgetVar="patScheduleDialog" resizable="true" 
           showEffect="explode" hideEffect="explode"> 

       <h:panelGrid id="eventDetails" columns="2"> 
      <h:outputLabel for="title" value="Title:" /> 
      <p:inputText id="title" value="#{bean.event.title}" required="true"/> 

      <h:outputLabel for="from" value="From:" /> 
      <p:inputMask id="from" value="#{bean.event.startDate}" mask="99/99/9999"> 
       <f:convertDateTime pattern="dd/MM/yyyy" /> 
      </p:inputMask> 

      <h:outputLabel for="to" value="To:" /> 
      <p:inputMask id="to" value="#{bean.event.endDate}" mask="99/99/9999"> 
       <f:convertDateTime pattern="dd/MM/yyyy" /> 
      </p:inputMask> 

      <h:outputLabel for="allDay" value="All Day:" /> 
      <h:selectBooleanCheckbox id="allDay" value="#{bean.event.allDay}" /> 

      <p:commandButton type="reset" value="Reset" /> 
      <p:commandButton value="Save" actionListener="#{bean.addEvent}" oncomplete="schdule.update();dialogBox.hide();"/> 
     </h:panelGrid> 


    </p:dialog> 


     </p:tab> 

    </p:tabView> 


    public void onEventSelect(ScheduleEntrySelectEvent selectEvent){ 

    // what should I need to do here to set "Tab 2" if click on any event. 


    } 

Answer 1

首先，你需要設置你的<p:tabView>的activeIndex屬性，像這樣：<p:tabView activeIndex="#{bean.selectedTab}">。這是一個Integer。其次，在你的bean方法中，無論何時你想改變活動標籤，將selectedTab設置爲你想要選擇的標籤。第三，記得更新<p:tabView>。

---

你也可以使用JavaScript來做到這一點。只需設置您的<p:tabView>的widgetVar屬性，如下所示：<p:tabView widgetVar="myTabView">。

然後使用JavaScript函數myTabView.select(tabIndex)，其中tabIndex是您要選擇的選項卡的索引。

您可以在任何javascript事件中執行此操作，例如：<p:commandButton oncomplete="myTabView.select(1)" />將在commandButton完成操作後選擇第二個選項卡。

---

請確保您閱讀PrimeFaces docs。