Page Templates is a very useful feature provided in ADF , we can create page Template and based on that can create the ADF pages for our application. All the common components , UI presentation can be part of the template.
Page Templates help keep the UI interface uniform across the organization and help standardizing the applications.
Here is one example of using a template , the template is build using image, layouts ,popup and other components.
1. 1. Create a Page Template
Name : MyPageTemplate.jspx
Directory : Choose ViewController\public_html\WEB-INF\templates
This is to mark this file as not runnable directly
Check : Create associated ADFm Page definition (This is used for use of Data control)
Create Facet : PageContent , This will hold the page data
Create Attribute : PageTitle , to hold specific page titles
2. Drop one Panel Stretch layout on the template
You can disable the facets you don’t need : Like I kept Top , center & bottom facet
Keep default properties for Panel Stretch Layout
3. From the Component Palette, drop a Panel Splitter into the center facet , change the Orientation
property to “vertical.” The splitter bar will become positioned horizontally.
4.Drop Decorative Boxes at following positions
top facet of the af:panelStretchLayout container : Theme : Medium
first facet of the af:panelSplitter component;Theme as light
Bottom facet of the af:panelStretchLayout container : Theme : Medium
For all these three boxes hide the top facet. The color of the portions will change accordingly. The layout will look like :
5. Create a image folder at ViewController\public_html\images , Put the image you want as logo for all your pages .I used the Blogger image
6. From the Common Components panel of the Component Palette, drop the image component into the topmost center facet , choose the image you just copied
Set Height = 40 px
You can also add link to this image for some page, I added blogger link using the surround with option and destination as : http://oraclefusion1011.blogspot.com/
7. As we need a output Text for the Title , Add one panelGroupLayout in the Top Center facet and add the just created image and link to it.
Simple way would be to surround the Link just created with panelGroupLayout, set Layout to Horizontal &Valign = Middle to keep Title in same line with Image
- Drop an output text inside the panel group layout and set Value = #{attrs.PageTitle} This will hold the Attribute
8. Drop an output formatted component on the Bottom facet of the Panel Stretch layout
Set Value : Copyright © My Blogger. All rights reserved
StyleUsage : PageStamp
Set Horizontal align to Right
9. Now most of the UI specific things are done on the template , lets add some Menu options for the template
Select the Decorative Box in the first facet of the af:panelSplitter layout
- Drop a Panel Menu Bar (Common Components panel) into the top facet
- Drop a Menu (af:menu) onto the menu bar : Set Text = Help
- Drop a Menu Item onto the af:menu component : Set Text = About
10. This will open a popup with information about the application
Drop a popup on the decorative box and set Id = HelpPopup
Drop a dialogue inside the Popup , set Text = "About Blogger" Type = ok
Drop one output text in the dialogue set value ="This is a Blooger Page for ORA : FMW "
Select the commandMenuItem and Drop a Show Popup Behavior component (from the Operationspanel) onto it. Fill in PopupId as “HelpPopup” , trigger = action
11. Drag a Facet Ref into the center facet of the af:decorative box within the af:panelSplitter layout container and select from the Facet Name pulldown “PageContent” (the facet you defined when creating the template).
This will be the place for contents of Pages
12. save all, the template is ready
The Structure window should look like :
Test Template : Create a JSF page based on the template “MyPageTemplate”
Drop an output Text , Set Value =” Test Template”
Run the page and see the template components .
The page source should look like :
<f:view>
<af:document id="d1">
<af:form id="f1">
<af:pageTemplate viewId="/WEB-INF/templates/MyPageTemplate.jspx"
value="#{bindings.pageTemplateBinding}" id="pt1">
<f:facet name="PageContent">
<af:outputText value="Test Template" id="ot1"/>
</f:facet>
</af:pageTemplate>
</af:form>
</af:document>
You can see the binding to Page Template.
Page opens as :
Thanks!!
