JavaScript Journal

Subscribe to JavaScript Journal: eMailAlertsEmail Alerts newslettersWeekly Newsletters
Get JavaScript Journal: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


JavaScript Authors: Sematext Blog, Klaus Enzenhofer, Mehdi Daoudi, Yakov Fain, AppDynamics Blog

Related Topics: Java Developer Magazine, JavaScript

Blog Feed Post

Richfaces Components Client-Side JavaScript API

How to find the JavaScript functions on a particular component

Many rich components (from rich: tag library) provide client-side JavaScript API. Being client-side means it’s happening only in the browser. We would have to click submit or fire an Ajax request to submit the changes. How do you find what JavaScript functions are available on a particularity component? The place to find this information is in the User Guide.

Let’s take a rich:listShuttle as an example. Here is a link to the component in User Guide. If you look at the very top, you will see five links. Click on Reference Data. You will now see JavaScript API table. This is the place where all JavaScript functions are listed. For any other component, you would do the same.

To use these functions, we first need to use a built-in #{rich:component(‘id’)} function in RichFaces. This will give us a reference to the available API for a particular component. We then just append the function name, so it looks like this: #{rich:component(‘id’)}.functionName();

Here is rich:listShuttle component:

Source:

<rich:listShuttle var="air" id="airlines"
sourceValue="#{airBean.airlines}"
targetValue="#{airBean.target}"
converter="airlineConverter"
sourceListWidth="220"
targetListWidth="220">
<f:facet name="sourceCaption">Major U.S based airlines</f:facet>
<f:facet name="targetCaption">My favorite airlines</f:facet>
<h:column>
<f:facet name="header">Name</f:facet>
#{air.name}
</h:column>
<h:column>
<f:facet name="header">Logo</f:facet>
<h:graphicImage value="#{air.logoImage}" width="39" height="32" />
</h:column>
</rich:listShuttle>

Looking at the available API, let’s say we would like to place four buttons under the component that would perform the same actions you can do with Copy All, Copy, Remove and Remove All. Adding the following:

<input type="button" value="Copy All"
onclick="#{rich:component('airlines')}.copyAll();" />
<input type="button" value="Copy"
onclick="#{rich:component('airlines')}.copy();" />
<input type="button" value="Remove"
onclick="#{rich:component('airlines')}.remove();" />
<input type="button" value="Remove All"
onclick="#{rich:component('airlines')}.removeAll();" />

We are using a standard HTML button as they are all client-side functions. We then use #{rich:component(‘id’)} built-in function and reference the appropriate JavaScript API.

Firing an Ajax request is done the same way even if you didn’t have the four buttons. We can place a button and click it once we are done with editing. This is similar to filling out a form and clicking submit. If we want an Ajax request to be fired every time we change either the list or the order, we can use a4j:support tag to accomplish that.

<rich:listShuttle var="air" id="airlines"
sourceValue="#{airBean.airlines}"
targetValue="#{airBean.target}"
converter="airlineConverter"
sourceListWidth="220"
targetListWidth="220">
<f:facet name="sourceCaption">Major U.S based airlines</f:facet>
<f:facet name="targetCaption">My favorite airlines</f:facet>
<h:column>
<f:facet name="header">Name</f:facet>
#{air.name}
</h:column>
<h:column>
<f:facet name="header">Logo</f:facet>
<h:graphicImage value="#{air.logoImage}" width="39" height="32" />
</h:column>
<a4j:support event="onlistchanged" reRender="out"/>
<a4j:support event="onorderchanged" reRender="out"/>
</rich:listShuttle>
 
<input type="button" value="Copy All"
onclick="#{rich:component('airlines')}.copyAll();" />
<input type="button" value="Copy"
onclick="#{rich:component('airlines')}.copy();" />
<input type="button" value="Remove"
onclick="#{rich:component('airlines')}.remove();" />
<input type="button" value="Remove All"
onclick="#{rich:component('airlines')}.removeAll();" />
 
<rich:dataList id="out" columns="3"
value="#{airBean.target}" var="air">
#{air.name}
</rich:dataList>

We added two a4j:suppor tags with appropriate events and rich:dataList to display the result.

Read the original blog entry...

More Stories By Max Katz

Max Katz heads Developer Relations for Appery.io, a cloud-based mobile app platform. He loves trying out new and cool REST APIs in mobile apps. Max is the author of two books “Practical RichFaces” (Apress 2008, 2011), DZone MVB (Most Valuable Blogger), and is a frequent speaker at developer conferences. You can find out what Max is up to on his blog: http://maxkatz.org and Twitter: @maxkatz.