What You May Need to Know About Geometry Management and the panelSplitter Component

8-28 Web User Interface Developers Guide for Oracle Application Development Framework To create and use the panelBorderLayout component: 1. In the Component Palette, from the Layout panel, drag and drop a Panel Border Layout onto the JSF page. 2. From the Component Palette, drag and drop the component that will be used to display contents in the center of the window as a child component to the panelBorderLayout component. Child components are displayed consecutively in the order in which you inserted them. If you want some other type of layout for the child components, wrap the components inside the panelGroupLayout component. For more information, see Section 8.12, Grouping Related Items. 3. To place contents that will surround the center, drag and drop the desired component into each of the facets. Because facets accept one child component only, if you want to add more than one child component, wrap the child components inside a container.

8.6 Arranging Content in Forms

The panelFormLayout component lets you lay out multiple form input components such as input fields and selection list fields in one or more columns. The File Explorer application uses a panelFormLayout component to display file properties. The component is configured to have the labels right-aligned, as shown in Figure 8–14 . Figure 8–14 Right-Aligned Labels and Left-Aligned Fields in a Form Figure 8–15 shows the same page with the component configured to display the labels above the fields. Tip: If any facet is not visible in the visual editor: 1. Right-click the panelBorderLayout component in the Structure window. 2. From the context menu, choose Facets - Panel Border Layout facet name . Facets in use on the page are indicated by a checkmark in front of the facet name. Organizing Content on Web Pages 8-29 Figure 8–15 Labels Above Fields in a Form You can configure the panelFormLayout component to display the fields with their labels in one or more columns. Each field in the form is a child component of the panelFormLayout component. You set the desired number of rows, and if there are more child components than rows, the remaining child components are placed in a new column. For example, if there are 25 child components, and you set the component to display 15 rows, the last 10 components will be displayed in a second column. However, the number of rows displayed in each is not solely determined by the configured number of rows. By default, the panelFormLayout component is set to render no more than three columns two for PDA applications. This value is what actually determines the number of rows. For example, if you have 25 child components and you set the component to display 5 rows and you leave the default maximum number of columns set to 3, then the component will actually display 9 rows, even though you have it set to display 5. This is because the maximum number of columns can override the set number of rows. Because it is set to allow only up to 3 columns, it must use 9 rows in order to display all child components. You would need to set the maximum number of columns to 5 in order to have the component display just 5 rows. ADF Faces uses default label and field widths, as determined by the standard HTML flow in the browser. You can also specify explicit widths to use for the labels and fields. Regardless of the number of columns in the form layout, the widths you specify apply to all labels and fields. You specify the widths using either absolute numbers in pixels or percentage values. If the length of a label does not fit, the text is wrapped.

8.6.1 How to Use the panelFormLayout Component

You can use one or more panelFormLayout components on a page to create the desired form layout. To create and use panelFormLayout: 1. In the Component Palette, from the Layout panel, drag and drop a Panel Form Layout onto the JSF page. 2. In the Property Inspector, expand the Common section and set the label alignment. By default, field labels on the child input components are displayed beside the fields. To place the labels above the fields, set the labelAlignment attribute to top. Tip: If your page will be displayed in languages other than English, you should leave extra space in the labels to account for different languages and characters.