This blog explains about creating custom layout template and extending this layout in an ADF application.
What is template ?
A template in WebCenter (or an ADF application) is nothing more than a JSPX page with additional tags to define some regions. This means that you can use all the existing ADF or WebCenter components in your template.
This is very very common requirement in most of the ADF applications, It brings unique look and feel through out the application. In this example, I will be designing a template with two sections header and body. Header section contains company logo, title and logged in user info, Whereas body section holds the place holder for implementing pages to supply the necessary content to the template
- Right click on ViewController project, Choose new 'JSF Page Template' as shown below
- Give the proper name to the template , Choose the quick start template ( This is optional, You can have your own layout as well)
- Attributes - This section allows to define place holders for various attributes can be used such as 'title' , title can be different for each page , So that implementation page will supply required title to the template page. Below screenshot shows how to define attributes while creating template itself.
- FacetDefinition - This section allows the implementation page to supply the content of the page to the template, I defined 'content' facet in my template, so that implementation page will supply the content to the template using this facet.
- After defining 'FacetDefinitions' and 'Attributes' in template, then below screenshot shows how to use them in template
- In this example, 'uploadFlag' attribute used in <af:form> element as shown below
- 'title' attribute used to display the title of the page.
- 'content' facet used in 'center' facet.
- Next step is to create implementation page, Create a jspx page and extend to newly created template as highlighted below.
- Supply values for 'title' and 'uploadFlag' attributes which are defined in template as shown below
- Define the content in 'content' facet as shown below
- Below is how output looks like.
What is template ?
A template in WebCenter (or an ADF application) is nothing more than a JSPX page with additional tags to define some regions. This means that you can use all the existing ADF or WebCenter components in your template.
This is very very common requirement in most of the ADF applications, It brings unique look and feel through out the application. In this example, I will be designing a template with two sections header and body. Header section contains company logo, title and logged in user info, Whereas body section holds the place holder for implementing pages to supply the necessary content to the template
- Right click on ViewController project, Choose new 'JSF Page Template' as shown below
- Give the proper name to the template , Choose the quick start template ( This is optional, You can have your own layout as well)
- Attributes - This section allows to define place holders for various attributes can be used such as 'title' , title can be different for each page , So that implementation page will supply required title to the template page. Below screenshot shows how to define attributes while creating template itself.
- After defining 'FacetDefinitions' and 'Attributes' in template, then below screenshot shows how to use them in template
- In this example, 'uploadFlag' attribute used in <af:form> element as shown below
- 'title' attribute used to display the title of the page.
- 'content' facet used in 'center' facet.
- Next step is to create implementation page, Create a jspx page and extend to newly created template as highlighted below.
- Supply values for 'title' and 'uploadFlag' attributes which are defined in template as shown below
- Define the content in 'content' facet as shown below
- Below is how output looks like.
How to design layout templates in ADF ?
ReplyDelete