Panel Stretch Layout is not a valid child of PanelTabbed Component

Question

With reference to the use case shown here(' [Table with Header Left,Footer Right|http://www.oracle.com/technetwork/testcontent/thlfrpattern-083015.html] ") :
I tried to embed the table inside the tabbed pane.
Here is the code for the same:
<f:view>
<af:document id="d1">
<af:form id="f1">
<af:panelSplitter id="ps1" orientation="vertical" splitterPosition="47">
<f:facet name="first"/>
<f:facet name="second">
<af:panelSplitter id="ps2" splitterPosition="144">
<f:facet name="second">
<af:panelTabbed id="pt1">
<!---- point of error here i get the error message ---------->
<af:showDetailItem text="Embedded in a Tab" id="sdi1"/>
<af:panelStretchLayout id="psl1" bottomHeight="31em" topHeight="62em" >
<f:facet name="bottom">
<af:panelStretchLayout id="psl2" endWidth="103em">
<f:facet name="end">
<af:panelGroupLayout id="pgl2" valign="middle" halign="end" layout="horizontal" >
<af:commandButton text="Save" id="cb1" accessKey="S"/>
<af:commandButton text="Cancel" id="cb2" accessKey="C"/>
<af:spacer width="6" height="31" id="s2"/>
</af:panelGroupLayout>
</f:facet>
</af:panelStretchLayout>
</f:facet>
<f:facet name="center">
<!-- here the table will be displayed i have omitted the code from here------->
</f:facet>
<f:facet name="top">
<af:panelGroupLayout id="pgl1" layout="horizontal">
<af:spacer width="6em" height="31em" id="s1"/>
<af:image source="/coffee.bmp" shortDesc="demo icon" id="i1"/>
<af:outputText value="List of Cool Employees" id="ot1"
inlineStyle="color:Black; font-weight:bold; font-size:large;"/>
</af:panelGroupLayout>
</f:facet>
</af:panelStretchLayout>
</af:panelTabbed>
</f:facet>
</af:panelSplitter>
</f:facet>
</af:panelSplitter>
</af:form>
</af:document>
</f:view>
Inside the PanelTabbed Component I cannot insert the PanelStretchLayout component.
The error it is displaying is that the Panel Stretch Layout is not a valid child of the PanelTabbed Component.
Please let me know how can I embed the 'Table with Header Left,Footer Right' in case of a PanelTabbed Component as shown in the use case in the documentation.

Answer 1

Hi,
Yes, children of af:panelTabbed must be af:showDetailItem - these represent each tab. You then add further components (e.g. your panelStretch, table etc.) as children to the af:showDetailItem.
Looking at your code, you have a showDetailItem but the panelStretch is not inside it. In fact nothing is inside the showDetailItem as the XML tag is self-closed (i.e. has a / at the end). You need to remove the / and add a closing tag (</af:showDetailItem) after your panelStretch.
Change your code to something like this:
<af:panelTabbed id="pt1">
  <af:showDetailItem text="Embedded in a Tab" id="sdi1">
    <af:panelStretchLayout id="psl1" bottomHeight="31em" topHeight="62em" >
    </af:panelStretchLayout>
  </af:showDetailItem>
</af:panelTabbed>Alternatively in the JDeveloper Structure view you could drag the panelStretch onto the showDetailItem so that it shows it as a child.
Kevin.