Welcome!

Open Source Cloud Authors: Pat Romanski, Mehdi Daoudi, Elizabeth White, Derek Weeks, Prince Kumar

Related Topics: Open Source Cloud, Java IoT, Machine Learning

Open Source Cloud: Blog Feed Post

RichFaces Region

Partial JSF tree processing

The a4j:region tag in RichFaces is probably one of the most misunderstood tags, but it provides one of the most important features in RichFaces. With it, server-side processing can be limited to only certain designated components.

One reason for misunderstanding could be the tag name. Many believe that the region tag limits what is rendered in the JSF component tree (to the browser). However, it’s used for the opposite purpose, to mark areas on the JSF component tree to be processed on the server during the Apply Request Values, Process Validations, and Update Model Values phases. Maybe “processRegion” would have been a better name, but we will just deal with what we have.

Before we continue, I want to thank Nick Belaevski (RichFaces project lead and co-author of RichFaces DZone Refcard, Exadel) and Charley Cowens (Technical Writer, Exadel) for helping edit this article.

An Example
Let’s see how the tag works in an example. Suppose there are five input components on a page. Also suppose that you only need one or two of them to be processed on the server. While we cannot change how the form is submitted (all five input field will be submitted), we can control which components will be processed on the server. Components that are not processed on the server, will not be validated and will not be pushed on to the model (during the Update Model phase).

Suppose there is the following page:

<h:form>
     <h:panelGrid>
  	<h:inputText id="input1" >
  		<a4j:support event="onblur"/>
  	</h:inputText>
  	<h:inputText id="input2" >
  		<a4j:support event="onblur"/>
  	</h:inputText>
  	<h:inputText id="input3" >
  		<a4j:support event="onblur"/>
  	</h:inputText>
    </h:panelGrid>
</h:form>

By default the entire page is a region. Thus a request sent from any of the input fields will process the entire form.

Suppose we only need to process the input1 component. To do that, we can put the component inside an a4j:region tag:

<h:panelGrid>
   <a4j:region>
      <h:inputText id="input1">
	<a4j:support event="onblur" />
      </h:inputText>
   </a4j:region>
   <h:inputText id="input2">
	<a4j:support event="onblur" />
   </h:inputText>
   <h:inputText id="input3">
	<a4j:support event="onblur" />
   </h:inputText>
</h:panelGrid

In this case, if input1 triggers the submit, only input1 will be processed on the server even though the whole form will still be submitted.

It’s also possible to nest regions:

<h:panelGrid>
   <a4j:region>
	<a4j:region>
   <h:inputText id="input1">
	<a4j:support event="onblur" />
   </h:inputText>
   </a4j:region>
	<h:inputText id="input2">
		<a4j:support event="onblur" />
	</h:inputText>
   </a4j:region>
   <h:inputText id="input3">
	<a4j:support event="onblur" />
   </h:inputText>
</h:panelGrid>

In this example, if a request is fired by component input1 (Input components don’t actually fire events. The event is fired by a4j:support), then only the immediate region will be processed on the server. If component input2 fires the event, then both, input1 and input2 will be processed. If component input3 fires the event, as it belongs to the default region that wraps the entire page, all three inputs will be processed.

When using a4j:region with an action component, only the action and listeners registered on this component will be invoked on the server:

<a4j:region> <a4j:commandButton action="#{bean.save}" value="Click Me"/> </a4j:region>

Using renderRegionOnly attribute with a4j:region
The a4j:region tag comes with an important attribute called renderRegionOnly which can be set to true or false (false by default). This attribute limits any re-rendering to the current region only. Let’s take this code snippet as an example:

<h:panelGrid columns="2">
   <h:outputText value="Name:" />
	<h:panelGroup>
		<h:inputText id="name" value="#{bean.name}" required="true"
			 requiredMessage="Name is required" 
                         validatorMessage="Must be 3 characters or longer">
			<a4j:support event="onblur" />
			<f:validateLength minimum="3" />
		</h:inputText>
	            <rich:message for="name" />
            </h:panelGroup>
	<h:outputText value="Age:" />
	<h:panelGroup>
		<h:inputText id="age" value="#{bean.age}" size="4" required="true"
		   requiredMessage="Age is required" 
                   validatorMessage="Invalid age">
		     <a4j:support event="onblur" />
		     <f:validateLongRange minimum="0" />
		</h:inputText>
		<rich:message for="age" />
	</h:panelGroup>
</h:panelGrid>

When you tab out or click out (onblur event) from the first input field without entering anything or entering invalid input (as shown), the entire form is submitted and both fields are validated. Both fields are processed and validated because by default the whole page is a region. That’s not exactly the behavior that we want.

regiontag1

We don’t want to validate fields for which the user hasn’t had a chance to enter anything. Placing each input and message tag inside a region will restrict processing to the region from which the request was sent.

<h:panelGroup>
   <a4j:region>
	<h:inputText id="name" value="#{bean.name}" required="true"
		requiredMessage="Name is required" 
                validatorMessage="Must be 3 characters or longer">
		<a4j:support event="onblur" />
		<f:validateLength minimum="3" />
	</h:inputText>
	<rich:message for="name" />
      </a4j:region>
</h:panelGroup>
 
<h:outputText value="Age:" />
<h:panelGroup>
   <a4j:region>
	<h:inputText id="age" value="#{bean.age}" size="4" required="true"
		requiredMessage="Age is required" 
                validatorMessage="Invalid age">
			<a4j:support event="onblur" />
			<f:validateLongRange minimum="0" />
	</h:inputText>
	<rich:message for="age" />
   </a4j:region>
</h:panelGroup>

While we solved the problem of only processing the field which fired the event, we now run into another problem.

  1. Place the mouse cursor inside the name field
  2. Without entering anything (or entering less than 3 characters), leave the field and place the mouse in the age field
  3. An error is displayed next to the name field as expected (only this field is processed)
    regiontag2
  4. Enter a negative number in the age field and leave the field
  5. An error is displayed next to the age field (as expected). However, the error message next to the name field gets cleared (not expected)
    regiontag3

What happened? First, JSF error messages are request-scoped. Secondly, rich:message works just like h:message, but the component is always rendered, whether there is an error or not.

So, how are these two related? When the age field fired an event, only the age field was processed. As the name field wasn’t processed, no error message was queued and the old one is now gone as this is a new request. Because we used rich:message , an empty string value (or empty error) replaced the original error message in the browser.

To help us solve this, we are going to use the renderRegionOnly attribute. For both a4j:region tags, we are setting renderRegionOnly=”true”:

...
<h:panelGroup>
 <a4j:region renderRegionOnly="true">
   <h:inputText id="name" value="#{bean.name}" required="true"
	requiredMessage="Name is required" 
        validatorMessage="Must be 3 characters or longer">
	<a4j:support event="onblur" />
	<f:validateLength minimum="3" />
   </h:inputText>
 <rich:message for="name" />
 </a4j:region>
</h:panelGroup>
...
...
<h:panelGroup>
   <a4j:region renderRegionOnly="true">
	<h:inputText id="age" value="#{bean.age}" 
                 size="4" required="true"
		requiredMessage="Age is required" 
                validatorMessage="Invalid age">
	   <a4j:support event="onblur" />
	   <f:validateLongRange minimum="0" />
	 </h:inputText>
	 <rich:message for="age" />
   </a4j:region>
</h:panelGroup>

This means that any re-rendering is limited to the region from which the request was fired. When we leave the age field without entering anything, the name error is not cleared as we just limited updating to the current region (the region in which age field is).

The desired result is achieved: both error messages are displayed:
regiontag4

One thing to keep in mind, setting renderRegionOnly=”true” doesn’t define what to re-render, it only limits the updates to the current region. What to re-render is determined by rich:message

Using renderRegionOnly allows the creation of a true AJAX region on a page – meaning all input for processing on the server and all output for re-rendering is limited to this particular region.

Using ajaxSingle attribute

A closely related feature to the region is ajaxSingle attribute. The attribute can be applied to just one component while a4j:region can contain any number of components.

<a4j:region>
   <a4j:commandButton action="#{bean.save}" value="Click Me"/>
</a4j:region>
 
Is the same as:
<pre lang="xml">
<a4j:commandButton action="#{bean.save}" value="Click Me" ajaxSingle="true">

And this:

<a4j:region>
    <h:inputText id="age" value="#{bean.city}">
		<a4j:support event="onblur" />
   </h:inputText>
</a4j:region>

Is the same as this:

<h:inputText id="age" value="#{bean.city}">
   <a4j:support event="onblur" ajaxSingle="true"/>
</h:inputText>

Using process attribute

Another important attribute is process. It’s available on all RichFaces components that fire an AJAX request and is used in conjunction with ajaxSingle. When ajaxSingle is set to true, we know that only this component will be processed. A situation might arise where you still need to process some specific other components on the page in addition. The process attribute points to those components or containers.

<h:inputText>
   <a4j:support event="onblur" ajaxSingle="true" process="mobile"/>
</h:inputText>
...
<h:inputText id="mobile"/>

process can also point to an EL expression or container component id in which case all components inside the container will be processed:

<h:inputText> <a4j:support event="onblur" ajaxSingle="true" process="infoPanel"/> </h:inputText> <h:panelGrid id="infoPanel"> <h:inputText /> <h:dataTable> ... </h:dataTable> </h:panelGrid>

Summary
Partial tree processing is one of the key concepts in RichFaces, so make sure you understand it. Another core concept is partial tree rendering and more specifically rendering content not previously rendered. You can read about it here.

One thing to keep in mind is that regions only work in the context of an AJAX request. Regions don’t work with a non-AJAX request.

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
Internet-of-Things discussions can end up either going down the consumer gadget rabbit hole or focused on the sort of data logging that industrial manufacturers have been doing forever. However, in fact, companies today are already using IoT data both to optimize their operational technology and to improve the experience of customer interactions in novel ways. In his session at @ThingsExpo, Gordon Haff, Red Hat Technology Evangelist, shared examples from a wide range of industries – including en...
Detecting internal user threats in the Big Data eco-system is challenging and cumbersome. Many organizations monitor internal usage of the Big Data eco-system using a set of alerts. This is not a scalable process given the increase in the number of alerts with the accelerating growth in data volume and user base. Organizations are increasingly leveraging machine learning to monitor only those data elements that are sensitive and critical, autonomously establish monitoring policies, and to detect...
"We're a cybersecurity firm that specializes in engineering security solutions both at the software and hardware level. Security cannot be an after-the-fact afterthought, which is what it's become," stated Richard Blech, Chief Executive Officer at Secure Channels, in this SYS-CON.tv interview at @ThingsExpo, held November 1-3, 2016, at the Santa Clara Convention Center in Santa Clara, CA.
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. Jack Norris reviews best practices to show how companies develop, deploy, and dynamically update these applications and how this data-first...
Intelligent Automation is now one of the key business imperatives for CIOs and CISOs impacting all areas of business today. In his session at 21st Cloud Expo, Brian Boeggeman, VP Alliances & Partnerships at Ayehu, will talk about how business value is created and delivered through intelligent automation to today’s enterprises. The open ecosystem platform approach toward Intelligent Automation that Ayehu delivers to the market is core to enabling the creation of the self-driving enterprise.
The question before companies today is not whether to become intelligent, it’s a question of how and how fast. The key is to adopt and deploy an intelligent application strategy while simultaneously preparing to scale that intelligence. In her session at 21st Cloud Expo, Sangeeta Chakraborty, Chief Customer Officer at Ayasdi, will provide a tactical framework to become a truly intelligent enterprise, including how to identify the right applications for AI, how to build a Center of Excellence to ...
SYS-CON Events announced today that Massive Networks 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. Massive Networks mission is simple. To help your business operate seamlessly with fast, reliable, and secure internet and network solutions. Improve your customer's experience with outstanding connections to your cloud.
SYS-CON Events announced today that Datera, that offers a radically new data management architecture, has been named "Exhibitor" of 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. Datera is transforming the traditional datacenter model through modern cloud simplicity. The technology industry is at another major inflection point. The rise of mobile, the Internet of Things, data storage and Big...
Everything run by electricity will eventually be connected to the Internet. Get ahead of the Internet of Things revolution and join Akvelon expert and IoT industry leader, Sergey Grebnov, in his session at @ThingsExpo, for an educational dive into the world of managing your home, workplace and all the devices they contain with the power of machine-based AI and intelligent Bot services for a completely streamlined experience.
Because IoT devices are deployed in mission-critical environments more than ever before, it’s increasingly imperative they be truly smart. IoT sensors simply stockpiling data isn’t useful. IoT must be artificially and naturally intelligent in order to provide more value In his session at @ThingsExpo, John Crupi, Vice President and Engineering System Architect at Greenwave Systems, will discuss how IoT artificial intelligence (AI) can be carried out via edge analytics and machine learning techn...
In his session at @ThingsExpo, Arvind Radhakrishnen discussed how IoT offers new business models in banking and financial services organizations with the capability to revolutionize products, payments, channels, business processes and asset management built on strong architectural foundation. The following topics were covered: How IoT stands to impact various business parameters including customer experience, cost and risk management within BFS organizations.
SYS-CON Events announced today that CA Technologies has been named "Platinum Sponsor" of SYS-CON's 21st International Cloud Expo®, which will take place October 31-November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. CA Technologies helps customers succeed in a future where every business - from apparel to energy - is being rewritten by software. From planning to development to management to security, CA creates software that fuels transformation for companies in the applic...
From 2013, NTT Communications has been providing cPaaS service, SkyWay. Its customer’s expectations for leveraging WebRTC technology are not only typical real-time communication use cases such as Web conference, remote education, but also IoT use cases such as remote camera monitoring, smart-glass, and robotic. Because of this, NTT Communications has numerous IoT business use-cases that its customers are developing on top of PaaS. WebRTC will lead IoT businesses to be more innovative and address...
SYS-CON Events announced today that CA Technologies has been named “Platinum Sponsor” of SYS-CON's 21st International Cloud Expo®, which will take place October 31-November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. CA Technologies helps customers succeed in a future where every business – from apparel to energy – is being rewritten by software. From planning to development to management to security, CA creates software that fuels transformation for companies in the applic...
Internet of @ThingsExpo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 21st Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The Internet of Things (IoT) is the most profound change in personal and enterprise IT since the creation of the Worldwide Web more than 20 years ago. All major researchers estimate there will be tens of billions devic...
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, will introduce 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...
SYS-CON Events announced today that Calligo has been named “Bronze Sponsor” of 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. Calligo is an innovative cloud service provider offering mid-sized companies the highest levels of data privacy. Calligo offers unparalleled application performance guarantees, commercial flexibility and a personalized support service from its globally located cloud platform...
SYS-CON Events announced today that Elastifile 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. Elastifile Cloud File System (ECFS) is software-defined data infrastructure designed for seamless and efficient management of dynamic workloads across heterogeneous environments. Elastifile provides the architecture needed to optimize your hybrid cloud environment, by facilitating efficient...
SYS-CON Events announced today that Cloudistics, an on-premises cloud computing company, has been named “Bronze Sponsor” of 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. Launched in 2016, Cloudistics helps anyone bring the power of the cloud to the data center in an easy-to-use, on- premises cloud platform that automatically provides high performance resources for all types of applications: Docke...
SYS-CON Events announced today that Golden Gate University 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. Since 1901, non-profit Golden Gate University (GGU) has been helping adults achieve their professional goals by providing high quality, practice-based undergraduate and graduate educational programs in law, taxation, business and related professions. Many of its courses are taug...