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