Pages

Monday, January 07, 2013

RichFaces 4.2.x: Unique <rich:dataTable/> Design

In my current job, I have opportunities to do Proof-of-Concept for various new JSF ideas for our products. I often do a lot of these general experiments on my own time after hours at home. That is not unusual I would imagine for most developers. A couple of months ago I was tasked with trying to generate a table dynamically using RichFaces 4. In RichFaces 3, you could provide dynamic columns and have it generate the table columns and data dynamically. This functionality is currently not available in RichFaces 4.2.

I came up with a strange amalgamation of bed-mates which worked. It is an interesting approach to getting around various problems encountered developing tables.

An additional requirement was the ability to sort the data displayed in the table. Since our application at work does BI analytics, doing server side sorting is much slower and expensive than doing it client side. This problem was partially solved with JQuery and a plugin called TableSorter. I think it will work on most basic tables, and this one... well is no different.

Are you ready for some magic?

Data Table Design #3



Now that you have a chance to look at the XHTML file, I am sure you noticed some strange things like a mix of <c:forEach/> wrapping a number of <rich:column/> components inside a <rich:dataTable/>. This is the normal configuration that you might see. Also, we have added a <rich:jQuery/< component along with our JavaScript. Yes, it works. The data is pulled from JPA and displayed. It also elegantly sorts on all of the columns. The only strange code is the EL code in the <c:forEach/> for the items attribute. Since the <c:forEach/> is expecting an array, or a Collection (List) to iterate over, we must provide it a customer in that format.

I thought about deleting the design, but it actually works and may help someone solve a problem so I am publishing it.

I will publish all of the other designs once they are cleaned up in project for download.

2 comments :