Usually, in all our web projects, we want all the pages have a coherent style in ehole site, to improve the usuability. The usual strategy is fix the header (with the login for example), a menu in the top or both sides, and a footer.
- And all this parts are included in all our pages with no repeat the code.
- Every change in the template will show in whole site.
- And, if is possible, our WYSIWYG editor shows me the design (it is not possible with Eclipse for the moment).
Based on last JDeveloper articles, in the project ViewController > New > Web Tier > JSF Page Template, create the template /WEB-INF/templates/template.jspx:
- Choose a fixed header and footer template.
- Select “Create ADFm Page Definition” to define an object which manage the template.
- Add a facet called “content” where we will draw the pages developed.
- Add “pageTitle” attribute to show the title of the developed page in the header.
It generates a file called trinidad-config.xml where we can change the skin configurations, from fusion to blafplus-rich for example.
With ADF we can create our own skins, it is not easy and we recommend take the web designer skills before. Nevertheless it keeps some default skins that can be sufficient:
- simple: minimal and light formatting
- blafplus-medium: very modest design.
- blafplus-rich: extends blafplus-medium, it gives cooler like with things like rounded corners.
- fusion: is the default one, rich and modern.
- fusion-projector: to show in old projectors.
Placing logos and titles in the header, and copyright at the bottom is very intuitive thanks to component palette. To place the menu too: first add a Panel Menu Bar, then a menu, and at last the menu items.
We will create the Help > About menu action, with the component Popup which can be associated to a menu item. Inside we will include a Dialog component, which creates a little ok/cancel window, which will be filled with an Output Text and a Rich Text Editor.
Now in the About menuItem, from the Operations palette we will add a “Show Popup Behaviour” where bind with the popup identifier to open the popup.
To test the template we will create a New > Web Tier >JSF Page (templateTest.jspx) choosing the created template.
And we will test with right button > Run, Weblogic starts and call to the browser showing the result:
