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.


4 Responses

  1. Hey Peter,
    I am following the “Tutorial for WebCenter Developers” and have some questions.

    After completing the tutorial up to Section 5, Step 1, #11… the Default skin and the Tutorial Skin are both unchecked and unavailable. I can make the them available during run-time by selecting them and then selecting Edit > Show, but this should not be the case.

    Also, after continuing to Section 6, Step 1, #13… when right-clicking in home.jspx the context menu does not appear as in the tutorial. I do not know how what the correct parameters are to simply drag-and-drop the Documents-Content Presenter into the .jspx.

    Can you please respond via email or post a blog with screen shots on how to complete these steps in the tutorial?

    Thank you!


  2. I have another question about the attribute width:#{attrs.contentWidth};

    Can you provide an example of how the width of a page would be set and fixed with this attribute? I’m looking in the tutorial and the structure is:
    af:panelGroupLayout – scroll > af:panelGroupLayout – vertical

    af:panelGroupLayout – vertical has the width set to contentWidth, but none of its children has a fixed width.

  3. Hello Peter,

    how do I change content height. The template has contentWidth parameter only.

  4. i need to display the spaces in a tabbed manner to the user how do i do it

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: