Mastering WebCenter Portal Templates – Part 1

One of the best ways to get started with the WebCenter Portal Framework is taking a close look at what the source code of out-of-the-box page templates. When you create a new WebCenter Portal Application, two similar templates are generated for you:pageTemplate_globe.jspx and pageTemplate_swooshy.jspx.

The context root

Sometimes it comes handy to get a hold of the context root. In this snippet you see the context root (requestContextPath) used to render the logo in the banner. Also, you see an EL on the rendered attribute of the component, indicating that the logo doesn’t render when the page or the template is being edited.

<af:panelBorderLayout id="pt_pgl1"
 rendered="#{!composerContext.inEditMode or attrs.isEditingTemplate}"

Template attributes

The template attributes provide a convenient way for the page to pass some contextual information to the template. For instance in the example below the page width is passed to the template by the page.

<af:panelGroupLayout id="pt_pgl2" layout="vertical"
 inlineStyle="width:#{attrs.contentWidth};margin: 0 auto;">

The attribute is defined on the bottom of the template. Notice the default value, in case the page doesn’t specify the value of the attribute.


In this example it’s not the page passing information to the template, it’s a shorthand: if the user is authenticated, the greeting will be displayed, otherwise it won’t.

<af:outputText id="pt_ot1"
 value="Welcome #{securityContext.userName}"
 inlineStyle="color:White; font-size:small;"

The definition of the showGreetings attribute is again, defined in the bottom of the page template.


Getting Started with Oracle WebCenter

webcenterframeworkI shot a quick screen cast showing what it takes to install the WebCenter Design Time environment, often referred to as WebCenter Framework. I hope it helps you get started.
webcentertutorialAfter successful installation, you can give the WebCenter Tutorial a try. It walks you through the steps of building a simple, but functional WebCenter application.