ADF RC: Page Templates

person Bijeshfolder_openUncategorizedaccess_time February 22, 2008

Page Templates allow you to create a uniform look and feel across the application. ADF RC ships with a built-in three column layout that uses good uses of resize-able and hide-able panel splitters. You can create a page template from the New Gallery. The template’s layout is defined with the af:pageTemplateDef element.Define the facet’s that will be exposed by the template. The component tag holds the facet definitions.

<af:pagetemplatedef var="attrs">
 <af:xmlcontent>
  <component xmlns="http://xmlns.oracle.com/adf/faces/rich/component">
    <display-name>threeColumnTemplate</display-name>
    <facet>
      <description>center</description>
      <facet-name>center</facet-name>
    </facet>
   </component>
 </af:xmlcontent>
</af:pagetemplatedef>

Once this is done, the layout is coded as in any jspx file. Components that are will be common to all pages using the template will also be present in the template file. Use the af:facetRef tag to indicate where content supplied by the actual pages is to be rendered.

<af:panelgrouplayout halign="center" layout="horizontal">
  <af:facetref facetname="header"/>
</af:panelgrouplayout>

Lessons Learnt:

  1. The templates should be error free. Even the slightest error could cause UI problems.I tried to use a template within another template, which I guess are not supported and when using this template none of the partialTriggers worked.
  2. When using templates, ensure that the viewId path is correct. I had missed the initial slash on the path to the Oracle three column layout and although the page displayed correctly, I was unable to select any component as a partial trigger for other components. However hard coding the trigger with “::” enabled the partialTriggers.
  3. In Javascript, to locate components using the findComponent API append the template id and a colon to the component’s name as below.
    //Click function
    function setSearch(event) {
      var searchBox = AdfPage.PAGE.findComponent("pageDesignRoot:txtSearch");
    }
  4. Page template definitions are stored in the file “pagetemplate-metadata.xml” in the src folder. If you are copying existing templates and modifying them like I do, then this is where you define your template. Unless defined here the template wouldn’t appear on the drop-down list when creating a new JSF page from the New Gallery.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>