Adding JavaScript to a Page in Oracle ADF

In your ADF web application you may want to use javaScript functions to perform some actions in client side. You can either add inline JavaScript directly to a page or you can import JavaScript
libraries into a page. When you import libraries, you reduce the page content size, the libraries can be shared across pages, and they can be cached by the browser. You
should import JavaScript libraries whenever possible. Use inline JavaScript only for cases where a small, page-specific script is needed.

How to Use Inline JavaScript

1. Add the MyFaces Trinidad tag library to the root element of the page by adding the code

<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
xmlns:trh="http://myfaces.apache.org/trinidad/html">

2.In the Component Palette, from the Layout panel, in the Core Structure group,drag and drop a Resource onto the page .

3. In the Insert Resource dialog, select javascript from the dropdown menu and click OK.

4. Create the JavaScript on the page within the tag.

<af:resource>
function sayHello()
{
alert("Hello, world!")
}
</af:resource>

5. In the Structure window, right-click the component that will invoke the JavaScript,and choose Insert inside component>ADF Faces>Client Listener.

6. In the Insert Client Listener dialog, in the Method field, enter the JavaScript function name. In the Type field, select the event type that should invoke the
function.

Note : You can add CSS as well in resource tag.

Thats it.now enjoy javascript in ADF.

Now why we write plain javascript , when we have such a well documented library like jquery or EXTJS. see how we can do that.

How to Import JavaScript Libraries

Use the af:resource tag to access a JavaScript library from a page. This tag should appear inside the document tag’s metaContainer facet.

1. Inside document tag, add the code below and replace the /path with the relative path to the directory that holds the JavaScript library. for example ,You can add Jquery and EXTJS .

<af:document>
<f:facet name="metaContainer">
<af:resource source="/path"/>
</facet>
<af:form></af:form>
</af:document>

2. Structure window, right-click the component that will invoke the JavaScript,and choose Insert inside component>ADF Faces>Client Listener.

3. In the Insert Client Listener dialog, in the Method field, enter the fully qualified name of the function. For example, if the showAlert
function was in the MyScripts library, you would enter MyScripts.showAlert . In the Type field, select the event type that should invoke the function.

That it. enjoy. Happy coding with Techartifact with Vinay Kumar….. 🙂