Tag: rivet

JBoss Seam Client for Alfresco – a Rich Java UI for Alfresco

Posted by on November 18, 2008

Since Alfresco was first released in 2005, I have led a number of projects that required some sort of custom user interface on top of the Alfresco repository.  In a few cases, we customized Alfresco’s standard web client.  For others, we built custom interfaces that were stand-alone web applications or were exposed via portlets within a portal framework like Liferay or JBoss Portal.

In most cases, we needed a user interface that was not embedded within the repository, but rather was hosted remotely as a standalone web application.  To do this, the main choices for the web application to communicate remotely with Alfresco are the following mechanisms:

Each one of these approaches has its pros and cons and the choice is highly influenced by the client’s needs.

Alfresco’s Surf platform provides a powerful framework that enables developers to leverage most if not all of the repository’s features using a RESTful approach using their Web Script runtime engine. It also allows for the web tier to be remote to the Alfresco repository.  Surf is a very good option for projects that have a Javascript-centric web tier, using frameworks such as ExtJS.  We have successfully built and deployed several Web Script-based UIs for customers, including one of the very first public sites to leverage Web Scripts found at http://highschool.ccsso.org.  In its most recent v3.0 release, Alfresco provides a UI platform for aggregating Surf dashlets to create fully functional web clients.  This platform is known as Alfresco Share.

However, we also have customers who want a Java-based UI solution too.  Alfresco’s original web client UI is a JSF/Spring based application that is customizable in many ways and is the only available alternative in this case (short of building your own web client).  It is built using a large number of custom JSF components that are very nice as long as your target UI is expected to behave similarly to Alfresco’s web client.  If you were asked to change the way one or more of these components work things start to get a little hairy especially when you realize how much work is required to make it do exactly what was needed.  There was an apparent need for developing a Java-based UI platform that shared some of the Share features.

So we set out to fill this void: To create an open source, Java-based UI platform for Alfresco.

We turned to JSF for the view framework, as it is the predominant standard in the Java community.  One of the challenges of JSF component development has always been ease of customization, or the lack of it.  Even though the JSF spec allows for extending UI components, it is still not trivial to make your components very flexible.  And what typically happens in those situations is that smart people decide to put in a lot of work into getting rid of the problem.  That’s where the JSF component suites come in. There are a lot of them out there.  Some open source, some not. Naturally I’m only interested in the open source ones.

When working with JSF components suites like JBoss RichFaces you gain a lot of leverage when you incorporate a framework that makes dealing with the JSF lifecycle both intuitive and easy.  If you guessed that I was talking about JBoss Seam, you’re right.

Projects that are more Java-centric and make use of web frameworks such as JSF would find that a remote Java API that provides access to the Alfresco Foundation Services (AFS) is necessary.  In this case, our own Remote Alfresco API rivet is ideal.  It is both scalable and fits within the JEE tiered approach quite nicely.

For these reasons, the technology stack we used for building our Java-based Alfresco web client is comprised of JBoss Seam, RichFaces/Facelets, and RAAr.

So here was the perfect opportunity to bring all this technology together and provide the Alfresco community with an example of a new way for developing Web 2.0 rich web clients for the Alfresco repository.  We decided that the web client had to be rich (AJAX is key here and RichFaces among other JSF component suites makes it possible), remote from the Alfresco repository, and modular so that it could be reused in other projects in the future.  And while we were at it, it needed to be easy for new developers to contribute to.

We gave the web client a name that explains what it really is; Seam Client for Alfresco rivet — SCAr.  (As an aside, because we incorporate RichFaces we also considered calling it ScarFaces :^)

From a high level, SCAr makes use of RAAr to utilize a complete suite of services that fully expose Alfresco ECM’s core services at the back-end, and a number of out of the box JBoss RichFaces AJAX enabled UI components at the front-end tied together using JBoss Seam to provide a single page multi-user interface to Alfresco ECM’s document management system.  The following diagram shows a high-level overview of SCAr.  The power of this architecture is in its inherent simplicity without sacrificing flexibility.

SCAr high-level architecture

The internal architecture of SCAr is broken down into a number of RichFaces components each exposing one or more of Alfresco’s document management features.  Each RichFaces component is backed by a Seam action class (POJO), where each Seam listener has access to a RAAr abstraction layer providing it with an easy to use domain specific API into Alfresco ECM. By making use of Seam observers each user action triggers one or more events at the back-end allowing one UI component to manipulate the state of the other components on the screen as needed.

The following is a screenshot of what SCAr looks like to a typical end user:

SCAr UI

This development framework makes enabling new features and customizing the behavior of existing ones straightforward.

A demo site running SCAr can be accessed at http://scar.rivetlogic.com.

If you want to know more about SCAr you can visit its wiki pages here: http://wiki.rivetlogic.org/display/SCAr/