tell me more icon Layout Components and Stretching

By default, when you create a JSF page in a project that uses ADF Faces technology, JDeveloper automatically includes the af:document and af:form tags for you in the .jspx page file, as shown here: 

                               
<f:view>
  <af:document..>
    <af:form..></af:form>
  </af:document>
</f:view>

The af:document tag is required for all pages that use ADF Faces components. All components that make up the page contents should then be inserted within af:form. In most cases you would want stretched contents in a page, so you would start with one root component that can both be stretched by af:document and can stretch it child components. The root component contains all other child components that make up the layout and contents of the page.

By default in JDeveloper, the maximized attribute on af:document is set to true for a root component to stretch and use the entire visible portion of the browser (provided the root component used can be stretched). Examples of layout components you can use as a root component for stretched page contents include Panel Stretch Layout, Panel Splitter, and Decorative Box. At runtime, because there is a single root component that can both be stretched and stretch its children, the page contents will stretch to fit the browser window. When users resize the window, the page contents are resized to fit within the available browser space.

Most other layout components, such as Panel Group Layout, Panel Form Layout and Panel Border Layout, cannot stretch their child components. A few other layout components, such as Panel Accordion and Panel Tabbed, can stretch their children only if certain conditions are met.

While Panel Stretch Layout, Panel Splitter, and Decorative Box can stretch their child components (such as tables, other layout components, and regions), not all layout components can be stretched. The following layout components can be stretched by a parent stretching component:

  • Decorative Box
  • Panel Accordion
  • Panel Box when type="stretch" or type="default"
  • Panel Collection
  • Panel Dashboard
  • Panel Group Layout when layout="scroll" or layout="vertical"
  • Panel Splitter
  • Panel Stretch Layout
  • Panel Tabbed

Note: You do not have to set the width or height value on the inlineStyle attribute of components to get stretching; doing so will cause inconsistent page display across different web browsers.

The following layout components cannot be stretched by a parent stretching component:

  • Panel Border Layout
  • Panel Box when type="flow"
  • Panel Form Layout
  • Panel Group Layout when layout="default" or layout="horizontal"
  • Panel Header
  • Panel Label and Message
  • Panel List

If you need to use a non-stretchable layout component inside a stretching component, you must first wrap the non-stretchable component in a transition component, which is a component that does not stretch its children, but itself can be stretched (for example, Panel Group Layout where layout="scroll" or layout="vertical").

In summary, to achieve a desired layout that displays page contents consistently across browsers, Oracle recommends that you start with a root component and build a stretchable structure using a combination of components that support being stretched and that stretch their child components. Within this stretchable structure, build your page contents by inserting components that can be stretched (for example, a table or a layout component that can be stretched), or inserting Panel Group Layout with layout="scroll" or layout="vertical" to create areas of flowing components that are not stretched. At runtime, the single maximized root component inside af:document will stretch or resize along with the browser window. The contents inside the root component will stretch or resize accordingly down the hierarchy of components in the stretchable structure until transition components are reached. At that point, normal browser flow and layout takes over, and contents inside the transition components will flow instead of being automatically stretched by the parent stretching components. This process of creating a layout ensures that you always achieve stretched contents and flowing contents where needed.

Note: Oracle does not recommend using nested layers of Panel Group Layout with layout="scroll", as this causes the user to see and use multiple scroll bars.

Copyright © 1997, 2009, Oracle. All rights reserved.