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

【问题标题】：how to link panel accordion item to panel tabbed item如何将面板手风琴项链接到面板选项卡项
【发布时间】：2016-01-06 00:36:37
【问题描述】：

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

代码：

  <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>

【问题讨论】：

我一周前用代码解决方案回答了这个问题，但如果它有帮助，则看不到任何回应或投票，这是应该的。如果您不放弃投票，我将停止回答您的问题。

标签： jsp jsf accordion oracle-adf

【解决方案1】：

TabbedPanel 和 Accordion 都是 ShowDetailItem (SDI) 的容器。 ShowDetailItem 有一个 DisclosureListener 指示它何时“公开” - 选择查看。在支持 bean 中捕获此侦听器。然后通过在 panelaccordion 中将其公开属性设置为 true，让支持 bean 使正确的 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;
}

}

【讨论】：