Generating a Custom Look and Feel using JHeadstart

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:
defaultlaf_small_image:

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:
customlaf_small_image:

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.
jde_editor_templates_image:
  • Run the JHeadstart Application Generator
  • Run your application!
That's all. Now you are all set to create your own custom look and feel by modifying this sample OTN look and feel. To make it easier to tailor the sample files for your specific needs, here are some pointers on how this custom look and feel is implemented:
  • 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:
Header
Left Side

Page Body

Page Title
Breadcrumbs
Messages
Parent Context Info
Page Content (groups)
Right Side
 Footer

  • 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.
Once again, this example illustrates the huge power of the JHeadstart Velocity generator templates. 100% generation is doable, regardless of your layout requirements.
I hope it will get you started quickly with generating any layout you want!

Comments:

I'm trying to follow the tutorial but I get errors when I try to run JAG [ConferenceRooms.jspx, customlaf/button/newButton.vm] Velocity log [error] ASTMethod.execute() : exception from introspection : java.lang.NullPointerException [ConferenceRooms.jspx, customlaf/button/deleteButton.vm] Velocity log [error] ASTMethod.execute() : exception from introspection : java.lang.NullPointerException [RoomReservations.jspx, customlaf/button/newButton.vm] Velocity log [error] ASTMethod.execute() : exception from introspection : java.lang.NullPointerException [RoomReservations.jspx, customlaf/button/deleteButton.vm] Velocity log [error] ASTMethod.execute() : exception from introspection : java.lang.NullPointerException

Posted by Ed on June 27, 2007 at 10:27 AM PDT #

Hi Ed,

This type of technical question is best posted on the "JHeadstart Discussion Forum" on OTN. For a discussion of this particular error, see http://forums.oracle.com/forums/thread.jspa?messageID=1796379&#1796379.

kind regards,

Posted by Sandra Muller on June 27, 2007 at 07:49 PM PDT #

Can please provide me the URL to download customlaf.zip file? 1. I need to move the top menu bar to the left side. 2. I need to modify the error message text color to red. Thanks in advance. Thanks & Regards, Ramakrishna

Posted by Ramakrishna on August 05, 2008 at 02:05 AM PDT #

I re-added the download links in the post (they were lost after the migration of oracle blogs). Steven Davelaar, JHeadstart Team.

Posted by Steven Davelaar on August 07, 2008 at 05:09 PM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed
About

Java EE Consultants - JHeadstart, ADF, JSF

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today