Create an ADF Template – example

When we are navigating through a web site, ex: oracle.com or Facebook.come, we might notice the header, footer, company Logo, copyright information will come across all the pages on the site. They are the static contents that are not get duplicated on every page; Only the content will vary. A page that shares the common content is called Template.

In ADF, Template is a JSF file which acts as a layout for an entire web site or part of a site. The ADF template consists of a Header, Footer, Sidebar. Center or a customized one. ADF provides useful pre-defined layout components such as ‘Panel Stretch’, ‘Panel Group’, ‘Panel Grid’ and more which we easily drag and drop into the Template page.

In this section, We are going to create an ADF template with layout components and use the template in another page. The following points are considered in this section

1. Create an ADF Template

2. Desing the template

3. Use the template in JSF page

4. Run and test the page

Pre-Requisite:

JDeveloer 12C

Existing Fusion Web application with an Employee Object (Click here for instruction)

1. Create an ADF Template and add Layouts

A) Expand the View Controller >> Righ click on the WebContent >> Click New >> Click Page

052916_0106_CreateanADF1 Create an ADF Template – example

B) Input a template name >> Click Next

052916_0106_CreateanADF2 Create an ADF Template – example

C) Enable basic Template >> Click Next

052916_0106_CreateanADF3 Create an ADF Template – example

D) Click the + icon in the facelets >> Input a name ‘Content’ >> Click Next

052916_0106_CreateanADF4 Create an ADF Template – example

E) Click Finish

052916_0106_CreateanADF5 Create an ADF Template – example

F) Template gets created on the ViewController

052916_0106_CreateanADF6 Create an ADF Template – example

2. Design the template

A) Open the component >> Expand Layout >> Drag the ‘Panel Strech Layout‘ and drop it to the Template1.jsf

052916_0106_CreateanADF7 Create an ADF Template – example

B) Click on the source tab >> It has the following layout properties,

052916_0106_CreateanADF8 Create an ADF Template – example

C) Add ‘Panel Group Layout’ to Top and bottom element

052916_0106_CreateanADF9 Create an ADF Template – example

D) Search for facetRef in the component >> Drag the ‘Facet Definition.’ component and drop it to the facet Center >> Choose the Facet Name ‘Content’ in the drop down >> Click Ok

Note: We defined the ‘content’ in the template creation, See 1D above

052916_0106_CreateanADF10 Create an ADF Template – example

E) Drag and Drop an image to PanelGroupLayout inside the Element Top >> Select ‘ADF Faces Images.’

052916_0106_CreateanADF11 Create an ADF Template – example

E) Drag and Drop the Output text under the image element inside the Top

052916_0106_CreateanADF12 Create an ADF Template – example

F) Select the PanelGrouplyout >> Click the property tab >> Scroll down >> Click the Background tab >> Change the Background color to Blue

052916_0106_CreateanADF13 Create an ADF Template – example

E) Click the Font tab >> Choose X-Large in Font Size

052916_0106_CreateanADF14 Create an ADF Template – example

F) Drag and Drop an Output Text component to the Facet Bottom element >> Change the value of the facet component to ‘Copy right @aaa’ >> Copy the inlineStyle information

We are done styling the template. J

052916_0106_CreateanADF15 Create an ADF Template – example

3. Use the template in JSF page

A) Expand the View Controller >> Right click in the Web Content >> Select Page

052916_0106_CreateanADF16 Create an ADF Template – example

B) Give a name ‘TemplateTest.jsf’ >> Select the ‘Reference ADF Page Template’ >> Choose the template we created recently under the Templates , that is Template1 (Actually Template1.jsf)

052916_0106_CreateanADF17 Create an ADF Template – example

C) Drag and Drop a ‘data control’ element to the Facet Content (Mine I selected Employee to object) >> Select ADF Form

052916_0106_CreateanADF18 Create an ADF Template – example

D) Click Ok

052916_0106_CreateanADF19 Create an ADF Template – example

4. Run and test the page

A) Right click on the TemplateTest.jsf page and click Run

052916_0106_CreateanADF20 Create an ADF Template – example

B) The project gets deployed on the integrated WebLogic Server, and the page will get displayed in the browser

Note: If it is the first time you are running a project in JDeveloper, then it will ask for configuring the WebLogic server. Input the port and click Ok

If you see the below image, the Header and Footer inherited from the Template.JSF to the TemplateTest.JSF page.

052916_0106_CreateanADF21 Create an ADF Template – example

govindan Create an ADF Template – example
Connect me

Govind

Thank you for visiting my personal blog. Myself Govindan, Software Developer by profession since 2006 and hence I started this blog early in 2016 and ever since I've been writing about technologies experienced and learnings of everyday life.

The views expressed on this blog are my personal views and do not necessarily reflect the views of my employer.

Please feeling free to reach me on any comments and feedbacks you have. Would be more than glad to listen and reply 🙂
govindan Create an ADF Template – example
Connect me
By | 2016-12-28T23:00:22+00:00 May 28th, 2016|Categories: ADF|Tags: , , , |0 Comments
Like us on Facebook.
Connect!