Tips for Using Geometry-Managed Components

Organizing Content on Web Pages 8-15 – client : The state is saved fully to the client, without the use of tokens. This setting keeps the session expired messages from being displayed. – default : The state of the page is based on whatever is set in web.xml. – server : The state of the page is saved on the server. For more information about state saving, see Appendix A.2, Configuration in web.xml.

8.3 Arranging Contents to Stretch Across a Page

Use the panelStretchLayout component to arrange content in defined areas on a page and when you want the content to be able to stretch when the browser is resized. The panelStretchLayout component is one of the components that can stretch components placed in its facets. Figure 8–6 shows the component’s facets. Figure 8–6 Facets in the panelStretchLayout Component When you set the height of the top and bottom facets, any contained components are stretched up to fit the height. Similarly, when you set the width of the start and end facets, any components contained in those facets are stretched to that width. If no components are placed in the facets, then that facet does not render. That is, that facet will not take up any space. If you want that facet to take up the set space but remain blank, insert a spacer component. See Section 8.13, Separating Content Using Blank Space or Lines. Child Components components in the center facet are then stretched to fill up any remaining space. For more information about component stretching, see Section 8.2.1, Geometry Management and Component Stretching. Instead of setting the height of the top or bottom facet, or width of the start or end facet to a dimension, you can set the height or width to auto. This allows the facet to size itself to use exactly the space required by the child components of the facet. Space will be allocated based on what the web browser determines is the required amount of space to display the facet content. Note: Figure 8–6 shows the facets when the language reading direction of the application is configured to be left-to-right. If instead the language direction is right-to-left, the start and end facets are switched. 8-16 Web User Interface Developers Guide for Oracle Application Development Framework The File Explorer application uses a panelStretchLayout component as the root component in the template. Child components are placed only in the center and bottom facets. Therefore, whatever is in the center facet stretches the full width of the window, and from the top of the window to the top of the bottom facet, whose height is determined by the bottomHeight attribute. Example 8–2 shows abbreviated code from the fileExplorerTemplate file. Example 8–2 panelStretchLayout in the File Explorer’s Template File af:panelStretchLayout bottomHeight={attrs.footerGlobalSize} f:facet name=center af:panelSplitter orientation=vertical ... . . . af:panelSplitter f:facet f:facet name=bottom af:panelGroupLayout layout=vertical . . . af:panelGroupLayout f:facet af:panelStretchLayout The template uses an EL expression to determine the value of the bottomHeight attribute. This expression resolves to the value of the footerGlobalSize attribute defined in the template, which by default is 0. Any page that uses the template can override this value. For example, the index.jspx page uses this template and sets the value to 30. Therefore, when the File Explorer application renders, the contents in the panelStretchLayout component begin 30 pixels from the bottom of the page.

8.3.1 How to Use the panelStretchLayout Component

The panelStretchLayout component cannot have any direct child components. Instead, you place components within its facets. The panelStretchLayout is one of the components that can be configured to stretch any components in its facets to fit the browser. You can nest panelStretchLayout components. For more information, see Section 8.2.2, Nesting Components Inside Components That Allow Stretching. To create and use the panelStretchLayout component: 1. In the Component Palette, from the Layout panel, drag and drop a Panel Stretch Layout to the JSF page.

2. In the Property Inspector, expand the Common section and set the attributes as

needed. When there are child components in the top, bottom, start, and end facets, these components occupy space that is defined by the topHeight, bottomHeight, startWidth, and endWidth attributes. For example, topHeight attribute specifies the height of the top facet, and startWidth Performance Tip: Using auto as a value will degrade performance of your page. You should first attempt to set a height or width and use the auto attribute sparingly. Organizing Content on Web Pages 8-17 attribute specifies the width of the start facet. Child components in top and bottom facets are stretched up to the height set by topHeight and bottomHeight attributes, respectively, and child components in start and end facets are stretched up to the width set by startWidth and endWidth attributes, respectively. Instead of setting a numeric dimension, you can set the topHeight, bottomHeight, startWidth and endWidth attributes to auto and the browser will determine the amount of space required to display the content in the facets. If you do not explicitly specify a value, by default, the value for the topHeight, bottomHeight, startWidth, and endWidth attributes is 50 pixels each. The widths of the top and bottom facets, and the heights of the start and end facets are derived from the width and height of the parent component of panelStretchLayout. 3. By default, the panelStretchLayout component stretches to fill available browser space. If you want to place the panelStretchLayout component inside a component that does not stretch its children, then you need to configure the panelStretchLayout component to not stretch. You configure whether the component will stretch or not using the dimensionsFrom attribute. To do so, expand the Other section, and set DimensionsFrom to one of the following: ■ children: Instead of stretching, the panelStretchLayout component will get its dimensions from its child component. Note: If you set a facet to use auto as a value for the width or height of that facet, the child component does not have to be able to stretch. In fact, it must use a stable, standalone width that is not dependent upon the width of the facet. For example, you should not use auto on a facet whose child component can stretch their children automatically. These components have their own built-in stretched widths by default which will then cause them to report an unstable offsetWidth value, which is used by the browser to determine the amount of space. Additionally, you should not use auto in conjunction with a child component that uses a percentage length for its width. The facet content cannot rely on percentage widths or be any component that would naturally consume the entire width of its surrounding container. Tip: If a facet does not contain a child component, it is not rendered and therefore does not take up any space. You must place a child component into a facet in order for that facet to occupy the configured space.