Use Layout Components

You can work in JDeveloper's IDE to create pages by inserting and nesting various layout components to achieve the desired layouts.

Create a New Application: Use the Create Application wizard to create a generic application.

Create a JSF Page: Use the Create JSF Page dialog to add a new page. Add layout components to create a stretchable outer frame for your page contents.

Create Top and Bottom Content Areas: Add ADF Faces components to create the top and bottom areas of your page.

Create Three Splitter Panes in the Middle: Nest Panel Splitter components to create multiple panes on the page, then add contents into the left and right panes.

Add Contents in the Center to Complete the Page: Use a variety of ADF Faces components such as Panel Tabbed, Panel Collection and Table.

Create a New Application and Project

1. Open the Create Application wizard [ File > New > General > Applications]  .
2. To follow along with the example, enter the application name LayoutApp.
3. Select Generic Application in the Applica tion Template list, then click Finish .
   

   Application Templates

   Application templates provide you with a quick way to create the project structure for standard applications with the appropriate combination of technologies already specified. The new application created from the template appears in the Application Navigator already partitioned into tiered projects, with the associated technology scopes set in each project.   [ tell me more...]

   
   
   
4. In the Application Navigator, select the project you just created and open the Project Properties dialog, JSP Tag Libraries Page. [ Application > Project Properties] 
5. Select the Distributed Libraries folder, and click Add .
6. In the Choose Tag Libraries dialog, select ADF Faces Components 11 and click OK.
   

   JSP Tag Libraries

   Libraries are provided for the various APIs and technologies installed with JDeveloper. These libraries are categorized as extension libraries, which are shared by all users of an install.   [ tell me more...]

   
   
   
7. Click OK to close the Project Properties dialog.
8. Click Save All to save your work.
   

   In the IDE

   When you complete the steps for creating a new application and project, the Projects panel in the Application Navigator should look like this:  [ tell me more...]

   
   
   

Create a JSF Page and Add a Panel Stretch Layout

1. In the Application Navigator, select the project and open the Create JSF Page dialog. [ File > New > Web Tier > JSF > JSF Page] 
2. Enter the file name LayoutPage.jspx and confirm that Create as XML Document (*.jspx) is selected.
3. Under Initial Page Layout and Content, confirm that Blan k Page is selected.
   

   Quick Start Layout

   ADF Faces provides a number of components that you can use to define the overall layout of the page. JDeveloper includes pre-defined page layouts that use these layout components to provide you with a quick and easy way to correctly determine the layout of your pages.  [ tell me more...]

   
   
   
4. Make sure Page Implementation shows UI Components are not exposed in managed bean. Click OK.
   

   Component Binding

   When you create a JSF page using the dialog, you can specify whether or not components on the page are exposed in a managed bean, to allow programmatic manipulation of the UI components. By default components are not exposed to managed beans. If you wish to bind components to managed beans, expand the Page Implementation section in the Create JSF Page dialog, then select one of the automatic binding options.   [ tell me more...]

   
   
   
5. In the Component Palette, ADF Faces page, Layout panel, drag Panel Stretch Layout and drop it on the blank page in the visual editor.
   

   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:  [ tell me more...]

   
   
   
6. In the Component Palette, Layout panel, drag and drop Decorative Box into the center facet of the root panel stretch layout.
7. In the Structure window, select af:panelStretchLayout (that is just below af:form). In the Property Inspector, Common section, change the property values of StartWidth and EndWidth to 5px each. Then change BottomHeight to 25px, and press Enter.
   

   Panel Stretch Layout

   Panel Stretch Layout does not accept direct children; children contents can be placed inside facets only. Panel Stretch Layout supports five facets that specify the panes where children contents can be inserted: top, bottom, start, end, and center:  [ tell me more...]

   
   
   
8. Click Save All to save your work.
   

   In the IDE

   When you complete the steps for creating a JSF page and adding the Panel Stretch Layout and Decorative Box components, the page in the visual editor should look similar to this:  [ tell me more...]

   
   
   

Create the Top and Bottom Areas on a Page

1. In the Component Palette, ADF Faces page, Layout panel, drag and drop Panel Stretch Layout into the top facet of the root panel stretch layout ( psl1).
2. In the Property Inspector, Common section, change the facet widths and heights of the panel stretch layout you just added using these values:
   StartWidth - 200px
   EndWidth - 200px
   TopHeight - 5px
   BottomHeight - 5px (Press Enter in the Property Inspector after modifying the last value.)
3. To create the top area contents, in the Component Palette, Layout panel, drag and drop Panel Group Layout into the start facet of the panel stretch layout you just modified. In the Property Inspector, Common section, change the Layout value to scroll. In the Component Palette, drag another Panel Group Layout and drop it into the panel group layout component you just added. In the Property Inspector, change the Layout value to horizontal.
   

   Panel Group Layout Component

   Panel Group Layout does not stretch its children, but the component itself can be stretched by its parent stretching component such as Panel Stretch Layout. The Panel Group Layout component can be stretched only when its Layout attribute is scroll or vertical. When the Layout attribute of Panel Group Layout is horizontal or default, the Panel Group Layout cannot be stretched.  [ tell me more...]

   
   
   
4. In the Component Palette, Common Components panel, drag and drop Image into the panel group layout you just added. In the Insert Image dialog, click the dropdown menu next to the Source field and choose Edit. Use the dialog to locate and select an image file. Click Yes to add the icon image under the document root and then click Save. Click OK to close the Insert Image dialog.
   

   Adding Images

   In the Insert Image dialog, you can add an image by entering the image file name in the Source field. Alternatively you can use the Edit Property dialog to navigate to a source and select an image file. To use the Edit Property dialog, click at the end of the Source field and choose Edit.   [ tell me more...]

   
   
   
5. In the breadcrumb links at the bottom of the visual editor, click the component name af:panelgrouplayout that is just before af:image. In the visual editor move your cursor over at the top right corner of the selected panel group layout. (You should see Panel Group Layout Actions on the page.) Click and choose Insert inside Spacer from the dropdown menu.
   

   Using the Editor Breadcrumbs and Actions Context Menu

   When editing a page in the visual editor, you can use the breadcrumb links at the bottom of the editor window (just above the Design and other editor tabs) to select a component on the page. The editor breadcrumb links show the path of names from the currently selected component back to its root parent component. The last name in the path (shown in bold font) is the currently selected component; the names preceding the last name are the parent components. If a component has its Id attribute set, the Id attribute value is appended to the component name (for example, af:panelgrouplayout#pgl2, where pgl2 is the Id attribute value):  [ tell me more...]

   
   
   
6. In the visual editor breadcrumbs, click af:panelgrouplayout that is before af:spacer. On the page, click and choose Insert inside Output Formatted. In the Property Inspector, Common section, change the Value property to Layout Example. Expand the Style section. In the InlineStyle field, enter font-size:small; color:Red; font-weight:bold; and press Enter.
7. In the Component Palette, Layout panel, drag and drop Panel Group Layout into the end facet of the nested panel stretch layout ( psl2) you added in step 1 of this card. In the Property Inspector, Common section, change the Halign value to end, and the Layout value to scroll.
8. In the Component Palette, Layout panel, drag and drop Navigation Pane into the panel group layout you just modified. In the Property Inspector, Common section, change the Hint value to buttons. In the Style section, enter padding-top:5px in the InlineStyle field and press Enter.
   

   Navigation Pane

   The Navigation Pane component is used to create the navigation items for one level in a page hierarchy. A page hierarchy is a tree-like hierarchy of nodes that represent a series of related pages in an application. End users gain access to information on the pages by drilling down a path of links.   [ tell me more...]

   
   
   
9. In the Structure window, right-click af:navigationPane and choose Insert inside af:navigationPane Navigation Item from the context menu. In the Property Inspector, Common section, change the Text property to Home and press Enter.
10. Repeat the procedure to add two more navigation item components, using the Text values Preferences and Help.
11. Click Save All to save your work.
12. To create the bottom area contents, in the Component Palette, Layout panel, drag and drop Panel Group Layout into the bottom facet of the root panel stretch layout component ( psl1). In the Property Inspector, Common section, change Halign to end, and Layout to scroll. In the Component Palette, drag another Panel Group Layout and drop it into the panel group layout component you just added. In the Property Inspector, change Layout to horizontal. Expand the Style and Theme section. In the InlineStyle field, enter padding-top:5px and press Enter.
13. On the selected panel group layout component in the visual editor, click and choose Design This Container from the dropdown menu.
    

    Design This Container

    When you click at the top right corner of the selected panel group layout on the page, you will see a context dropdown menu of action items. One of the menu items is Design This Container , which lets you edit the selected component (container) and its contents.   [ tell me more...]

    
    
    
14. In the Component Palette, Common Components panel, drag and drop Output Formatted into the panel group layout. In the Property Inspector, Common section, change Value to Copyright © 2009 and press Enter. In the Style section, enter margin:0 6px 0 6px; display:block in the InlineStyle field, and press Enter.
    

    Components that Use Span

    The margin property can have four values, such as 5px 5px 2px 1px to specify the top, right, bottom and left margins, respectively.  [ tell me more...]

    
    
    
15. In the visual editor breadcrumbs, click af:panelgrouplayout that is before af:outputformatted. Then click on the selected component and choose Insert inside Go Link. In the Property Inspector, Common section, change Text to About XYZ and press Enter.
16. Click on the selected go link component and choose Design Main Page .
17. In the Application Navigator, right-click LayoutPage.jspx and choose R un from the context menu.
    

    Running and Testing a JSF Page

    By default, JDeveloper automatically configures an integrated server named Integrated WebLogic Server that references a user-specific instance of Oracle WebLogic Server bundled with the IDE. Integrated WebLogic Server is a Java EE runtime service for packaged archive deployment. Based on zero-copy deployment, Integrated WebLogic Server lets you run and test an application and its projects as a Java EE application in a Java EE container. No special connection setup is required to use Integrated WebLogic Server. You can run the entire application, a project, or individual JSF pages.  [ tell me more...]

    
    
    
    

    In the IDE

    When you complete the steps for adding contents to the top and bottom areas on the page, the visual editor should look something like this:  [ tell me more...]

    
    
    

Divide the Middle Area of a Page into Three Panes

1. In the Component Palette, ADF Faces page, Layout panel, drag and drop Panel Splitter into the center facet of the decorative box in the middle of the page to create two panes.
2. Drag another Panel Splitter and drop it into the second facet of the panel splitter you just added to split the right pane into two. In the Property Inspector of the second panel splitter, Common section, change PositionedFromEnd to true.
   

   Panel Splitter

   The Panel Splitter component creates two resizable panes separated by an adjustable splitter. The panes can be placed horizontally (side by side) or vertically (top to bottom), as determined by the Orientation attribute. By default, Orientation is horizontal.   [ tell me more...]

   
   
   
3. To create the left pane contents, in the Component Palette, Layout panel, drag and drop Panel Accordion into the first facet of the first panel splitter ( ps1) you added in step 1 of this card. In the Property Inspector, Common section, change DiscloseMany to true.
4. In the Structure window, expand af:panelAccordion. Click the child af:showDetailItem. In the Property Inspector, Common section, change the Text value to Pane 1. In the Appearance section, change Flex to 1. Then change the value of StretchChildren to first.
   

   Show Detail Item

   Show Detail Item cannot be used on its own; it must be used inside of a Panel Accordion or a Panel Tabbed to contain a group of children contents.   [ tell me more...]

   
   
   
5. In the Structure window, right-click af:panelAccordion and choose Insert inside af:panelAccordion Show Detail Item to add a second pane. In the Property Inspector, Common section, change the Text value to Pane 2. In the Appearance section, change Flex to 2. Then change StretchChildren to first.
6. Click Save All to save your work.
7. To add contents into the right pane, in the Component Palette, Layout panel, drag and drop Panel Group Layout into the second facet on the visual editor. In the Property Inspector, Common section, change Layout to scroll.
8. In the Component Palette, drag and drop Panel List into the panel group layout you just added. In the Structure window, right-click af:panelList and choose Insert inside af:panelList Go Link to add a link. Repeat the procedure to insert two more links in the same manner.
9. To set up the center pane, in the Component Palette, Layout panel, drag and drop Decorative Box into the first facet on the visual editor. In the Property Inspector, Common section, change the TopHeight value to 30px and press Enter.
   

   Decorative Box

   By nesting a Decorative Box into the first facet of the second panel splitter ( ps2), you are setting up the center area before you add the center contents.  [ tell me more...]

   
   
   
10. In the Component Palette, drag and drop Panel Group Layout into the top facet of the decorative box you just added. In the Property Inspector, Common section, change Layout to scroll.
11. In the Component Palette, Common Components panel, drag and drop Bread Crumbs into the panel group layout you just added. In the Structure window, right-click af:breadCrumbs and choose Insert inside af:breadCrumbs Navigation Item to add a link. In the Property Inspector, Common section, change the Text value to Crumb 1 and press Enter.
12. In the Structure window, right-click af:breadCrumbs and choose Insert inside af:breadCrumbs Navigation Item to add a second item. In the Property Inspector, Common section, change the Text value to Crumb 2 and press Enter. Then repeat the procedure to insert a third navigation item in the same manner, using the Text value of Crumb 3.
    

    Bread Crumbs Component

    The Bread Crumbs component is used to create a path of links from the current page back to the root page. Like the Navigation Pane component, the Bread Crumbs component accepts a series of Command Navigation Item components as children, with each Command Navigation Item representing one link.  [ tell me more...]

    
    
    
13. In the Application Navigator, right-click LayoutPage.jspx and choose R un from the context menu.
    

    In the IDE

    When you complete the steps for creating three horizontal splitter panes in the page, the visual editor should look similar to this:  [ tell me more...]

    
    
    

Add a Panel Tabbed, Panel Collection, and Tables

1. In the Component Palette, ADF Faces page, Layout panel, drag and drop Panel Stretch Layout into the center facet below the bread crumb links. In the Property Inspector, Common section, change the property values of StartWidth, EndWidth, and TopHeight to 5px each. Then change BottomHeight to 25px and press Enter.
2. In the Component Palette, Layout panel, drag and drop Panel Tabbed into the center facet of the panel stretch layout. In the Structure window, expand af:panelTabbed. Click the child af:showDetailItem. In the Property Inspector, Common section, change the Text value to Tab 1. In the Appearance section, change StretchChildren to first.
   

   Panel Tabbed

   The Panel Tabbed component is used to create a series of tabbed panes with contents. When you add a Panel Tabbed, JDeveloper uses above as the default value for the Position attribute. This means the tabs will display above the pane contents only. Other valid values of Position are below and both. The following illustration shows a Panel Tabbed component with its Position attribute set to both:  [ tell me more...]

   
   
   
3. In the Structure window, right-click af:panelTabbed and choose Insert inside af:panelTabbed Sho w Detail Item to add a second tab. In the Property Inspector, Common section, change the Text value to Tab 2. In the Appearance section, change StretchChildren to first.
4. In the visual editor, click the first tab Tab 1. (If you don't see the first tab, click next to Tab 2, then select Tab 1 .)
5. In the Component Palette, Common Components panel, drag and drop Table into the first tab component. In the Create ADF Faces Table dialog, make sure Bind Data Now is not selected, then click OK.
6. In the Property Inspector of the table component, Appearance section, select blank from the ColumnStretching dropdown list.
   

   Column Stretching in Tables

   When a Table component is inserted into Show Detail Item, certain conditions must be met for Show Detail Item to allow the Table component to be stretched, namely:  [ tell me more...]

   
   
   
7. In the visual editor, click the second tab Tab 2. (If you don't see the second tab, click next to Tab 1, then select Tab 2 .)
8. In the Component Palette, Layout panel, drag and drop Panel Collection into the second tab component. In the Component Palette, Common Components panel, drag and drop Table into the panel collection you just added. In the Create ADF Faces Table dialog, make sure Bind Data Now is not selected, then click OK. In the Property Inspector of the table component, Appearance section, select last from the ColumnStretching dropdown list.
   

   Panel Collection

   The Panel Collection component is used to wrap direct children components such as Table, Tree, and Tree Table to provide menu, toolbar, and status bar items. The type of top level default menu and toolbar items it provides will vary according to the child component it contains. For example, when the child is Table, Tree, or Tree Table, the default top level menu item is View, and the default toolbar item is Detach.   [ tell me more...]

   
   
   
9. In the Component Palette, drag and drop Panel Group Layout into the bottom facet below the tab components. In the Property Inspector, Common section, change Halign to center, and Layout to scroll.
10. In the Component Palette, Common Components panel, drag and drop Button into the panel group layout you just added and modified. In the Property Inspector, change the Text value to Show Printable Page and press Enter.
11. In the Component Palette, expand the Operations panel. Drag and drop Show Printable Page Behavior into the command button you just added.
    

    Show Printable Page Behavior

    Show Printable Page Behavior is a client behavior tag that provides a declarative solution to a common client operation that you would otherwise have to write yourself using JavaScript. When associated with a Command Button component, Show Printable Page Behavior generates and displays a printable version of the current page when users activate the command component.  [ tell me more...]

    
    
    
12. In the Application Navigator, right-click LayoutPage.jspx and choose R un from the context menu.
    

    In the IDE

    When you complete the steps for adding tables into Panel Tabbed and Panel Collection, the visual editor should look similar to this:  [ tell me more...]

    
    
    

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