Building Rich Internet Applications with

ADF & WebCenter 11g

Building Layout Templates

Page 1 of 27

About This Hands-On Workshop Session

In this hands-on workshop, you will:

Learn About ADF Layout Templates

a) Overview of how to build a Compound Application centric Stretch Layout template.

Building a Compound Application Structure with WebCenter Support. (Runtime Customization).

Building the general structure of the page including global components

Building Nested Tabs & Links to reflect the Site structure.

Building Application Pages with the template.

b) Overview of how to build a more Web Centric Flow Layout template

Building a Portal Centric Application Structure with WebCenter Support (Runtime Customisation)

Building the general structure of the page including global components

Building Cascading Menu Structure and attach to the template.

Building Application Pages with the template.

Where Can I Learn More About Application Development Framework?

Visit the Oracle ADF site on the Oracle Technology Network:
http://www.oracle.com/technetwork/developer-tools/adf.

Page 2 of 27

Building a Compound Application Centric Stretch Template

In this exercise you will be building a Multi-Region template, which has a Tabbed interface and
supports three levels of Site Hierarchy.

1. Building the Compound Application Centric projects

1.1. From the New Gallery create a new application MyCompoundApp using the
WebCenter Portal Application template,
Click [Next]
Note: Using the WebCenter Portal Template rather than the Fusion Application template will allow for
the easily adding runtime customisation functionality incorporate the Oracle Composer component for
runtime customisation (DT@RT Design Time At Run Time).

1.2. Rename the Project from Portal to ViewController,

Click [Next]
1.3. Rename the Default Package from portal to view,
Click [Next]
1.4. Un-Check the check-box Configure the application with standard Portal features

Click [Next]
Page 3 of 27

1.5. Rename the PortalWebAssets project to the more generic WebAssets,

Click [Finish]
1.6. Right-Click on the WebAssets project and select New from the context menu.
From the New Gallery / Categories create a new folder (General > Folder),
Click [OK]
Name Folder public_html,
Click [OK]
Note: This project is designed to hold the static resources of the application, such as
Images, JavaScript and CSS files. Generally these static components are
bundled and deployed with the application itself and hence the application server
handles requests for both dynamic and static content. One way to optimize
application server performance in a production system is to separate the static
resources from the application and deploy them on a different server.
This project is not part of the default Fusion Application Template, but allows for
future segregation of application components if required. In this exercise we will
keep the images under the Projects context root.
1.7. Create and Images folder under the Web Content folder of the ViewController
project.
1.8. At the Operating System copy the contents of the images directory in the Hands-On lab
to the Images folder created in the ViewController project.
Click the Refresh Button
see the files in JDeveloper.

on the Projects section header of the Application to

2. Building the Template

2.1. Create a new folder (General > Folder) named Templates under the Web Content
folder of the ViewController project.
2.2. Right-Click on the Templates Folder and select New.

2.3. In the New Gallery, under Categories > Web Tier select JSF Page Template.
Click [OK]
2.4. Name the Template File mcaStretchTemplate.jspx (this will also name the Template the
same name).

Page 4 of 27

2.5. Add the Following named Facets to the Facet Region of the wizard as shown (click the
Green Arrow to add each entry).
Facet Name
Content
PageFooter
GlobalMenu
SideBar

Description
Main Content Area
Page Footer Content
Application Wide Function Menu
Sidebar Region Content Area

2.6. Select the Attributes Tab and add an Attribute to hold the Page Title as shown below
Name

Type

PageTitle

java.lang.String

Default Value
My
Compound
Application

Required
No

Click [OK]
2.7. Drop a Panel Stretch Layout from the Resource Catalogue onto the design view.
Component Palette > ADF Faces (PopList) > Layout (Accordion Panel) > Panel Stretch Layout

2.8. Set the following Properties of the Panel Stretch Layout,

Property

Page 5 of 27

Value

StartWidth

0px

EndWidth

0px

TopHeight

145px

BottomHeight

30px

2.9. Building The Page Footer

2.9.1.

Drop a Panel Group Layout from the Resource Catalogue onto the Bottom
Facet of the Panel Stretch Layout added in the previous step (in the design view).
Component Palette > ADF Faces (PopList) > Layout (Accordion Panel) > Panel Group Layout

2.9.2. Set the following Properties of the Panel Group Layout,

Property

Value

Halign

center

Valign

bottom

Layout

vertical

StyleClass

AFStretchWidth

Note: StyleClass is under the Style and Theme sections. The Style Class
(AFStretchWidth) is a special class to account for differences in how the
various Browsers render 100% wide and should be used in place of
defining width=100%. The class name is CASE SENSITIVE
2.9.3.

Set the background image of the Panel Group Layout to make the Footer area
stand out more effectively.

2.9.4.

In the Style And Theme region of the Property Inspector, select the Fill Tab
(paint bucket icon).

2.9.5.

Click the chevron next to the Image Pop-List to bring up the Edit Menu.

2.9.6. Click Edit to bring up the Edit Property and Navigate to the Images folder under
the WebAssets Project. Select the swirlBkg.png file.
Click [OK],
Click [No] to the Image Location Problem dialog
Page 6 of 27

Note: As we are using the WebAssets project to store the static images
JDeveloper creates a URL with the absolute file path to the file. As such
update the URL to be a relative URL from the WebAssets project document
root (i.e. /Images/swirlBkg.png)
The InlineStyle property of the Panel Group should look similar to the
following
background-image:url("/Images/swirlBkg.png");
2.9.7. Drop a second Panel Group Layout onto the Panel Group Layout added above.
Note: This Panel will be used to centre the text in the Page Footer and will be the
location of the PageFooter facet defined in the template.
2.9.8. Set the following Properties of the Panel Group Layout,

2.9.9.

Property

Value

Halign

Center

Valign

Middle

Layout

Horizontal

Drop an Output Text component from the Resource Catalogue onto the Panel
Group Layout. Set the value = Copyright Y-Gen Co.

2.9.10. Drop a Spacer below the output text field in the Structure Pane.
2.9.11. Drop a Facet Ref from the Resource Catalogue onto the Panel Group LayoutHorizontal created in the previous step (in the design view).
Component Palette > ADF Faces (PopList) > Common Components (Accordion Panel) > Facet Ref

In the Insert Facet Ref dialogue box select the PageFooter facet from the drop
down list (exposes the facets defined in the Template).

Click [OK]

2.10. Building The Template Page Header

Page 7 of 27

2.10.1. Drop a Panel Group Layout from the Resource Catalogue onto the Top
Facet of the top level Panel Stretch Layout added previously.
2.10.2. Set the Layout Property of the Panel Group Layout to Vertical
2.10.3. Set the fill of the Panel Group to be the swirlBkg.png image (Similar to the Page
Footer section)

The InlineStyle property of the Panel Group should look similar to the following
background-image:url("/Images/swirlBkg.png");
2.10.4. Drop another Panel Group Layout from the Resource Catalogue into the
Panel Group Layout added in the previous step.
Set the Properties of the Panel Group as follows:
Property

Value

Layout

Horizontal

Valign

Top

Halign

End

styleClass

AFStretchWidth

2.10.5. Set the fill of the Panel Group to be the globalMenuBkg.png image.
The InlineStyle property of the Panel Group should look similar to the following
background-image:url("../Images/globalMenuBkg.png");
2.10.6. Drop a Status Indicator from the Resource Catalogue onto the Panel Group
Layout.
Component Palette > ADF Faces > Common Components > Status Indicator

2.10.7.

Drop a Spacer component from the Resource Catalogue onto the Panel
Group Layout.
Component Palette > ADF Faces > Layout > Spacer

Page 8 of 27

Note: This will allow for a separation from the GlobalMenu and the spinning O
status Indicator.
2.10.8.

Drop a Navigation Pane from the Resource Catalogue onto the Panel Group
Layout to the left of the Spacer (or above the Spacer in the Structure Pane).
Component Palette > ADF Faces > Layout > Navigation Pane

Set the Hint Property of the Navigation Pane to bar

Note: The Hint Property defines the style of the navigation items added to the
navigation pane. The available styles are Tab | Bar | Button | Link | Choice,
the default value is Tab.
2.10.9. Add four (4) Navigation Item components to the Navigation Pane, set the
following Properties on the Navigation Items (left to right) as follows;

Property

Nav Item # 1

Nav Item # 2

Nav Item # 3

Nav Item # 4

Text

Home

Profile

Help

Login

iconHelp.png

iconAuthNo.png

Icon

iconHome.png iconProfile.png

Notes: The Icon files are in the /Images/Icons directory.

As the Navigation Items are Global to the application, the Navigation
Cases (specified by the Action Property) could be added at this point in
the template design. However, for this exercise we will leave them
inactive.
2.10.10. Drop a Facet Ref from the Resource Catalogue onto the Structure Pane
above the Navigation Pane (or drop to the left of the Navigation Pane in the
Panel Group Layout-Horizontal in the design view)
Component Palette > ADF Faces (PopList) > Common Components (Accordion Panel) > Facet
Ref

In the Insert Facet Ref dialogue box select the Global Menu facet from the
drop down list (exposes the facets defined in the Template).

Page 9 of 27

2.10.11. Drop another Panel Group Layout in the middle of the Top Facet (below the
GlobalMenu Bar in the design view)
Set the Properties of the Panel Group as follows:
Property

Value

Layout

Horizontal

Valign

Top

Halign

Start

Height

80px

styleClass

AFStretchWidth

2.10.12. Drop 2 more Panel Group layouts into the horizontal Panel Group added in the
previous step (these are to hold the Logo and the Page Heading). Set the
properties of the two Panels as follows;
Property

Left PGL

Right PGL

Layout

Vertical

Vertical

Height

80px

80px

Width

33%

360px

Halign

Left

Center

Valign

Middle

Middle

2.10.13. Drop an Image Item from the Resource Catalogue onto the left-hand Panel
Group Layout added above. This will be the company Logo.
Component Palette > ADF Faces (PopList) > Common Components (Accordion Panel) > Image

Set the following properties on the image item;

Property
Source
Border-style
Page 10 of 27

Value
Gen-Y Logo.png
Ridge

2.10.14. Drop an outputFormatted component from the Resource Catalogue onto the
right-hand Panel Group Layout added above. This will hold the Page Title.
Component Palette > ADF Faces (PopList) > Common Components (Accordion Panel) > Output
Formatted

Set the following properties on the Output Formatted component;

Property
value

Value
#{attrs.PageTitle}

Font-family

Arial

Font-Size

XX-Large

Font-Style

Oblique

Text-Align

Center

Vertical-Align

Middle

Font-Weight

Bold

Color

Choose a colour (e.g.

Navy)

The PageTitle attribute defined in the Page Template creation is to be used for
the current Page Title (this allows for the designer to set the page title without
having to actually have access to the title portion of the page).
The Attribute can be accessed via the Expression Builder Dialogue as follows:

Now for the navigation components

Page 11 of 27

2.10.15. Drop another Panel Group Layout on to the top level Panel Group Layout in
the top Facet of the Panel Stretch Layout in the structure Pane. This should
then appear below the Logo/PageTitle in the design view.
Set the Properties of the Panel Group as follows:
Property

Value

Layout

Vertical

Valign

Bottom

Halign

Start

Background-Color

Menu

StyleClass

AFStretchWidth

2.10.16. Drop TWO (2) Navigation Pane components onto the Panel Group Layout in
the Structure Pane.
Component Palette > ADF Faces > Layout > Navigation Pane

Note: Due the rendering in the JDeveloper, the Navigation Panes may not
appear in the Design Layout. Having added the tabs/Bars there may be
insufficient space to show the Components (in the Top Facet) in the
design view, however they will appear in the runtime you may wish to
drill into the container by clicking the icon on the right of the Panel Group.

2.10.17. Set the Properties of the 2 Navigation Panes as follows:

Property

Top Navigation
Pane

Bottom Navigation
Pane

Hint

Tab

Buttons

BackgroundImage

TabBarBkgd.png

menubar.png

Valign

Middle

Middle

StyleClass

AFStretchWidth

AFStretchWidth

2.10.18. Drop Three (3) Navigation Item components onto the Top Navigation Pane to
create the high-level Tabs.

Page 12 of 27

Set the Text of the tabs to some temporary values to represent the top level of
the Site Structure;

Property

Nav Item # 1

Nav Item # 2

Nav Item # 3

Text

Tab 1

Tab 2

Tab 3

Icon

iconFolderOpen.png

iconFolderOpen.png

iconFolderOpen.png

2.10.19. Drop Four (4) Navigation Item components onto the Bottom Navigation Pane
to create the Sub-Tabs on the Page.
Set the Text of the Sub-Tabs to a temporary value to represent the second level
of the Site Structure.
Property

Nav Item #
1

Nav Item #
2

Nav Item #
3

Nav Item #
4

Text

Sub-Tab 1.1

Sub-Tab 1.2

Sub-Tab 1.3

Sub-Tab 1.4

The Template Body and Sidebar

The Main Body of the page is broken into three distinct areas:
A Sidebar containing page specific links (the third level in the Site Hierarchy) and
content that may not necessarily be tied to the current pages content (such as an
event calendar)
A Breadcrumb Bar indicating the location in the site hierarchy.
The Main Content Area which holds the page specific content.
2.11. Building The Side Bar
2.11.1. Drop a Panel Splitter from the Resource Catalogue onto the Center Facet
of the Panel Stretch Layout (in the design view).
Component Palette > ADF Faces (PopList) > Layout (Accordion Panel) > Panel Splitter

Set the Properties of the Panel Splitter as follows:

Page 13 of 27

Property

Value

SplitterPosition

140

FirstBorder

All

SecondBorder

All

StyleClass

2.11.2.

AFStretchWidth

Drop a Panel Group Layout onto the First facet of the Panel Splitter added
in the previous step.
Set the Properties of the Panel Group as follows:
Property
Layout
Backgroundcolor
Valign

2.11.3.

Value
Vertical
Menu
Top

Drop a Navigation Pane components onto the Panel Group Layout added to
the Sidebar (in the First facet of the Panel Splitter).
Set the Hint property to list.

2.11.4.

Drop Four (4) Navigation Item components onto the Navigation Pane in the
Sidebar to represent the Third Level of the Site Structure (Page Specific Links).
Set the Text of the links to a temporary value as shown below:
Property

Nav Item # 1

Nav Item # 2

Nav Item # 3

Nav Item # 4

Text

Link 1.1.1

Link 1.1.2

Link 1.1.3

Link 1.1.4

Icon

iconGotoLink.png

iconGotoLink.png

iconGotoLink.png

iconGotoLink.png

2.11.5. Add a Separator component below the Navigation Pane.

Component Palette > ADF Faces (PopList) > Layout (Accordion Panel) > Separator

2.11.6.

Drop a Facet Ref onto the side bar area, below the Spacer added in the previous
step. In the Insert Facet Ref dialogue box select the SideBar facet from the
drop down list.

2.12. Building the Page Body

Page 14 of 27

2.12.1. Drop a Panel Group Layout onto the Second facet of the Panel Splitter
added in the previous step.
Set the Properties of the Panel Group as follows:
Property

Value

Layout

Vertical

Valign

Top

Halign

Start

2.12.2. Drop another Panel Group Layout into Panel Group added in the previous step.
This will hold the Bread-Crumb Navigation links
Set the Properties of the Panel Group as follows:
Property
Layout

Value
Horizontal

Background-color

Menu

Halign

Start

StyleClass

AFStretchWidth

2.12.3. Drop a Spacer component onto the Panel Group Layout added in the previous
step.
Component Palette > ADF Faces > Layout > Spacer

2.12.4. Drop a Bread Crumbs component from the Resource Catalogue onto the
Panel Group Layout.
Component Palette > ADF Faces > Common Components > Bread Crumbs

2.12.5. Drop Three (3) Navigation Item components onto the Bread Crumbs
component represent the navigation of the Site Hierarchy (Links represent route to
current page in the Hierarchy).
Set the Text of the links to a temporary value as shown below:
Property
Text

Nav Item # 1

Nav Item # 2

Nav Item # 3

Tab 1

SubTab 1.1

Link 1.1.1

2.12.6. Add a Separator component below the Panel Group containing the Bread
Crumbs.
Component Palette > ADF Faces (PopList) > Layout (Accordion Panel) > Separator

Page 15 of 27

2.12.7.

Drop a Facet Ref onto the main section of the page, below the Spacer added in
the previous step.
In the Insert Facet Ref dialogue box select the Content facet from the drop
down list.

The Stretch Layout Template is now complete.

3. Building a page using the Compound Application Centric Template

3.1. Create a new folder (General > Folder) named Pages under the Web Content folder
of the ViewController project.
3.2. Right-Click on the Pages Folder and select New.
3.3. In the New Gallery, under Categories > Web Tier select JSF Page.
Click [OK]
3.4. Name the Template File mcaPage.jspx and make sure the Create as XML
Document Check-box is checked.
Select the Page Template Radio Button and select the mcaStretchTemplate option
from the Pop List.
Click [OK]
3.5. Right-Click the mcaPage.jspx file in the Application navigator and select Open from
the context menu.
Note: It is only possible to add content in the designer in the areas defined by the
Facets.
Add some content to the various Facets to show an instance of a page (eg. Add a Panel
Box to the side bar and some more images to the content area)
3.6. Right-Click the mcaPage.jspx file in the Application navigator and select run to view
the application running using the template.

Page 16 of 27

Building a Web Application Centric Flow Template

In this exercise you will be building a template that has the characteristics of many web sites.
That is, the content is located in a fixed size region in the middle of the page. Unlike the stretch
layout built in the previous exercise, it is the white space around the content that stretches
rather than the content itself.
Rather than using a nested Tab/Sub-Tab metaphor for the Site Hierarchy, this example will use
a cascading menu to allow direct access to the various levels of the Site (for this example we
will keep to the same three levels as the previous example).

1. Building the Web Application Centric projects

1.1. From the New Gallery create a new application MyWebApp using the WebCenter
Portal Application template,
Click [Next]
Note: As with the previous exercise the use of the WebCenter Portal template will allow for the adding
of complex runtime customisation functionality through the incorporation of the Oracle Composer
component (DT@RT Design Time At Run Time).

1.2. Rename the Project from Portal to ViewController,

Click [Next]
1.3. Rename the Default Package from portal to view,
Click [Next]
1.4. Confirm that the Configure the application with standard Portal features check
box is checked.
Click [Next]
1.5. Rename the PortalWebAssets project to the more generic WebAssets,
Click [Finish]
Note: The wizard will create a application structure that includes many of the resource
types required when building Extranet focused applications (such as a Portal),
these include the Navigation and Security Components.
Page 17 of 27

1.6. At the Operating System copy the contents of the images directory in the Hands-On lab
to the Images folder under the web content folder (public_html) of the ViewController
project.
Click the Refresh Button
see the files in JDeveloper.

on the Projects section header of the Application to

2. Building the Template

2.1. Right-Click on the Templates Folder under the Web Content area of the
ViewController project.
Web Content > oracle > webcenter > portalapp > pagetemplates
Select New.
2.2. In the New Gallery, under Categories > Web Tier > JSF select JSF Page
Template.
Click [OK]
2.3. Name the Template File mwaFlowTemplate.jspx
2.4. Add the Following named Facets to the Facet Region of the wizard as shown (click the
Green Arrow to add each entry).
Facet Name
Content
PageFooter
GlobalMenu

Description
Main Content Area
Page Footer Content
Application Wide Function Menu

2.5. Select the Attributes Tab and add an Attribute to hold the Page Title as shown below
Name

Type

Default Value

Required

PageTitle

java.lang.String

My Extranet Application

No

PageContentWidth

java.lang.String

1024px

No

Click [OK]

2.6. Building the Page Header & Page Body

Note: In the Flow Style layout, where the content is centred in a column in the page,
the Header may be seen as simply the topmost content in the column. In this
case there is no need to add the Header to a separate Facet of the Panel Stretch

Page 18 of 27

layout (though it is possible to add the header to Top facet and centre it
accordingly see section on the page footer).
2.6.1. Drop a Panel Stretch Layout from the Resource Catalogue onto the design
view.
2.6.2. Set the following Properties of the Panel Stretch Layout,
Property

Value

StartWidth

0px

EndWidth

0px

TopHeight

0px

BottomHeight

30px

2.6.3. Drop a Panel Group Layout onto the Center Facet of the Panel Stretch
Layout added in the previous step.
Set the Properties of the Panel Group as follows:
Property

Value

Layout

Scroll

Valign

Top

Halign

Center

2.6.4. Drop another Panel Group Layout into Panel Group added in the previous step.
This will be used to define the floating Column in the middle of the page.
Set the Properties of the Panel Group as follows:
Property

Value

Layout

Vertical

Valign

Top

Halign

Start

Width

#{attrs.PageContentWidth}

Note: Use the Expression Builder to set the Width of the panel group space to
be that reflected in the template attribute PageContentWidth as shown
in the following figure.

Page 19 of 27

2.6.5. Drop another Panel Group Layout into Panel Group added in the previous step.
This will be used to define the Page Header section of our page.
Set the Properties of the Panel Group as follows:
Property

Value

Layout

Vertical

Valign

Top

Halign

Start

Background-image

swirlBkg.png

2.6.6. Drop another Panel Group Layout into Panel Group added in the previous step.
This will be used to allow the Global Menu Bar to be Right-Justified in the Page
Header.
Set the Properties of the Panel Group as follows:
Property

Value

Layout

Vertical

Valign

Top

Halign

End

2.6.7. Drop another Panel Group Layout into Panel Group added in the previous step.
This will be used to hold the Global Menu section at the top of the page.
Set the Properties of the Panel Group as follows:

Page 20 of 27

Property

Value

Layout

Horizontal

Valign

Middle

Halign

End

StyleClass

AFStretchWidth

2.6.8. Set the fill of the Panel Group to be the globalMenuBkg.png image.
The InlineStyle property of the Panel Group should look similar to the following
background-image:url("../Images/globalMenuBkg.png");
2.6.9.

Drop a Status Indicator from the Resource Catalogue onto the Panel Group
Layout Horizontal added previously
Component Palette > ADF Faces > Common Components > Status Indicator

2.6.10.

Drop a Spacer component from the Resource Catalogue onto the Panel
Group Layout.
Note: Allowing for a separation from the GlobalMenu and the spinning
status Indicator.

2.6.11.

Drop a Navigation Pane from the Resource Catalogue onto the Panel Group
Layout to the left of the Spacer (or above the Spacer in the Structure Pane).
Component Palette > ADF Faces > Layout > Navigation Pane

Set the Hint Property of the Navigation Pane to bar

Note: The Hint Property defines the style of the navigation items added to the
navigation pane. The available styles are Tab | Bar | Button | Link | Choice,
the default value is Tab.
2.6.12. Add four (4) Navigation Item components to the Navigation Pane, set the
following Properties on the Navigation Items (left to right) as follows;

Property

Nav Item # 1

Nav Item # 2

Nav Item # 3

Nav Item # 4

Text

Home

Profile

Help

Login

iconHelp.png

iconAuthNo.png

Icon

Page 21 of 27

iconHome.png iconProfile.png

2.6.13. Drop a Facet Ref from the Resource Catalogue onto the Structure Pane above
the Navigation Pane (or drop to the left of the Navigation Pane in the Panel Group
Layout-Horizontal in the design view)
In the Insert Facet Ref dialogue box select the Global Menu facet from the
drop down list (exposes the facets defined in the Template).

2.6.14. In the Structure Pane drop another Panel Group Layout onto the Panel Group
that defines the Page Header Section (step 2.6.5). This will allow for the Logo and
Page Title to be added to the page
Set the Properties of the Panel Group as follows:
Property

2.6.15.

Layout

Horizontal

Valign

Top

Halign

Start

Height

80px

styleClass

AFStretchWidth

Drop 2 more Panel Group layouts into the horizontal Panel Group added in the
previous step (these are to hold the Logo and the Page Heading). Set the
properties of the two Panels as follows;
Property

Page 22 of 27

Value

Left PGL

Right PGL

Layout

Vertical

Vertical

Height

80px

80px

Width

33%

360px

Halign

Left

Center

Valign

Middle

Middle

2.6.16. Drop an Image Item from the Resource Catalogue onto the left-hand Panel
Group Layout added above. This will be the company Logo.
Component Palette > ADF Faces (PopList) > Common Components (Accordion Panel) > Image

Set the following properties on the image item;

Property
Source
Border-style

Value
Gen-Y Logo.png
Ridge

2.6.17. Drop an outputFormatted component from the Resource Catalogue onto the
right-hand Panel Group Layout added above. This will hold the Page Title.
Component Palette > ADF Faces (PopList) > Common Components (Accordion Panel) > Output
Formatted

Set the following properties on the Output Formatted component;

Property
value
Font-family

Value
#{attrs.PageTitle}
Arial

Font-Size

XX-Large

Font-Style

Oblique

Text-Align

Center

Vertical-Align

Middle

Font-Weight

Bold

Color

Choose a colour (e.g.

Navy)

The PageTitle attribute defined in the Page Template creation is to be used for
the current Page Title (this allows for the designer to set the page title without
having to actually have access to the title portion of the page).
2.6.18. Drop another Panel Group Layout on to the header section. This should then
appear below the Logo/PageTitle in the design view.
Set the Properties of the Panel Group as follows:

Page 23 of 27

Property
Layout

Vertical

Valign

Bottom

Halign

Start

Background-image

2.6.19.

Value

globalMenuBkg.png

Drop a Panel Menu Bar component from the Resource Catalogue onto the
Panel Group Layout defined in the previous step
Component Palette > ADF Faces > Common Components > Panel Menu Bar

2.6.20.

Create a simple static menu structure to indicate the various levels of the
Hierarchy in the Site Structure (while this is static, the conversion to a dynamic
menu generation will be shown in the Navigation session)
2.6.20.1. Drop Three (3) Menu components from the Resource Catalogue
onto the Panel Group Layout defined in the previous step.
Component Palette > ADF Faces > Common Components > Menu

Note: These represent the Top Level in the Hierarchy (level-0)

2.6.20.2. Drop Two (2) Menu components onto each of the Menu Components
added to the Panel Menu Bar.
Note: These represent the second Level in the Hierarchy (level-1)
2.6.20.3. Drop Three (3) Menu Item components onto each of the Level-1
Menu Components to add the actual Page Navigation Links.
2.6.20.4. Set the Text of the various Menu components to represent the Site
Hierarchy. For example;

Lvl 0

Menu 1
Lvl 1

Menu 1.1
Lvl 2

Menu 1.1.1

Lvl 2

Menu 1.1.2

Lvl 1

Etc

Page 24 of 27

Menu 1.2
Lvl 2

Menu 1.2.1

Lvl 2

Menu 1.2.2

2.6.21. Drop another Panel Group Layout below the Header section Panel Group
Layout (the panel that represents the Page Content column).
Set the Properties of the Panel Group as follows:
Property

2.6.22.

Value

Layout

Vertical

Valign

Top

Halign

Start

Drop a Facet Ref onto the Panel Group added in the previous step.
In the Insert Facet Ref dialogue box select the Content facet from the drop
down list.

2.7. Building The Page Footer

2.7.1.

Drop a Panel Group Layout onto the Bottom Facet of the Panel Stretch
Layout initially added to the page. This Panel group is used to center the Page
Footer under the Content Column in the main page section.
Set the following Properties of the Panel Group Layout,

Property

Value

Halign

center

Valign

bottom

Layout

vertical

2.7.2. Drop another Panel Group Layout into Panel Group added in the previous step.
This will be used to define the Page Footer that lines up with the Column in the
middle of the page.
Set the Properties of the Panel Group as follows:

Page 25 of 27

Property

Value

Layout

Horizontal

Valign

middle

Halign

center

Width

#{attrs.PageContentWidth}

Background-image

swirlBkg.png

2.7.3. Drop a Output Text component from the Resource Catalogue onto the Panel
Group Layout. Set the value = Copyright Y-Gen Co.
2.7.4. Drop a Spacer below the output text field in the Structure Pane.
2.7.5. Drop a Facet Ref from the Resource Catalogue onto the Panel Group LayoutHorizontal created in the previous step.
In the Insert Facet Ref dialogue box select the PageFooter facet from the drop
down list.

Click [OK]
The Template is Complete

3. Building a page using the Web Application Centric Template

3.1. Right-Click on the Pages Folder under the Web Content directory tree and select
New.
3.2. In the New Gallery, under Categories > Web Tier select JSF Page.
Click [OK]
3.3. Name the page File mwaPage.jspx and make sure the Create as XML Document
Check-box is checked.
Select the Page Template Radio Button and select the mwaFlowTemplate option
from the Pop List.
Click [OK]
3.4. Right-Click the mwaPage.jspx file in the Application navigator and select Open from
the context menu.
Note: It is only possible to add content in the designer in the areas defined by the
Facets.
Add some content to the various Facets to show an instance of a page (e.g. Add a
Panel Box and some more images to the content area)

Page 26 of 27

3.5. As the Application was developed using the WebCenter Application template, Page
security is automatically turned on. As such, we need to add the newly created page to
our default security Policy.
Right click on the pages.xml file under the pageHierarchy node and select Open
Web Content > oracle > webcenter > portalapp > pagehierarchy

3.6. Drag the mwaPage.jspx file from the Application Navigator and drop it onto the root
node of the Page Hierarchy (this allows the page to inherit the default access polices).
3.7. Right-Click the mwaPage.jspx file in the Application navigator and select run to view
the application running using the template.

This finishes the Template Hands-On exercises. In a subsequent session, the static
Tabs and Menu Structures will be replaced with dynamically rendered Navigation
components using both an XML-Menu Model and a WebCenter Navigation Model.

Page 27 of 27