Oracle ADF/JSF – Page Template Development

Templating is the commonly used approach when building the presentation layer of a Web Application. It is never wise for a developer to not consider templating in their design, especially when a lot of users will view your side on a daily basis and a lot of page will be develop for the solution.

Efficiency is the term in doing templates, its somehow eases the developer and designer of their workload by developing a constant body of page template that can be used globally. it is by far, the most accurate form of “re-usability”.

Though there are a lot of templating technology for Java EE. I find only two of them very flexible and easy to learn (of course, excluding Velocity since its more of a presentation generator api). Apache – Tiles and JSF Templating.

Example of Struts Tiles Templating.

Example of JSF Templating

For this post, I will try to create a ADF Template using Oracle JDeveloper 11g. ADF templating is different a bit different from JSF templating.

1st: Create the Page Template

Right Click on a Folder > New > JSP Page

The Page Template creation dialog is shown. Now Tick on the Use quick start layout to customize our Template.

Choose from a variaty of default layouts.

Ticked on “Apply Themes” to apply default skins. We will ticked this one for this tutorial.

Click OK to create the actual template.

The files where updated to comply with the template we just created: faces-config.xml – the new render kit (fusion render kit) was introduce to server as the overall render kit for any pages developed. The trinidad-config is where the skin family is indicated and web.xml to add new libraries, init paramters and external source files support for the new skin and page (swf – flash).

Lets tweak the template first before using it. Lets put something on the “top”,”first” and “center” facelets. Go to Source and define faclets on the component section of the template. This section is where all the facelets should be defined.

      <component xmlns="">
                <description>This child draws out the detailed forecast</description>
                <description>This child draws out the detailed forecast</description>
                <description>This child draws out the detailed forecast</description>

Put Facelets in the Template Page.

<af:facetReg facetName="centerTop"/>
<af:facetReg facetName="centerFirst"/>
<af:facetReg facetName="centerDetail"/>

2nd: Use the Page template

Lets create the page using the page template. Click on Pages folder (create one) > New > JSF Page. Choose the JSF Template we created.

Create the Page.

        <af:pageTemplate viewId="/pagetemplates/sample_adf_template.jspx" id="pt1">
            <f:facet name="centerDetail">
            <af:panelGroupLayout layout="vertical">
                <f:verbatim>THIS IS JUST A STRING</f:verbatim>
          <f:facet name="centerTop">
            <af:panelGroupLayout layout="vertical">
              <af:outputText value="HELLO WORLD"/>
          <f:facet name="centerFirst">
            <af:panelGroupLayout layout="vertical">
              <af:outputText value="HELLO WORLD"/>

3rd: Run the Page that uses the Page Template.


Download the source here.

Review: Oracle ADF really puts a lot to the table. Arrays of components and custom tools plus, a great IDE to build enterprise applications with it. Page Templating is not very far from JSF templating, it uses the same concept of inserting ui components (for ADF’s case, facelets) to get page fragments for consistency.

3 thoughts on “Oracle ADF/JSF – Page Template Development

  1. Hi, I was creating adf page template with data control. then I deploy to adf library jar file with recommended setting. The page template with data control jar worked into same application when use data control page template. But External application import current template jar then didn’t work here. I thinks it is because of Data control into page template!!! while weblogic application compile follow message show on log.

    Failed to create connection for {/example/jedi/model/common/}ExampleModuleService

    Failed to create connection for {/example/jedi/model/common/}ExampleModuleService

    What about this error? How to use page template with data control for external application?

    thanks juddi

  2. Wonderful goods from you, man. I’ve remember your stuff prior to
    and you are simply too excellent. I really like what you have acquired right here, really like what you are stating and the way in which you say it.
    You’re making it entertaining and you continue to care for to stay it sensible.

    I can not wait to read much more from you. That is actually a great
    web site.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s