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

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 Organizing Content on Web Pages 8-37 af:group af:panelGroupLayout layout=horizontal af:commandButton text=Cancel af:commandButton text=Save af:panelGroupLayout af:group f:facet

8.7 Arranging Contents in a Dashboard

The panelDashboard component allows you to arrange its child components in rows and columns, similar to the panelForm component. However, instead of text components, the panelDashboard children are panelBox components that contain content, as shown in Figure 8–18 . Figure 8–18 panelDashboard with panelBox Child Components When you add a panelDashboard component, you configure the number of columns it will contain, along with the height of each row. The dashboard stretches its children to fill up the configured space. If all the child components do not fit within the specified number of columns and row height, then the panelDashboard component displays a scroll bar. When placed in a component that stretches it children, by default, the panelDashboard stretches to fill its parent container, no matter the number of children. This could mean that you may have blank space in the dashboard when the browser is resized to be much larger than the dashboard needs. For example, say you have set the panelDashboard to inherit its size from its parent by setting the dimensionsFrom attribute to parent. You set columns to 1 and the rowHeight to 50px. You then add two panelBox components. Because columns is set to 1, you will have 2 rows. Because the parent component is a panelStretchLayout, the panelDashboard will stretch to fill the panelStretchLayout, no matter the height of the boxes, and you end up with extra space, as shown in Figure 8–19 the color of the dashboard has been changed to fuchsia to make it more easy to see its boundaries. 8-38 Web User Interface Developers Guide for Oracle Application Development Framework Figure 8–19 panelDashboard Stretches to Fill Space If instead you don’t want the dashboard to stretch, you can place it in a component that does not stretch its children, and you can configure the panelDashboard to determine its size based on its children by setting the dimensionsFrom attribute to children. It will then be as tall as the number of rows required to display the children, multiplied by the rowHeight attribute. In the previous example, if instead you place the dashboard in a panelGroupLayout set to scroll, because the rowHeight is set to 50, your panelDashboard will always be just over 100px tall, no matter the size of the browser window, as shown in Figure 8–20 . Figure 8–20 panelDashboard Does Not Stretch The panelDashboard component also supports declarative drag and drop behavior, so that the user can rearrange the child components. As shown in Figure 8–21 , the user can for example, move panelBox 10 between panelBox 4 and panelBox 5. A shadow is displayed where the box can be dropped. Organizing Content on Web Pages 8-39 Figure 8–21 Drag and Drop Capabilities in panelDashboard Along with the ability to move child components, the panelDashboard component also provides an API that you can access to allow users to switch child components from being rendered to not rendered, giving the appearance of panelBoxes being inserted or deleted. The dashboard uses partial page rendering to redraw the new set of child components without needing to redraw the entire page. You can use the panelDashboardBehavior tag to make the rendering of components appear more responsive. This tag allows the activation of a command component to apply visual changes to the dashboard before the application code modifies the component tree on the server. Because this opening up of space happens before the action event is sent to the server, the user will see immediate feedback while the action listener for the command component modifies the component tree and prepares the dashboard for the optimized encoding of the insert. For example, Figure 8–22 shows a panelDashboard component used in the right panel of a panelSplitter component. In the left panel, list items displayed as links represent each panelBox component in the panelDashboard. When all panelBox components are displayed, the links are all inactive. However, if a user deletes one of the panelBox components, the corresponding link becomes active. The user can click the link to reinsert the panelBox. By using the panelDashboardBehavior tag with the commandLink component, the user sees the inserted box drawing. Note: You can also configure drag and drop functionality that allows users to drag components into and out of the panelDashboard component. For more information, see Section 32.6, Adding Drag and Drop Functionality Into and Out of a panelDashboard Component. 8-40 Web User Interface Developers Guide for Oracle Application Development Framework Figure 8–22 commandLink Components Use panelDashboardBehavior Tag If you decide not to use this tag, there will be a slight delay while your action listener is processing before the user sees any change to the dashboard structure. Figure 8–23 shows a practical example using a panelDashboard component. Selecting one of the links at the top of the page changes the panelBoxes displayed in the dashboard. The user can also add panelBoxes by clicking the associated link on the left-hand side of the page. Figure 8–23 Practical Example of panelDashboard

8.7.1 How to Use the panelDashboard Component

After you add a panelDashboard to a page, you can configure the dashboard to determine whether or not it will stretch. Then, add child components, and if you want to allow rearrangement the components, also add a componentDragSource tag to the child component. If you want to allow insertion and deletion of components, implement a listener to handle the action. You can also use the panelDashboardBehavior tag to make the panelDashboard component appear more responsive to the insertion.