Welcome!

Java IoT Authors: Liz McMillan, Pat Romanski, Elizabeth White, Yeshim Deniz, Zakia Bouachraoui

Related Topics: Java IoT

Java IoT: 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.

IoT & Smart Cities Stories
SYS-CON Events announced today that CrowdReviews.com has been named “Media Sponsor” of SYS-CON's 22nd International Cloud Expo, which will take place on June 5–7, 2018, at the Javits Center in New York City, NY. CrowdReviews.com is a transparent online platform for determining which products and services are the best based on the opinion of the crowd. The crowd consists of Internet users that have experienced products and services first-hand and have an interest in letting other potential buye...
Founded in 2000, Chetu Inc. is a global provider of customized software development solutions and IT staff augmentation services for software technology providers. By providing clients with unparalleled niche technology expertise and industry experience, Chetu has become the premiere long-term, back-end software development partner for start-ups, SMBs, and Fortune 500 companies. Chetu is headquartered in Plantation, Florida, with thirteen offices throughout the U.S. and abroad.
SYS-CON Events announced today that DatacenterDynamics has been named “Media Sponsor” of SYS-CON's 18th International Cloud Expo, which will take place on June 7–9, 2016, at the Javits Center in New York City, NY. DatacenterDynamics is a brand of DCD Group, a global B2B media and publishing company that develops products to help senior professionals in the world's most ICT dependent organizations make risk-based infrastructure and capacity decisions.
DXWorldEXPO LLC announced today that All in Mobile, a mobile app development company from Poland, will exhibit at the 22nd International CloudEXPO | DXWorldEXPO. All In Mobile is a mobile app development company from Poland. Since 2014, they maintain passion for developing mobile applications for enterprises and startups worldwide.
Nicolas Fierro is CEO of MIMIR Blockchain Solutions. He is a programmer, technologist, and operations dev who has worked with Ethereum and blockchain since 2014. His knowledge in blockchain dates to when he performed dev ops services to the Ethereum Foundation as one the privileged few developers to work with the original core team in Switzerland.
Cloud-enabled transformation has evolved from cost saving measure to business innovation strategy -- one that combines the cloud with cognitive capabilities to drive market disruption. Learn how you can achieve the insight and agility you need to gain a competitive advantage. Industry-acclaimed CTO and cloud expert, Shankar Kalyana presents. Only the most exceptional IBMers are appointed with the rare distinction of IBM Fellow, the highest technical honor in the company. Shankar has also receive...
DXWorldEXPO LLC announced today that ICOHOLDER named "Media Sponsor" of Miami Blockchain Event by FinTechEXPO. ICOHOLDER gives detailed information and help the community to invest in the trusty projects. Miami Blockchain Event by FinTechEXPO has opened its Call for Papers. The two-day event will present 20 top Blockchain experts. All speaking inquiries which covers the following information can be submitted by email to [email protected] Miami Blockchain Event by FinTechEXPOalso offers sp...
Headquartered in Plainsboro, NJ, Synametrics Technologies has provided IT professionals and computer systems developers since 1997. Based on the success of their initial product offerings (WinSQL and DeltaCopy), the company continues to create and hone innovative products that help its customers get more from their computer applications, databases and infrastructure. To date, over one million users around the world have chosen Synametrics solutions to help power their accelerated business or per...
DXWordEXPO New York 2018, colocated with CloudEXPO New York 2018 will be held November 11-13, 2018, in New York City and will bring together Cloud Computing, FinTech and Blockchain, Digital Transformation, Big Data, Internet of Things, DevOps, AI, Machine Learning and WebRTC to one location.
@DevOpsSummit at Cloud Expo, taking place November 12-13 in New York City, NY, is co-located with 22nd international CloudEXPO | first international DXWorldEXPO and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time t...