P3.3 PortalFrameworkPageTemplates

Oracle Restricted and Confidential – Internal Only
Oracle Online Training Materials – Usage Agreement

Use of the information, documents and online training courses (collectively, “Materials”) found on this area of the Site constitutes
agreement with the following terms and conditions (as well as those set forth in the Purpose and Disclaimer sections below):
1. Oracle is pleased to allow its business partner (“Partner”) to download the Materials found on this area of the Site. The Materials
provided on or through this area of the Site are confidential to Oracle and protected by intellectual property laws, and provided to Partner
under and pursuant to the terms, conditions and restrictions of Partner’s agreement with Oracle to participate in the applicable beta
program pertaining to the Software (as defined below) (“Beta Trial License Agreement”), as well as any additional terms, conditions and
restrictions set forth in any area of this Site or in any Materials provided on or through this Site. In the event of any conflict or
inconsistency between the terms, conditions and restrictions set forth in the Beta Trial License Agreement and those set forth in any area
of this Site on in any Materials provided on or through this Site, the former shall have precedence with respect to Partner’s access and
use of the Site and Materials, provided, however, that notwithstanding anything to the contrary in the Beta Trial License Agreement,
Partner will restrict access to and disclosure of Materials only to its employees who require access to Materials in connection with the
Beta Trial License Agreement.
2. Oracle is a registered trademark of Oracle Corporation and/or its affiliates. Other names may be trademarks of their respective
owners.
3. Oracle disclaims any warranties or representations as to the accuracy or completeness of any Materials. Materials are provided "as
is" without warranty of any kind, either express, implied or statutory, including without limitation the implied warranties of merchantability,
satisfactory quality, fitness for a particular purpose, accuracy, timeliness and non-infringement of third-party rights. The information
contained herein is subject to change without notice.
4. Under no circumstances shall Oracle be liable for any loss, damage, liability or expense incurred or suffered which is claimed to have
resulted from use of these Materials. As a condition of use of the Materials, Partner agrees to indemnify Oracle from and against any and
all actions, claims, losses, damages, liabilities and expenses (including reasonable attorneys' fees) arising out of Partner’s use of the
Materials.

Oracle WebCenter 11g PS3 Workshop
<Insert Picture Here>
Page Templates
Presenter name | Oracle Platform Technology Services
Agenda
• Working with Page Templates

• Creating HTML-based Templates
• Creating Navigation UI

Page Templates in a WebCenter Portal
• A page template controls the layout and common content

of portal pages.
• Page template can be a portal resource:
Created, edited, uploaded, or downloaded at run time
using the Resource Manager

Working with Templates and Pages
Design Time
Create, Edit Template

Design Time
MDS Page Template

Resources Create Portal Resource
Export Portal Resource

Preference
Bean
Import Portal Resource
Change Default
Create Page
Portal Resource
(EAR, MAR)

Working with Templates and pages
Run Time
Create, Edit Template

Design Time
MDS Page Template

Resources Create Portal Resource
Export Portal Resource

Preference
Bean
Import Portal Resource
Change Default
Create Page
Portal Resource
Deploy, Run
(EAR, MAR)
MDS Page Template

Run Time
Resources
Preference
Bean
Create, Upload Template
Change Default
Edit Template
Create Page Download Template

Creating a Template
Design Time
• Create under
/oracle/webcenter/portalapp/pagetemplates

Creating a Template
Design Time
• Name the template

file name and template name can be different
do not use spaces in names
• Create page definition
• Create content facet
• You might create
attributes

Structure of a Page Template
<?xml version='1.0' encoding='UTF-8'?>

<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
... Tag libraries
xmlns:cust="http://xmlns.oracle.com/adf/faces/customizable">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<af:pageTemplateDef var="attrs">
<af:xmlContent>
<component xmlns="http://xmlns.oracle.com/adf/faces/rich/component">
<display-name>CorporateTemplate</display-name> Template name
<facet><facet-name>content</facet-name></facet>
Facet definition
<attribute>
<attribute-name>contentWidth</attribute-name>
Attributes
<attribute-class>java.lang.String</attribute-class>
<default-value>960px</default-value>
</attribute>
...
</component>
</af:xmlContent>
Content
<af:facetRef facetName="content"/>
</af:pageTemplateDef>
</jsp:root>

Template attributes
• Define attributes with default value in the template

• Default can be overridden, when the template is used
• Attributes in the OOTB template
contentWidth 960px
showNavigation #{true}
showGreetings #{securityContext.authenticated}
showLogin #{true}
showAdmin #{WCSecurityContext.userInAppRole['Administrator']}
isAdminPage #{false}
isEditingTemplat #{false}
e
• Refer to an attribute: #{attrs.contentWidth}

Page Template as Portal Resource
Menu on the template file

• Create Portal Resource
• Update, Remove Portal Resource
• Export Portal Resource
Menu on the project
• Import Portal Resource
Portal resource
• is packed in an EAR file
• that contains a MAR file
• that contains all the corresponding files under /oracle folder

Template Content
• Must refer to the content facet:

<af:facetRef facetName="content"/>
• Must not have PageCustomizable tag,
if needed, it has to be added to the pages.
• May have PanelCustomizable tag,
if the template itself is editable at run time.
• Hide the template content, except the facet reference,
when editing the page:
rendered = "#{!composerContext.inEditMode or
attrs.isEditingTemplate}"

Working with Templates
Run Time
• Use: Administration > Resources > Page Templates

Creating Pages
Design Time
• Create under
/oracle/webcenter/portalapp/pages
• Choose a template

Structure of a Page
<?xml version='1.0' encoding='UTF-8'?>

<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
Tag libraries
....
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document id="d1">
<af:form id="f1">
<af:pageTemplate Template ref
viewId="/oracle/webcenter/portalapp/pagetemplates/CorporateTemplate.jspx"
value="#{bindings.pageTemplateBinding}" id="pt1">
<f:attribute name="contentWidth" value="1000px"/> Define attributes
<f:facet name="content">
Page Content
</f:facet>
</af:pageTemplate>
</af:form>
</af:document>
</f:view>
</jsp:root>

Editable page
• If the page has to be editable at run time, add at least a

PageCustomizable and PanelCustomizable.
• Optionally you can add LayoutCustomizable as well.
<pe:pageCustomizable id="pageCustomizable1">
<pe:layoutCustomizable id="layoutCustomizable1"
type="twoColumnNarrowRight"
showIcon="false">
<cust:panelCustomizable id="panelCustomizable1"/>
<f:facet name="contentA">
</f:facet>
<f:facet name="contentB">
</f:facet>
</pe:layoutCustomizable>
<f:facet name="editor">
<pe:pageEditorPanel id="pep1"/>
</f:facet>
</pe:pageCustomizable>

Using the Default Template
By default, a page refers to a hard-coded template. To use a template

through the preference bean:
• Change in page.jspx
<af:pageTemplate value="#{bindings.pageTemplateBinding.templateModel}" id="pt1">
• Change in pageDef.xml
<page viewId="${preferenceBean.defaultPageTemplate} "
id="pageTemplateBinding" Refresh="ifNeeded"/>
Set default template at design time

• Change in adf-config.xml
<portal:preference
id="oracle.webcenter.portalapp.pagetemplate.pageTemplate“
desc="Default Page Template“
value="/oracle/webcenter/portalapp/pagetemplates/CorporateTemplate.jspx"
resourceType="Template" display="true"/>

Creating Pages
Run Time
• Use Resource Manager
• Choose template
• You can choose default
(application page) template
• Choose page style

Agenda


Page Templates, Pages in HTML
Using HTML, CSS, JavaScript
ADF UI (Layout) components:

• Not enough experienced developers
• ADF and HTML layout paradigm very different
• Occasionally weird, unpredictable behavior
Web page development in HTML, CSS, and JavaScript is well
established.
• Popular JavaScript libraries
• Popular design tools
Mixing HTML and ADF tags
• JSF 1.2 allows HTML tags embedded in JSF pages

Tips and Tricks (1)
• Add plain HTML tags, result must be well-formed XML:

• <br />
• <![CDATA[ … ]]>
• Use JSTL tag library
• Add to project tag libraries
• Add to namespace definition
<jsp:root …
xmlns:c="http://java.sun.com/jsp/jstl/core" …>
• EL expressions are evaluated throughout the HTML tags
• Use immediate evaluation: ${…}, not deferred: #{…}
<table width="${attrs.contentWidth}">

Tips and Tricks (2)
• Create session variables:

<c:set
var="contextRoot"
value="${facesContext.externalContext.requestContextPath}"
scope="session"/>
• Conditional rendering
• JSTL if tag
<c:if test="…"> … </c:if>
• JSTL choose tag
<c:choose>
<c:when test="…"> … </c:when>
<c:when test="…"> … </c:when>
<c:otherwise> … </c:otherwise>
</c:choose>

Tips and Tricks (3)
• Formatted output
<span style="font-size:24px;font-color:red;"> … </span>
<span class="DropDown"> … </span>
• Display value of an EL expression

<c:out value="Welcome ${securityContext.userName}" />
• Generate HTML based on EL expression

<c:out
escapeXml="false"
value="… escaped HTML tags and EL expression …" />
< < > > " " …

Tips and Tricks (4), JavaScript
• Instead of HTML <script> tag, use <af:resource …>

• Code is placed in the <head> section
• Source location is context-root relative
• Examples
<af:resource type="javascript" source="/js/popup.js"/>
<af:resource type="javascript"
source="http://www.google.com/jsapi"/>
<af:resource type="javascript">
google.load("jquery", "1.4");
</af:resource>
• Use <script> if you need to execute code in the <body>
section

Tips and Tricks (5), CSS
• As with JavaScript files, instead of HTML <style> tag,

use <af:resource …>
• Examples:
<af:resource type="css" source="/css/menu.css" />
<af:resource type="css">
.DropDown {
padding-left:10px;
padding-right:12px;
background-image:url("${contextRoot}/afr/dropdown_n.png");
background-position:right;
background-repeat:no-repeat;
cursor:pointer;
}
</af:resource>

Tips and Tricks (6), Context Root
• All WebCenter Portal (ADF) applications deployed to WLS with a

context root.
• In page template or page:
• Use context-root relative ADF tags
<af:resource src="…" />
<af:image source="/images/globalhelp.gif" />
• USE EL expression:
<img src="${contextRoot}/images/elpiju_logo.png" />
• In external pages (JavaScript, CSS) use relative path
MyBox{
…
background:#ffff url(../images/topcorners.gif) no-repeat;
… }

Simple Template Example
<c:set var="contextRoot"
value="${facesContext.externalContext.requestContextPath}"
scope="session"/> Session variable
<table width="${attrs.contentWidth}"> Use attribute


Hide template
<c:if test="${!composerContext.inEditMode or attrs.isEditingTemplate}">
<tr>
<td width="200"><img src="${contextRoot}/images/elpiju_logo.png" /></td> Context root
<td align="right"><span style="font-size:24px; font-weight:bold;">Acme Corporation</span></td>
</tr>
</c:if>

<tr>
<td colspan="2"><af:facetRef facetName="content"/></td> Content facet
</tr>

<c:if test="${!composerContext.inEditMode or attrs.isEditingTemplate}">
<tr>
<td colspan="2">... footer ...</td>
</tr>
</c:if>
</table>

Packaging Templates
• Page template typically refers to external files: images,

JavaScript, CSS.
• Exporting a site resource bundles the template JSPX and
page definition files.
• Where to place and how to package the additional files:
• Place under the context root
• Deploy separately
• Use the shared folder

Agenda


Navigation Model
Overview
• The navigation model defines the content, structure, and

metadata of the navigation of your site.
• Navigation models can include
• Individual pages, page hierarchies
• External links
• Content items, content queries
• Task Flows, Portlets, External Applications
• Custom elements
• Navigation elements have properties
• Id, Visible flag
• Element specific properties (url, path, query, …)
• Attributes (title, description, …), custom attributes

Navigation Model
Create
• Navigation Models stored in

/oracle/webcenter/portalapp/navigations folder
• There is a default navigation model, but you can create
additional ones.
• Use New > Portal > Navigation wizard
• Navigation model can be a portal resource.

Navigation Model
Populate
• Open model XML file in Design Mode
• Add Elements from drop-down menu

• Use drag-and drop for pages, content items, portlets, …
• Define properties, attributes

Page Hierarchy
Overview
• Page hierarchy defines a a tree-like hierarchy of JSF

pages.
• Stored in /oracle/webcenter/portalapp/pagehierarchy
• Main file: pages.xml
• For pages with subpages: pages folder
• Used for:
• Navigation
• Defining access rights

Page Hierarchy
Populate
• Open pages.xml file in design mode.

• Drag-and-drop files
• Set properties (id, title, visible), access rights

Rendering the Navigaton Model
Overview
• Navigation Model can be rendered on a page template or

a page to provide access to navigation items.
• Use:
• Predefined task flows
• Navigation API
• Predefined task flows:

• Tree, Menu or Breadcrumb rendering
• Drop task flow from WebCenter Portal Catalog > Navigation
• Define TF parameters, like:
navigationFile, startNode, style, …

Navigation Model API
• Navigation Model is represented at run time by a data

structure based on Java Beans:
oracle.webcenter.portalframework.sitestructure.SiteStructureResource
• EL expressions provide
• Iteration
• Navigation
• Attribute access
for the navigation model data structure.

Navigation Model API
EL Expressions
Get navigation model #{navigationContext.defaultNavigationModel}

#{navigationContext.navigationModel['model_path']}
Get nodes #{model.listModel['startNode=/, includeStartNode=false']}
Navigate the tree #{node.parent}
#{node.children}
#{node.children[n]}
#{node.siblings}
#{node.depth}
Get properties #{node.title}
#{node.path}
#{node.externalURL}
#{… node.navigable ? … : …}
Get the identifying path #{node.prettyUrl}
Get node attributes #{node.attributes['Description']}
identifying path

Example
Simple Two Level Navigation (1)
We have created a navigation model: MainNavigation

• On the root level there can be
• Folders
• Page Links
• On the second level, only links
Display this model:

• Folders as texts
• Page Links as HTML Links
• Second level links should be indented.

Example
Simple Two Level Navigation (2)
<c:set var="rootNodes"
value="${navigationContext.navigationModel['/oracle/webcenter/portalapp/
navigations/MainNavigation'].listModel['startNode=/, includeStartNode=false']}"
scope="session"/> Get root nodes from the model
<c:forEach var="node" items="${rootNodes}"> Iterate through root nodes

<c:choose>
<c:when test="${node.navigable}">
<a href="${node.prettyUrl}">${node.title}</a> Display link with URL and title
</c:when>
<c:otherwise>${node.title}</c:otherwise> Display title as text
</c:choose>
<br/>
<c:set var="subNodes" value="${node.children}" Get node’s children or empty
scope="session"/>
<c:forEach var="sNode" items="${subNodes}"> Iterate through sub-nodes
<c:out value="  "/>
<a href="${node.prettyUrl}">${sNode.title}</a><br/>
Display indented link
</c:forEach>
</c:forEach>

Example
Two Level Navigation with Pop-Up (1)
• Use JavaScript and CSS to transform the previous

navigation to a menu bar with pop-up second level links.

Example
1
<c:set var="rootNodes"
value="${navigationContext.navigationModel['/oracle/webcenter/portalapp/
navigations/MainNavigation'].listModel['startNode=/, includeStartNode=false']}"
scope="session"/>
<c:forEach var="node" items="${rootNodes}">

<c:choose>
<c:when test="${node.navigable}">
<a href="${node.prettyUrl}">${node.title}</a>
</c:when>
<c:otherwise>${node.title}</c:otherwise>
2
</c:choose>
<br/> 3
<c:set var="subNodes" value="${node.children}"
scope="session"/> 4
<c:forEach var="sNode" items="${subNodes}">
<c:out value="  "/>
<a href="${node.prettyUrl}">${sNode.title}</a><br/>
</c:forEach>
</c:forEach>

Example
1 Use CSS library, that pops up a <div> tag

<af:resource type="javascript" source="/js/popup.js"/>
Define styles for the drop-down link and pop-up menu

<af:resource type="css">
.DropDown {
padding-left:10px;
padding-right:12px;
background-
image:url("${facesContext.externalContext.requestContextPath}/afr/dropdown_n.png");
background-position:right;
background-repeat:no-repeat;
cursor:pointer;}
.PopupDiv {
border: 1px solid black;
padding: 2px 10px;
background-color: white;
text-align: left;
width: auto;
display: none;}
</af:resource>

Example
2 Add an active text to show the pop-up menu, if needed

<c:when test="${! empty node.children}">
<span class="DropDown"
onclick="Popup.show('${node.title}_Menu', this, 'below right');return false;">
${node.title}
</span>
</c:when>
3 Use horizontal spacing instead of new line (<br>)

<c:out value="  "/>
4 Surround second level links with pop-up <div>

<div id="${node.title}_Menu" class="PopupDiv" >
…
</div>

The preceding is intended to outline our general
product direction. It is intended for information
purposes only, and may not be incorporated into any
contract. It is not a commitment to deliver any
material, code, or functionality, and should not be
relied upon in making purchasing decisions.
The development, release, and timing of any
features or functionality described for Oracle’s
products remains at the sole discretion of Oracle.

P3.3 PortalFrameworkPageTemplates

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

P3.3 PortalFrameworkPageTemplates

Uploaded by

Copyright:

Available Formats

Oracle Restricted and Confidential – Internal Only

Oracle Online Training Materials – Usage Agreement

Oracle Restricted and Confidential – Internal Only

<Insert Picture Here>

• Working with Page Templates

Oracle Restricted and Confidential – Internal Only

• A page template controls the layout and common content

Oracle Restricted and Confidential – Internal Only

Create, Edit Template

MDS Page Template

Export Portal Resource

Oracle Restricted and Confidential – Internal Only

Create, Edit Template

MDS Page Template

Export Portal Resource

MDS Page Template

Create Page Download Template

Oracle Restricted and Confidential – Internal Only

Oracle Restricted and Confidential – Internal Only

• Name the template

Oracle Restricted and Confidential – Internal Only

<?xml version='1.0' encoding='UTF-8'?>

Oracle Restricted and Confidential – Internal Only

• Define attributes with default value in the template

• Refer to an attribute: #{attrs.contentWidth}

Oracle Restricted and Confidential – Internal Only

Menu on the template file

Oracle Restricted and Confidential – Internal Only

• Must refer to the content facet:

Oracle Restricted and Confidential – Internal Only

• Use: Administration > Resources > Page Templates

Oracle Restricted and Confidential – Internal Only

Oracle Restricted and Confidential – Internal Only

<?xml version='1.0' encoding='UTF-8'?>

Oracle Restricted and Confidential – Internal Only

• If the page has to be editable at run time, add at least a

Oracle Restricted and Confidential – Internal Only

By default, a page refers to a hard-coded template. To use a template

Set default template at design time

Oracle Restricted and Confidential – Internal Only

• Use Resource Manager

Oracle Restricted and Confidential – Internal Only

• Working with Page Templates

Oracle Restricted and Confidential – Internal Only

ADF UI (Layout) components:

Mixing HTML and ADF tags

• JSF 1.2 allows HTML tags embedded in JSF pages

Oracle Restricted and Confidential – Internal Only

• Add plain HTML tags, result must be well-formed XML:

Oracle Restricted and Confidential – Internal Only

• Create session variables:

Oracle Restricted and Confidential – Internal Only

• Display value of an EL expression

• Generate HTML based on EL expression

< &lt; > &gt; " &quot; …

Oracle Restricted and Confidential – Internal Only

• Instead of HTML <script> tag, use <af:resource …>

Oracle Restricted and Confidential – Internal Only

• As with JavaScript files, instead of HTML <style> tag,

Oracle Restricted and Confidential – Internal Only

• All WebCenter Portal (ADF) applications deployed to WLS with a

Oracle Restricted and Confidential – Internal Only

<table width="${attrs.contentWidth}"> Use attribute

Oracle Restricted and Confidential – Internal Only

< < > > " " …