如何将面板手风琴项链接到面板选项卡项

Question

我创建了一个标签式面板和手风琴面板。我想将每个标签链接到每个手风琴，以便当选择（或打开）标签时，将选择相应的手风琴，反之亦然。我不太确定我是否使用正确的组件来获得此效果。请参阅下面的代码和屏幕截图：

代码：

  <af:form id="f1">
            <af:panelSplitter orientation="vertical" splitterPosition="121" id="ps3">
                <f:facet name="first">
                </f:facet>
                <f:facet name="second">
                    <af:decorativeBox theme="dark" id="db3">
                        <f:facet name="center">
                            <af:decorativeBox theme="medium" id="db1">
                                <f:facet name="center">
                                    <af:panelSplitter orientation="horizontal" splitterPosition="201" id="ps1">
                                        <f:facet name="first">
                                         <af:panelAccordion discloseMany="true" id="pa1">
                                                        <af:showDetailItem id="pane1" text="A"/>
                                                        <af:showDetailItem id="pane2" text="B"/>
                                                        <af:showDetailItem id="pane3" text="C"/>
                                                    </af:panelAccordion>
                                        </f:facet>


                                        <f:facet name="second">
                                            <af:panelSplitter orientation="horizontal" splitterPosition="225"
                                                              positionedFromEnd="true" id="ps2">
                                                <f:facet name="first">
                                                    <af:decorativeBox theme="default" id="db2">
                                                        <f:facet name="center">
                                                            <af:panelSplitter id="ps4" orientation="vertical"
                                                                              splitterPosition="600">
                                                                <f:facet name="first">
                                                                    <af:panelTabbed position="above" id="pt2">
                                                                        <af:showDetailItem id="tab2"
                                                                                           text="A"
                                                                                           disclosed="true">
                                                                            <af:panelDashboard id="pd2"
                                                                                               inlineStyle="width:600px;"
                                                                                               dimensionsFrom="parent"/>
                                                                        </af:showDetailItem>
                                                                        <af:showDetailItem text="B"
                                                                                           id="sdi3"/>
                                                                        <af:showDetailItem text="C"
                                                                                           id="sdi4"/>
                                                                    </af:panelTabbed>
                                                                </f:facet>
                                                                <f:facet name="second">
                                                                    <af:panelTabbed position="above" id="pt1"/>
                                                                </f:facet>
                                                            </af:panelSplitter>
                                                        </f:facet>
                                                    </af:decorativeBox>
                                                </f:facet>
                                                <f:facet name="second">

                                                </f:facet>
                                            </af:panelSplitter>
                                        </f:facet>
                                    </af:panelSplitter>
                                </f:facet>
                            </af:decorativeBox>
                        </f:facet>
                    </af:decorativeBox>
                </f:facet>
            </af:panelSplitter>
        </af:form>

Answer 1

TabbedPanel和Accordion都是ShowDetailItem（SDI）的容器。 ShowDetailItem有一个DisclosureListener，用于指示何时“公开” - 选择查看。在辅助bean中捕获此侦听器。然后让backing bean通过在panelaccordion中将其披露属性设置为true来使正确的SDI / AccordionPanel成为活动面板。您必须将所需的SDI“绑定”到Bean中，以便以编程方式将其Disclosure属性设置为true。 SHOWDetailItem的文档here，panelaccordion here。您还需要制作面板选项卡 - 事件的触发器 - 手风琴的部分触发源，以便刷新。

以下是bean代码：

public class PanelTesterBean {
private RichShowDetailItem paSDI1;

public PanelTesterBean() {
}

public void tabSelected(DisclosureEvent disclosureEvent) {
   getPaSDI1().setDisclosed(true);
}

public void setPaSDI1(RichShowDetailItem paSDI1) {
    this.paSDI1 = paSDI1;
}

public RichShowDetailItem getPaSDI1() {
    return paSDI1;
}

}