« 3 ways to easy Ajax in Seam + JSF + Facelets (Prelude)
3 ways to easy Ajax in Seam + JSF + Facelets (2) »

3 ways to easy Ajax in Seam + JSF + Facelets (1)

First approach: reuse AJAX-enabled JSF UI components

[plug]
This is part of my blog series on Ajax with Seam+JSF+Facelets. Sample code and detailed explanations are also covered in my book on Seam.
[/plug]

Advantage: The benefits of this approach are simplicity and power: you do not need to write a single line of JavaScript or AJAX servlet code. Yet, the component itself knows how to render just about any JavaScript and AJAX visual effects -- the JavaScript and backend communication mechanism is encapsulated in the component itself. AJAX services are implemented in Seam backend components bound to the UI component. Due to the high level of encapsulation, you can buy or download such components from market place and just drop them into your application to have Ajax within minutes.

Disadvantage: There is a steep learning curve for implementing your own JSF components. So, you are probably limited to what component vendors sell on the market place. Also, the component license fee can be pretty expensive.

To show how this approach works, let's look at some sample code. The following is an example JSF UI component for an auto-completion text box. With each keystroke, the web page sends the partial input text to the backing bean method #{manager.suggestName} via AJAX, which returns a list of autocompletion suggestions to be rendered on the page. All the JavaScript and communication code are encapsulated in the JSF component.

PLAIN TEXT
XML:
  1. <ajax:autoComplete
  2.          size="15" id="name"
  3.          completionMethod="#{manager.suggestName}"
  4.          value="#{greeter.name}"
  5.          required="false" />

The backing bean method for AJAX service is as follows.

PLAIN TEXT
JAVA:
  1. @Name("manager")
  2. public class ManagerAction implements Manager {
  3.  
  4.   ... ...
  5.  
  6.   public void suggestName (FacesContext context,
  7.                             String partialName,
  8.                             CompletionResult result) {
  9.     ... use "partialName" to construct a list of
  10.         potential autocompletion suggestions
  11.         in the "result" variable ...
  12.   }
  13. }

It is important to point out that when using those component libraries in Seam, you will need to re-package the *.tld files in a seperate JAR in your WAR file's WEB-INF/lib directory, and then place the main component library JAR file in the EAR application's class path (get the book for more on this! :)).

There are several component vendors selling a variety of Ajax-enabled JSF components. Exadel and IceSoft are two well-known commercial vendors. The Sun Blueprints provides some good open source component examples. Interested readers should check out this TSS article and the JSf Matrix site for a comparison of AJAX JSF components libraries.

This entry was posted on Monday, October 16th, 2006 at 12:46 pm and is filed under ajax, java, seam. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

6 Responses to “3 ways to easy Ajax in Seam + JSF + Facelets (1)”

  1. Ben Catherall Says:
    November 30th, 2006 at 7:53 am

    Do you have a more recent snapshot of the book source code downloads? There’s no Helloworld-Ajax in the current download.

    I’ve been having problems getting seam to work with the auto-complete component. I’ve created a tag library for the component.

    1) When you set completionMethod to a method binding in xhtml page, it is not seen by the component when rendering (completionMethod is null). completionMethod does exist in the valueBindingMap so I modified the source to use that instead. This gets the component to render with the appropriate onkeyup events.

    and it renders happily, but when making an ajax request, i get the following exception:

    2) When handling the ajax request, the AutoCompletePhaseListener throws the following exception:

    12:40:52,851 ERROR [STDERR] javax.faces.el.EvaluationException: Exception while invoking expression #{searchSuggester.suggestName}
    12:40:52,851 ERROR [STDERR] at org.apache.myfaces.el.MethodBindingImpl.invoke(MethodBindingImpl.java:165)
    12:40:52,851 ERROR [STDERR] at [...]

    Any ideas?

    Many thanks, Ben

    p.s. I got the book on rough cuts, good stuff!

  2. Ben Catherall Says:
    November 30th, 2006 at 10:09 am

    Ok - just need to have the Seam PhaseListener initialised before the AutoCompletePhaseListener. Take out the phase-listener entry from the autocomplete faces-config.xml and put it below the SeamPhaseListener in the main faces-config.xml

  3. Michael Yuan Says:
    November 30th, 2006 at 11:16 am

    Oops, the “HelloWorld-ajax” is really “HelloWorld4″ in the current source distro. However, I am working on a new version of the Ajax chapter. I plan to use the recently OSSed icefaces to replace the custom component I had there …

    I will upload a new code bundle as soon as Seam 1.1 RC2 is out tomorrow.

  4. Satish Says:
    December 18th, 2006 at 3:35 pm

    Can we do this without using Seam?? My idea is to having a autoComplete component and a method from backing bean as “completionMethod”

  5. Andreas Franke Says:
    December 22nd, 2006 at 5:10 am

    Hello folks,

    I have trouble get working my SEAM App with autocomplete text feature.
    helloworld4 example is running, but when I try to implement blueprints autocomplete in my facelets I always receive an exception:
    javax.el.ELException: /messmitteltypEditor.xhtml: Bean: org.jboss.seam.intercept.Proxy$$EnhancerByCGLIB$$97c68148, property: suggestName

    suggestName is the same as in manager bean.

    Any idea?

    thx
    andreas

  6. Michael Yuan Says:
    December 22nd, 2006 at 10:45 pm

    Hi Andreas,

    It sounded like that a classloader problem. Seam 1.1 makes a few changes w.r.t what classes are needed in the EAR class path and what are needed in the WAR class path.

    I am in the progress of updating the chapter to use the icefaces AJAX component framework. This way, I do not need to maintain a separate “auto-complete” component example. To see icefaces / Seam in action today, check out the “examples/icefaces” example in the Seam distribution.

    cheers
    Michael

Leave a Reply