How to Use Partial Page Navigation What You May Need to Know About PPR Navigation

7-10 Web User Interface Developers Guide for Oracle Application Development Framework Part III Part III Using ADF Faces Components Part III contains the following chapters: ■ Chapter 8, Organizing Content on Web Pages ■ Chapter 9, Using Input Components and Defining Forms ■ Chapter 10, Using Tables and Trees ■ Chapter 11, Using List-of-Values Components ■ Chapter 12, Using Query Components ■ Chapter 13, Using Popup Dialogs, Menus, and Windows ■ Chapter 14, Using Menus, Toolbars, and Toolboxes ■ Chapter 15, Creating a Calendar Application ■ Chapter 16, Using Output Components ■ Chapter 17, Displaying Tips, Messages, and Help ■ Chapter 18, Working with Navigation Components ■ Chapter 19, Creating and Reusing Fragments, Page Templates, and Components ■ Chapter 20, Customizing the Appearance Using Styles and Skins ■ Chapter 21, Internationalizing and Localizing Pages ■ Chapter 22, Developing Accessible ADF Faces Pages 8 Organizing Content on Web Pages 8-1 8 Organizing Content on Web Pages This chapter describes how to use several of the ADF Faces layout components to organize content on web pages. This chapter includes the following sections: ■ Section 8.1, Introduction to Organizing Content on Web Pages ■ Section 8.2, Starting to Lay Out a Page ■ Section 8.3, Arranging Contents to Stretch Across a Page ■ Section 8.4, Using Splitters to Create Resizable Panes ■ Section 8.5, Arranging Page Contents in Predefined Fixed Areas ■ Section 8.6, Arranging Content in Forms ■ Section 8.7, Arranging Contents in a Dashboard ■ Section 8.8, Displaying and Hiding Contents Dynamically ■ Section 8.9, Displaying or Hiding Contents in Accordion Panels and Tabbed Panels ■ Section 8.10, Displaying Items in a Static Box ■ Section 8.11, Displaying a Bulleted List in One or More Columns ■ Section 8.12, Grouping Related Items ■ Section 8.13, Separating Content Using Blank Space or Lines

8.1 Introduction to Organizing Content on Web Pages

ADF Faces provides a number of layout components that can be used to arrange other components on a page. Usually, you begin building your page with these components. You then add components that provide other functionality for example rendering data or rendering buttons either inside facets or as child components to these layout components. In addition to layout components that simply act as containers, ADF Faces also provides interactive layout components that can display or hide their content, or that provide sections, lists, or empty space. Some layout components also provide Tip: You can create page templates that allow you to design the layout of pages in your application. The templates can then be used by all pages in your application. For more information, see Chapter 19, Creating and Reusing Fragments, Page Templates, and Components. 8-2 Web User Interface Developers Guide for Oracle Application Development Framework geometry management functionality, such as stretching their contents to fit the browser windows as the window is resized, or the capability to be stretched when placed inside a component that stretches. For more information about stretching and other geometry management functionality of layout components, see Section 8.2.1, Geometry Management and Component Stretching. Table 8–1 briefly describes each of the ADF Faces layout components. Table 8–1 ADF Faces Layout Components Component Description Can Stretch Children Can Be Stretched Page Management Components document Creates each of the standard root elements of an HTML page: html, body, and head. All pages must contain this component. For more information, see Section 8.2, Starting to Lay Out a Page. X form Creates an HTML form element. For more information, see Section 8.2, Starting to Lay Out a Page. Page Layout Containers panelStretchLayout Contains top, bottom, start, center, and end facets where you can place other components. For more information, see Section 8.3, Arranging Contents to Stretch Across a Page. X X when the dimensions From attribute is set to parent panelSplitter Divides a region into two parts first facet and second facet with a repositionable divider between the two. You can place other components within the facets. For more information, see Section 8.4, Using Splitters to Create Resizable Panes. X X when the dimensions From attribute is set to parent panelDashboard Provides a columnar display of child components usually panelBox components. For more information, see Section 8.7, Arranging Contents in a Dashboard. X X when the dimensions From attribute is set to parent panelBorderLayout Can have child components, which are placed in its center, and also contains 12 facets along the border where additional components can be placed. These will surround the center. For more information, see Section 8.5, Arranging Page Contents in Predefined Fixed Areas. Organizing Content on Web Pages 8-3 panelFormLayout Positions input form controls, such as inputText components so that their labels and fields line up vertically. It supports multiple columns, and contains a footer facet. For more information, see Section 8.6, Arranging Content in Forms. Components with ShowHide Capabilities showDetailHeader Can hide or display contents below the header. Often used as a child to the panelHeader component. For more information, see Section 8.8, Displaying and Hiding Contents Dynamically. X if the type attribute is set to stretch X if the type attribute is set to stretch showDetailItem Used to hold the content for the different panes of the panelAccordion or different tabs of the panelTabbed component. For more information, see Section 8.9, Displaying or Hiding Contents in Accordion Panels and Tabbed Panels. X if it contains a single child compone nt panelBox Titled box that can contain child components. Has a toolbar facet. For more information, see Section 8.8, Displaying and Hiding Contents Dynamically. X panelAccordion Used in conjunction with showDetailItem components to display as a panel that can be expanded or collapsed. For more information, see Section 8.9, Displaying or Hiding Contents in Accordion Panels and Tabbed Panels. X when the dimensions From attribute is set to parent panelTabbed Used in conjunction with showDetailItem components to display as a set of tabbed panels. For more information, see Section 8.9, Displaying or Hiding Contents in Accordion Panels and Tabbed Panels. If you want the tabs to be used in conjunction with navigational hierarchy, for example each tab is a different page or region that contains another set of navigation items, you may instead want to use a navigationPane component in a navigational menu. For more information, see Section 18.5, Using Navigation Items for a Page Hierarchy. X when the dimensions From attribute is set to parent Table 8–1 Cont. ADF Faces Layout Components Component Description Can Stretch Children Can Be Stretched 8-4 Web User Interface Developers Guide for Oracle Application Development Framework showDetail Hides or displays content through a toggle icon. For more information, see Section 8.8, Displaying and Hiding Contents Dynamically. Miscellaneous Containers panelHeader Contains child components and provides a header that can include messages, toolbars, and help topics. For more information, see Section 8.10, Displaying Items in a Static Box. X if the type attribute is set to stretch X if the type attribute is set to stretch panelCollection Used in conjunction with collection components such as table, tree and treeTable to provide menus, toolbars, and status bars for those components. For more information, see Section 10.8, Displaying Table Menus, Toolbars, and Status Bars. X only a single table, tree, or tree table X decorativeBox Creates a container component whose facets use style themes to apply a bordered look to its children. This component typically acts as a look and feel transition between areas on a page. For example, a page that has a dark background for its template can use the decorative box to transition to a white background for its main area. For more information, see Section 8.10, Displaying Items in a Static Box. X in the Center facet X when the dimensions From attribute is set to parent inlineFrame Creates an inline iframe tag. X navigationPane Creates a series of navigation items representing one level in a navigation hierarchy. For more information, see Section 18.5, Using Navigation Items for a Page Hierarchy. X if configured to display tabs panelList Renders each child component as a list item and renders a bullet next to it. Can be nested to create hierarchical lists. For more information, see Section 8.11, Displaying a Bulleted List in One or More Columns. panelWindow Displays child components inside a popup window. For more information, see Section 13.2, Declaratively Creating Popup Elements. Table 8–1 Cont. ADF Faces Layout Components Component Description Can Stretch Children Can Be Stretched