RichFaces comes with four useful functions that make it simple to work with JavaScript. The functions are:
- #{rich:clientId(‘id’)}
- #{rich:element(‘id’)}
- #{rich:component(‘id’)}
- #{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.
Max Katz 
Leave a reply to edogan Cancel reply