Decorate UI with view row Attribute's User Interface hints

This post discusses the possibility of using custom view row attribute hints to decorate your view layer. For example, let us take an Employee table, the use case requirement is to display red icon in a column if the salary is greater than 10000, green icon for all other cases. Please see the below screen shot for reference.



Apparently there are multiple ways to achieve this. The approach I followed here is through custom view row attribute hints implementation. The idea is inspired by an earlier post from Steve.

A glance at the implementation

Implementation is very simple, Override ViewRowAttrHintsImpl::getHint(...) by sub classing ViewRowAttrHintsImpl. Please note that ViewRowAttrHintsImpl::getHint(..) will get invoked whenever the binding layer identifies any custom hints in the EL.

The below implementation overrides the default behavior of getHint(...) to return different icons based on the salary, for the custom hint 'statusIcon'.

Map iconMap = new HashMap<String, String>() {
  {
    put("LowSalIcon", "images/lowSalIcon.gif");
    put("HighSalIcon", "images/highSalIcon.gif");

  }
};

@Override
public String getHint(LocaleContext locale, String sHintName) {

if ("statusIcon".equals(sHintName)) {
    Number salary = (Number)getViewRow().getAttribute("Salary");

    if (salary != null && salary.getValue() > 10000)
    return iconMap.get("HighSalIcon");
    else
    return iconMap.get("LowSalIcon");
}
return super.getHint(locale, sHintName);
}

You can wire this custom ViewRowAttrHintsImpl to a ViewRowImpl by overriding
ViewRowImpl::createViewRowAttrHints(AttributeDefImpl attrDef)

@Override
protected ViewRowAttrHintsImpl createViewRowAttrHints(AttributeDefImpl attrDef) {
return new EmployeesViewRowAttrHintsImpl(attrDef, this);
}

Now, you may need to refer this custom hint(statusIcon) from the UI using EL binding. The below jsf snippet shows how this is done when you use table.

<af:column sortProperty="Status" sortable="false"
     headerText="#{bindings.EmployeesView11.hints.Status.label}"
     id="c7">
<af:image source="#{row.bindings.Status.hints['statusIcon']}"
      id="ai1"/>
</af:column>

How does it work?

While rendering each status column for a table, EL #{row.bindings.Status.hints['statusIcon']} trigger EmployeesViewRowAttrHintsImpl::getHint() method, which in turn return the desired icon.

If you use form, then use below EL binding to refer the custom hint

<af:image source="#{bindings.Status.hints.statusIcon}" id="i2" shortDesc="status"/>

You can download the sample workspace from here.
[Runs with Oracle JDeveloper 11g R1 PS2 + HR Schema]

Learn More ...

There are many more points like this. If  you are curious to learn the internals of the ADF Business Components and ADF Binding Layer,  the following book is for you - Oracle ADF Real World Developer’s Guide.
More details about this book can be found in this post- http://jobinesh.blogspot.in/2012/10/oracle-adf-real-world-developers-guide.html

Comments

  1. Great post Jobinesh. An interesting idea indeed.

    I am wondering however if its a good idea to put icon names (and folder location) in VO.
    Would it be a better idea for the VO to retun state (high, medium, low) and let the UI switch icons accordingly?

    Thanks,
    Husain

    ReplyDelete
  2. thanks...
    I agree if the icon name is set as a VO attribute or if the VO contains some client specific code(say html snippet/Swing classes). That said however, the above sample is more like extending Control Hints for VO, so valid where you have model driven approach to build your UI

    ReplyDelete
  3. Hi Jobinesh,

    in our application we use dvt:gauge (LED-Type) to display status icons like in your approach.
    The advantage in my point of view is that dvt:gauge has build-in functionality to declare treshholds and according colors.

    regards
    Peter

    ReplyDelete
  4. Peter,
    You are right! your approach seems to be better from this specific use case's perceptive. Thanks for sharing this tip.

    ReplyDelete
  5. Amazing issues here. I'm very glad to look your article. Thanks a lot and I am taking a look ahead to touch you. Will you kindly drop me a mail?
    my webpage - online portfolio

    ReplyDelete

Post a Comment