RichFaces 4.3.x Tip of the Day: Complex RichFaces Data Tables

Introduction

I have been working on JSF tables for the various projects I have been involved with over the years. Starting in 2012, I began looking at RichFaces <rich:dataTable /> for some projects at my day job. The research into how to handle a number of complex situations has been enlightening to say the least.

The table is the most complex component in HTML. It is seemingly boundless in its extensibility. You can have multi-column headers that span multiple rows, you can multi-row cells, or multi-column cells. Tables can be displayed left-to-right, or right-to-left, top-to-bottom and vice-versa. As a result, when developing components for JSF, or any component framework, decisions must be made on how to generate them.

A couple of the component frameworks like PrimeFaces, and RichFaces allow developers to create more complex tables with more ease. However there are limitations with each of these frameworks. We trade flexibility for consistency, and this is fine in most cases.

The demonstration code in this post is about getting some of the flexibility back, or taking advantage of the flexibility that comes with a framework like RichFaces. We will gain the flexibility back, but it is a function of complexity. The examples will show you techniques for doing the "same thing" in multiple ways. For example, sorting can be done on the server, client, or a combination of both.

The question is where we put the complex bits. The answer to that question depends on you as a developer. You need to examine the problem domain, and understand the limits to the techniques presented.

Solutions

Please let me confess something. I like building HTML objects programmatically. There I said it. In this case I am trading the ease of development for flexibility. The solutions below will demonstrate the different techniques for accomplishing the same functionality. Please examine the code carefully before discounting it. I spent a lot of time playing with it to make it look simple.

The code for this project was developed using NetBeans and Apache Maven. The code was tested on GlassFish 3.1.2.2 and 4.0. It should work on other application servers, but I have not tested it on other servers. This project assumes you are using NetBeans which includes a sample database that these examples require. If you are not using NetBeans, you will need to create your own database with sample data to display some of the tables.

The code can be downloaded from Bitbucket at the link below, or in the references section at the end of the post.

richfaces-tables-poc

Dynamic Data Table with Sorting

Dynamic Table with Sorting

This example uses the binding attribute of the <rich:dataTable /> to bind our table to a CDI @ManagedBean. The bean is responsible for generating the table programmatically, and returning it back to the page. The data is sortable by column.
As you can see the page is very simple. In fact, most of the page is plumbing and navigation. The <rich:dataTable /> is the smallest part of the page. The code to generate the table is much more complex.
As you can see we have traded simplicity in the page for complexity in the @ManagedBean. If you are satisfied with this technique, lets take a look at another one.

Dynamic Data Table with Sorting Revisited

Dynamic Table

This table uses the same dynamic binding as the example above on the JSF page, but uses helper utilities to create JSF components dynamically from a library that I have written. It is a separate project that you can download (Please see references). This reduces the chances for errors creating common components, but it is still a lot of code. To check our sorting, I have made a "random" data generator for the table data for the code to sort.
The more simplified code in the @ManagedBean is shown below.
The code above was written before I added more functionality to my jsf-utils project. The new methods would shorten this considerably, but it would still be fairly complex.

Dynamic Table using JSP/JSTL Tags with JSF

JSF/JSTL Dynamic Table

Let me start this example with a warning. If you are using JSP/JSTL tags in your JSF pages, you may encounter very bad behavior. This technique should only be used as a last resort. I will not labor a point. If you don't understand why this is a bad idea, take a look at this post for links: JSF 2.x Tip of the Day: Great Blog Posts Explaining JSTL vs. JSF.
In this example, I will generate the rows and columns using <c:forEach />. This transfers a lot of the complexity to the page and away from the @ManagedBean. Since we are using <c:forEach />, our mechanism for sorting has to change. I used Query jquery.tablesorter.js to allow sorting of the headers.
As you can see we have much simpler code in the page bean. It looks like what you would expect for a normal JSF data table.

Complex Data Table Design

Complex Table Design

This table has a lot of really cool features, but the code is complex in the page, and the page bean is relatively simple.

Conclusion

RichFaces supports complex table designs, and produces nice results. The amount of work required to create dynamic data tables depends on the technique chosen, and limitations on the data being presented. There is no "one good way" to create data tables. Suffice to say that the easiest path should be chosen.

References

• richfaces-tables-poc Apache Maven project
• jsf-utils
• JSF 2.x Tip of the Day: Great Blog Posts Explaining JSTL vs. JSF
• RichFaces
• NetBeans IDE

JSF 2.x Tip of the Day: FacesMessage Severity Differences Between Mojarra and MyFaces

Introduction

We encountered an inconsistency between MyFaces and Mojarra that I was surprised was not addressed a long time ago. The issue has to do with the ordinal values assigned to the FacesMessage.Severity. Mojarra uses a zero(0) based level of Severity and MyFaces uses a one(1) based Severity level. As a result, we were trying to use a <rich:notifyMessages/> component with, as you can expect, some unexpected results.

One of the items I always preach is to code to the API. If you code to the API, then you can switch out the implementations should the need occur. This is a best practice, but can be undermined by little subtleties like this. Please don't get me wrong, both Mojarra and MyFaces are great implementations. It is these fine differences that should be consistent that we need to work on to make sure that we are consistent, and that the dream is real; switching implementations will not be painful.

RichFaces is a good framework, and folks like Brian Leathem take personal pride in making it a good implementation to run on top of either Mojarra, or MyFaces. I was really surprised by my discovery of an issue with <rich:notifyMessages/> since the <rich:messages/> works correctly. The problem is focused on the ordinal value I mentioned. I opened a JIRA issue with both MyFaces and RichFaces around the ordinal issue. Please see the references below for details.

However, I needed a solution not just report an issue. So I came up with a 10¢ solution based on some work I did at home last night, and a great suggestion by one of my team. I wanted to publish an article, a complaint, and a solution that others may need. These work arounds tend to become more common when doing cross-platform development, and sharing is paramount.

Problem

The RichFaces <rich:notifyMessages/> does not work consistently across JSF implementations based on Severity ordinal values.

Solution

Implement a method that checks the FacesMessage.Severity ordinal values, and change icons and CSS to correct the differences between implementations. We can accomplish this using CSS, and Expression Language (EL) combined with a page backing bean. In this case, I use a simple page backing bean, but it could be converted to a custom EL function.

The code for this example can be found here: myfaces-rf-example

default.css

---

iconURL()

---

This simple solution allows us to check to see if the implementation starts at 0, or 1 and changes the icons and CSS.

References

• MYFACES-3768 FacesMessage Severity ordinal values are not consistent with Mojarra RI
• RF-13161 rich:notifyMessages CSS incorrect on MyFaces 2.x
• myfaces-rf-example

JSF 2.x Tip of the Day: RichFaces 4.3.x Resource Mapping

I have a great opportunity to do different things at work. I get to help solve some really interesting issues around web development. This is particularly true with JSF. In the last few days we have been working on some issues with WebSphere using JSF. In particular, there is an issue with Drag-and-Drop (DnD) on RichFaces with MyFaces on WebSphere. We figured out that there is a possible fix we can implement by fixing the RichFaces DnD Javascript library.

So.... the question is how do we implement the changed library without having to compile a custom version of RichFaces, or modifying the files to load our changed script and prevent the bad script from loading, or implementing our own ResourceHandlerWrapper.

Well there are a number of alternative solutions, but if you are using RichFaces  there is a simple choice: using the Resource Mapping feature of RichFaces  This feature allows you to remap resources to point to alternative resources. This is a really helpful and convenient feature, and solves our problem of modified DnD JS for our RichFaces application.

The details of how to use it are mentioned on the Resource Mapping page, but only from a very high level, and there is no example implementation. There is a blog post Re-routing JSF resource requests with RichFaces Resource Mapping from Lukas Fryc which details more functionality than the guide, but there is no complete example. I am going to rectify that with this post.

The code for the example that follows is located here: richfaces-resource-mapping.

The first thing you need is a static-resource-mappings.properties file. This tells the RichFaces ResourceServlet what the alternative mappings should be. In the example application above my mappings look like the following.


As you can see, I am remapping images to remote IP addresses, and the jquery.js file to an alternative location on the file system. This alternative remapping of jquery.js file allows us to replace the JQuery instance that comes with RichFaces with our own alternative version.

The static-resource-mappings.properties needs to be located in the META-INF/richfaces directory, or one of the other alternatives as noted in Resource Mapping guide. This can be easily accomplished in Maven using the code below:

This allows us to copy the files in the resources directory to META-INF/richfaces automatically while building.

That is pretty much it. How about that for being easy.

Here is what the output looks like in the example application: richfaces-resource-mapping.

RichFaces Resource Mapping

RichFaces 4.x Drag and Drop (DnD) Issue with MyFaces and WebSphere 8.5

I have been fighting with MyFaces for a couple of weeks now to get it to run on multiple containers that have Weld as the CDI implementation, and also to run on WebSphere with OpenWebbeans (CDI) implementation. Just when we thought we had the problem solved... RichFaces is killing us with a Drag and Drop (DnD) issue on MyFaces.

The issue is detailed in RF-12675 Drag and drop doesn't work with MyFaces. It is an ugly bug that prevents the application from dropping the draggable on the drop target. It is supposed to be fixed according to JIRA in version 5 which as far as I know has an undetermined launch date at this time.

I think that the issue probably warrants investigation by the RichFaces team, but I am posting this just in case folks have encountered the same issue.

I have a test application that is from on the RichFaces Showcase application that demonstrates the Drag and Drop functionality. I tested it on GlassFish, JBoss 7, and Weblogic 12c. It works perfectly on those platforms but the drag freezes in "mid-air" on WebSphere 8.5 with MyFaces.

Here is a link to the application, or you can get it from the JIRA issue above: dragdrop-test.zip.

I hope the RichFaces team reconsiders the bug since it affects 4.2.3 and 4.3.2 final releases.

UPDATE: One of the Senior Engineer's on my team, Amit Tikoo, confirmed the issue is focused on the <rich:dragIndictor />. The work around is to remove the indicator and the application will function. The JIRA issue was updated with the observations.

JSF 2.x Tip of the Day: RichFaces 4.3.x Charts in JSF using JSFlot, JFreeCharts, and PrimeFaces

Sexy PrimeFaces Charts in RichFaces

Introduction

I was asked to look at various charting solutions for JSF. Specifically, I was asked for some choices for use with RichFaces 4.3.1. I knew that PrimeFaces has really good chart components already so I knew it might be kind of fun to integrate them if possible. I was also aware of JFreeChart which will work, but produces some... rather ugly charts. Finally, someone had suggested that I look at jsflot. This was a very promising solution. This project is a proof of concept which demonstrates integration between projects, and technologies.

Requirements

• jsflot
• NetBeans This is required for the sample database, although you could create your own data.

The jsflot framework is currently not Mavenized, so if you are going to run my example code, you will need to download it from the link above, and install it in Maven using the command below.

Code

The code for this NetBeans Maven project can be found on BitBucket here: chart-demo

This is the bean that provides the data models for the charting solutions. There are a number of chart demos in the project. The two charts above are just examples.

ChartBean.java

JSF 2.x Tip of the Day: RichFaces <rich:tree /> Component Examples

Custom TreeModel and TreeNode

I have some code that I originally wrote for a proof of concept for doing some RichFaces <rich:tree /> examples. The modified code in these examples demonstrate how to use custom TreeNode, and TreeDataModel implementations to make really nice and functional trees. The code for my generic TypedTreeNode and TreeNodesSequenceKeyModel are fully functional and can be used out of the box as the basis of your own tree implementations.

The examples include the model provided by RichFaces, my custom model (TreeNodesSequenceKeyModel), and a custom implementation of a node. The custom node is generic so you can pass in any object you like. I chose to use text, but you could use a more complex object.

The custom model, custom node, and tree are shown in the image on the right. This also has events being shown when a node is selected, or toggled.

The project was developed using NetBeans along with Apache Maven.

The project can be found on GitHub here: richfaces-tree

Note: The project has been moved to GitHub and has a couple of release versions.

• 1.0 - Initial Release using Java EE 6
• 1.2 - Updated functionality using Java EE 6
• 2.0 - Updated to RichFaces 4.5.14.Final and Java EE 7.

Code

TypedTreeNode.java

---

TreeNodesSequenceKeyModel.java

---

JSF 2.1 Tip of the Day: RichFaces 4.3.x Drag and Drop

Multiple DnD Targets

The Primefaces version of my drag-n-drop (DnD) for JSF has been very popular. I didn't want my friends at Red Hat feeling left out. I did a couple of examples using drag-n-drop with the same arrow demo as the Primefaces example: JSF 2.1.x Tip of the Day: Primefaces 3.5 <p:ring/> Drag-N-Drop Example.

I did have a little more fun with using Java to clone some of the arrows so that you could see how to use them multiple times.

Requirements

• Mojarra 2.1.20
• richfaces-core-api 4.3.1.Final
• richfaces-core-impl 4.3.1.Final
• richfaces-components-api 4.3.1.Final
• richfaces-components-ui 4.3.1.Final

Details

The project was developed using NetBeans 7.3 and Apache Maven. The Mercurial project can be found on BitBucket here: richfaces-dnd-examples

Code

---

JSF 2.x Tip of the Day: RichFaces Table Sorting (3-position switch design)

A technique I like to call the three position switch is what I use for sorting on my RichFaces tables. This consists of default (unsorted), ascending, and descending. It is implemented very easily by setting the <rich:column/> sortOrder attribute to point to our current sort, and using an <a4j:commandLink> in the header facet to control the sort as shown in the example below. This simple technique makes sorting simple and sexy.

code

This additional code will let the user know which sorting direction we are currently using.

JSF 2.x Tip of the Day: RichFaces Programmatically Creating an <a4j:commandLink/>

This example of how to create an <a4j:commandLink/> uses another library called jsf-utils to handle the heavy lifting.

The method below will create the <a4j:commandLink/> component, any additional configuration will need to be performed programmatically, or using the tag attributes.

You would bind it to a backing bean to a UICommandLink component;

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.

JSF 2.x Tip of the Day: Creating RichFaces <a4j:commandLink/> Programmatically

As soon as I posted the previous blogpost Java Evangelist John Yeary's Blog: JSF 2.x Tip of the Day: Programmatic <h:commandLink/> I got a request for how to do it with RichFaces. The process is almost the same.

Here is an example for creating <a4j:commandLink/>

---

This example creates one for a table sorter on a RichFaces data table.

RichFaces 4.1.0 Final on NetBeans 7.1 IDE

I created a video which demonstrates how to add RichFaces 4.1.0 Final as a component library in NetBeans 7.1. The video details how to add the required jars to create the library, demonstrates code completion, and finally deployment to GlassFish 3.1.1 for display.

In the video I take advantage of using my local Apache Maven repository which includes all of the dependencies required.

The list below includes references to the required libraries and versions. There is a link to the video as well.

• sac-1.3.jar
• guava-r08.jar
• cssparser-0.9.5.jar
• richfaces-core-api-4.1.0.Final.jar
• richfaces-core-impl-4.1.0.Final.jar
• richfaces-components-api-4.1.0.Final.jar
• richfaces-components-ui-4.1.0.Final.jar

NetBeans 7.1 Library Manager

Internet Explorer 8 and XHTML Comments

Image via Wikipedia

Yesterday, I posted a JSF 1.2 login example using nearly pure JSF. I discovered the answer to a bug which was not documented anywhere that I can find. The issue has to do with comments. Internet Explorer 8 seems to choke on them. When I created the example yesterday, I tested it extensively on a number of modern browsers that I have available to me. It works perfectly as expected... with one exception. The other browsers treat the <-- COMMENT --> perfectly. Internet Explorer can not seem to digest it. There is likely some reason (READ EXCUSE) for this behavior, but I can not seem to fathom it. The result on the login page is to cause the browser to spin until timeout, and then re-render the previous page.

This error seems to not care if the DOCTYPE is declared before, or after the comment. I checked just in case.

OK...So I found a bug, but how do you fix it. Well, it is really easy.

1. Remove all the comments from the page. This is bad for obvious reasons.
2. If you are using facelets, we have two methods available depending on the version of JSF you are using.
   
   • JSF 1.2 - Add this context parameter to the web.xml
     

     <context-param>
             <description>
                 If comments are enabled, the copyright header will prevent the login form
                 from working on Internet Explorer. Alternatively, you can remove the copyright
                 header.
             </description>
             <param-name>facelets.SKIP_COMMENTS</param-name>
             <param-value>true</param-value>
         </context-param>
     

   • JSF 2.x - Add this context parameter to the web.xml
     

     <context-param>
             <description>
                 If comments are enabled, the copyright header will prevent the login form
                 from working on Internet Explorer. Alternatively, you can remove the copyright
                 header.
             </description>
             <param-name>javax.faces.FACELETS_SKIP_COMMENTS</param-name>
             <param-value>true</param-value>
         </context-param>
     

Once you disable the comments, the login page works perfectly. The comments also apparently cause issues with rendering RichFaces pages which now work without issue, or compatibility mode hacks.

Related articles

• JSF 1.2 Facelets Form Based Authentication (j_security_check) (javaevangelist.blogspot.com)
• Google Apps phasing out support for Internet Explorer 7 on August 1 (winrumors.com)
• RichFaces 3.3 (Ajax4JSF) and Apache Myfaces Tomahawk AJAX Example (javaevangelist.blogspot.com)
• JSF 2.1.x on Tomcat 6.0 (javaevangelist.blogspot.com)