The first part of this article presented an approach to create a custom Facelets component that behaves like a tabbed panel.
This part discusses the creation of a custom table that supports adding any kind of composite columns.
As you see in the picture, the particularities of this table are the first column, which is made of checkboxes, and the last one, made of drop-downs. So, can we build a custom facelet component that can allow something like this?
For this demonstration, the base component is going to be an icefaces component, an ice:dataTable (similar to h:dataTable, but AJAX-enabled).
Let’s see how the client code could look like:
The table can be thought of as having a main ‘body’, comprised of ‘regular’ columns, and a part built out of ‘custom’ columns.
The body of the table represents the columns containing cells that render as text properties from the underlying data model, the data model being a list of POJOs. Here’s how the ‘body’ is built: iteratively split “pojoProperties” parameter by “,”, obtaining a property, render that property value as text inside the column and attach each column to the table:
As for the part built out of ‘custom’ columns, the innovation would be the fact that you can add any kind and number of columns by specifying the ‘address’ (the location of the file) and an additional parameter, the name of a property from the bean.
The component will separate the column addresses, splitting them by comma (‘,’). Then, using the ui:include tag, each of them will be added before the ‘body’ of the table (hence the name, columnsToInculdeBeforeBodyAndProperties). In the code below, the entity instance, the name of the property and the current iteration index (remember that ice:dataTable is an iteration component) will be sent to each column specified at the location. Those parameter values can be used inside the column file for data processing.
This is how a custom column could look like:
Again, note the flexibility that this approach gives you.