Welcome!

Machine Learning Authors: Flint Brenton, Pat Romanski, Liz McMillan, Elizabeth White, Corey Roth

Related Topics: Machine Learning , Java IoT

Machine Learning : Article

The Benefits Of The AJAX RenderKit

ADF Faces has now been donated to the open source community

In an effort to provide developers with a productive environment, Oracle has been working on a very rich UI component framework for several years. This framework - ADF Faces - has now been donated to the open source community. More precisely, it has been donated to the Apache Software Foundation and is currently hosted in the Apache Incubator - http://incubator.apache.org/projects/adffaces.html. Craig McClanahan is mentoring the project during the Apache incubation. The Apache MyFaces community is also involved in the project to assist with graduation from the incubator, into the Apache MyFaces "ADF Faces" subproject.

What is ADF Faces? ADF Faces is a comprehensive, free JSF component library. This library contains 12 helper objects such as converters and validators, and 93 components ranging from simple input components to complete page components with built-in menu model support. In addition, ADF Faces provides a set of extended services such as a dialog framework and a skinning framework.

In a series of articles we will be deep diving into various aspects of this donation and give developers insight into its internal functionality and how to use and extend ADF Faces. In this first article we discuss the HTML AJAX RenderKit provided by this JSF component library.

The ADF Faces HTML AJAX RenderKit
As most of you probably know by now, AJAX is a new phenomenon, but the technologies that make up AJAX are not. AJAX, for those who don't know, is a technique that uses native browser technologies to provide highly interactive user interfaces and to asynchronously communicate with server-side logic.

Since the technologies backing AJAX have been around for quite some time, there have been AJAX solutions available long before the term was coined. One of those is the ADF Faces "AJAX" RenderKit. This solution has been called partial page rendering (PPR) and has been used by Oracle and its customers for several years. Instead of re-rendering the entire page on a postback, PPR will only update a portion of the page.

With AJAX, or PPR, application developers can then provide a rich and interactive, desktop-like user interface on the Web.

Practical Benefits of ADF Faces AJAX RenderKit
To fully appreciate the benefits that the ADF Faces AJAX RenderKit provides, we first need to look at some of the common problems end users are facing with a traditional Web application.

Problems with Full Page Refresh
End users normally spend time waiting for a server response without being able to do anything else, and, if they do, it might actually cause problems, like double-submit. The scroll position and focus in the page are usually lost even when the same page is redisplayed after a user interaction such as expanding a tree node. Validation is usually delayed until the user explicitly presses submit, and then he or she has to wait for the response and scroll back to the input field with the error message to fix the problem.

With an AJAX JSF solution, all of this can be addressed with little or no effort from the application developer and a great outcome for the end user. The ADF Faces AJAX RenderKit addresses these issues by asynchronously updating only portions of the page, and by keeping track of the form post (basically controlling whether a form post has occurred). The partial update of the page keeps the scrollbar position and the focus, and provides instant validation of user input.

Using the ADF Faces AJAX RenderKit
Creating an application using the HTML AJAX RenderKit provided by the Apache "ADF Faces" Incubator project is easy. There are two ways of achieving a partial update - declaratively and programmatically. Let's first look at the declarative approach.

Figure 1 illustrates the application we are going to build in this article. It contains a dropdown component that lists a set of JDJ articles and a graphic component that shows the featured images for each article. When an end user accesses this application and selects an article to read, only the image is updated, not the entire page. As shown in Figure 1 this adds the benefit of a kept scrollbar position when the end user changes from one article to another. Furthermore, focus is still set on the dropdown list, allowing the end user to continue to use the dropdown list without the need to reselect it.

The JSP source for the page displayed in Figure 1 in shown in Listing 1. Using the declarative approach, the application developer needs only to ensure that there is a unique identifier for the "triggering' component - <af:selectOneChoice> - in this example selectArticle, and that the component targeted for partial update includes this identifier in the partialTriggers attribute. That's it!

Programmatically Adding a Partial Target
In response to a partial event, only components registered as partial targets are re-rendered. With ADF Faces, application developers can also dynamically add components to the list of partial targets by calling the addPartialTarget method from the AdfFacesContext as shown in the following code.

AdfFacesContext adfContext = AdfFacesContext.getCurrentInstance();
adfContext.addPartialTarget(target);

Let's expand our page with an <af:outputText> component. This component will show an excerpt of each selected article. This time we won't use the declarative approach, instead we'll dynamically add the component to the list of partial targets for the <af:selectOneChoice> component.

In Listing 2, a valueChangeListener has been added to the <af:selectOneChoice>, and a <af:outputText> component has been added underneath <af:selectOneChoice> to provide the excerpt of the selected article. In this case the <af:outputText> component does not include the partialTrigger attribute.

The valueChangeListener in Listing 3 ties it all together by adding the outputText component as the partial target to the selectOneChoice component.

The updated page will now contain a description field that will be part of the partial update when the end user selects an article from the dropdown list.

In Figure 2, note that the scrollbar maintains the same position after the partial postback and that the description has been updated.

The Internal Implementation Design
When a page containing ADF Faces components is accessed for the first time, the initial page render includes a hidden iframe element. This hidden iframe is used to manage the partial update of the page. When a commandButton is clicked, the form is still submitted but targets the hidden iframe instead, and additional information is included in the request to let the AJAX RenderKit detect that a partial response is expected.

During the ApplyRequestValues phase in the Faces Lifecycle, the AJAX RenderKit determines that this is a partial request and decorates the ResponseWriter with a PPRResponseWriter implementation (see Figure 3). The purpose of this is to "clip" the rendered markup to produce only the markup fragments for those components that should be included in the partial response back to the iframe.

Each markup fragment is identified by HTML ID, which is used to find the original section of the HTML DOM that needs to be replaced. Figure 4 shows a DOM inspector and the iframe structure of the partial response for the page created in Listing 2. Note the ID match of each fragment e.g., _id5:selDesc and _id5:selImg.

Challenges Addressed by Choosing <iframe> over XmlHttpRequest
Much of the success of AJAX has come from the widespread availability of XMLHttpRequest (XHR), and many people believe that XHR is a required strategy for AJAX. However, AJAX is simply defined as using native browser technologies (no browser plug-ins) and asynchronous communication with the server. This is also possible to achieve using a hidden iframe, which provides some additional capabilities but with some additional issues as well.

The main functionality that is much more easily supported by the hidden iframe communication channel is file upload. For security reasons, JavaScript executing at the browser is not permitted to read the contents of the local file system. So, when using a plug-in free browser environment, uploading a file from the local file system must leverage the <input type="file" ... > native browser support, which requires the form to be submitted so that the file contents will be sent to the server. Using a hidden iframe allows ADF Faces to target the form submission at the iframe instead of the main document, so that the response from the server is received by the hidden iframe. Of course, the same approach works for any type of form submission, not just file upload input elements.

One of the difficulties introduced by using the hidden iframe communication channel is the problem of knowing when the response is complete. Fortunately, since the PPR response is managed by the AJAX RenderKit, it is straightforward to include an additional script block at the end of the response received by the hidden iframe that will inform the main HTML document when the response is complete. In the rendered response a callback function is added (see Listing 4).

Compatibility with Non-ADF Faces Components
How generic is this functionality? Does it only work with ADF Faces components? What happens when you try to use other components, such as the Apache MyFaces Tomahawk or Tobago component libraries?

Fortunately, the implementation of PPR makes no extra assumptions about the child components of any partial target. If an ADF Faces component is added as a partial target, all of its child components are also re-rendered in the partial response, no matter what component library is used.

Conveniently, any JavaServer Faces component can be added as a partial target using the programmatic API. The PPRResponseWriter will detect when this component is being rendered and ensure that the markup is included in the partial response.

Finally, adding declarative support for any JavaServer Faces component, by adding a partialTriggers attribute, requires only minor modifications to the component API and JSP Tag to expose the attribute and a call to AdfFacesContext.addPartialTriggerListeners in the Renderer.

Conclusion
This is the first successful implementation of AJAX in JSF and, as discussed in this article, is currently used by the ADF Faces component library. This type of architecture relies on a regular form submit. The response is in fragments that contain the information about what is needed for the change. The PPR handler will then figure out where to slot in these changes. This approach is straightforward to use, allowing the application developer to control what components are involved in each partial update. In this architecture, the unit of update is a UIComponent subtree, so the markup for each UIComponent subtree is replaced for each partial target. PPR is also relying on iframes, not XMLHttpRequest, to provide asynchronous communication, which has the benefit of supporting older versions of browsers.

What is interesting is that Oracle announced intentions to donate a new generation of ADF Faces components to the open source community at JavaOne 2006. In contrast to the components discussed in this article, these new components leverage the XMLHttpRequest object to provide AJAX JSF components.

Finally, we believe that MyFaces "ADF Faces" will become the most dominant open source JavaServer Faces component library on the planet. The question is: How will you contribute?

More Stories By Kaazing Blog

Kaazing is helping define the future of the event-driven enterprise by accelerating the Web for the Internet of Things.

More Stories By John Fallows

John brings to Kaazing his 17 years’ experience in technology development and software design, and is considered a pioneer in the field of rich and highly interactive user interfaces. As CTO he formulates Kaazing Corporation’s vision of enabling mobile users, marketplaces and machines to connect and communicate in real-time, more reliably and at unprecedented scale. He defines the architecture of the Kaazing product suite and oversees its development. Prior to co-founding Kaazing, John served as Architect for Brane Corporation, a startup company based in Redwood City, California. Before joining Brane, he was a Consulting Member of Technical Staff for Server Technologies at Oracle Corporation. During his last five years at Oracle, he focused on designing, developing, and evolving Oracle ADF Faces to fully integrate Ajax technologies. Originally from Northern Ireland, he received his MA in Computer Science from Cambridge University in the United Kingdom and has written several articles for leading IT magazines such as Java Developer’s Journal, AjaxWorld Magazine, and JavaMagazine (DE), and is a popular speaker at international conferences. He is co-author of the bestselling book Pro JSF and Ajax: Building Rich Internet Components (Apress).

Comments (1) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
AJAXWorld News Desk 06/14/06 12:51:41 PM EDT

In an effort to provide developers with a productive environment, Oracle has been working on a very rich UI component framework for several years. This framework - ADF Faces - has now been donated to the open source community. More precisely, it has been donated to the Apache Software Foundation and is currently hosted in the Apache Incubator - http://incubator.apache.org/projects/adffaces.html.

@CloudExpo Stories
Creating replica copies to tolerate a certain number of failures is easy, but very expensive at cloud-scale. Conventional RAID has lower overhead, but it is limited in the number of failures it can tolerate. And the management is like herding cats (overseeing capacity, rebuilds, migrations, and degraded performance). In his general session at 18th Cloud Expo, Scott Cleland, Senior Director of Product Marketing for the HGST Cloud Infrastructure Business Unit, discussed how a new approach is neces...
"This week we're really focusing on scalability, asset preservation and how do you back up to the cloud and in the cloud with object storage, which is really a new way of attacking dealing with your file, your blocked data, where you put it and how you access it," stated Jeff Greenwald, Senior Director of Market Development at HGST, in this SYS-CON.tv interview at 18th Cloud Expo, held June 7-9, 2016, at the Javits Center in New York City, NY.
"ZeroStack is a startup in Silicon Valley. We're solving a very interesting problem around bringing public cloud convenience with private cloud control for enterprises and mid-size companies," explained Kamesh Pemmaraju, VP of Product Management at ZeroStack, 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.
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...
"Venafi has a platform that allows you to manage, centralize and automate the complete life cycle of keys and certificates within the organization," explained Gina Osmond, Sr. Field Marketing Manager at Venafi, in this SYS-CON.tv interview at DevOps at 19th Cloud Expo, held November 1-3, 2016, at the Santa Clara Convention Center in Santa Clara, CA.
Enterprise architects are increasingly adopting multi-cloud strategies as they seek to utilize existing data center assets, leverage the advantages of cloud computing and avoid cloud vendor lock-in. This requires a globally aware traffic management strategy that can monitor infrastructure health across data centers and end-user experience globally, while responding to control changes and system specification at the speed of today’s DevOps teams. In his session at 20th Cloud Expo, Josh Gray, Chie...
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 ...
Agile has finally jumped the technology shark, expanding outside the software world. Enterprises are now increasingly adopting Agile practices across their organizations in order to successfully navigate the disruptive waters that threaten to drown them. In our quest for establishing change as a core competency in our organizations, this business-centric notion of Agile is an essential component of Agile Digital Transformation. In the years since the publication of the Agile Manifesto, the conn...
"Our strategy is to focus on the hyperscale providers - AWS, Azure, and Google. Over the last year we saw that a lot of developers need to learn how to do their job in the cloud and we see this DevOps movement that we are catering to with our content," stated Alessandro Fasan, Head of Global Sales at Cloud Academy, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
Business professionals no longer wonder if they'll migrate to the cloud; it's now a matter of when. The cloud environment has proved to be a major force in transitioning to an agile business model that enables quick decisions and fast implementation that solidify customer relationships. And when the cloud is combined with the power of cognitive computing, it drives innovation and transformation that achieves astounding competitive advantage.
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...
"I focus on what we are calling CAST Highlight, which is our SaaS application portfolio analysis tool. It is an extremely lightweight tool that can integrate with pretty much any build process right now," explained Andrew Siegmund, Application Migration Specialist for CAST, 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.
"Software-defined storage is a big problem in this industry because so many people have different definitions as they see fit to use it," stated Peter McCallum, VP of Datacenter Solutions at FalconStor Software, in this SYS-CON.tv interview at 18th Cloud Expo, held June 7-9, 2016, at the Javits Center in New York City, NY.
Deep learning has been very successful in social sciences and specially areas where there is a lot of data. Trading is another field that can be viewed as social science with a lot of data. With the advent of Deep Learning and Big Data technologies for efficient computation, we are finally able to use the same methods in investment management as we would in face recognition or in making chat-bots. In his session at 20th Cloud Expo, Gaurav Chakravorty, co-founder and Head of Strategy Development ...
Data is the fuel that drives the machine learning algorithmic engines and ultimately provides the business value. In his session at Cloud Expo, Ed Featherston, a director and senior enterprise architect at Collaborative Consulting, discussed the key considerations around quality, volume, timeliness, and pedigree that must be dealt with in order to properly fuel that engine.
As organizations shift towards IT-as-a-service models, the need for managing and protecting data residing across physical, virtual, and now cloud environments grows with it. Commvault can ensure protection, access and E-Discovery of your data – whether in a private cloud, a Service Provider delivered public cloud, or a hybrid cloud environment – across the heterogeneous enterprise. In his general session at 18th Cloud Expo, Randy De Meno, Chief Technologist - Windows Products and Microsoft Part...
"Cloud computing is certainly changing how people consume storage, how they use it, and what they use it for. It's also making people rethink how they architect their environment," stated Brad Winett, Senior Technologist for DDN Storage, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
When shopping for a new data processing platform for IoT solutions, many development teams want to be able to test-drive options before making a choice. Yet when evaluating an IoT solution, it’s simply not feasible to do so at scale with physical devices. Building a sensor simulator is the next best choice; however, generating a realistic simulation at very high TPS with ease of configurability is a formidable challenge. When dealing with multiple application or transport protocols, you would be...
FinTechs use the cloud to operate at the speed and scale of digital financial activity, but are often hindered by the complexity of managing security and compliance in the cloud. In his session at 20th Cloud Expo, Sesh Murthy, co-founder and CTO of Cloud Raxak, showed how proactive and automated cloud security enables FinTechs to leverage the cloud to achieve their business goals. Through business-driven cloud security, FinTechs can speed time-to-market, diminish risk and costs, maintain continu...
In his keynote at 18th Cloud Expo, Andrew Keys, Co-Founder of ConsenSys Enterprise, provided an overview of the evolution of the Internet and the Database and the future of their combination – the Blockchain. Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life settl...
"I will be talking about ChatOps and ChatOps as a way to solve some problems in the DevOps space," explained Himanshu Chhetri, CTO of Addteq, in this SYS-CON.tv interview at @DevOpsSummit at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.