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:

<h:form id="form">
   <rich:calendar popup="true" id="calendar"/>
</h:form>

#{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:

<input type="button" 
      value="Show next month"
      onclick="#{rich:component('calendar')}.nextMonth();Event.stop(event);" />

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).

<h:inputText id="input">
  <a4j:support event="onkeyup" reRender="output" />
</h:inputText>
<a4j:outputPanel id="output">
   #{rich:findComponent('input').value}
</a4j:outputPanel>

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 comments

  1. vc

    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. max

    @vc: that’s a feature of Expression Language (EL). Not possible with JSF 1.2 unless you use JBoss EL. Should be able to do this in JSF 2.

  3. vc

    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

  4. vc

    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.

  5. Pingback: RichFaces workshop during JSFdays 2010, Vienna, Austria | Maxa Blog
  6. Pingback: RichFaces rich:isUserInRole function | Maxa Blog
  7. rama

    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

  8. Pingback: Setting focus on a component with RichFaces | Maxa Blog
  9. max

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

  10. softdeveloper

    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?

  11. Pingback: RichFaces components client-side JavaScript API | Maxa Blog
  12. Trackback: Confluence: Development
  13. Trackback: Confluence: UI Team
  14. mirec

    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

    • max

      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