Mitkees & Webcenter

Into the charm of Oracle Webcenter and ADF

Best practice to develop webcenter template

What is webcenter template?

Webcenter template is webpage that is developed to draw the hierarchy and components of any website. It is a jspx page which includes can be implemented using ADF, JSF even HTML more over we can add javascript code.

The best advantage of webcenter templates that it can be implemented using ADF and webcenter components, where we can add customizable panels which enable runtime editing.

The main sections of a template are

  1. Header
  2. Navigation
  3. Content
  4. Footer

1.     Header

Most of the time headers have logos, administrative and preference links.

The best practice to build a panel group layout –vertical and insert a panel border layout which has these faces

  • Start: to add the title to the application and logo
  • End: to add the search and administrative links
  • Top
  • Bottom: sometime used to add search or tags.
  • Center

2.     Navigation

There are different approaches for the navigation

  • Top navigation
  • Side navigation
  • Both

To add the top navigation will be directly after the header tag, but if we want it side navigation will be in the start facet of the content.

Navigation can be either the ootb taskflow of webcenter or custom view of navigation where you can style it using css  ; it can be jstl or html.

3.     Content

It is a reference tag into the template <af:facetRef facetName=”content”/> which enables webcenter engine to render the pages content inside this tag.

If the navigation is side navigation it will be in the start facet then the refrence tag will be added after it in the center facet of the panelborder layout.


There are different user interface approaches for the scrolling of the page:

  • Scrolling across the whole page
  • Scrolling through the content only and the header and footer are always fixed.

4.     Footer

Most of the time has some other preference links.

  • Additional steps:
  1. To add js code use af:resource tag, client listener to call the js functions
  2. Use the page attribute to fix the width and height.
  3. Use the template to load jquery library .

One response to “Best practice to develop webcenter template

  1. MK July 14, 2013 at 12:11 am

    I have a small problem with an url of a site in localhost, can you help me please?

Leave a Reply

Please log in using one of these methods to post your comment: 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: