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

tell me more icon Creating a New Application and Project

The JDeveloper application is the highest level in the organizational structure. It stores information about the objects you are working with, while you are creating your application. It keeps track of your projects and the environment settings while you are developing.   [ tell me more...]





  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 .

    tell me more icon 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.

    tell me more icon 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 the save all icon Save All to save your work.

    tell me more icon 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

tell me more icon Creating a JSF Page and Adding a Panel Stretch Layout

To follow along with the example, in this step and throughout the cards, enter values as shown in the instructions. Then you will be able to follow the steps in the cue cards exactly as written.   [ tell me more...]





  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.

    tell me more icon 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.

    tell me more icon 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 borderlayout icon Panel Stretch Layout and drop it on the blank page in the visual editor.

    tell me more icon 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.

    tell me more icon 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 the save all icon Save All to save your work.

    tell me more icon 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

tell me more icon Creating the Top and Bottom Areas on a Page

In this card, you will be adding contents into the top and bottom facets of the root Panel Stretch Layout to create the top and bottom areas of the page.   [ tell me more...]





  1. In the Component Palette, ADF Faces page, Layout panel, drag and drop borderlayout icon 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 flowlayout icon 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 flowlayout icon 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.

    tell me more icon 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 icon Image into the panel group layout you just added. In the Insert Image dialog, click the property menu icon 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.

    tell me more icon 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 property menu icon 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 actions dropdown icon at the top right corner of the selected panel group layout. (You should see Panel Group Layout Actions on the page.) Click actions dropdown icon and choose Insert inside then choose spacer icon Spacer from the dropdown menu.

    tell me more icon 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 actions dropdown icon and choose Insert inside then choose outputformatted icon 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 flowlayout icon 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 navigationbar icon 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.

    tell me more icon 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 navigationbar icon af:navigationPane and choose Insert inside af:navigationPane then choose navigation icon 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 the save all icon Save All to save your work.
  12. To create the bottom area contents, in the Component Palette, Layout panel, drag and drop flowlayout icon 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 flowlayout icon 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 actions dropdown icon and choose Design This Container from the dropdown menu.

    tell me more icon Design This Container

    When you click actions dropdown icon 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 outputformatted icon 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.

    tell me more icon 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 actions dropdown icon on the selected component and choose Insert inside then choose link icon Go Link. In the Property Inspector, Common section, change Text to About XYZ and press Enter.
  16. Click actions dropdown icon on the selected go link component and choose Design Main Page .
  17. In the Application Navigator, right-click jsf page icon LayoutPage.jspx and choose R un from the context menu.

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




    tell me more icon 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

tell me more icon Dividing the Middle Area of a Page into Three Panes

In this card, you will be working in the center facet of Decorative Box, which will contain everything on the page that is in between the top and bottom content areas.   [ tell me more...]





  1. In the Component Palette, ADF Faces page, Layout panel, drag and drop splitpane icon Panel Splitter into the center facet of the decorative box in the middle of the page to create two panes.
  2. Drag another splitpane icon 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.

    tell me more icon 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 icon 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 panel icon af:panelAccordion. Click the child items icon 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.

    tell me more icon 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 panel icon af:panelAccordion and choose Insert inside af:panelAccordion then choose items icon 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 the save all icon Save All to save your work.
  7. To add contents into the right pane, in the Component Palette, Layout panel, drag and drop flowlayout icon 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 bullist icon Panel List into the panel group layout you just added. In the Structure window, right-click panel icon af:panelList and choose Insert inside af:panelList then choose link icon 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.

    tell me more icon 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 flowlayout icon 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 menupath icon Bread Crumbs into the panel group layout you just added. In the Structure window, right-click menupath icon af:breadCrumbs and choose Insert inside af:breadCrumbs then choose navigation icon 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 menupath icon af:breadCrumbs and choose Insert inside af:breadCrumbs then choose navigation icon 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.

    tell me more icon 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 jsf page icon LayoutPage.jspx and choose R un from the context menu.

    tell me more icon 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

tell me more icon Adding a Panel Tabbed, Panel Collection, and Tables

In this card, you will be creating the rest of the center pane contents in the center facet of Decorative Box.   [ tell me more...]





  1. In the Component Palette, ADF Faces page, Layout panel, drag and drop borderlayout icon 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 tabbedpane icon Panel Tabbed into the center facet of the panel stretch layout. In the Structure window, expand tabbedpane icon af:panelTabbed. Click the child items icon af:showDetailItem. In the Property Inspector, Common section, change the Text value to Tab 1. In the Appearance section, change StretchChildren to first.

    tell me more icon 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 tabbedpane icon af:panelTabbed and choose Insert inside af:panelTabbed then choose items icon 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 select other item icon next to Tab 2, then select Tab 1 .)
  5. In the Component Palette, Common Components panel, drag and drop table icon 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 icon dropdown list.

    tell me more icon 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 select other item icon next to Tab 1, then select Tab 2 .)
  8. In the Component Palette, Layout panel, drag and drop layout icon Panel Collection into the second tab component. In the Component Palette, Common Components panel, drag and drop table icon 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 icon dropdown list.

    tell me more icon 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 flowlayout icon 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 icon 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 print icon Show Printable Page Behavior into the command button you just added.

    tell me more icon 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 jsf page icon LayoutPage.jspx and choose R un from the context menu.

    tell me more icon 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.

false ,,,,,,,,,,,,,,,