Monday, September 26, 2011

Using themeId for maintainability

In an application I'm currently working on, there are several categorized views with number-/totals columns. As the number of views/columns increased, I looked for a way to make styling of the columns more maintainable.

The solution I found was using themeId on the columns and calling a SSJS function in the theme, that generates the style classes.

I chose numberColumn as the name for the themeId.

In theme

<control>
<name>numberColumn</name>
<property>
<name>styleClass</name>
<value>#{javascript:return StyleHelper.getNumberColumnStyleClass( this );}</value>
</property>
</control>
this refers to the column object.


SSJS code

var StyleHelper = {
// Used to calculate styleClass for a number column
getNumberColumnStyleClass: function( column ){
try {
var entry = column.getViewRowData();
var styleClass = 'numberCell';
if( entry.isCategory() ){ styleClass += ' categoryCell'; }
if( entry.isTotal() ){ styleClass += ' totalsCell'; }
return styleClass;
} catch( e ){ /* Exception handling */ }
}
}

Regular column cells will get class="numberCell".
Totals column cells will get class="numberCell totalsCell".
Category column cells will get class="numberCell categoryCell".

All I have to do to add dynamic styling to future columns is to set themeId on the column to numberCell.

0 comments: