JHeadstart Blog

At the JHeadstart Discussion Forum, we got a question from Lavanya how to make sure that a reference to another ADF Page Definition works, even if you are not navigating from the page to which it belongs.

Lavanya wants to use a reference to an ADF binding of the UserProfiles page, referenced using the EL expression #{data.UserProfilesPageDef.UserProfilesCurrentCommunityId}, in another page than the UserProfiles page.

You can refer to another PageDef's bindings (as opposed to the bindings of the current page's PageDef), by referring to #{data.OtherPageDef.xyz} instead of #{bindings.xyz}, as you would do in the other page.

In order to use bindings of another PageDef, that PageDef must have been
loaded first. If you navigate from the UserProfiles page, that page has
loaded the UserProfilesPageDef. To force loading the
UserProfilesPageDef if you have not opened the UserProfiles page yet, JHeadstart offers you an easy method. You can set a parameter in PageDef of the page where you want to use the other page's bindings:

<parameters>
  <parameter id="bindingContainersToPrepare"
             value="#{'UserProfilesPageDef'}"/>
</parameters>

JHeadstart looks at the parameter bindingContainersToPrepare (a binding container is the runtime instance of a page definition) and ensures that they are loaded when you run the page. In the prepareModel phase of the JSF Page Lifecycle, JHeadstart calls the method JhsPageLifecycle.prepareBindingContainers to achieve this.

You
can add such a parameter by going to the target page's PageDef, and in
the structure window right-click the 'parameters' folder, and choose
'insert inside parameters' -> 'parameter'.


Enter the id bindingContainersToPrepare, and as the value, enter an expression that returns the name of the other page definition as a String. If you want to load multiple PageDefs you can specify a comma-separated list.


Don't forget to
uncheck 'Clear Page Definition Before Generation' for this group, otherwise
your changes get lost when you run the JHeadstart generator. If you don't see this property, switch to Expert Mode first.


After that you can find the property under the category Generation Settings.

Last week Jaco Verheul and myself stepped in last minute for Duncan Mills and Steve Muench to represent Oracle at the JavaPolis' annual Rad Race. Duncan and Steve won the 2005 edition, so the expectations were pretty high.

Unlike last year, the size and complexity of the assignment was reasonable. No Web Services, no complex business logic, no complex screens, except for the dynamic metadata-driven form of course.

How did we do? I think we did reasonably well. We had prepared a start application which included ready-to-go role-based security and XML Publisher integration for the reporting. We used JHeadstart to generate the simple admin screens, and with the help of custom templates we also generated the dynamic form with wizard-style layout.

Was it enough to win the Rad Race?  No, our congratulations go to two  joint winners, LogicaCMG and Getronics PinkRoccade. Great job guys! LogicaCMG also used JDeveloper and ADF with a home-made toolkit, Oracle2Go on top. Getronics PinkRoccade used a custom framework called Briqs.

Why didn't we win? Good question! The Oracle tools remain the best, as proved by LogicaCMG. During the day you make a
number of decision on how to implement things, some decisions worked out well,
some we would have done differently (read faster) if we could do it again. May be we lack a bit the "quick and dirty" mentality that is absolutely required for a race like this. Being focussed all our professional life on building things in a reusable, structured, maintainable way, it is hard to switch to a true "hackers" mentality for one day :-).

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!
  

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!