ADF GUI : Create Page Template for ADF Application

 

When you develop application using any technology whether html , asp , jsp , jsf , ADF our first priority is to have as a many reusable component we can have to maintain the consistency in application.

ADF provide us ADF page Template , ADF Declarative Component to achieve reusability , but here we will focus only on page template. After creating page template , we can create page based on page template to maintain look and feel consistency.

ADF Page Template

1. Create page template

2. Create custom layout or use in build layout , I would choose in build layout as it satisfies most of our requirement.

When you don’t select layout check box then you have to manually design the page by arranging all ADF layout component as shown in next to next diagram.ADF Layout component for custom layout for page template

For in build in layout click browse and select the layout.

After selecting build in layout , create facets for various page area like footer , header , content , menu , side , left etc..

It is important to create facet to drop your content to be visible on GUI.

So I created four facet footer , menu , header , content.

let say you want to use this template for multiple customer then you have to provide different footer , header that consist of client details.  In that situation you have to go to attribute tab and create as many attribute you required ,so that you can utilize this attribute to pass different client information for personalization.

So I gave client name , client address , client phone that will be changed for each client login.

We need to associate facet with facet reference. I dragged the facet reference from component to middle section where I will put my major content  and associated it with facet content.

Same way we can associate facet with facet reference.

Now I dragged output text in footer and associated attribute client address with it.same way we can do it for other attribute.

If you click the source in page template you can see whole definition.

< af:pageTemplateDef var="attrs"

</af:pageTemplateDef>
</jsp:root>

Create Page based on Template

Now let us create the page based on this template and have a view.So I created jspx page with our template.

I created the page based on template and you will notice that we can see facet automatically available in new page where we can put our content.

I just dragged my region here.

Also for attribute which I mandatory we have to provide the value.

So this attribute value will be utilized on page that is using the template.

Let us run the page. I have not done good formatting , but I have tried to give you best technical details about using page template.

I ran the page and it showed me both taskflow and attribute title that I supplied.