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 responses to “RichFaces components client-side JavaScript API”

  1. Alex Avatar
    Alex

    Hi Max,

    Nice example!! Where can I download the source code especially the airlineconverter? Thanks.

    -Alex

    Reply
  2. max Avatar
    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();
   }
}
    Reply
  3. leo Avatar
    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

    Reply
  4. max Avatar
    max

    @leo: you need to add the record to the list that’s bound to the table and then rerender the entire table.

    Reply
  5. leo Avatar
    leo

    how could i to do that 🙂
    because i’m new in java and richfaces

    thanks for your info max

    Reply
  6. max Avatar
    max

    @leo: http://mkblog.exadel.com/2011/03/learn-how-to-adddelete-table-row-with-richfaces-in-5-minutes/

    Reply
  7. leo Avatar
    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??

    Reply
  8. max Avatar
    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.

    Reply
  9. leo Avatar
    leo

    thanks max 😛

    sorry my english is bad but thanks for your passion
    gbu alot

    Reply
  10. Ernesto Hernandez Avatar
    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!

    Reply
    1. max Avatar
      max

      You should have access to jQuery on the page. Just do a select on the target list.

      Reply
      1. Ernesto Hernandez Avatar
        Ernesto Hernandez

        Im new to jQuery. Now I have the text of the selected item, just text, I got it just with simple JS: event.target.textContent. That helps me but I can’t figure out how to get the button in order to disable it. Is there a way to obtain the Object represented by the item that is seleceted?

        Thanks for your response.

        Reply
        1. max Avatar
          max

          Yes, check out jQuery docs: http://docs.jquery.com/Main_Page

          Reply
  11. Majid Avatar
    Majid

    Hi,
    Can you provide the source code of this web ap example ?
    thanks

    Reply
    1. max Avatar
      max

      Page code is in the post. Java code is in the comments (see above).

      Reply

Leave a reply to leo Cancel reply