RichFaces built-in client functions

RichFaces comes with four useful functions that make it simple to work with JavaScript. The functions are:

  1. #{rich:clientId(‘id’)}
  2. #{rich:element(‘id’)}
  3. #{rich:component(‘id’)}
  4. #{rich:findComponent(‘id’)}

Suppose you have this on JSF page:


   

#{rich:clientId(‘calendar’)}
Placing this on JSF page:

#{rich:clientId('calendar')}

will display the component client id:

form:calendar

#{rich:element(‘calendar’)}
Placing this on JSF page:

#{rich:element('calendar')}

is a reference to HTML element in DOM:

document.getElementById('form:calendar')

#{rich:component(‘calendar’)}
Placing this on JSF page:

#{rich:component('calendar')}

is a reference to a custom JavaScript property that allows to call JavaScript API on rich components:

document.getElementById('form:calendar').component

For example, let’s say you have a button and you want to show calendar’s next month. This is just a regular HTML button as we are only making a JavaScript call:


Above, #{rich:component(‘calendar’)} gets us reference to calendar HTML element custom JS property and then we call nextMonth() to advance the calendar to next months on the client. Many RichFaces components define some JavaScript API that you would call exactly the same way. To find out what API is available, look for that component in Developers Guide and then for JavaScript API section (usually in Reference section). Here is the API for rich:calendar component.

#{rich:findComponent(‘id’)}
Lastly, there is #{rich:findComponent(‘id’)}. It’s neat function that allows you to test, or prototype without binding components to model (you don’t need managed beans).


  


   #{rich:findComponent('input').value}

Above, there is h:inputText tag but it has no value with binding #{…} to managed bean. This means that value in the component will not be pushed into the model (it stays in the component). a4j:support is attached to send an Ajax request when onkeyup event occurs and rerenders ‘output’ component. To echo, or rerender the input on the next line, we use #{rich:findComponent(‘input’)}.value function. This function locates the component with id ‘input’ in the JSF tree and displays its value.

30 thoughts on “RichFaces built-in client functions

  1. hihi Max,

    i am looking for a way to reference component values in EL. is this possible?

    for example:

    when the button is pressed, i want the equivalent of this to be triggered:

    myBean.myFunction( ‘eng’ )

    (assuming that “English” option was selected)

    is my approach for accomplishing this correct? are there better more elegant approaches?

    tia!
    -v

  2. i am using RichFaces 3.3.2 SR1 together with Seam 2.2.0 GA… so i think i do have JBoss EL.

    but i tried the code sample i provided and it didn’t work.

    i also tried using the client functions and none of them worked either. for example, i tried using rich:findComponent() like so:

    http://tinypaste.com/b2308

    i tested using the rich:findComponent() by itself (i.e. not nested within any other EL expression) and it works. but it seems the problem is that it doesn’t work when it is to be used to retrieve a value that will be a parameter to another EL expression, which in my case, is a function call.

    is there any way to do what i’m trying to achieve?

    tia,
    -v

  3. but how can i use it within a function call?

    i tried both of the following without success:

    #{ myBean.myFunction( ‘param1′, rich:findComponent(‘languageField’).value ) }

    #{ myBean.myFunction( ‘param1′, #{ rich:findComponent(‘languageField’).value } ) }

    i’m trying to use the findComponent() result as an input parameter to another function declared in an EL expression.

  4. Pingback: RichFaces workshop during JSFdays 2010, Vienna, Austria | Maxa Blog

  5. Pingback: RichFaces rich:isUserInRole function | Maxa Blog

  6. my problem is after hitting the a4j:commandButton edit button the focus should be set to the rich:calendar text

    i tryed focus= “id of the rich:calendar” but i am not geting the focus on the rich:calendar text field

  7. Pingback: Setting focus on a component with RichFaces | Maxa Blog

  8. @rama: I don’t know what is date in your case but you just need to identify the element in source into which you want to set focus.

  9. Hi

    may i know wether there is any javascript function which will called on pageload i.e. similar window.onload() and window.open()?? My requirement is as soon as pageload i should open a model window.. any suggestions?

  10. Pingback: RichFaces components client-side JavaScript API | Maxa Blog

  11. Pingback: Confluence: Development

  12. Pingback: Confluence: UI Team

  13. Hi all,
    Is it somehow possible to use built-in client-functions in regular java-script file which is then included to main page? I tried with no success. However java-script files are somehow processed as when I include <h:outputScript library="js" name="sample-file.js" target="head" /> to my page(sample-file.js is regular name of file), I’m getting &ltscript type="text/javascript" src="/contextroot/javax.faces.resource/sample-file.js.xhtml?ln=js"> in HTML code

    • I doubt that, in the current form it’s a Facelet function. You could probably find the actual JavaScript function being called and call it directly.

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