jsf - 如何在支持 bean 中使用 primefaces 通过 accordionPanel 获取事件索引

Question

当我尝试获取任何 Accordion 面板的事件索引时，它总是返回 -1 值。我使用的是 primefaces 7.0 版本。

当我尝试启用表单标签时，它无法逐步处理流程。

我也尝试过 stackoverflow 的其他解决方案，但对我来说没什么用。任何人都知道这一点。

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

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

您可以做的是检查 clientId，同时遍历子项以找到选项卡索引。不过，并非每个子项本身都是 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>