Generating a Custom Look and Feel using JHeadstart
By Steven Davelaar on Dec 22, 2006
A popular question on the JHeadstart Discussion Forum is how to create a more "webby" custom look and feel, instead of the default Oracle Browser Look and Feel (BLAF) that is generated by JHeadstart .
The first step in customizing the look and feel is using the skinning feature of ADF Faces. There is a How To on OTN that explains the steps involved in creating a custom skin for your ADF Faces application. With a custom skin, you can customize layout characteristics which are typically defined through cascading style sheets: fonts, colors, icons, images, margins and so on. To figure out how you can change the appearance of the various ADF Faces user interface components, this Skin Selectors document is really useful.
While ADF Faces skinning is a nice feature, it does not allow you to perform more "radical" layout customizations which include rearranging the overall page layout. For example, in many web sites, the menu is shown in a nested structure at the left side of the page.
Customizations like this can easily be achieved by creating a set of custom Velocity templates and configure the JHeadstart Application Generator to use this custom set of templates. Before we go into the technical details, let's first tease you with two screen shots of the same JHeadstart-generated application. The screen shot below shows a page generated with the default templates, resulting in the well-known Oracle Browser Look and feel:
Now, by applying a set of custom templates, in combination with a custom ADF Faces skin, we can regenerate the application with the OTN look and feel:
As you can see the page is divided in multiple regions: header, footer, left side, right side, and the page content in the middle. The menu 1 and menu2 tabs have been combined into one nested menu structure. Furthermore, the menu item labels and button labels will turn red when the mouse moves over it.
If you want to apply a custom look and feel to your own application, you can benefit from the work done to create the OTN "look and feel":
- Download the CustomLafTemplates10132.zip zipfile (or CustomLafTemplates10131.zip when still using JHeadstart 10.1.3.1) and unzip it in the templates directory of your ViewController project.
- Download the CustomLafWebResources10132.zip zipfile (or CustomLafWebResources10131.zip
when still using JHeadstart 10.1.3.1) and unzip it in the html root directory (typically named "public_html) of your ViewController project.
- Open the adf-faces-config.xml file in the WEB-INF file and set the skin family to "customlaf".
- Open the JHeadstart Application Definition Editor, select the top-level Service node, select the templates tab, and set the property "template Binding File (.jtp) to "customlafTemplateBindings.jtp" as shown in the picture below.
- Run the JHeadstart Application Generator
- Run your application!
- A custom ADF Faces skin named "customlaf" is defined in the adf-faces-skins.xml file in WEB-INF directory. When you open this file, you will see that the style sheet name is set to "customlaf/css/customlaf-faces.css" In this CSS file you can change the appearance of ADF Faces components by specifying the appropriate selectors that you can find in the aforementioned link.
- All custom velocity templates that should be used by the JHeadstart Application Generator are listed in the file customlafTemplateBindings.jtp, located in the templates/config directory of your ViewController project. If you need to create additional custom templates, you can add them to this file. You can find the corresponding template name key as comment in the generated pages.
- The overall page structure is defined in customlaf/page/dataPage.vm.The most significant difference with the default dataPage.vm template is the absence of the <af:panelPage> element and its various facets like "branding", "menuGlobal" and "messages". Instead of this element, the template contains a html-like set up of the page that defines the various regions on the page:
|Left Side|| |
- The actual page content is driven by the xxxPageContent.vm templates, also located in the customlafpage directory.
- The content in the header, footer, leftSide, and rightSide areas is defined in ADF Faces regions by the same name, to prevent the actual content of these areas from being duplicated in each and every page.
- The leftSide region is populated with content based on the menu1.vm template. This template has been customized to loop over the top level groups to create level 1 menu entries, and, for each top-level group it also loops over the child groups to create the nested menu 2 entries.
- For each button template a custom version is created that specifies the button style class, and the onmouseover and onmouseover properties to get the "rollover" effect with the red-colored button label.
- The button style class, and other style classes used in the templates are defined in /customlaf/css/customlaf.css. This means we use two css files, the other file, /customlaf/css/customlaf-faces.css holds the skinning settings. This could be merged into one style sheet if you like. You can do this by changing the style sheet name in adf-faces-skins.xml.
I hope it will get you started quickly with generating any layout you want!