Welcome!

Machine Learning Authors: Elizabeth White, Leon Adato, Jack Jachner, Pat Romanski, Progress Blog

Related Topics: Machine Learning , Java IoT

Machine Learning : Article

AjaxWorld Special: Creating AJAX and Rich Internet Components with JSF

AJAX has gained momentum primarily due to the "XMLHttpRequest" browser object which supports asynchronous communication

This article is based on, and contains excerpts from, the book Pro JSF: Building Rich Internet Components by Jonas Jacobi and John Fallows, published by Apress. Book is now available on fine bookstores and Amazon as of February 25, 2006.

JavaServer Faces (JSF) standardizes the server-side component model for Web application development but doesn't standardize the presentation layer at the browser. In a series of articles we are going to look at how JSF can fulfill new presentation requirements without sacrificing application developer productivity building Rich Internet Applications (RIA).

Consumer Requirements
It's always the end user who feels the effect of any chosen technology, especially at the presentation layer. The end-user experience should be top priority for any developer building applications, whether they are Web applications or desktop applications. End users demand feature-rich and highly interactive user interfaces.

Introduction to Rich Internet Technologies
Web application developers today are faced with higher demand for richer functionality using technologies such as HTML, CSS, JavaScript, and DOM. These technologies were not developed with enterprise applications in mind and, with increasing pressure from consumers to provide applications with features not fully described or supported by these technologies, developers are looking for alternative solutions or extensions to these standards.

From a combination of both consumer requirements and developer needs, a new breed of Web technologies has evolved. Often referred to as Rich Internet Technologies, these technologies enhance the traditionally static content provided by Web applications.

In the absence of sufficiently powerful standards, new technologies such as Mozilla's XUL, Microsoft's HTC, Java applets, Flex, and OpenLaszlo have emerged to meet the requirements. Such technologies support application-specific extensions to traditional HTML markup while still leveraging the benefits of deploying an application to a central HTTP server. XMLHTTP has also returned under a newly branded name, AJAX (Asynchronous JavaScript and XML). Applications built with these technologies are often referred to as Rich Internet Applications (RIA).

In this article series we are going to focus on AJAX and XUL to illustrate the potential that JSF brings to the JavaEE developer.

AJAX
AJAX has gained momentum primarily due to the XMLHttpRequest browser object, which supports asynchronous communication with any business services used by the Web application. Popular sites such as Google Mail and Google Suggest use AJAX to deliver RIA.

With the XMLHttpRequest object, developers can now send requests to the Web server to retrieve only the data needed and use JavaScript to process the response.This ability to reduce the amount of data transferred between client and Web server reduces the bandwidth to a minimum and saves processing time on the server since most of the processing is done on the client using JavaScript.

It is important to note that the XMLHttpRequest object, although widely used, could at best be called a "de facto" standard, since most browsers, including Firefox, Inter-net Explorer, Opera, and Safari, support it. It is also worth noting that the XMLHttpRequest object is not exclusive to AJAX; potentially the XMLHttpRequest object can be used by any HTML/XML-based Web technology such as XUL or HTC.

Desktop vs Web
Traditional Web applications are in most cases slower than their counterpart desktop applications. With AJAX we can now send requests to the Web server to retrieve only the data needed and use JavaScript to process the response, which leads to a more responsive Web application.

A typical AJAX application leverages standard HTML/XHTML at the presentation layer and uses JavaScript to dynamically change the DOM. This creates an effect of "richness" in the user interface with no dependency on additional browser plug-ins.

Mozilla XUL
XUL (pronounced zool) was created by the Mozilla organization (Mozilla.org) as an open source project in 1998. With XUL, developers can build rich user interfaces that may be deployed either as "thin client" Web applications, locally on a desktop, or as Internet-enabled "thick client" desktop applications. To fully provide the consumer with a rich user interfaces, XUL needs to execute in the Mozilla Gecko Runtime Environment (GRE). There are many examples of applications using XUL, including the Firefox browser, the Thunderbird e-mail client, and numerous plug-ins to each.

XUL Structure
The base idea behind XUL is to provide a markup for building user interfaces much like HTML, and to leverage technologies such as CSS for look-and-feel and JavaScript for events and behavior. There are even APIs available to access files systems and Web services over the network. As an XML language, XUL can be also be used in combination with other XML languages, such as XHTML and SVG.

XUL Components
XUL comes with a base set of components that are available through the Mozilla GRE, and has the added benefit of not needing to download components to display an application in the browser. You can also design your own components with XUL; these will need to be downloaded on request and cached in the browser.

XUL uses a language called XBL (eXtensible Binding Language) to define new components. XBL is also used to bridge the gap between XUL and HTML, making it easy to attach behavior to traditional HTML markup.

Listing 1 is a sample XUL file that embeds XUL elements and standard, name-spaced HTML elements.

XUL Event Handling
Using XUL event handling is not that different from using HTML event handling. The GRE implementation supports DOM Level 2 (and partially DOM Level 3) and is virtually the same for HTML and XUL, and changes to the state and events are propagated through a range of DOM calls. XUL elements come with predefined event handlers, much like the event handlers provided with the standard HTML elements (see Listing 2).

As in HTML, developers can use JavaScript functions located in external libraries, or embedded in the page.

<script type="text/javascript"src="http://
www.bob.org/js/myscript.js">

There is a large set of built-in XUL components, each with its own set of event handler attributes. For example, the XUL window element delivers events such as load and paint.

Creating Custom XUL Components Using XBL
XBL is an XML language that allows developers to extend XUL by adding "custom" components to the extensive set of existing XUL elements. In XUL, developers can define the look and feel using CSS, and they can define the behavior using XBL.

Developers can look at XUL as the "implementation" that comes with a pre-set of components, or tag libraries that can be used to build a user interface, much like the JSF Reference Implementation. XBL is the language developers use to extend XUL components and enable integration with HTML, in much the same way that Java is used to extend JSF components.

XBL Structure
An XBL file contains a set of bindings, each describing the behavior, properties, and methods of an XUL component.

A quick look at Listing 3 shows the root <bindings> element containing two binding elements. A <bindings> element can contain any number of <binding> elements. The namespace in the <bindings> element defines which syntax will be used, and in Listing 3 it is XBL - xmlns=http://www.mozilla.org/xbl. The file also contains a combination of XUL and HTML elements <xul:text/> and <html:input/>. This is extremely useful for simplifying development by encapsulating several components as a single, reusable component. The xbl:inherits attribute allows the text element to inherit values from the bound element by defining a variable called name and assigns it to the value attribute. If no value is defined when the component is used in a page, the text field's value will default to "Guest".

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 (5) 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
SYS-CON Belgium News Desk 04/06/06 10:49:39 AM EDT

JavaServer Faces (JSF) standardizes the server-side component model for Web application development but doesn't standardize the presentation layer at the browser. In a series of articles we are going to look at how JSF can fulfill new presentation requirements without sacrificing application developer productivity building Rich Internet Applications (RIA). AJAX has gained momentum primarily due to the XMLHttpRequest browser object, which supports asynchronous communication with any business services used by the Web application. Popular sites such as Google Mail and Google Suggest use AJAX to deliver RIA.

SYS-CON Australia News Desk 04/06/06 10:18:19 AM EDT

JavaServer Faces (JSF) standardizes the server-side component model for Web application development but doesn't standardize the presentation layer at the browser. In a series of articles we are going to look at how JSF can fulfill new presentation requirements without sacrificing application developer productivity building Rich Internet Applications (RIA). AJAX has gained momentum primarily due to the XMLHttpRequest browser object, which supports asynchronous communication with any business services used by the Web application. Popular sites such as Google Mail and Google Suggest use AJAX to deliver RIA.

Jonas Jacobi 02/28/06 02:39:13 PM EST

Hi Reza,

Thank you for those kind words. We totally agree with you that the combination of JSF, Ajax, and XUL is a very powerful combination. Part 2 has already been published - http://jdj.sys-con.com/read/171490.htm

These articles are also based on content from our book Pro JSF and Ajax was recently released - http://apress.com/book/bookDisplay.html?bID=10044

Cheers,
Jonas

Reza 02/28/06 05:11:36 AM EST

Thank you for your very intresting article.
yes JSF ,Ajax and XUL are lost part of RIA and you find them greatly in your article.
i am waiting for next part.

Thank you again.
Reza

Jonas Jacobi 12/06/05 01:38:38 AM EST

Hi newbie,

The easiest way of getting up to speed with XUL and XBL is to visit XUL Planet - http://www.xulplanet.com/

XUL Planet has proved to be a very good source for us when working on our book ([URL]Pro JSF: Building Rich Internet Components[/URL]) and its samples.
Another good source is, of course, Mozilla's web site - http://www.mozilla.org/projects/xul/

Cheers,
Jonas

@CloudExpo Stories
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...
Blockchain is a shared, secure record of exchange that establishes trust, accountability and transparency across business networks. Supported by the Linux Foundation's open source, open-standards based Hyperledger Project, Blockchain has the potential to improve regulatory compliance, reduce cost as well as advance trade. Are you curious about how Blockchain is built for business? In her session at 21st Cloud Expo, René Bostic, Technical VP of the IBM Cloud Unit in North America, will discuss th...
While some vendors scramble to create and sell you a fancy solution for monitoring your spanking new Amazon Lambdas, hear how you can do it on the cheap using just built-in Java APIs yourself. By exploiting a little-known fact that Lambdas aren’t exactly single-threaded, you can effectively identify hot spots in your serverless code. In his session at @DevOpsSummit at 21st Cloud Expo, Dave Martin, Product owner at CA Technologies, will give a live demonstration and code walkthrough, showing how ...
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...
Cloud adoption is often driven by a desire to increase efficiency, boost agility and save money. All too often, however, the reality involves unpredictable cost spikes and lack of oversight due to resource limitations. In his session at 20th Cloud Expo, Joe Kinsella, CTO and Founder of CloudHealth Technologies, tackled the question: “How do you build a fully optimized cloud?” He will examine: Why TCO is critical to achieving cloud success – and why attendees should be thinking holistically ab...
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...
As more and more companies are making the shift from on-premises to public cloud, the standard approach to DevOps is evolving. From encryption, compliance and regulations like GDPR, security in the cloud has become a hot topic. Many DevOps-focused companies have hired dedicated staff to fulfill these requirements, often creating further siloes, complexity and cost. This session aims to highlight existing DevOps cultural approaches, tooling and how security can be wrapped in every facet of the bu...
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...
yperConvergence came to market with the objective of being simple, flexible and to help drive down operating expenses. It reduced the footprint by bundling the compute/storage/network into one box. This brought a new set of challenges as the HyperConverged vendors are very focused on their own proprietary building blocks. If you want to scale in a certain way, let’s say you identified a need for more storage and want to add a device that is not sold by the HyperConverged vendor, forget about it....
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...
As DevOps methodologies expand their reach across the enterprise, organizations face the daunting challenge of adapting related cloud strategies to ensure optimal alignment, from managing complexity to ensuring proper governance. How can culture, automation, legacy apps and even budget be reexamined to enable this ongoing shift within the modern software factory?
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...
With Cloud Foundry you can easily deploy and use apps utilizing websocket technology, but not everybody realizes that scaling them out is not that trivial. In his session at 21st Cloud Expo, Roman Swoszowski, CTO and VP, Cloud Foundry Services, at Grape Up, will show you an example of how to deal with this issue. He will demonstrate a cloud-native Spring Boot app running in Cloud Foundry and communicating with clients over websocket protocol that can be easily scaled horizontally and coordinate...
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...
@DevOpsSummit at Cloud Expo taking place Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center, Santa Clara, CA, is co-located with the 21st International Cloud Expo 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 ...
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...
DevOps at Cloud Expo, 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 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 to w...
SYS-CON Events announced today that Secure Channels, a cybersecurity firm, 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. Secure Channels, Inc. offers several products and solutions to its many clients, helping them protect critical data from being compromised and access to computer networks from the unauthorized. The company develops comprehensive data encryption security strategie...
Recently, WebRTC has a lot of eyes from market. The use cases of WebRTC are expanding - video chat, online education, online health care etc. Not only for human-to-human communication, but also IoT use cases such as machine to human use cases can be seen recently. One of the typical use-case is remote camera monitoring. With WebRTC, people can have interoperability and flexibility for deploying monitoring service. However, the benefit of WebRTC for IoT is not only its convenience and interopera...