Loading JavaScript as a Resource (original) (raw)

The JavaScript resource file bundled with JavaServer Faces technology is named jsf.js and is available in the javax.faces library. This resource library supports Ajax functionality in JavaServer Faces applications.

In order to use this resource directly with a component or a bean class, you need to explicitly load the resource library. The resource can be loaded in one of the following ways:

By using the resource API directly in a Facelets page
By using the javax.faces.application.ResourceDependency annotation and the resource API in a bean class

Using JavaScript API in a Facelets Application

To use the bundled JavaScript resource API directly in a web application, such as a Facelets page, you need to first identify the default JavaScript resource for the page with the help of the h:outputScript tag. For example, consider the following section of a Facelets page:

<h:form> <h:outputScript name="jsf.js" library="javax.faces" target="head"/>

Specifying the target as head causes the script resource to be rendered within the head element on the HTML page.

In the next step, identify the component to which you would like to attach the Ajax functionality. Add the Ajax functionality to the component by using the JavaScript API. For example, consider the following:

<h:form> <h:outputScript name="jsf.js" library="javax.faces" target="head"> <h:inputText id="inputname" value="#{userBean.name}"/> <h:outputText id="outputname" value="#{userBean.name}"/> <h:commandButton id="submit" value="Submit" onclick="jsf.ajax.request(this, event, {execute:'inputname',render:'outputname'}); return false;" />

The jsf.ajax.request method takes up to three parameters that specify source, event, and options. The source parameter identifies the DOM element that triggered the Ajax request, typically this. The optional event parameter identifies the DOM event that triggered this request. The optional options parameter contains a set of name/value pairs from Table 11-5.

Table 11-5 Possible Values for the Options Parameter

Name	Value
execute	A space-delimited list of client identifiers or one of the keywords listed in Table 11-2. The identifiers reference the components that will be processed during the execute phase of the lifecycle.
render	A space-delimited list of client identifiers or one of the keywords listed in Table 11-2. The identifiers reference the components that will be processed during the render phase of the lifecycle.
onevent	A String that is the name of the JavaScript function to call when an event occurs.
onerror	A String that is the name of the JavaScript function to call when an error occurs.
params	An object that may include additional parameters to include in the request.

If no identifier is specified, the default assumed keyword for the executeattribute is @this, and for the render attribute it is @none.

You can also place the JavaScript method in a file and include it as a resource.

Using the @ResourceDependency Annotation in a Bean Class

Use the javax.faces.application.ResourceDependency annotation to cause the bean class to load the defaultjsf.js library.

To load the Ajax resource from the server side, use the jsf.ajax.requestmethod within the bean class. This method is usually used when creating a custom component or a custom renderer for a component.

The following example shows how the resource is loaded in a bean class:

@ResourceDependency(name="jsf.js" library="javax.faces" target="head")