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.

15 comments

  1. max

    @Alex:

    Airline.java:

    public class Airline implements java.io.Serializable {
     
       private String name;
       private String code;
       private String logoImage;
     
       // getters and setters
     
       public Airline(String name, String code) {
    		super();
    		this.name = name;
    		this.code = code;
    		this.logoImage = "/images/air.png";
       }
       @Override
       public int hashCode() {
          ...
       }
       @Override
       public boolean equals(Object obj) {
          ...
       }
     
    }

    AirlineConverter.java:

    public class AirlineConverter 
       implements javax.faces.convert.Converter{
     
       public Object getAsObject(FacesContext context, UIComponent component,
    			String value) {
    	String[] words = value.split(":");
    	String name = words[0];
    	String code = words[1];
    	Airline airline = new Airline(name, code);
    	return airline;
       }
       public String getAsString(FacesContext context, UIComponent arg1, Object value) {
    	return value.toString();
       }
    }
  2. leo

    hi max you had a great articles,,
    btw do you ever think that you give the demo as well because it will help us alot to know from you,, btw i would like to asking

    i had an issue
    so im using richfaces and in my case i would like to adding dynamic table

    e.g–> when the value in the form is submmited via commandlink or command button the value will appear on the table below the form with row is added along with command link is clicked
    and the value on the row we could directly change for ex : if in the row COUNT(this is the name of the rows) the value is 5 after appear we could change the value directly

    do you have an idea how to do that because i try to find the answer and till now i havent any answer,,
    help me out thanks
    gb

    thanks for your help

  3. leo

    hi max i’ve been doing so but in your case value in the row could not be edited the row is increase but the value on the inside we could not be edited
    is there a way to do that??

  4. max

    @leo: I don’t quite understand what you are asking. If you need to update a value inside the row (record), then RichFaces supports partial table update. You need to use ajaxKeys attribute. See more in RichFaces docs.

  5. Ernesto Hernandez

    Hi Max!

    I’m wondering if you could tell me how can I iterate the target list from a rich:pickList with Javascript, in order to display the elements or items using an alert(); or at least to know which element is selected in the target list.
    What I really need is to disabled the remove button when I select a certain item in the target list. It may be that I have some items that should not be removed from the target list.

    I wish you can help me. I have been searching in many sites without success.
    Thanks in advance!

    Regards!

Leave a Reply