Adding | Techartifact

April 16, 2013April 16, 2013

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….. 🙂

March 16, 2013March 16, 2013

Adding Porlet into Webcenter Application

If you have portlets based on JSR 168 or JSR 286 and you want to add in webcenter 11g application.Oracle WebCenter Framework enables you to consume a portlet by registering its producer either with an application or with the Resource Palette from where you can add it to any application. After you register the producer, its portlets appear under the registered producer’s name under the Connections node in the Application Resources panel or in the Resource Palette.

For this you need to register WSRP portlet producer .If porlets JSR 168 is WSRP 2.0 enabled then it can be usable in webcenter 11g.

Register a WSRP portlet producer:

-> In the Application Resources panel of the Application Navigator, right-click Connections, choose New Connection and then choose WSRP Producer.
-> Use the Register WSRP Portlet Producer wizard , provide information and register .

Adding Portlets to a Page

Placing a portlet on a WebCenter Portal application page is a simple matter of dragging the portlet from the Application Resources panel or Resource Palette and dropping it on the page.
In the Application Navigator, open the application that contains the page (.jspx file) to which you want to add the portlet.
Under the Connections node in the Application Resources panel of the Application Navigator, or in the Resource Palette:
If the producer is a WSRP producer, expand the WSRP Producer node.
If the producer is a PDK-Java producer, expand the Oracle PDK-Java Producer node.

Expand the node for the portlet producer that contains the portlet to add to the page.Under the selected producer, all portlets contained by that producer are listed.
Drag the portlet from the producer node directly onto the page.You should drag the portlet onto a form on the page.

When you add a portlet to a page, a portlet tag (adfp:portlet or adfph:portlet) is added to the page source. This is the tag that represents the portlet component. This tag includes attributes that you can edit using the Property Inspector, or in the page source, to further control the behavior and appearance of the portlet.

The type of portlet tag used is determined by the following:

->If the project is configured for rich client components alone, the adfp:portlet tag is used.
->If the project is configured for Trinidad components alone, the adfph:portlet tag is used.

  <adfp:portlet value="#{bindings.FooterPortlet1_3}"
                            portletType="/oracle/adf/portlet/SamplePortlets_1257247466260/ap/E2default_ba133935_0124_1000_8008_0a093208e9fc"
                            id="portlet18" binding="#{backing_home.portlet18}"
                            displayHeader="false" width="100%"
                            renderPortletInIFrame="false"
                            displayScrollBar="false"/>

You can add the attributes by changing the source code or using property Inspector .

October 19, 2012October 19, 2012