Richfaces Components Client-Side JavaScript API

By Max Katz	Article Rating:
May 28, 2010 05:39 PM EDT	Reads:	782

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();" />

CIO, CTO & Developer Resources

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.

Read the original blog entry...

May	JUN	May
	05
2009	2010	2011

Richfaces Components Client-Side JavaScript API

More Stories By Max Katz

Cloud Expo