Friday Oct 05, 2012

ADF - Now with Robots!

I mentioned this briefly in a tweet the other day, just before the full rush of OOW really kicked off, so I though it was worth re-visiting. Check out this video, and then read on:


So why so interesting? Well - you probably guessed from the title, ADF is involved. Indeed this is as about as far from the traditional ADF data entry application as you can get. Instead of a database at the back-end there's basically a robot. That's right, this remarkable tape drive is controlled through an ADF using all your usual friends of ADF Faces, Controller and Binding (but no ADFBC for obvious reasons). ADF is used both on the touch screen you see on the front of the device in the video, and also for the remote management console which provides a visual representation of the slots and drives. The latter uses ADF's Active Data Framework to provide a real-time view of what's going on the rack.

SL150 GUI Screen Shot.

What's even more interesting (for the techno-geeks) is the fact that all of this is running out of flash storage on a ridiculously small form factor with tiny processor - I probably shouldn't reveal the actual specs but take my word for it, don't complain about the capabilities of your laptop ever again!

This is a project that I've been personally involved in and I'm pumped to see such a good result and,  I have to say, those hardware guys are great to work with (and have way better toys on their desks than we do).

More info in the SL150 (should you feel the urge to own one) is here

Tuesday Sep 04, 2012

forEach and Facelets - a bugfarm just waiting for harvest

An issue that I've encountered before and saw again today seems worthy of a little write-up. It's all to do with a subtle yet highly important difference in behaviour between JSF 2 running with JSP and running on Facelets (.jsf pages). The incident I saw today can be seen as a report on the ADF EMG bugzilla (Issue 53) and in a blog posting by Ulrich Gerkmann-Bartels who reported the issue to the EMG. Ulrich's issue nicely shows how tricky this particular gochya can be. On the surface, the problem is squarely the fault of MDS but underneath MDS is, in fact, innocent.

To summarize the problem in a simpler testcase than Ulrich's example, here's a simple fragment of code:

<af:forEach var="item" items="#{itemList.items}" varStatus="vs">
  <af:commandLink id="cl1" text="#{item.label}" action="#{item.doAction}" 
                  partialSubmit="true"/>
</af:forEach>

Looks innocent enough right? We see a bunch of links printed out, great.

The issue here though is the id attribute. Logically you can kind of see the problem. The forEach loop is creating (presumably) multiple instances of the commandLink, but only one id is specified - cl1. We know that IDs have to be unique within a JSF component tree, so that must be a bad thing?  The problem is that JSF under JSP implements some hacks when the component tree is generated to transparently fix this problem for you. Behind the scenes it ensures that each instance really does have a unique id. Really nice of it to do so, thank you very much.

However, (you could see this coming), the same is not true when running with Facelets  (this is under 11.1.2.n)  in that case, what you put for the id is what you get, and JSF does not mess around in the background for you. So you end up with a component tree that contains duplicate ids which are only created at runtime.  So subtle chaos can ensue.  The symptoms are wide and varied, from something pretty obscure such as the combination Ulrich uncovered, to something as frustrating as your ActionListener just not being triggered. And yes I've wasted hours on just such an issue. 

The Solution 

Once you're aware of this one it's really simple to fix it, there are two options:

  1. Remove the id attribute on components that will cause some kind of submission within the forEach loop altogether and let JSF do the right thing in generating them. Then you'll be assured of uniqueness.
  2. Use the var attribute of the loop to generate a unique id for each child instance.  for example in the above case: <af:commandLink id="cl1_${vs.index}" ... />.

 So one to watch out for in your upgrades to JSF 2 and one perhaps, for your coding standards today to prepare you for.

For completeness, here's the reference to the underlying JSF issue that's at the heart of this: JAVASERVERFACES-1527

Monday Jul 09, 2012

ADF and EBS Applications

A blog entry that may be of interest to those of using building ADF apps that, in some way, need to integrate with Oracle E-Business Suite. Head over to Steven Chan's Applications Technology Blog: Building Extensions Using E-Business Suite SDK for Java

Tuesday Jul 03, 2012

New Sample Demonstrating the Traversing of Tree Bindings

A technique that I seem to use a fair amount, particularly in the construction of dynamic UIs is the use of a ADF Tree Binding to encode a multi-level master-detail relationship which is then expressed in the UI in some kind of looping form – usually a series of nested af:iterators, rather than the conventional tree or treetable. This technique exploits two features of the treebinding. First the fact that an treebinding can return both a collectionModel as well as a treeModel, this collectionModel can be used directly by an iterator. Secondly that the “rows” returned by the collectionModel themselves contain an attribute called .children. This attribute in turn gives access to a collection of all the children of that node which can also be iterated over.

Putting this together you can represent the data encoded into a tree binding in all sorts of ways.

As an example I’ve put together a very simple sample based on the HT schema and uploaded it to the ADF Sample project. It produces this UI:

Example output from this technique

The important code is shown here for a Region -> Country -> Location Hierachy:

<af:iterator id="i1" value="#{bindings.AllRegions.collectionModel}" var="rgn">
  <af:showDetailHeader text="#{rgn.RegionName}" disclosed="true" id="sdh1">
    <af:iterator id="i2" value="#{rgn.children}" var="cnty">
      <af:showDetailHeader text="#{cnty.CountryName}" disclosed="true" id="sdh2">
        <af:iterator id="i3" value="#{cnty.children}" var="loc">
          <af:panelList id="pl1">
            <af:outputText value="#{loc.City}" id="ot3"/>
          </af:panelList>
        </af:iterator>
      </af:showDetailHeader>
    </af:iterator>
  </af:showDetailHeader>
</af:iterator> 

You can download the entire sample from here:

Thursday Apr 05, 2012

The UIManager Pattern

One of the most common mistakes that I see when reviewing ADF application code, is the sin of storing UI component references, most commonly things like table or tree components in Session or PageFlow scope. The reasons why this is bad are simple; firstly, these UI object references are not serializable so would not survive a session migration between servers and secondly there is no guarantee that the framework will re-use the same component tree from request to request, although in practice it generally does do so.

So there danger here is, that at best you end up with an NPE after you session has migrated, and at worse, you end up pinning old generations of the component tree happily eating up your precious memory. So that's clear, we should never. ever, be storing references to components anywhere other than request scope (or maybe backing bean scope). So double check the scope of those binding attributes that map component references into a managed bean in your applications. 

Why is it Such a Common Mistake? 

At this point I want to examine why there is this urge to hold onto these references anyway? After all, JSF will obligingly populate your backing beans with the fresh and correct reference when needed.  

In most cases, it seems that the rational is down to a lack of distinction within the application between what is data and what is presentation. I think perhaps, a cause of this is the logical separation between business data behind the ADF data binding (#{bindings}) façade and the UI components themselves. Developers tend to think, OK this is my data layer behind the bindings object and everything else is just UI.  Of course that's not the case.  The UI layer itself will have state which is intrinsically linked to the UI presentation rather than the business model, but at the same time should not be tighly bound to a specific instance of any single UI component. So here's the problem.  I think developers try and use the UI components as state-holders for this kind of data, rather than using them to represent that state. An example of this might be something like the selection state of a tabset (panelTabbed), you might be interested in knowing what the currently disclosed tab is. The temptation that leads to the component reference sin is to go and ask the tabset what the selection is.  That of course is fine in context - e.g. a handler within the same request scoped bean that's got the binding to the tabset. However, it leads to problems when you subsequently want the same information outside of the immediate scope.  The simple solution seems to be to chuck that component reference into session scope and then you can simply re-check in the same way, leading of course to this mistake.

Turn it on its Head 

So the correct solution to this is to turn the problem on its head. If you are going to be interested in the value or state of some component outside of the immediate request context then it becomes persistent state (persistent in the sense that it extends beyond the lifespan of a single request). So you need to externalize that state outside of the component and have the component reference and manipulate that state as needed rather than owning it. This is what I call the UIManager pattern. 

Defining the Pattern

The  UIManager pattern really is very simple. The premise is that every application should define a session scoped managed bean, appropriately named UIManger, which is specifically responsible for holding this persistent UI component related state.  The actual makeup of the UIManger class varies depending on a needs of the application and the amount of state that needs to be stored. Generally I'll start off with a Map in which individual flags can be created as required, although you could opt for a more formal set of typed member variables with getters and setters, or indeed a mix. This UIManager class is defined as a session scoped managed bean (#{uiManager}) in the faces-config.xml. 

The pattern is to then inject this instance of the class into any other managed bean (usually request scope) that needs it using a managed property.  So typically you'll have something like this:

  <managed-bean>
    <managed-bean-name>uiManager</managed-bean-name>
    <managed-bean-class>oracle.demo.view.state.UIManager</managed-bean-class>
    <managed-bean-scope>session</managed-bean-scope>
  </managed-bean> 

When is then injected into any backing bean that needs it: 

   <managed-bean>
    <managed-bean-name>mainPageBB</managed-bean-name>
    <managed-bean-class>oracle.demo.view.MainBacking</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
    <managed-property>
      <property-name>uiManager</property-name>
      <property-class>oracle.demo.view.state.UIManager</property-class>
      <value>#{uiManager}</value>
    </managed-property>
  </managed-bean>

In this case the backing bean in question needs a member variable to hold and reference the UIManager:

private UIManager _uiManager; 

Which should be exposed via a getter and setter pair with names that match the managed property name (e.g. setUiManager(UIManager _uiManager), getUiManager()). 

This will then give your code within the backing bean full access to the UI state.

UI components in the page can, of course, directly reference the uiManager bean in their properties, for example, going back to the tab-set example you might have something like this:

<af:paneltabbed>
  <af:showDetailItem text="First"
                     disclosed="#{uiManager.settings['MAIN_TABSET_STATE'].['FIRST']}">
    ...
  </af:showDetailItem>
  <af:showDetailItem text="Second"
                     disclosed="#{uiManager.settings['MAIN_TABSET_STATE'].['SECOND']}">
    ...
  </af:showDetailItem>
  ...
</af:panelTabbed>

Where in this case the settings member within the UI Manger is a Map which contains a Map of Booleans for each tab under the MAIN_TABSET_STATE key. (Just an example you could choose to store just an identifier for the selected tab or whatever, how you choose to store the state within UI Manger is up to you.)

Get into the Habit

So we can see that the UIManager pattern is not great strain to implement for an application and can even be retrofitted to an existing application with ease. The point is, however, that you should always take this approach rather than committing the sin of persistent component references which will bite you in the future or shotgun scattered UI flags on the session which are hard to maintain.  If you take the approach of always accessing all UI state via the uiManager, or perhaps a pageScope focused variant of it, you'll find your applications much easier to understand and maintain. Do it today!

More Information

Another interesting article relating to this topic has been written by Steven Davelaar  subsequent to the original publication of this post. This article is well worth checking out more more information on this area and some best practice around component references.

Thursday Mar 01, 2012

uncommittedDataWarning - It's a Matter of Timing

An interesting nugget came across my desk yesterday that I though was worth sharing. What's wrong with this picture:

Task flow Diagram

Absolutely nothing right?  That's exactly the kind of taskflow we would expect to see where the user can, from the listEmployee screen, either create a new empty record by following the new navigation rule or edit the current row using the edit rule. The problem in this particular case was, however, that the employeeList screen has uncommittedDataWarning="on" set as an attribute on the document component:

<af:document title="Employee List" 
             uncommittedDataWarning="on"> 

So what happens? Every time the new navigation rule is followed to navigate to the editEmployee screen the uncommitted data warning pops up.  So what's going on here? The listEmployee screen is read only in this case how could it have marked the data control as dirty? 

Well it all comes down to the timing of when the uncommittedDataWarning takes place. The check will be made when the JSF View ID is being changed.  If you look at the above taskflow you'll see that the createInsert method binding will take place before the navigation away from the page, so at the point in time that the continue navigation is invoked the DataControl will be dirty after all and the uncommittedDataWarning check will fail, popping up the dialog. 

The solution in this case is simple (assuming that you have to keep the uncommittedDataWarning="on" on the source page). You can revert to the technique that we used to use in ADF before TaskFlows came along.  You create the method binding for the createInsert operation in the employeeEdit Screen and add an invokeAction in the executables section of the pageDef which is conditional on a flag set on the request. Something like this:

<invokeAction id="InvokeCreateIfRequired" 
              Binds="CreateInsert" 
              RefreshCondition="#{requestScope.editAction eq 'INSERT'}"
              Refresh="ifNeeded"/> 

Then the command item that triggers the navigation to the edit page sets that flag (or does not set it if you want to do an edit rather than an insert) :

<af:commandButton text="New" id="cb1" action="new"> 
   <af:setPropertyListener from="#{'INSERT'}" 
                           to="#{requestScope.editAction}" 
                           type="action"/>
</af:commandButton>

So there you go - there is life in the old techniques yet! 

Saturday Jan 21, 2012

Break Group Formatting in a Table - Part 2

In part 1 of this series I discussed the use of the EL map mechanism as a way that we could fake a function call to manage the logic of the Break Group value display.  In this article I wanted to discuss an alternative which is to actually extend Expression Language and add a custom function to do the job in a "proper" way. 

In doing this I've taken the opportunity to make the code more flexible and generic than the Map example by allowing breaking at multiple levels and breaking in multiple tables in the same view. All in all this is a much cleaner and really simpler solution than that covered in Part 1.

Defining the Function

The EL function that I'm using here is defined in a static method within a class in the project.  It is of course something that could be easlily bundled up into a re-usable JAR but in this case I've done everthing in the ViewController project. Note that I'm using 11.1.2 here and a facelets based page, but this process is essentially the same with 11.1.1.n and JSP(X) based pages.

Here's the function class. It just defines the single static method to do the check.  Notice that this function returns a Boolean to indicate a match with the previous value, but as arguments it takes the value to compare and a key.  This key is an arbitrary String which will allow us to manage several parallel compares. For example if we wanted two break group tables on the same page we would use a unique key value for each. Likewise if you wanted to have more than one break column in a single table you just need to give each a unique identified for this value.  Secondly I've genericized the code to use Object as the type of the compare value so you should be able to break on any attribute type. 

package oracle.demo.breakgroup.el;

import java.util.HashMap;
import java.util.Map;
import oracle.adf.view.rich.context.AdfFacesContext;

public final class BreakGroupFunctions {

  //Key used to store the map we use in ViewScope
  private final static String BREAK_GROUP_STORE = "BREAK GROUP STORE";
  /**
   * EL function to compare a suuplied value with the previous value checked for the same key
   * @param compareKey the key of the value to be checked - usually unique identifies a tabel in the UI
   * @param compareValue the value to compare with the previous value supplied for this key
   * @return True if matches the previously checked value for this key
   */ 
  public static Boolean compareWithLastValue(String compareKey, Object compareValue ){
    Boolean repeatedValue = false;
    AdfFacesContext actx = AdfFacesContext.getCurrentInstance();
    Map viewScopeMap = actx.getViewScope();
    Map bgs;
    if (viewScopeMap.containsKey(BREAK_GROUP_STORE)){
      bgs = (Map)viewScopeMap.get(BREAK_GROUP_STORE);
    }
    else{
      // First access so create and populate the store map
      bgs = new HashMap(1);
      viewScopeMap.put(BREAK_GROUP_STORE, bgs);
    }
    if (bgs.containsKey(compareKey)){
      Object compareLast = bgs.get(compareKey);
      if (compareLast != null && compareLast.equals(compareValue) ){
        repeatedValue = true;
      }
      else{
        // new value, so reset what we'e got stored
        bgs.put(compareKey,compareValue);
      }
    }
    else {
      // This must be a new key so store it away
      bgs.put(compareKey, compareValue);
    }
    return repeatedValue;
  }
}

Define the TagLib

JDeveloper has a handy editor to create the Tag library (New -> Web Tier -> JSF / Facelets -> Facelets Tag Library). This will allow you to define either custom components or functions, as we are doing here.  You basically need just 3 bits of information to define your function in the taglib, the class you created, the function signature in the class and an arbitary namespace string to uniquely identify the taglib.

The resulting XML is pretty simple. Notice the <namespace> attribute which will be referenced again in the <f:view> tag of the page.

<?xml version = '1.0' encoding = 'windows-1252'?>
<facelet-taglib xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facelettaglibrary_2_0.xsd"
                version="2.0" xmlns="http://java.sun.com/xml/ns/javaee">
  <namespace>oracle.com/adf/demo/breakgroup.taglib</namespace>
  <function>
    <description>Compares the passed-in value with the last one that was passed in for this key and returns true to indicate a match or false in any other case.</description>
    <function-name>compareWithLast</function-name>
    <function-class>oracle.demo.breakgroup.el.BreakGroupFunctions</function-class>
    <function-signature>java.lang.Boolean compareWithLastValue(
                        java.lang.String, java.lang.Object)</function-signature>
  </function>
</facelet-taglib>

Wire this into the Page

So finally we need to be able to consume this new function in the page.  The first step is to create the namespace definition in the <f:view ...> tag, in this case I've used "bgf", thus:

<f:view xmlns:f="http://java.sun.com/jsf/core" 
        xmlns:af="http://xmlns.oracle.com/adf/faces/rich" 
        xmlns:bgf="oracle.com/adf/demo/breakgroup.taglib">

Then we can use that function in much the same way as the map reference we used before, but now we can pass two arguments - the value to compare and the compare key:

<af:column headerText="Department" id="c1">
  <af:outputText 
           value="#{row.DepartmentName}" 
           visible="#{!bgf:compareWithLast('departmentsTable_bg1', row.DepartmentId)}" 
           id="ot1"/>                            
</af:column>   

So there you have it. As you can see it's really simple to extend Expression Language for yourself and in doing so opens up a large set of possibilities. Before I go though I'll point you off to a couple of other resources in this subject area which will provide a little more. 

Wednesday Jan 11, 2012

Axis Formatting in DVT Gauge

Further to my last article on gauge style UIs, I though that I'd write up a little more on the core gauge control itself, focusing this time on formatting the axis of the gauge. 

In our original example we just used the defaults for the axis which produced a gauge like this (I've removed the reference marker line that I was focusing on last time).

Defaul Gauge Axis

As you can see the default is to draw tick labels and values at the min/max and at the threshold boundaries.  This is a pretty good set of defaults, but Hugh on the development team pointed out that there is more flexibility than that, so let's explore the options.

The good stuff here is provided by a couple of child tags to the gauge, <dvt:tickLabel> and <dvt:tickMark> these tags allow you to control the vertical tick marks and the text separately and we'll see an example of that a little later. The key attribute here for both of these tags is the content attribute, this takes one or more string constants as a space or comma separated list so you can combine several options together (see example below). Here are the constants:

TC_NONE No label or tick-mark is displayed
TC_MIN_MAX Display label or tick-mark at either end of the gauge
TC_METRIC Display label or tick-mark at the data value
TC_THRESHOLD  Display label or tick-mark at each threshold boundary
TC_INCREMENTS Displays labels or tick-marks at regular intervals as defined by the <dvt:tickMark> majorIncrement property. Note that for the label you cannot mix this attribute with the TC_THRESHOLD or TC_METRIC 
TC_MAJOR_TICK

Displays labels or tick-marks at min/max and the majorIncrement value - effectively the same as "TC_INCREMENTS TC_MIN_MAX". Note that for the label you cannot mix this attribute with the TC_THRESHOLD or TC_METRIC 

We can combine those in different ways, for example to produce this example where we mark the min, max and current values in terms of text but only show a tick-mark at the value (TC_METRIC):

gauge with just the metric tick

The code for this one is:

<dvt:gauge ....>
     <dvt:tickLabel content="TC_MIN_MAX TC_METRIC"/>
     <dvt:tickMark content="TC_METRIC"/> 
...

Or this where we show a more regular axis, similar to the one that we produced when emulating the gauge with the horizontalBar chart:

Gauge with regular increments

And the code:

<dvt:gauge ....>
  <dvt:tickLabel content="TC_MAJOR_TICK"/>
  <dvt:tickMark content="TC_MAJOR_TICK" majorIncrement="30"/>
...

 Finally I wanted to explore one more setting within gauge that allows you to combine the thermometer style bar gauge with the LED style gauge. If you're not familiar with the LED style gauge, it's simply a coloured shape in various styles (circular, arrow, triangle or your own custom image) that changes colour to reflect the relationship between the control value and the threshold ranges. These are usually used for traffic light style indications on dashboards.

One of the things that we can do with the STATUSMETER style of gauge that we've been using here is to colour the whole gauge based on where the value is in respect to the threshold values. So a value of 170 on my gauge example will render like this:

usethresholdColor green gauge

And a value of 15 which is down in the red zone will render like this:

useThresholdFillColor red gauge

The code is extremely simple for this one, just set the useThresholdFillColor attribute to true on the <dvt:gaugePlotArea> tag, another child of <dvt:gauge> and then the correct fill colour will be picked up from your threshold definitions.

Happy gauge-ing! 

Tuesday Jan 10, 2012

Ever Wondered how uncommittedDataWarning Works?

You may have come across the uncommittedDataWarning attribute on the <af:document> tag.  With this attribute switched to "on" the framework will pop up a dialog like this when you try and navigate away from the page with the possibility of loosing the change: 

Browser dialog for unsaved changes

 What if you wanted to check yourself, in a programmable way or from an EL expression, against the same data so that you could, for example, popup your own dialog or mark a "save" menu item as enabled. Is it possible? Well yes of course and really very neat. Here's the code snippet (thanks to Dave S. who gave me this hint ages ago ) 

 ViewPortContext rootViewPort = ControllerContext.getInstance().getCurrentRootViewPort();
 boolean uncommittedChanges = rootViewPort.isDataDirty();

This simple snippet will query all the transactional data controls on the page and in all regions in the page for their dirty status and deiver a simple boolean result to you.

Sunday Jan 08, 2012

An Enhanced Gauge control using HorizontalBar

I thought this one was worth writing up because it highlights a couple of really nice features within the ADF DVT charts -  Reference Objects and Alerts. The scenario was based on a problem where there was a requirement for a conventional horizontal gauge control, showing the normal thresholds for the control - shown in this image here as the red, yellow and green zones:

Basic Gauge

The twist in this case was that we required an extra reference marker on the data bar that indicated the "optimal" value within a particular threshold. So in the image above imagine that within the green zone, 150 was the optimal value and we need to somehow indicate that.

Simply using the gauge it is possible to do this using an extra threshold value at the required value, or rather two extra threshold definitions, we have to terminate the threshold that currently starts at 90 at 150 (the reference value we want to mark), then a short threshold from 150-151 just to provide the reference marker we need, then an extra green threshold from 152 to 200 to complete the green bar.  You end up with this:

Gauge with reference line

So that works pretty well - but it's a limitation of the use of thresholds that all you can achieve is a block of colour or line behind the indicator bar, plus the fact that I've used an extra level of the thresholdset here means it's not very dynamic (although of course it could be if you want to start writing code). Think about if we wanted to overlay several different dynamic markers such as min/max levels reached in the last 24 hours. That would be do-able but it is getting messy. 

Another approach to take is to use the bar chart (horizontal in this case) to simulate the gauge. We don't have the dvt:threshold /dvt:thresholdSet  in the case of charts but we do have the equivalent with dvt:referenceObject. Reference objects allow you to place a filled area or line in front or behind the data series so we can emulate the same look that we had with the gauge:

Gauge using horizontal bar chart

As you can see it looks pretty similar, although there are some slight differences:

  1. Unlike the gauge, which displays value labels at the threshold boundaries, the axis on the chart has a regular labelling at fixed intervals based on the y1Axis setting.
  2. We're missing the tick marks between the Y axis and the labels - well in fact that's a slight bug, they are there, but the size in proportional to the height of the chart (46px in this case). In 11.1.2 and above you should see them correctly.
  3. The proportions of the series bar / chart area are  slightly different to the gauge. But that's only noticeable if you are mixing and matching.

 Let's break down how to create some of the features here:

Overall Size

The height / width of the cart had to be controlled somewhat to bring it down to gauge dimensions.  This is acheived using inlineStyle on the horizontalBarGraph tag:

<dvt:horizontalBarGraph id="gaugeClone"
                        value="#{bindings.GaugeChartData.graphModel}"
                        subType="BAR_HORIZ_CLUST"
                        inlineStyle="width:400px;height:46px;"> 

We also need to ensure that the y axis is fixed. By default it will be scaled based on the max value of the data which we don't want. To do this we define the min/max values on the nested y1Axis tag and set the axisMaxAutoScaled attribute to false. We also define the tickmark label interval to 30 here.

<dvt:y1Axis axisMinValue="0"
            axisMaxValue="280"
            majorIncrement="30"
            axisMaxAutoScaled="false"/> 

Bar Styling

By default the gauge has that grey-ish colour  whereas the deafult colour for the first series in a bar chart will be a blue (which is nice, but for the sake of consistency I wanted to change). The colours / shapes used for bars, lines and markers in charts are all controlled by dvt:series tags. So here I've set up the values for series 0 which defines the bar data and set both the fill and the border to emulate the look of the gauge. Note that the series tag needs to be wrapped in a seriesSet.

<dvt:seriesSet>
  <dvt:series index="0" 
              color="#99ccff" 
              borderColor="#848484"
              borderTransparent="false"/>
</dvt:seriesSet>

Threshold banding

Next we want to add the banding to emulate the gauge thresholds. To do this we use the referenceObject tag with the RO_AREA type set to make it fill the defined area rather than draw a line. Again the referenceObject tags need to be enclosed in a parent, referenceObjectSet:

<dvt:referenceObjectSet>
   <dvt:referenceObject index="1" type="RO_AREA"
                        association="SERIES" location="RO_BACK"
                        color="#ff0000"
                        lowValue="0" highValue="30"/>
   <dvt:referenceObject index="2" type="RO_AREA"
                        association="SERIES" location="RO_BACK"
                        color="#f7ffd6" 
                        lowValue="30" highValue="90"/>
   <dvt:referenceObject index="3" type="RO_AREA"
                        association="SERIES" location="RO_BACK"
                        color="#00ff00" 
                        lowValue="90" highValue="200"/>
   <dvt:referenceObject index="4" type="RO_AREA"
                        association="SERIES" location="RO_BACK"
                        color="#f7ffd6" 
                        lowValue="200" highValue="230"/>
   <dvt:referenceObject index="5" type="RO_AREA"
                        association="SERIES" location="RO_BACK"
                        color="#ff0000" 
                        lowValue="230" highValue="280"/>
</dvt:referenceObjectSet> 

The Reference Line 

Just like with the gauge we manipulate the reference object set to add the reference line at 150. However, reference object actually has a line subtype so we can simply use that rather than having to use an area with width of 1. We add the following into the referenceObjectSet:

<dvt:referenceObject index="6" type="RO_LINE" lineValue="150.0"
                     association="SERIES" location="RO_BACK"
                     color="#000000" /> 

The nice thing here is that we can flip this line so it overlays the series. This is not something we can do with Gauge:

<dvt:referenceObject index="6" type="RO_LINE" lineValue="150.0"
                     association="SERIES" location="RO_FRONT"
                     color="#000000" /> 

Which gives us this:

Bar based gauge with overlay reference

The lineValue attribute can, of course, be an EL expression rather than a hard-coded value so you can make the reference point dynamic.

Using Alerts to Add Markers

The final twist is to move away from these plain lines that we've been using as marker values so far and just retain the referenceObjectSet for the threshold banding.  Graph supplies a second "set" of things - the alertSet, which will allow us to overlay gif and png images over the series. Using that we can overlay multiple markers that look a little more attractive - like this:

Bar based gauge with overlay marker icons

You could imagine this being used to reflect min / max values or that kind of thing, it's a really neat capability. To do this all we need to do is add a simple alertSet (note that all of the hardcoded values here could be replaced by Expression Language for a dynamic gauge).

<dvt:alertSet>
   <dvt:alert xValue="Power Consumption"
              yValue="150" yValueAssignment="Y1AXIS"
              imageSource="/images/slider.png"/>
   <dvt:alert xValue="Power Consumption"
              yValue="220" yValueAssignment="Y1AXIS"
              imageSource="/images/slider.png"/>
</dvt:alertSet>

The xValue attribute maps the alert marker onto the required series bar.

Finally, just for fun, see if you can work out how to do this one:

The puzzle

Answers in a comment please...

Final Thoughts

So should you use this technique rather than the out of the box gauge control? Well only of you really need to.  Gauge is simple and lightweight and if all you need is a simple reference line, thresholds do the trick quite well. However, this technique does go to show that if  you think out of the box a little you can do a lot with the DVT tools at your disposal. If nothing else you now know about referenceObjects and alerts!

About

Hawaii, Yes! Duncan has been around Oracle technology way too long but occasionally has interesting things to say. He works in the Development Tools Division at Oracle, but you guessed that right? In his spare time he contributes to the Hudson CI Server Project at Eclipse
Follow DuncanMills on Twitter

Note that comments on this blog are moderated so (1) There may be a delay before it gets published (2) I reserve the right to ignore silly questions and comment spam is not tolerated - it gets deleted so don't even bother, we all have better things to do with our lives.
However, don't be put off, I want to hear what you have to say!

Search

Archives
« July 2015
MonTueWedThuFriSatSun
  
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
31
  
       
Today