How to Use the panelFormLayout Component

8-32 Web User Interface Developers Guide for Oracle Application Development Framework Example 8–4 shows the panelFormLayout component as it is used on the properties.jspx page of the File Explorer application, shown in Figure 8–14 . Example 8–4 panelFormLayout Component af:panelFormLayout rows=5 labelAlignment=top af:inputText value={fileItemProperties.type} label={explorerBundle[fileproperties.type]} readOnly=true af:inputText value={fileItemProperties.location} label={explorerBundle[fileproperties.currentpath]} readOnly=true af:inputText value={fileItemProperties.size} label={explorerBundle[fileproperties.size]} readOnly=true af:inputText value={fileItemProperties.contains} label={explorerBundle[fileproperties.contains]} readOnly=true af:panelFormLayout 6. To group semantically related input components in a form layout, use the group component to wrap those components that belong in a group. Components placed within a group will cause the panelFormLayout component to draw a separator line above and below the group. For more information about using the group component, see Section 8.6.2, What You May Need to Know About Using the group Component with the panelFormLayout Component. 7. To add content below the child input components, insert the desired component into the footer facet. Facets accept only one child component. If you have to insert more than one component in the footer facet, use the panelGroupLayout component or the group component to wrap the footer child components. Example 8–5 shows sample code that uses the panelGroupLayout component to arrange footer child components in a panelFormLayout component. Example 8–5 Footer Child Components in panelFormLayout Arranged Horizontally af:panelFormLayout f:facet name=footer af:panelGroupLayout layout=horizontal af:commandButton text=Save Tip: The panelFormLayout component also allows you to use the iterator, switcher, and group components as direct child components, providing these components wrap child components that would typically be direct child components of the panelFormLayout component. Tip: If you use non-input components which do not have label attributes or if you want to group several input components with one single label inside a panelFormLayout component, first wrap the components inside a panelLabelAndMessage component. For information about using the panelLabelAndMessage component, see Section 17.4, Grouping Components with a Single Label and Message. Organizing Content on Web Pages 8-33 af:commandButton text=Cancel f:facet name=separator af:spacer width=3 height=3 f:facet af:panelGroupLayout f:facet . . . af:panelFormLayout

8.6.2 What You May Need to Know About Using the group Component with the panelFormLayout Component

While the group component itself does not render anything, when it used as a child in the panelFormLayout component, visible separators are displayed around the child components of each group component. For example, you might want to group some of the input fields in a form layout created by the panelFormLayout component. Example 8–15 shows sample code that groups two sets of child components inside a panelFormLayout component. Example 8–6 Grouping Child Components in panelFormLayout af:panelFormLayout binding={editor.component} rows=10 labelWidth=33 fieldWidth=67 testId=panelFormLayout1 af:inputText columns=5 label=label 1 af:group af:inputText columns=5 label=grouped 1 shortDesc=This one is secret secret=true af:inputText columns=5 label=grouped 2 af:inputText columns=5 label=grouped 3 af:group af:inputDate id=df1 label=label 2 af:panelLabelAndMessage label=label 3 labelStyle=vertical-align: middle; af:commandButton text=Submit af:panelLabelAndMessage af:selectOneListbox id=sol label=label 4 shortDesc=Select One Option af:selectItem label=option 1 af:selectItem label=option 2 af:selectItem label=option 3 af:selectItem label=option 4 af:selectOneListbox af:selectManyListbox id=rs label=label 5 shortDesc=Select Option af:selectItem label=option 1 af:selectItem label=option 2 af:selectItem label=option 3 af:selectItem label=option 4oiiiik, af:selectManyListbox af:panelFormLayout Following along with the sample code in Example 8–15 , at runtime the panelFormLayout component renders dotted, separator lines before and after the first group of child components, as shown in Figure 8–16 . 8-34 Web User Interface Developers Guide for Oracle Application Development Framework Figure 8–16 Grouped Components in panelFormLayout As described in Section 8.6, Arranging Content in Forms, the panelFormLayout component uses certain component attributes to determine how to display its child components grouped and ungrouped in columns and rows. When using the group component to group related components in a panelFormLayout component that will display its child components in more than one column, the child components of any group component will always be displayed in the same column, that is, child components inside a group component will never be split across a column. While the group component does not provide any layout for its child components, the underlying HTML elements can provide the desired layout for the child components inside the group component. For example, if you want child button components in a group component to flow horizontally in a form layout, use the panelGroupLayout component to wrap the buttons, and set the layout attribute on panelGroupLayout component to horizontal. Then insert the panelGroupLayout component into group component, as shown in Example 8–7 . Example 8–7 panelGroupLayout Inside a Group Component af:group af:panelGroupLayout layout=horizontal af:commandButton text=Save .. af:commandButton text=Cancel .. f:facet name=separator af:spacer width=3 f:facet af:panelGroupLayout af:group When you use the group component to group child components in the footer facet of the panelFormLayout component, you must place all the group components and other ungrouped child components in one root group component, as shown in Example 8–8 . Organizing Content on Web Pages 8-35 Example 8–8 footer Facet in panelFormLayout with One Root group Component af:panelFormLayout ... f:facet name=footer -- One root group component needed -- af:group af:outputText value=Footer item 1 -- One group -- af:group af:outputText value=Group 1 item 1 af:outputText value=Group 1 item 2 af:group af:panelGroupLayout layout=horizontal af:commandButton text=Save af:commandButton text=Cancel f:facet name=separator af:spacer width=3 f:facet af:panelGroupLayout af:group f:facet . . . af:panelFormLayout Like grouped child components in a panelFormLayout component, at runtime the panelFormLayout component renders dotted, separator lines around the child components of each group component in the footer facet, as shown in Figure 8–17 . Figure 8–17 Footer in panelGroupLayout with Grouped Components 8-36 Web User Interface Developers Guide for Oracle Application Development Framework Whether you are grouping components in the footer facet or in the main body of the panelFormLayout component, if the first or last child inside the panelFormLayout component or inside the footer facet is a group component, no separator lines will be displayed around the child components in that group. For example, both sets of code examples in Example 8–9 would produce the same visual effect at runtime. Example 8–9 Code Producing Same Visual Effect -- Example 1: Group of buttons is last child in root group -- f:facet name=footer af:group af:outputText value=Footer text item 1 af:outputText value=Footer text item 2 af:group af:inputText label=Nested group item 1 af:inputText label=Nested group item 2 af:group af:group af:panelGroupLayout layout=horizontal af:commandButton text=Cancel af:commandButton text=Save af:panelGroupLayout af:group af:group f:facet -- Example 2: panelGroupLayout of buttons is last child in root group-- f:facet name=footer af:group af:outputText value=Footer text item 1 af:outputText value=Footer text item 2 af:group af:inputText label=Nested group item 1 af:inputText label=Nested group item 2 Note: The footer facet in the panelFormLayout component supports only two levels of grouped components, that is, you cannot have three or more levels of nested group components in the footer facet. For example, the following code is not valid: f:facet name=footer -- Only one root group -- af:group af:outputText value=Footer item 1 -- Any number of groups at this level -- af:group af:outputText value=Group 1 item 1 af:outputText value=Group 1 item 2 -- But not another nested group. This is illegal. -- af:group af:outputText value=Nested Group 1 item 1 af:outputText value=Nested Group 1 item 2 af:group af:group af:outputText value=Another footer item af:group f:facet