Geometry Management and Component Stretching

Organizing Content on Web Pages 8-9

8.2.2 Nesting Components Inside Components That Allow Stretching

Even though you choose a component that can stretch its child components, only the following components will actually stretch: ■ inputText when configured to stretch ■ decorativeBox when configured to stretch ■ panelAccordion when configured to stretch ■ panelBox ■ panelCollection ■ panelDashboard when configured to stretch ■ panelGroupLayout with the layout attribute set to scroll or vertical ■ panelSplitter when configured to stretch ■ panelStretchLayout when configured to stretch ■ panelTabbed when configured to stretch ■ region ■ table when configured to stretch ■ tree when configured to stretch ■ treeTable when configured to stretch The following layout components cannot be stretched when placed inside a facet of a component that stretches its child components: ■ panelBorderLayout ■ panelFormLayout ■ panelGroupLayout with the layout attribute set to default or horizontal ■ panelHeader ■ panelLabelAndMessage ■ panelList ■ showDetail ■ showDetailHeader ■ tableLayout MyFaces Trinidad component Because these components cannot be stretched, you cannot place them in a facet of any component that stretches its child components. So if you want to use one of these components within the facet of component that does stretch its child components, you must wrap it in a component that can be stretched, but one that does not stretch its child components. If you do not, you may see unexpected results when the component renders. For example, suppose you have a panelStretchLayout as the first component on your page. You then add a panelSplitter component that is configured to be stretched. Now to the first facet of the panelSplitter component, say you add a panelGroupLayout component with its layout attribute set to scroll which means it can stretch, and inside that, you add a panelCollection component, and then finally a table component. 8-10 Web User Interface Developers Guide for Oracle Application Development Framework To the second facet of the panelSplitter, suppose you add just the panelCollection and table components, as shown in Figure 8–3 . Components that can stretch their children are green and components that can be stretched but cannot stretch their children are blue. Figure 8–3 Layout Using Geometry-Managed Components As shown in Figure 8–4 , when the page is run, the panelCollection and table components in the panelGroupLayout do not stretch, while the ones directly in the panelSplitter component do stretch. Organizing Content on Web Pages 8-11 Figure 8–4 Geometry-Managed Components Affect the Layout of the Page Because the panelStretchLayout component can stretch its child components, and because the panelSplitter component was configured to stretch, both stretch to fill up available browser space. Because panelSplitter component can stretch its child components and because on the left, panelGroupLayout component with its layout attribute set to scroll can be stretched, and on the right, the panelCollection component can be stretched, both of those stretch to fill up available browser space. However, the panelGroupLayout component cannot stretch its child components, while the panelCollection component can stretch a single table. Therefore, the panelCollection component on the left does not stretch, even though its parent does. Now suppose on the left, instead of a table component, you want to add a panelList component. You would not need the panelCollection component as that is used only for tables, so you might also think you would not need to use the panelGroupLayout component to group the panelList component with another component. However, because the panelList component would then be a direct child of the panelSplitter component, and because the panelSplitter component stretches its child components and the panelList component cannot be stretched, you would need to keep the panelGroupLayout set to scroll and place the panelList component as a child to the panelGroupLayout component. This way, the panelSplitter component can stretch the panelGroupLayout component, but the panelGroupLayout component will not try to stretch the panelList component. Because the panelGroupLayout component can be stretched, but does not stretch its child components, it allows the transition between a layout that stretches and one that flows. Tip: Do not attempt to stretch any of the components in the list of components that cannot stretch by setting their width to 100. You may get unexpected results. Instead, surround the component to be stretched with a component that can be stretched. For components that can be stretched, see Table 8–1 . 8-12 Web User Interface Developers Guide for Oracle Application Development Framework Components that can be stretched but do not stretch their children are considered transition components. Transition components must always be used between a component that stretches its children and a component that does not stretch.

8.2.3 Using Quick Start Layouts

When you use the New Gallery Wizard to create a JSF JSP page or a page fragment, you can choose from a variety of predefined quick start layouts. When you choose one of these layouts, JDeveloper adds the necessary components and sets their attributes to achieve the look and behavior you want. You can choose from one-, two-, and three-column formats. Within those formats, you can choose how many separate panes will be displayed in each column, and if those panes can stretch or remain a fixed size. Figure 8–5 shows the different layouts available in the two-column format. Figure 8–5 Quick Layouts Along with adding layout components, you can also choose to apply a theme to the chosen quick layout. These themes add color styling to some of the components used in the quick start layout. To see the color and where it is added, see Appendix D, Quick Start Layout Themes. For more information about themes, see Section 20.3.4, How to Apply Themes to Components. In addition to saving time, when you use the quick layouts, you can be sure that layout components are used together correctly to achieve the desired outcome. For more information about creating pages using the quick layouts, see Section 2.4, Creating a View Page.

8.2.4 Tips for Using Geometry-Managed Components

To ensure your page is displayed as expected in all browsers, use one of the quick layouts provided by JDeveloper when you create a page. These ensure that the correct