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:


      Major U.S based airlines
      My favorite airlines
      
	   Name
	   #{air.name}
      
      
	    Logo
	    
      

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:





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.


      Major U.S based airlines
      My favorite airlines
      
	   Name
	   #{air.name}
      
      
	    Logo
	    
      
      
      








	#{air.name}

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

As always, visit RichFaces Component Demo application.

15 thoughts on “RichFaces components client-side JavaScript API

  1. @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. 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. 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. @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. 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

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s