How to Use the panelBorderLayout Component

8-30 Web User Interface Developers Guide for Oracle Application Development Framework

3. Set rows and maxColumns to determine the number of rows and columns in the

form. The rows attribute value is the number that ADF Faces uses as the number of rows after which a new column will start. By default, it is set to 2147483647 Integer.MAX_VALUE. This means all the child components that are set to rendered=true and visible=true will render in one, single column. If you want the form to contain more than one column, set the rows attribute to a multiple of the number of rendered child components, and then set the maxColumns attribute to the maximum amount of columns that the form should display. The default value of maxColumns is 3. On PDAs, the default is 2. For example, if the rows attribute is set to 6 and there are 1 to 6 rendered child components, the list will be displayed in 1 column. If there are 7 to 12 rendered child components, the list will be displayed in 2 columns. If there are 13 or more child components, the list will be displayed in 3 columns. To display all rendered child components in 1 column, set the rows attribute back to the default value. If the number of rendered child components would require more columns than allowed by the maxColumn attribute, then the value of the rows attribute is overridden. For example, if there are 100 rendered child components, and the rows attribute is set to 30 and the maxColumns attribute is 3 default, the list will be displayed in 3 columns and 34 rows. If the maxColumns attribute is set to 2, the list will be displayed in 2 columns and 51 rows.

4. Set fieldWidth and labelWidth as needed.

ADF Faces uses default label and field widths, as determined by standard HTML flow in the browser. You can also specify explicit widths to use for the labels and fields. The labelWidth attribute on the panelFormLayout component lets you set the preferred width for labels; the fieldWidth attribute lets you set the preferred width for fields. Note: When you nest a panelFormLayout component inside another panelFormLayout component, the label alignment in the nested layout is top. Note: If the panelFormLayout component is inside another panelFormLayout component, the inner panelFormLayout component’s maxColumns value is always 1. Tip: Rendered child components refers only to direct child components of the form. Therefore, when a component that renders multiple rows for example selectManyCheckbox is a child, all its rows will be treated as a single rendered child and cannot be split across separate columns. Note: Any value you specify for the labelWidth component is ignored in layouts where the labelAlignment attribute is set to top, that is, in layouts where the labels are displayed above the fields. Organizing Content on Web Pages 8-31 Regardless of the number of columns in the form layout, the widths you specify apply to all labels and fields, that is, you cannot set different widths for different columns. You specify the widths using any CSS unit such as em, px, or . The unit used must be the same for both the labelWidth and fieldWidth attribute. When using percentage values: ■ The percentage width you specify is a percent of the entire width taken up by the panelFormLayout component, regardless of the number of columns to be displayed. ■ The sum of the labelWidth and fieldWidth percentages must add up to 100. If the sum is less than 100, the widths will be normalized to equal 100. For example, if you set the labelWidth to 10 and the fieldWidth to 30, at runtime the labelWidth would be 33 and the fieldWidth would be 67. ■ If you explicitly set the width of one but not the other for example, you specify a percentage for labelWidth but not fieldWidth, ADF Faces automatically calculates the percentage width that is not specified. Suppose the width of the panelFormLayout component takes up 600 pixels of space, and the labelWidth attribute is set at 50. In a one-column display, the label width will be 300 pixels and the field width will be 300 pixels. In a two-column display, each column is 300 pixels, so each label width in a column will be 150 pixels, and each field width in a column will be 150 pixels. If the length of the label text does not fit on a single line with the given label width, ADF Faces automatically wraps the label text. If the given field width is less than the minimum size of the child content you have placed inside the panelFormLayout component, ADF Faces automatically uses the minimum size of the child content as the field width. 5. Insert the desired child components. Usually you insert labeled form input components, such as Input Text, Select Many Checkbox , and other similar components that enable users to provide input. Note: If your form contains multiple columns and a footer, you may see a slight offset between the positioning of the main form items and the footer items in web browsers that do not honor fractional divisions of percentages. To minimize this effect, ensure that the percentage labelWidth is evenly divisible by the number of columns. Note: If the field is wider than the space allocated, the browser will not truncate the field but instead will take space from the label columns. This potentially could cause the labels to wrap more than you would like. In this case, you may want to consider reducing the width of the field contents for example, use a smaller contentStyle width on an inputText component.