Welcome!

Java IoT Authors: Stackify Blog, Liz McMillan, APM Blog, Jnan Dash, Elizabeth White

Related Topics: Java IoT, Machine Learning

Java IoT: Blog Post

Learning JSF2: AJAX in JSF

JSF 2 comes with one tag that provides Ajax functionality

As you probably know JSF 2 is a major upgrade over JSF 1.2. One of the major additions to this version of JSF is standard Ajax support. This article covers Ajax features in JSF 2. If you are familiar with RichFaces and specifically the a4j:support tag then learning how to use Ajax features in JSF 2 is going to be very easy. Many concepts and features are being carried over from RichFaces.  Let’s start. 

JSF 2 comes with one tag that provides Ajax functionality. The tag is called f:ajax (sounds familiar to a4j:support – right?) When I do RichFaces trainings, I like to divide the core ideas into three parts: sending an Ajax request, partial view rendering and partial view processing. I will use the same approach here.

Sending an Ajax request
JSF comes with one tag to send an Ajax request, the tag is called . This tag is actually a client side behavior (here is a great post by Andy Schwartz on JSF 2 client behaviors). Being a behavior implies it’s never just used by itself on a page, it is always added as a child tag (behavior) to another UI component (or can even wrap several components). Let’s use a small echo application to demonstrate usage of this tag.

<h:form> 
   <h:panelGrid>
      <h:inputText value="#{bean.text}" >
         <f:ajax event="keyup"/>
      </h:inputText>
      <h:outputText id="text" value="#{bean.text}" />
   </h:panelGrid>
</h:form>

Code snippet above takes care of firing an Ajax request based on onkeyup event. Notice the actual event name is keyup. This takes care of firing an Ajax request. Next we need to figure out how to do partial view rendering.

Attribute Description
event String on which event Ajax request will be fired. If not specified, a default behavior based on parent component will be applied. The default event is action for ActionSource (ie: button) components and valueChange for EditableValueHolder components (ie: input). action and valueChange are actual String values that can be applied applied event attribute.

HTML Tables

Partial view rendering

With JSF 1.2 (and without RichFaces) every request would render the entire view back to us. That was simple, we didn’t have to worry which parts of the JSF view we want to be updated. Of course the basic concept behind Ajax is to only update those parts of the page that we actually need to. In order to accomplish this, we should only render those components on the server whose markup we want to update in browser. What all this means is we now need to specify which components in JSF view we want to render back. Partial view is still rendered on the server. Some updated portion is sent as XML to the browser where the DOM is updated.  Our example is rather simple, there is just one component with id text. tag has render attribute which points to id’s of components to render back. It could also take an EL expression. Adding it to our example, it looks like this:

<h:form> 
   <h:panelGrid>
      <h:inputText value="#{bean.text}" >
         <f:ajax event="keyup" render="text"/>
      </h:inputText>
      <h:outputText id="text" value="#{bean.text}" />
   </h:panelGrid>
</h:form>

If you have been using RichFaces, than the same attribute in RichFaces is called reRender. The event that is specified via event attribute must be an event that the parent component supports. If you look at the generated HTML, you will see something like this:

<input id="j_idt5:j_idt7" type="text" name="j_idt5:j_idt7" 
onkeyup="mojarra.ab(this,event,'keyup',0,'j_idt5:text')" />

If you specify an event that is not available on the parent component, an error message will be displayed when you run the page.

That’s it. Here is the bean code in case you want to run this page:

@ManagedBean(name = "bean") 
public class Bean {
   private String text; // getter and setter
   ...
}

Let’s say we also want to show and update a counter that shows the length of a string we entered. Adding new property to bean:

private Integer count; // getter and setter

Also adding Ajax listener to do the counting, notice that method takes a new AjaxBehaviorEvent object:

public void countListener(AjaxBehaviorEvent event) { 
   count = text.length();
}
Attribute Description
listener Listener method to invoke during Ajax request.

Updating the page:

<h:form> 
   <h:panelGrid>
      <h:inputText value="#{bean.text}" >
         <f:ajax event="keyup" render="text count" listener="#{bean.countListener}"/>
      </h:inputText>
      <h:outputText id="text" value="#{bean.text}" />
      <h:outputText id="count" value="#{bean.count}" />
   </h:panelGrid>
</h:form>

Notice that we added count id to render attribute. You use space as a separator for id’s.

In our examples above we actually specified on which even to fire an Ajax request. As it turns out we don’t have to specify an event. If we don’t specify one, each UI component has a default event on which Ajax request would be send. Taking h:inputText, the default Ajax event is onchange. Our example would almost work however, instead of onkeyup, you would now have to tab out or click outside the input field to fire the Ajax request:  So, we could have written our example like this (without event attribute):

<h:inputText value="#{bean.text}" > 
   <f:ajax render="text count" listener="#{bean.countListener}"/>
</h:inputText>
Attribute Description
render Determines id’s of components to be rendered. 

In our example, render pointed to actual component id we want to render back. render attribute could be set to the following values:

Possible values for render attribute Description
@all Render all components in view
@none Render no components in view (this is also the default value if render is not specified)
@this Render only this component, the component that triggered the Ajax request
@form Render all components within this form (from which Ajax request was fired)
id’s One or more id’s of components to be rendered
EL EL expression which resolves to Collection of Strings

render could also point to EL expression. In this case it’s possible to determine which components to render in run time. Here is how it works when using EL:

  • You bind render=”#{bean.renderComponents}”. Initial page is rendered. #{bean.renderComponents} is resolved during page rendering, for example to id’s compId1 and compId2.
  • On next Ajax request, compId1 and compId2 will be rerendered. During this request, #{bean.renderComponents} could be changed in runtime. For example, it is now set to compId3 and compId4. You also have to remember to rerender this control (in order to update the ids)
  • Page is rendered (from step 3). Values of compId3 and compId4 are now present (rendered) in the page.
  • On next Ajax request, components with id’s compId3 and compId4 will be rerendered.

Note: this behavior is slightly different than what you get do in RichFaces 3. In RichFaces reRender attribute when bound to an EL expression is resolved in the current request.

It’s also possible to issue Ajax requests programmatically using the jsf.ajax.request() JavaScript API:

<h:head> 
<h:outputScript name="jsf.js" library="javax.faces"/>
</h:head>
...
<h:body>
<h:form id="form">
<h:inputText value="#{bean.text}" 
     onkeyup="jsf.ajax.request(this, event, {render:'form:text'});"/>
<h:outputText id="text" value="#{bean.text}" />
<h:form>
</h:body>

A few things to look for. First, you need to include jsf.js file which provides all the JavaScript functionality. Second, for render you need to use client id (not just component id).

Let’s look at an example using a button:

<h:form> 
    <h:panelGrid >
    <h:commandButton value="Get time" >
      <f:ajax event="click" render="time"/>
    </h:commandButton>
    <h:outputText value="#{bean.now}" id="time"/>
</h:panelGrid>
</h:form>

Java bean:

public class Bean {
public Date getNow () {
return (new Date());
}
}

In example above, we are adding Ajax behavior to standard JSF button. We specified both event and render. But, the example could also be rewritten like this:

<h:form> 
    <h:panelGrid >
    <h:commandButton value="Get time" >
      <f:ajax render="time"/>
    </h:commandButton>
    <h:outputText value="#{bean.now}" id="time"/>
</h:panelGrid>
</h:form>

So far we covered sending an Ajax request and partial view rendering. Let’s now cover the third part: partial view processing.

Partial view processing
In JSF 1.x (and without RichFaces) when a form was submitted, the entire form was processed on the server. Processed means that all components went through phases Apply Request Values, Process Validation and Update Model. When Ajax, there are situations when you don’t want to process all the components in the form. To control which components will get processed, we use execute attribute on f:ajax tag.

<h:commandButton value="Click" > 
  <f:ajax execute="@form" render="time"/>
</h:commandButton>

In above example, when button is clicked an Ajax request is fired and the entire form will be processed on the server.

Attribute Description
execute Determines id’s of components to be processed on server
Possible values for render attribute Description
@all Process all components in view
@none Process no components
@this Process only this component, the component that triggered the Ajax request (default)
@form Process all components within this form (from which Ajax request was fired)

 

id’s Implicit id’s of components to be processed, space separated
EL Must resolve to Collection of Strings

 

More Examples
Let’s look at more examples using f:ajax tag.

If you have multiple controls that fire an Ajax request you could next f:ajax inside each one. Alternatively, you can also put f:ajax around those controls:

<f:ajax> 
  <h:panelGrid>  
    <h:selectBooleanCheckbox>
    <h:inputText>
    <h:commandButton>
  </h:panelGrid>
</f:ajax>  

From example above, f:ajax will be added to each control using their default Ajax events:

h:panelGrid no default behavior, so no Ajax event will be added
h:selectBooleanCheckbox onchange
h:inputTexzt onchange
h:commandButton onchange

We can also specify an event which would then be applied to children components:

<f:ajax event="click"> 
  <h:panelGrid>  
    <h:selectBooleanCheckbox>
    <h:inputText>
    <h:commandButton>
     <f:ajax event="focus"/>
    </h:commanButton>
  </h:panelGrid>
</f:ajax>  

In example above, onclick event will be added to panelGrid, inputText and commandButton. commandButton would also have onfocus event applied to it.

<f:ajax event="valueChange"> 
  <h:panelGrid>  
    <h:selectBooleanCheckbox>
    <h:inputText>
    <h:commandButton>
     <f:ajax event="focus"/>
    </h:commanButton>
  </h:panelGrid>
</f:ajax>

In example above we are applying the default valueChange event. It’s not possible to apply valueChange to panelGrid, so nothing will be applied to it. h:selectBooleanCheckbox and h:inputText will have valueChange applied to both. As valueChange is not a valid event for h:commanButton, the event will not be applied and h:commandButton will have only onfocus applied to it.

Hopefully this gives you a good introduction how to use f:ajax tag in JSF 2.

RichFaces
If you have been using RichFaces and specifically a4j:support tag then you might be wondering what’s going to happen to it? In RichFaces 4 (JSF 2 based) a4j:support is going to be renamed to a4j:ajax to match the standard tag name. a4j:ajax will use the standard f:ajax under the covers but will also provide numerous advanced features and attributes that you get today in RichFaces and which are not available in JSF 2. You will also have tags such as a4j:poll, a4j:jsFunction, a4j:outputPanel which are not available in JSF 2 and which give you more power and flexibility.

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.

@ThingsExpo Stories
In his session at 21st Cloud Expo, Carl J. Levine, Senior Technical Evangelist for NS1, will objectively discuss how DNS is used to solve Digital Transformation challenges in large SaaS applications, CDNs, AdTech platforms, and other demanding use cases. Carl J. Levine is the Senior Technical Evangelist for NS1. A veteran of the Internet Infrastructure space, he has over a decade of experience with startups, networking protocols and Internet infrastructure, combined with the unique ability to it...
"Space Monkey by Vivent Smart Home is a product that is a distributed cloud-based edge storage network. Vivent Smart Home, our parent company, is a smart home provider that places a lot of hard drives across homes in North America," explained JT Olds, Director of Engineering, and Brandon Crowfeather, Product Manager, at Vivint Smart Home, in this SYS-CON.tv interview at @ThingsExpo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
Gemini is Yahoo’s native and search advertising platform. To ensure the quality of a complex distributed system that spans multiple products and components and across various desktop websites and mobile app and web experiences – both Yahoo owned and operated and third-party syndication (supply), with complex interaction with more than a billion users and numerous advertisers globally (demand) – it becomes imperative to automate a set of end-to-end tests 24x7 to detect bugs and regression. In th...
"IBM is really all in on blockchain. We take a look at sort of the history of blockchain ledger technologies. It started out with bitcoin, Ethereum, and IBM evaluated these particular blockchain technologies and found they were anonymous and permissionless and that many companies were looking for permissioned blockchain," stated René Bostic, Technical VP of the IBM Cloud Unit in North America, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Conventi...
Large industrial manufacturing organizations are adopting the agile principles of cloud software companies. The industrial manufacturing development process has not scaled over time. Now that design CAD teams are geographically distributed, centralizing their work is key. With large multi-gigabyte projects, outdated tools have stifled industrial team agility, time-to-market milestones, and impacted P&L stakeholders.
"Cloud Academy is an enterprise training platform for the cloud, specifically public clouds. We offer guided learning experiences on AWS, Azure, Google Cloud and all the surrounding methodologies and technologies that you need to know and your teams need to know in order to leverage the full benefits of the cloud," explained Alex Brower, VP of Marketing at Cloud Academy, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clar...
Widespread fragmentation is stalling the growth of the IIoT and making it difficult for partners to work together. The number of software platforms, apps, hardware and connectivity standards is creating paralysis among businesses that are afraid of being locked into a solution. EdgeX Foundry is unifying the community around a common IoT edge framework and an ecosystem of interoperable components.
"MobiDev is a software development company and we do complex, custom software development for everybody from entrepreneurs to large enterprises," explained Alan Winters, U.S. Head of Business Development at MobiDev, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
"Akvelon is a software development company and we also provide consultancy services to folks who are looking to scale or accelerate their engineering roadmaps," explained Jeremiah Mothersell, Marketing Manager at Akvelon, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
Coca-Cola’s Google powered digital signage system lays the groundwork for a more valuable connection between Coke and its customers. Digital signs pair software with high-resolution displays so that a message can be changed instantly based on what the operator wants to communicate or sell. In their Day 3 Keynote at 21st Cloud Expo, Greg Chambers, Global Group Director, Digital Innovation, Coca-Cola, and Vidya Nagarajan, a Senior Product Manager at Google, discussed how from store operations and ...
"There's plenty of bandwidth out there but it's never in the right place. So what Cedexis does is uses data to work out the best pathways to get data from the origin to the person who wants to get it," explained Simon Jones, Evangelist and Head of Marketing at Cedexis, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
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...
SYS-CON Events announced today that Telecom Reseller 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, NY. Telecom Reseller reports on Unified Communications, UCaaS, BPaaS for enterprise and SMBs. They report extensively on both customer premises based solutions such as IP-PBX as well as cloud based and hosted platforms.
It is of utmost importance for the future success of WebRTC to ensure that interoperability is operational between web browsers and any WebRTC-compliant client. To be guaranteed as operational and effective, interoperability must be tested extensively by establishing WebRTC data and media connections between different web browsers running on different devices and operating systems. In his session at WebRTC Summit at @ThingsExpo, Dr. Alex Gouaillard, CEO and Founder of CoSMo Software, presented ...
WebRTC is great technology to build your own communication tools. It will be even more exciting experience it with advanced devices, such as a 360 Camera, 360 microphone, and a depth sensor camera. In his session at @ThingsExpo, Masashi Ganeko, a manager at INFOCOM Corporation, introduced two experimental projects from his team and what they learned from them. "Shotoku Tamago" uses the robot audition software HARK to track speakers in 360 video of a remote party. "Virtual Teleport" uses a multip...
A strange thing is happening along the way to the Internet of Things, namely far too many devices to work with and manage. It has become clear that we'll need much higher efficiency user experiences that can allow us to more easily and scalably work with the thousands of devices that will soon be in each of our lives. Enter the conversational interface revolution, combining bots we can literally talk with, gesture to, and even direct with our thoughts, with embedded artificial intelligence, whic...
SYS-CON Events announced today that Evatronix will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Evatronix SA offers comprehensive solutions in the design and implementation of electronic systems, in CAD / CAM deployment, and also is a designer and manufacturer of advanced 3D scanners for professional applications.
Leading companies, from the Global Fortune 500 to the smallest companies, are adopting hybrid cloud as the path to business advantage. Hybrid cloud depends on cloud services and on-premises infrastructure working in unison. Successful implementations require new levels of data mobility, enabled by an automated and seamless flow across on-premises and cloud resources. In his general session at 21st Cloud Expo, Greg Tevis, an IBM Storage Software Technical Strategist and Customer Solution Architec...
To get the most out of their data, successful companies are not focusing on queries and data lakes, they are actively integrating analytics into their operations with a data-first application development approach. Real-time adjustments to improve revenues, reduce costs, or mitigate risk rely on applications that minimize latency on a variety of data sources. In his session at @BigDataExpo, Jack Norris, Senior Vice President, Data and Applications at MapR Technologies, reviewed best practices to ...
An increasing number of companies are creating products that combine data with analytical capabilities. Running interactive queries on Big Data requires complex architectures to store and query data effectively, typically involving data streams, an choosing efficient file format/database and multiple independent systems that are tied together through custom-engineered pipelines. In his session at @BigDataExpo at @ThingsExpo, Tomer Levi, a senior software engineer at Intel’s Advanced Analytics gr...