This component is very useful when you need to perform an Ajax request using JavaScript code and to pass server-side data (serialized in JSON format) to a JavaScript function.
The following is an example:
<a:jsFunction
data="#{myBean.myData}"
name="myJSMethod"
action="#{myBean.myAction}"
oncomplete="externalScript(data.subProperty1, data.subProperty2)"
reRender="myObj" />
In this example, we defined a JavaScript function called myJSMethod that will first get the data from the myBean bean and call the myAction method of myBean. When the action is completed, it will pass the data to another JavaScript function (that was already defined somewhere). After that, the framework will reRender the myObj component.
The component uses a standard JSF call to send the request, for it must stay inside a form component.
Let's see a simple use of a:jsFunction.
The bean we are going to use is very simple it just has the currentDate property (with a getter and setter) and a method (updateCurrentDate()) that updates the property with the current date and time.
Our class will be in the book.richfaces.advcm.modules.main.examples.jsFunction package and will be called JsFunctionExample:
package book.richfaces.advcm.modules.main.examples.jsFunction;
import java.util.Date;
@Name("jsFunctionExample")
public class JsFunctionExample {
private Date currentDate=new Date();
public Date getCurrentDate() {
return currentDate;
}
public void setCurrentDate(Date currentDate) {
this.currentDate = currentDate;
}
public void updateCurrentDate() {
setCurrentDate(new Date());
}
}
We want to use a JavaScript function (defined by the jsFunction component) to call a backend method and fire an Ajax update. In order to achieve that, we can use this code inside the /view/examples/jsFunction/jsFunctionExample.xhtml page:
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a="http://richfaces.org/a4j"
template="/layout/template.xhtml">
<ui:define name="body">
<h:form>
<a:jsFunction
name="updateDate"
action="#{jsFunctionExample.updateCurrentDate}"
reRender="dateSection"/>
</h:form>
<h:panelGroup id="dateSection">
<h:outputText value="Last update: "/>
<h:outputText
value="#{jsFunctionExample.currentDate}"/>
</h:panelGroup>
<br/>
<h:outputLink value="#" onclick="updateDate()">
<h:outputText value="Update now!"/>
</h:outputLink>
</ui:define>
</ui:composition>
First, we defined the JavaScript function using the a:jsFunction component, then we've created a simple HTML link (using the h:outputLink component) that calls the generated JavaScript function when clicked (onClick event).
The JavaScript function will call the updateCurrentDate() method of our bean and then reRender dateSection to show the new updated date.
If you need to integrate a lot of JavaScript code, this is a very powerful component!
Here you can see a screenshot of the example in action:
