Extending the JHeadstart 10.1.3 Application Generator using Custom Templates – Generate Table Overflow Style: Bubble

2

JHeadstart 10.1.3 has several new features, a whole new architecture and support for ADF Faces. One of the most interesting new concepts is the notion of the Custom Templates, that allow us to extend and override the functionality of the Application Generator with our own generation capabilities. Almost any post generation change can now be included in the generator and thus become generatable. In our experience this has proven simple to accomplish and hugely beneficial to the productivity as well as the maintainbility of our project and application.

In this article, I will describe the implementation of a new table overflow style, and how it was incorporated into the JHeadstart Application Generator. The article provides the custom templates for download, so you can benefit from this functionality yourself.  

JHeadstart 10.1.3 supports three table overflow styles: when a group has more items than comfortably fit into a table, you use an overflow for items that do not have to be visible as summary items directly in the table rows, but that ideally are close by. The inline overflow allows the user to disclose details – expand a select row to reveal the overflow items. The overflow styles right and below display overflow items for the currently selected record, either next to or below the table. One disadvantage of these last two overflow styles is that they always take up real estate on the screen, even if you have no particular interest in them. Especially for larger numbers of overflow items, this may not be ideal.

During Steven Davelaar’s presentation the other day – see AMIS Query – JHeadstart – Launch of 10.1.3 and 5th Anniversary  – I had visions of a new table overflow style, dubbed Bubble, that would allow a user to bring up a popup – not a window but a floating div – with the overflow items, much like an overflow right on demand. It would look something like:

When the mouse is moved over one of the … (detail) icons, the overflow bubbles up:

....

Some inspiration for how to implement a popup element in a JSF page in the first page came from this article: Integrating ADF Faces and MyFaces Tomahawk – Creating a Popup with ADF Faces Shuttle Component . The first steps of generating a page with table layout using JHeadstart 10.1.3 are not discussed here. See the JHeadstart Developer’s Guide or many other articles out there. Instructions on setting up MyFaces Tomahawk with your project are described in the article referred to above, on creating a Popup for a Shuttle Component.

The steps required for implementing this functionality as a post generation modification are:

  1. generate the table layout like always using JHeadstart 10.1.3, using the table overflow right style
  2. prepare the project for use of MyFaces Tomahawk components (see the article above). This includes: download and install tomahawk.jar, add library and taglib to the project, install some Apache Jakarta Commons libraries and add the MyFaces Extension Filter to the web.xml file. Note: this may sound formidable, but will take less than 10 minutes.
  3. add the Tomahawk Taglib uri to the JSPX page
  4. create a small JavaScript library and reference it from the JSPX page
  5. wrap the overflow right elements in a Tomahawk Popup Element
  6. add a column to the table to contain the icon that will launch the popup

Once these steps are complete, we can run the application and use the popup overflows. However, if we were to generate the application afresh, we would lose our modifications. Using custom templates, we can embed these changes in the next round of generation or – even more bold – make this overfow style a generic feature available for all tables in our application. Let’s aim high and go for this second objective: we will extend the JHeadstart Application Generator so that we can toggle the bubble overflow on and off for every table, simply by setting a single (custom) property in the Application Definition.

Once the custom templates have been developed, all you need to do in order to generate the Bubble overflow (apart from step 2, preparing your project for Tomahawk) is the following:

1. Change the Template Properties file at the Application (Service) Level:

 

The Template Binding File – here set to AMISTemplateBindings.jtp – is a file that specifies the default templates to use when generating the application. We can override these settings at any level in the Application Definition file, but any generic changes in templates that apply to all our projects or at least the entire application ideally are configured in the Template Bindings file. I have created the AMISTemplateBindings.jtp file by copying the default file – defaultTemplateBindings.jtp in the templates/config directory under the ViewController project – and renaming it:

 

2. Specify for a Group with Table or Table-Form layout with overflow style right whether or not the Bubble Overflow style should be active:

It is easy to miss: what I have done here is set the value of the Custom Property 1 to bubble. The new templates will only be activated if the group layout is tale or table-form, the overflow style is right and the custom property 1 has the value bubble. Note that the name of Custom Property 1 is irrelevant to the Generator.
 

Extending the JHeadstart Application Generator

By just copying the defaultTemplateBindings.jtp to AMISTemplateBindings.jtp, I have not changed a single bit of functionality of course. It is time for that now. I have copied three different templates in order to start modifying them. I have AMISTemplateBindings.jtp refererring to those three:

  • DATA_PAGE=default/page/AMISdataPage.vm – copy from
  • TABLE_GROUP=default/pageComponent/AMIStableGroup.vm
  • TABLE_DELETE_COLUMN=default/item/table/AMIStableDeleteColumn.vm

Modifying the dataPage template:

The AMISdataPage.vm template has two modifications: one to add the URI for Tomahawk to the page and the other one to include the JavaScript library that we need:

&lt;?xml version='1.0' #ENCODING_PROP()?&gt;<br />&lt;jsp:root xmlns:jsp=&quot;http://java.sun.com/JSP/Page&quot; version=&quot;${JHS.service.jspVersion}&quot;<br />          xmlns:h=&quot;http://java.sun.com/jsf/html&quot;<br />          xmlns:f=&quot;http://java.sun.com/jsf/core&quot;<br />          xmlns:af=&quot;http://xmlns.oracle.com/adf/faces&quot;<br />## AMIS: support for Bubble Overflow - add the Tomahawk Taglibrary URI to the page<br />  #if (${JHS.current.group.property1}=='bubble')<br />          xmlns:t=&quot;http://myfaces.apache.org/tomahawk&quot;<br />  #end<br />## AMIS: end support for Bubble Overflow<br />
          xmlns:afh=&quot;http://xmlns.orac
le.com/adf/faces/html&quot;&gt;<br />#if ($JHS.service.jspVersion=='2.0')  &lt;jsp:output omit-xml-declaration=&quot;true&quot; doctype-root-element=&quot;HTML&quot;<br />              doctype-system=&quot;http://www.w3.org/TR/html4/loose.dtd&quot;<br />              doctype-public=&quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;/&gt; #else<br />   &lt;jsp:text&gt;<br />    &lt;![CDATA[ &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt; ]]&gt;<br />  &lt;/jsp:text&gt; <br />#end<br />  &lt;jsp:directive.page contentType=&quot;text/html;charset=${JHS.encoding}&quot;/&gt;<br />  &lt;f:view&gt;<br />    &lt;afh:html id=&quot;html&quot;&gt;<br />      &lt;afh:head title=&quot;#PAGE_TITLE()&quot; id=&quot;head&quot;&gt;<br />        &lt;meta http-equiv=&quot;Content-Type&quot;<br />              content=&quot;text/html; charset=${JHS.encoding}&quot;/&gt;<br />        &lt;link rel=&quot;stylesheet&quot; href=&quot;${pageContext.request.contextPath}/jheadstart/css/jhsStyles.css&quot; type=&quot;text/css&quot; id=&quot;jhsStyles&quot;/&gt;<br /><br />## AMIS: support for Bubble Overflow - include the JavaScript library<br />  #if (${JHS.current.group.property1}=='bubble')<br />     &lt;afh:script source=&quot;/jheadstart/BubbleUtils.js&quot;/&gt; <br />  #end<br />## AMIS: end support for Bubble Overflow<br />      &lt;/afh:head&gt;<br />      &lt;afh:body id=&quot;body&quot;&gt;<br />... <br />

Modifying the tableGroup template:

The tableGroup template is changed in order to wrap the table overflow right element when the bubble value is set in the custom property:

&lt;/af:table&gt;<br />#if($pageComponent.hasOverflowRight)<br />    &lt;/afh:cellFormat&gt;<br />     &lt;afh:cellFormat valign=&quot;top&quot; id=&quot;${group.shortName}OverflowRightCell_2&quot;&gt;<br />        &lt;af:objectSpacer width=&quot;10&quot;/&gt;<br />     &lt;/afh:cellFormat&gt;   <br />     &lt;afh:cellFormat valign=&quot;top&quot; id=&quot;${group.shortName}OverflowRightCell_3&quot;&gt;<br />## AMIS: support for overflow bubble<br />  #if (${JHS.current.group.property1}=='bubble')<br />              &lt;t:popup styleClass=&quot;popup&quot; closePopupOnExitingElement=&quot;true&quot;<br />                       closePopupOnExitingPopup=&quot;true&quot; displayAtDistanceX=&quot;40&quot;<br />                       displayAtDistanceY=&quot;-20&quot;&gt;<br />                 &lt;h:outputText value=&quot;&quot; title=&quot;bubble&quot;/&gt;<br />                 &lt;f:facet name=&quot;popup&quot;&gt;<br />                  &lt;af:panelBox&gt;<br />  #end<br />## AMIS: end support for overflow bubble<br />       #JHS_PARSE(&quot;TABLE_OVERFLOW_AREA&quot; ${JHS.current.model})<br />## AMIS: support for overflow bubble<br />  #if (${JHS.current.group.property1}=='bubble')<br />      &lt;/af:panelBox&gt;<br />    &lt;/f:facet&gt;<br />  &lt;/t:popup&gt;<br />  #end<br />## AMIS end support for overflow bubble<br />  &lt;/afh:cellFormat&gt;<br />&lt;/afh:rowLayout&gt;<br />&nbsp;

The modification is minimal: if custom property 1 is set to bubble (and the code is only ever reached when overflow style right is processed) then we create a (Tomahawk) popup element that wraps the overflow right elements inside a PanelBox inside its popup Facet. That is all!

Modifying the tableDeleteColumn template: 

Here I have been a little lazy: since the column that will contain the icon the user can hover over or click on in order to open the bubble overflow is positioned to the right of the column with Delete? checkboxes – or as the right-most column at any rate – it was an easy approach to add the creation of this column to this template:

#if ($JHS.current.group.tableDeleteAllowed)<br />&lt;af:column id=&quot;${JHS.current.group.shortName}DeleteColumn&quot; headerText=&quot;#DELETE_COLUMN_HEADER()&quot; formatType=&quot;icon&quot;&gt;<br />  &lt;af:selectBooleanCheckbox binding=&quot;#{#COLLECTION_MODEL_BEAN().deleteCheckbox}&quot;/&gt;<br />&lt;/af:column&gt;<br />#end<br />#if (${JHS.current.group.property1}=='bubble')<br />&lt;af:column id=&quot;TableOverflowPopup&quot; headerText=&quot;... &quot;<br />           formatType=&quot;icon&quot;&gt;<br />  &lt;af:objectImage source=&quot;/jheadstart/images/detailsicon_enabled.gif&quot; id=&quot;showBubble&quot; onclick=&quot;bubbleUp(arguments[0]);&quot; /&gt;<br />&lt;/af:column&gt;<br />#end <br />

In the template we test the value of the custom property 1. If it has the value bubble (and we do not explicitly test for layoutstyle table or table-form and overflow is right which we probably should be doing here), then we add an extra column. It has headerText … (can be changed to anything you like better), displays an icon already shipped with JHeadstart (again can be changed to any text or image you like better) and reacts to a click (again, can be changed to onmouseover to respond to hovering instead of clicking). Note that the JavaScript function bubbleUp is provided in the JavaScript library BubbleUtils.js added in the AMISdataPage.vm.

Note that the ‘bubble’ column can easily be created in the tableGroup template as well.

JavaScript library BubbleUtils

A crucial element in the bubble overflow is the BubbleUtils JavaScript library. It performs the following role: the Popup component from the Tomahawk library is combination of a single visible element that can be clicked on or hovered over in order to display the popup. If we want every row in the table to contain an icon to bring up the popup – while not actually having the popup duplicated in every row – , we have to use a little trick: there is only a single popup element with a single item to trigger its popup. The popup icons in the rows trigger the appropriate mouse event on the single popup item.

You can see this from the column definition above: the objectImage with id equals showBubble has an onClick (could also be an onMouseOver) that calls the bubbleUp function. The Tomahawk popup element was setup with an outputText with title equals bubble and no value: that means it is invisble, does exist and can be activated. The bubbleUp function will locate this element using the value of its title attribute. When found, the mouseover event is iniated on this invisible element. That in turn will bring up the popup! This trick is an application of the steps described in the article Programmatic Client Side Activation of JSF Components.  

That is not yet enough. We need to do a second thing. You probably know that the normal Table Overflow Right (or Below for that matter) synchronizes with currently selected record. If we click on the radio button at the beginning of the table row, we select the record in that row and implicitly refresh (ADF Faces partial page refresh or AJAX in the way of ADF Faces) the overflow items. 

function bubbleUp(e) {<br />  ... determine xcoord and ycoord with support for many browsers (see resource BubbleUtils.js below)<br />  // take the currentTarget.id for example: TableWithBubbleOverflowTable:7:TableWithBubbleOverflowshowBubble<br />  // replace the showBubble piece with TableWithBubbleOverflowSelectOne ( the id of the selection element)<br />  // we need to trigger a click event on TableWithBubbleOverflowTable:7:TableWithBubbleOverflowSelectOne<br />  doClick(document.getElementById(e.currentTarget.id.replace(&quot;showBubble&quot;,&quot;SelectOne&quot;)));<br /><br />  // now locate the span element with title=bubble as that is the element that can bring up the popup<br />  links = document.getElementsByTagName('span');<br />  for (var i=0; i&lt;links.length; i++) {<br />    if (links[i].title.indexOf('bubble') != -1) {<br />     doEventDispatch(links[i], xcoord, ycoord);<br />    }//if<br />  }//for<br />	<b
r /
>}<br /><br />   function doEventDispatch(elm, xcoord, ycoord) {<br />     fireMouseEvent(elm, 'mouseover', xcoord, ycoord);<br />   }<br />     <br />   function doClick(elm) {<br />     fireMouseEvent(elm, 'click', 0,0);<br />   }<br /><br />... //the function fireMouseEvent can be found in the resource listed below.<br />&nbsp;

Resources

Download the zip-file with three modified templates and the AMIS jtp file: AMIStemplatesTableOverflowBubble.zip

 

Article on programmatically manipulating JavaScript and DOM events: http://www.howtocreate.co.uk/tutorials/javascript/domevents 

 

Download the BubbleUtils.js javascript library with client side activation of elements. 

Share.

About Author

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director for Fusion Middleware. Consultant, trainer and instructor on diverse areas including Oracle Database (SQL & PLSQL), Service Oriented Architecture, BPM, ADF, Java in various shapes and forms and many other things. Author of the Oracle Press book: Oracle SOA Suite 11g Handbook. Frequent presenter on conferences such as JavaOne, Oracle OpenWorld, ODTUG Kaleidoscope, Devoxx and OBUG. Presenter for Oracle University Celebrity specials.

2 Comments

  1. Of course you are right that using the MouseOver had some hazards: it may fire far more frequently than is the intention. However, I do not have the situation with the single button to show additional details: the icon in the last column for each record will trigger the popup. The same risk exists, that if you move the mouse over all these icons, the mouse over event fires even if you do not feel like it. And if your mouse continues to hover over an element, it may easily refire the event. So yes, caution is advised, and to be honest: I have used the onclick after the onmouseover gave me some headaches myself.

    regards,

    Lucas

  2. Great post again. However, I have one question… I’m always troubled by the "mouseover" event because it can have some unpleasant effects. For instance imagine this situation: "your page is exactly the same as described in this post, meaning that the mouseover will set the currentrecord. Besides this you have ONE button to display additional information about the current record. This button is located above the table." In order to click the button you have to move your mouse to this button. If you go straight up to the button, a mouseover event will be triggered on every row that you pass during the way up…… meaning that you will get the additional information of the FIRST record. As far as i know, the only way to circomvent this behaviour is to navigate to the button using keys or to move your mouse outside the table and go up to the button. I prefer to use the onclick event which will set the current record. The user is in full control and not bothered by the unpleasant effects of the mouseover. Please correct me if I’m wrong, and please suggest any solutions… Thank for the post, which is (again) very usable. Luc Bors