Welcome!

Open Source Cloud Authors: Pat Romanski, Yeshim Deniz, Liz McMillan, Stackify Blog, Wesley Coelho

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
In this strange new world where more and more power is drawn from business technology, companies are effectively straddling two paths on the road to innovation and transformation into digital enterprises. The first path is the heritage trail – with “legacy” technology forming the background. Here, extant technologies are transformed by core IT teams to provide more API-driven approaches. Legacy systems can restrict companies that are transitioning into digital enterprises. To truly become a lead...
SYS-CON Events announced today that CAST Software 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. CAST was founded more than 25 years ago to make the invisible visible. Built around the idea that even the best analytics on the market still leave blind spots for technical teams looking to deliver better software and prevent outages, CAST provides the software intelligence that matter ...
SYS-CON Events announced today that Daiya Industry will exhibit at the Japanese Pavilion 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. Ruby Development Inc. builds new services in short period of time and provides a continuous support of those services based on Ruby on Rails. For more information, please visit https://github.com/RubyDevInc.
As businesses evolve, they need technology that is simple to help them succeed today and flexible enough to help them build for tomorrow. Chrome is fit for the workplace of the future — providing a secure, consistent user experience across a range of devices that can be used anywhere. In her session at 21st Cloud Expo, Vidya Nagarajan, a Senior Product Manager at Google, will take a look at various options as to how ChromeOS can be leveraged to interact with people on the devices, and formats th...
SYS-CON Events announced today that Yuasa System will exhibit at the Japan External Trade Organization (JETRO) Pavilion 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. Yuasa System is introducing a multi-purpose endurance testing system for flexible displays, OLED devices, flexible substrates, flat cables, and films in smartphones, wearables, automobiles, and healthcare.
SYS-CON Events announced today that Taica will exhibit at the Japan External Trade Organization (JETRO) Pavilion 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. Taica manufacturers Alpha-GEL brand silicone components and materials, which maintain outstanding performance over a wide temperature range -40C to +200C. For more information, visit http://www.taica.co.jp/english/.
SYS-CON Events announced today that SourceForge has been named “Media 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. SourceForge is the largest, most trusted destination for Open Source Software development, collaboration, discovery and download on the web serving over 32 million viewers, 150 million downloads and over 460,000 active development projects each and every month.
SYS-CON Events announced today that Nihon Micron will exhibit at the Japan External Trade Organization (JETRO) Pavilion 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. Nihon Micron Co., Ltd. strives for technological innovation to establish high-density, high-precision processing technology for providing printed circuit board and metal mount RFID tags used for communication devices. For more inf...
Enterprises have taken advantage of IoT to achieve important revenue and cost advantages. What is less apparent is how incumbent enterprises operating at scale have, following success with IoT, built analytic, operations management and software development capabilities – ranging from autonomous vehicles to manageable robotics installations. They have embraced these capabilities as if they were Silicon Valley startups. As a result, many firms employ new business models that place enormous impor...
SYS-CON Events announced today that MIRAI Inc. will exhibit at the Japan External Trade Organization (JETRO) Pavilion 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. MIRAI Inc. are IT consultants from the public sector whose mission is to solve social issues by technology and innovation and to create a meaningful future for people.
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.
SYS-CON Events announced today that Dasher Technologies 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. Dasher Technologies, Inc. ® is a premier IT solution provider that delivers expert technical resources along with trusted account executives to architect and deliver complete IT solutions and services to help our clients execute their goals, plans and objectives. Since 1999, we'v...
SYS-CON Events announced today that TidalScale, a leading provider of systems and services, 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. TidalScale has been involved in shaping the computing landscape. They've designed, developed and deployed some of the most important and successful systems and services in the history of the computing industry - internet, Ethernet, operating s...
SYS-CON Events announced today that Massive Networks, that helps your business operate seamlessly with fast, reliable, and secure internet and network solutions, 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. As a premier telecommunications provider, Massive Networks is headquartered out of Louisville, Colorado. With years of experience under their belt, their team of...
SYS-CON Events announced today that IBM has been named “Diamond Sponsor” of SYS-CON's 21st Cloud Expo, which will take place on October 31 through November 2nd 2017 at the Santa Clara Convention Center in Santa Clara, California.
Infoblox delivers Actionable Network Intelligence to enterprise, government, and service provider customers around the world. They are the industry leader in DNS, DHCP, and IP address management, the category known as DDI. We empower thousands of organizations to control and secure their networks from the core-enabling them to increase efficiency and visibility, improve customer service, and meet compliance requirements.
SYS-CON Events announced today that TidalScale 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. TidalScale is the leading provider of Software-Defined Servers that bring flexibility to modern data centers by right-sizing servers on the fly to fit any data set or workload. TidalScale’s award-winning inverse hypervisor technology combines multiple commodity servers (including their ass...
As hybrid cloud becomes the de-facto standard mode of operation for most enterprises, new challenges arise on how to efficiently and economically share data across environments. In his session at 21st Cloud Expo, Dr. Allon Cohen, VP of Product at Elastifile, will explore new techniques and best practices that help enterprise IT benefit from the advantages of hybrid cloud environments by enabling data availability for both legacy enterprise and cloud-native mission critical applications. By rev...
As popularity of the smart home is growing and continues to go mainstream, technological factors play a greater role. The IoT protocol houses the interoperability battery consumption, security, and configuration of a smart home device, and it can be difficult for companies to choose the right kind for their product. For both DIY and professionally installed smart homes, developers need to consider each of these elements for their product to be successful in the market and current smart homes.
Join IBM November 1 at 21st Cloud Expo at the Santa Clara Convention Center in Santa Clara, CA, and learn how IBM Watson can bring cognitive services and AI to intelligent, unmanned systems. Cognitive analysis impacts today’s systems with unparalleled ability that were previously available only to manned, back-end operations. Thanks to cloud processing, IBM Watson can bring cognitive services and AI to intelligent, unmanned systems. Imagine a robot vacuum that becomes your personal assistant tha...