如何在支持 bean 中使用 primefaces 通过 accordionPanel 获取活动索引

Question

当我尝试获取任何手风琴面板的活动索引时，它总是 return -1 值。我使用的是 primefaces 7.0 版本。

当我尝试启用表单标签时，它无法使用流程步骤。

我也尝试过 Whosebug 的其他解决方案，但对我没有任何帮助。任何人都知道这个。

1.example.xhtml

<!-- <h:form> -->
                                      
    <ui:fragment
        rendered="#{not empty excursionResultsBean.excursionAvailabilities and not empty excursionResultsBean.excursionAvailabilities[0].excursionCategoryBeans}">
        <p:accordionPanel multiple="false"
            activeIndex="#{panelDisplayBean.index}" role="tablist"  id="indexId" cache="false" >

            <f:ajax event="tabChange"
                listener="#{excursionResultsBean.onTabChange}" update="@form"/>
            
            <ui:insert name="creditCardPanel1">
                <ui:include src="step1.xhtml" />
            </ui:insert>
            <ui:insert name="creditCardPanel2">
                <ui:include src="step2.xhtml" />
            </ui:insert>
            <ui:insert name="creditCardPanel3">
                <ui:include src="step3.xhtml" />
            </ui:insert>
            <ui:insert name="creditCardPanel4">
                <ui:include src="step4.xhtml" />
            </ui:insert>
            
            
        </p:accordionPanel>
    </ui:fragment>
    
    <ui:fragment
        rendered="#{empty excursionResultsBean.excursionAvailabilities or empty excursionResultsBean.excursionAvailabilities[0].excursionCategoryBeans}">
        <div>
            <p>Sorry! We're booked to capacity on your flight</p>
            Please share your travel details with us at <b><a
                href="mailto:guest.ss@ss.com">guest.ss@ss.com</a></b>,
            so that we can work on this specially for you! Or call
            
        </div>

    </ui:fragment>
<!-- </h:form> -->

bean 中的方法

public void onTabChange(TabChangeEvent event) {
        UITabPanel tabView = (UITabPanel) event.getComponent();
        int activeTab = tabView.getChildren().indexOf(event.getTab());
        System.out.println("Active index "+activeTab);
}

Answer 1

A Tab 或任何 UIComponent 没有实现 equals(Object obj) 方法。所以 tabView.getChildren().indexOf(event.getTab()) 永远不会给你标签索引（因为它使用 equals 方法）。

你可以做的是在遍历 children 的同时检查 clientId 以找到选项卡索引。虽然不是，但并非每个 child 本身都是 Tab，所以要对此进行补偿。

public void onTabChange(TabChangeEvent event) {
    UIComponent component = event.getComponent();
    String clientId = event.getTab().getClientId();
    int index = -1;
    for (int i = 0; i < component.getChildCount(); i++) {
        UIComponent child = component.getChildren().get(i);
        // Not each child is a tab per se
        if (child instanceof Tab) {
            index++;
            if (clientId.equals(child.getClientId())) {
                // Found it, break out of the for loop
                break;
            }
        }
    }
    System.out.println("index " + index);
}

我用以下代码测试了上面的代码：

<p:accordionPanel>
    <!-- comment -->
    <p:tab title="1"></p:tab>
    <!-- comment -->
    <p:tab title="2"></p:tab>
    <p:tab title="3"></p:tab>
    <p:ajax event="tabChange" listener="#{testView.onTabChange}"/>
</p:accordionPanel>

Answer 2

似乎正在处理 Primefaces 10.0 Showcase：https://www.primefaces.org/showcase/ui/panel/accordionPanel.xhtml

查看更改事件示例？

我就是这样做的：

/**
    * Listens for tab change events and updates the active tab value.
    *
    * @param event TabChangeEvent
    */
   public void onTabChange(final TabChangeEvent event) {
      // get the tab view
      final TabView tabView = (TabView) event.getTab().getParent();

      final String tabName = event.getTab().getClientId();

      int i = 0;
      for (final UIComponent item : tabView.getChildren()) {
         if (item.getClientId().equalsIgnoreCase(tabName)) {
            form.setActiveTabIndex(i);
            return;
         } else {
            i++;
         }
      }
      LOG.debug("Selected tab {} could not be located!", event.getTab().getClientId());
   }

如何在支持 bean 中使用 primefaces 通过 accordionPanel 获取活动索引

how to get active index with accordionPanel using primefaces in backing bean

jsf

primefaces