Professional Documents
Culture Documents
Page 1 of 27
Building a Portal Centric Application Structure with WebCenter Support (Runtime Customisation)
Page 2 of 27
Click [Next]
Page
3
of
27
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
Page 5 of 27
Value
StartWidth
0px
EndWidth
0px
TopHeight
145px
BottomHeight
30px
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
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]
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
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
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
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
Value
#{attrs.PageTitle}
Font-family
Arial
Font-Size
XX-Large
Font-Style
Oblique
Text-Align
Center
Vertical-Align
Middle
Font-Weight
Bold
Color
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:
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.
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
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.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.
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.
Page 16 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.
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]
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
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
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
Value
#{attrs.PageTitle}
Arial
Font-Size
XX-Large
Font-Style
Oblique
Text-Align
Center
Vertical-Align
Middle
Font-Weight
Bold
Color
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
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.
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
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