Using RichFaces a4j:jsFunction – sending an Ajax request from any JavaScript

There are four components in the a4j: tag library which enable you to send an Ajax request. They are a4j:commandButton, a4j:commandLink, a4j:support, and a4j:poll. All provide rather specific functionality. For example, a4j:commandButton will generate an HTML button that fires an Ajax request. a4j:commandLink will do the same but generates a link. a4j:support is always attached to another JSF component to enable sending an Ajax request based on some event supported by the parent component. a4j:poll which allows sending Ajax requests periodically. There is one more tag called a4j:jsFunction. This tags gives you a lot of power and flexibility. a4j:jsFunction lets you send an Ajax request from any user-defined JavaScript function. It can be a custom function or from any component-event as well. The good news is that it works just like any other tags I listed above, it has all the same attributes such as reRender, action, actionListener, bypassUpdates, ajaxSingle and so on.
Read more »

RichFaces components client-side JavaScript API

Many rich components (from rich: tag library) provide client-side JavaScript API. Being client-side means it’s happening only in the browser. We would have to click submit or fire an Ajax request to submit the changes. How do you find what JavaScript functions are available on a particularity component? The place to find this information is in the User Guide.

Let’s take a rich:listShuttle as an example. Here is a link to the component in User Guide. If you look at the very top, you will see five links. Click on Reference Data. You will now see JavaScript API table. This is the place where all JavaScript functions are listed. For any other component, you would do the same.

To use these functions, we first need to use a built-in #{rich:component(‘id’)} function in RichFaces. This will give us a reference to the available API for a particular component. We then just append the function name, so it looks like this: #{rich:component(‘id’)}.functionName();

Here is rich:listShuttle component:

Source:

<rich:listShuttle var="air" id="airlines"
   sourceValue="#{airBean.airlines}" 
   targetValue="#{airBean.target}"
   converter="airlineConverter" 
   sourceListWidth="220"
   targetListWidth="220">
      <f:facet name="sourceCaption">Major U.S based airlines</f:facet>
      <f:facet name="targetCaption">My favorite airlines</f:facet>
      <h:column>
	   <f:facet name="header">Name</f:facet>
	   #{air.name}
      </h:column>
      <h:column>
	    <f:facet name="header">Logo</f:facet>
	    <h:graphicImage value="#{air.logoImage}" width="39" height="32" /> 
      </h:column>
</rich:listShuttle>

Looking at the available API, let’s say we would like to place four buttons under the component that would perform the same actions you can do with Copy All, Copy, Remove and Remove All. Adding the following:

<input type="button" value="Copy All"
	onclick="#{rich:component('airlines')}.copyAll();" />
<input type="button" value="Copy"
	onclick="#{rich:component('airlines')}.copy();" />
<input type="button" value="Remove"
	onclick="#{rich:component('airlines')}.remove();" />
<input type="button" value="Remove All"
	onclick="#{rich:component('airlines')}.removeAll();" />

We are using a standard HTML button as they are all client-side functions. We then use #{rich:component(‘id’)} built-in function and reference the appropriate JavaScript API.

Firing an Ajax request is done the same way even if you didn’t have the four buttons. We can place a button and click it once we are done with editing. This is similar to filling out a form and clicking submit. If we want an Ajax request to be fired every time we change either the list or the order, we can use a4j:support tag to accomplish that.

<rich:listShuttle var="air" id="airlines"
   sourceValue="#{airBean.airlines}" 
   targetValue="#{airBean.target}"
   converter="airlineConverter" 
   sourceListWidth="220"
   targetListWidth="220">
      <f:facet name="sourceCaption">Major U.S based airlines</f:facet>
      <f:facet name="targetCaption">My favorite airlines</f:facet>
      <h:column>
	   <f:facet name="header">Name</f:facet>
	   #{air.name}
      </h:column>
      <h:column>
	    <f:facet name="header">Logo</f:facet>
	    <h:graphicImage value="#{air.logoImage}" width="39" height="32" /> 
      </h:column>
      <a4j:support event="onlistchanged" reRender="out"/>
      <a4j:support event="onorderchanged" reRender="out"/>
</rich:listShuttle>
 
<input type="button" value="Copy All"
	onclick="#{rich:component('airlines')}.copyAll();" />
<input type="button" value="Copy"
	onclick="#{rich:component('airlines')}.copy();" />
<input type="button" value="Remove"
	onclick="#{rich:component('airlines')}.remove();" />
<input type="button" value="Remove All"
	onclick="#{rich:component('airlines')}.removeAll();" />
 
<rich:dataList id="out" columns="3"
   value="#{airBean.target}" var="air">
	#{air.name}
</rich:dataList>

We added two a4j:suppor tags with appropriate events and rich:dataList to display the result.

As always, visit RichFaces Component Demo application.

How to approach RichFaces training

If you are learning RichFaces, here is one approach you can take. These are the core features that you need to know. Once you have a good grasp on them, you will be able to use any rich components from the library. This will probably surprise you, but there is not a whole lot to learn in section 9. All the core concepts are in sections 1-8.

  1. Sending an Ajax request
    1. a4j:support
    2. a4j:commandButton, a4j:commandLink
    3. a4j:poll
    4. a4j:jsFunction
  2. Partial view rendering
    1. reRender attribute
    2. a4j:outputPanel (ajaxRendered attribute)
    3. Important attributes such as bypassUpdates, limitToList covered as well
  3. Partial view processing
    1. a4j:region (renderRegionOnly, selfRendered attributes)
    2. ajaxSingle attribute
    3. process attribute
  4. Controlling traffic
    1. a4j:queue
  5. JavaScript interactions
    1. onclick, onsubmit, obeforedomupdate, oncomplete attributes
  6. More a4j: tags
    1. a4j:status
    2. a4j:include
    3. a4j:keepAlive
    4. a4j:actionparam
    5. a4j:log
    6. a4j:repeat (with ajaxKeys attribute)
    7. a4j:ajaxListener
  7. RichFaces client-side functions
  8. Using rich: components JavaScript API
  9. rich: tags
    1. Output
      1. Simple output (layout)
      2. Toggle panels
    2. Inputs, in-place edit
    3. Selects
    4. Validation
    5. Data iteration
    6. Menus
    7. Other
  10. Skins
    1. Using out-of-the-box skins
    2. Creating custom skins
    3. Loading different skins in runtime
    4. Overwriting styles generated by skins
    5. Using component style attributes

If you need to get your team up to speed quickly, consider our 2 day on-site RichFaces training.

As always, to view all RichFaces components in action, visit the components demo page.

Setting focus on a component with RichFaces

Some time ago I blogged on how to set focus on a component after an Ajax request in RichFaces. As a quick review, every tag that fires an Ajax request has focus attribute which points to the id of the component on which to set focus after the request. It works fine but only for simple tags such as from h: tag library. When you start using components from rich: tag library such as rich:calendar, there are several focusable elements which are rendered and the above approach won’t work.

There is a workaround, let’s take rich:calendar as an example.

<h:form id="form">
   ...
   <rich:calendar id="cal" enableManualInput="true"/>
   <a4j:commandButton value="Click" focus="cal"/>
</h:form>

The above won’t set the focus because of the problem I described. Using Firebug we can find the input field that was rendered and its id. Here is the rendered HTML:

<input type="text" style="vertical-align: middle;" name="form:calInputDate" 
           id="form:calInputDate" class="rich-calendar-input ">

We can now see that client id of the input field is j_id2:calInputDate. form is the form id, cal is calendar id and then InputDate is appended as well. So, we would have use form:calInputDate as the client id in focus.

<h:form id="form">
   ...
   <rich:calendar id="cal" enableManualInput="true"/>
   <a4j:commandButton value="Click" focus="form:calInputDate"/>
</h:form>

Another and better option is to use #{rich:clientId}, one of the built-in JavaScript functions in RichFaces:

<h:form id="form">
   ...
   <rich:calendar id="cal" enableManualInput="true"/>
   <a4j:commandButton value="Click" focus="#{rich:clientId('cal')}InputDate"/>
</h:form>

This way we don’t have to worry about the form id.

You can always view all RichFaces components by going to RichFaces Components Demo.

Most popular (and useful) RichFaces posts

The following are some of the best posts about RichFaces. Of course everything is good, but these important core features and other good examples:

Easiest way to start with RichFaces (Eclipse template)
RichFaces with Hibernate Validator
RichFaces built-in client functions
RichFaces region – partial JSF view processing
View scope in RichFaces
Using rich:layout and rich:layoutPanel components
4 – part RichFaces webinar series
Changing RichFaces skins in runtime
Using rich:layout and rich:layoutPanel components
RichFaces confirmation dialog – complete edition
RichFaces sorting and filtering – complete edition

For everything else, just click on richfaces-howto tag and you will get to all RichFaces posts.

JSF 1.2 Components: book review

JSF 1.2 Components by Ian Hlavats.

Chapter 1: Standard JSF components

Chapter 1 starts by covering standard JSF UI components. It covers all the categories of standard components in JSF: input, output, selection, tables and layout. Examples are short, self-contained, and very easy to follow. Ian does an excellent job of describing various features and attributes of the components and their usage. His explanations are very easy to follow.

Chapter 1 summary says that it covered some of the key concepts behind JSF however, I didn’t see coverage of JSF managed beans, navigation, event listeners, and the JSF life cycle.

Chapter 2: Facelets

Chapter 2 covers Facelets and I think it’s the best Facelets coverage that I have seen. Good examples, easy to follow. I think all JSF 1.x books were published before Facelets became a de facto standard view technology, so this is the missing chapter for all of them. Chapter 2 starts with some interesting historical information on JSP and why Facelets was created. Again, excellent chapter and coverage of Facelets.

Chapter 3: MyFaces Tomahawk components

Chapter 3 covers MyFaces Tomahawk components. The chapters covers some of the most popular and interesting components in Tomahawk such as calendar, jsfCookMenu, upload file and tree. I was glad to see more backing bean code for some of the Tomahawk examples.

Chapter 4: MyFaces Trinidad

This chapter covers MyFaces Trinidad components. As with the standard JSF components and the MyFaces chapter, this is a general overview a description of the usage of some Trinidad components. Ian does a good job explaining how the components work and provides short examples. I like shorts examples because it’s easy for the reader to try them in his or her application without having go to through a large number of steps.

Chapter 5: IceFaces

There is not as much to say about chapter 5 which covers IceFaces JSF components. I would have liked to see some coverage of the IceFaces Direct-To-Dom approach, which really makes IceFaces different from libraries such as Trinidad and RichFaces.

Chapter 6: Seam

The Seam chapter starts with an introduction to Seam and why it was needed. It then goes on to explain Java EE and its components such as EJB3 and JPA. I think it’s a very good (brief) introduction for anyone who is just starting with Java EE. Then the chapter goes on to cover some of the Seam tags. Explanations are good and the examples are easy to follow. The first example shows how to delegate validation to the Hibernate Validator using Seam’s s:validate tag. Other tags are covered as well, such as s:label, s:span, and s:message.

The chapter them moves on to show how to add Ajax with the RichFaces a4j:support tag. (The actual RichFaces chapter comes after this chapter.) I think it would have been better to cover RichFaces, including a4j:support first, and then Seam.

The second part of the chapter is mostly dedicated to covering Seam conversation support. The chapter shows some good examples but feels a little bit out of place. I just don’t view the conversation as being part of the UI. There is also an example that puts navigation rules for controlling the conversation into a standard JSF descriptor file (faces-config.xml) instead of Seam’s descriptor file (pages.xml). Seam’s documentation recommends using only the pages.xml file for storing the navigation rules in a Seam application..

All in all though, it’s a good chapter on some of the core Seam features for JSF.

Chapter 7: RichFaces

The last chapter is on RichFaces and is the most interesting to me personally as I have myself published a book, Practical RichFaces on this subject. The chapter starts with a quick introduction to Ajax4jsf and RichFaces. This chapter is on par with the other chapters. It provides a high-level overview of some of the components from the rich: and a4j: tag libraries. Components covered include rich inputs, panels, menus, data iteration as well as Google Maps and Microsoft Virtual Earth. From the a4j: tag library, a4j:poll and a4j:commanLink are covered.

I was somewhat disappointed to not see a4j:support tag coverage here. (a4j:support was instead covered briefly in Seam chapter.) I think it’s one of the most important tags in the library and probably the tag that made the whole framework popular. Also, the f:ajax tag from JSF 2 is closely based in concept to a4j:support.

In general, the chapter is well written and provides some good examples of various RichFaces components and concepts.

Summary

First of all I want to congratulate Ian on this book. He did an amazing job. I personally know the time, dedication, and other resources need to write a book. The book provides a good, general overview of the most well-known third-party components as well as the standard JSF components. The examples are easy to follow and self-contained (which means it’s easy to run them) with explanations that are very clear.

My biggest question is who is the audience for this book? If you are just starting with JSF, then this book doesn’t go deep enough into the core features of JSF as well as the covered component libraries. You need at least a regular JSF book. If you are already an experienced JSF developer, then it could be a good read to quickly cover various 3rd party component libraries and see what’s available. But again, this is going to be your second book. If you are a manager, this could be a book you could read to get a high level overview of the various components in the JSF ecosystem.

Anyway, a great contribution by Ian Hlavats to the JSF community. Congratulations!

The easiest way to start with RichFaces

Now that RichFaces 3.3.3 is out, plus JBoss Tools 3.1 was released in March, let me show you the easiest way to start with RichFaces and Tomcat 6. This doesn’t involve Maven. I’ll write a post about Maven and RichFaces some other time.

The following steps assume you have JBoss Tools 3.0 or 3.1 installed. Just in case you don’t have JBoss Tools installed, skip to section Installing JBoss Tools 3.1 at the end.

Getting RichFaces project

  1. Download RichFaces start project
  2. In Eclipse, select File/Import/General/Existing Project nto Workspace
  3. Check Select archive file and click Browse…
  4. Find and select richfaces-start.zip
  5. Click Finish
  6. Once the project is imported, in Servers view, right-click Tomcat server and select Add and Remove…
  7. Move richfaces-start to the right side
  8. Start the server
  9. Right-click richfaces-start project and select Run As/Run nn Server

You should see a page like this:

The project even comes with a very short custom skin (laguna14). Look for the skin file in JavaSource folder. The application also uses a4j:insert tag and a4j implicit object.

Note: once the project is running, please open footer.xhtml and delete the very first line:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

as it produces incorrect output in the main page.

Installing JBoss Tools 3.1

  1. Download and install Eclipse IDE for Java EE Developers 3.5.2
  2. In Eclipse, go to Help/Install New Software…
  3. Click Add
  4. For name, enter JBoss Tools 3.1
  5. For URL, enter http://download.jboss.org/jbosstools/updates/JBossTools-3.1.0.GA/
  6. Click OK
  7. Select the just added software link
  8. When a list of features appears, select Web and Java EE Development
  9. Click Finish. This will install JBoss Tools
  10. Launch Eclipse
  11. Add Tomcat 6 server (you can do it via Servers view)
  12. Go back to step #1 in Getting RichFaces project section

RichFaces 3.3.3 is released!

Congratulations to RichFaces team for releasing version 3.3.3. Although this version has basic JSF 2 support, if you are using JSF 1.2 you can upgrade to this version as it has the latest bug fixes and other improvements. With this release, the entire RichFaces team is now focused on pushing RichFaces 4.0 release out.

You can also check out Alex Smirnov’s (RichFaces architect, Exadel) post on portlet bridge support for this version and JSF 2.

Learning JSF2: Ajax in JSF – using f:ajax tag

This is a third post in Learning JSF 2 series. The first one on Managed Beans can be found here and second one on navigation can be found here

As you probably know JSF 2 is a major upgrade over JSF 1.2. One of the major additions to this version of JSF is standard Ajax support. This article covers Ajax features in JSF 2. If you are familiar with RichFaces and specifically the a4j:support tag then learning how to use Ajax features in JSF 2 is going to be very easy. Many concepts and features are being carried over from RichFaces.  Let’s start. 
Read more »

Getting RichFaces version in runtime

Did you ever need to know or display RichFaces version or revision when running your application? It’s rather easy to do. RichFaces registers VersionBean bean under a4j name which can give you that information.

<h:panelGrid columns="2">
   <h:outputText value="Project name:" />
   <h:outputText value="#{a4j.projectName}" />
   <h:outputText value="Vendor:" />
   <h:outputText value="#{a4j.vendor}" />
   <h:outputText value="Version:" />
   <h:outputText value="#{a4j.version}" />
</h:panelGrid>

Output:

Project name: 	Jboss Richfaces
Vendor: 	richfaces.org
Version: 	v.3.3.1.GA SVN $Revision: 14228 $ $Date: 2009-05-14 09:56:51 -0700 (Thu, 14 May 2009) $

You can also just render #{a4j}, then you will get:

Jboss Richfaces by richfaces.org, version v.3.3.1.GA SVN $Revision: 14228 $ $Date: 2009-05-14 09:56:51
-0700 (Thu, 14 May 2009) $

Enjoy the weekend!

« Previous PageNext Page »