Driving Technology Directions on Cloud Computing Platform

Ezhil Arasan Babaraj

Subscribe to Ezhil Arasan Babaraj: eMailAlertsEmail Alerts
Get Ezhil Arasan Babaraj: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn

Related Topics: RIA Developer's Journal, AJAX World RIA Conference

RIA & Ajax: Article

Developing Intelligent Web Applications With AJAX (Part 2)

A peek into modern technologies for browser-based applications

Now, the code below shows how to derive the class ArithmeticCalculator from the base class Calculator. "Line 1" results in borrowing all properties of the Calculator, while "Line 2" restores the value of the prototype, constructor back to ArithmeticCalculator:

function ArithmeticCalculator() { };
with (ArithmeticCalculator) {
   ArithmeticCalculator .prototype = new Calculator(); //Line 1
   prototype.constructor = ArithmeticCalculator; //Line 2

Even if the example above looks like a composition rather than inheritance, the JavaScript engine knows about the prototype chain. In particular, the instanceof operator will work correctly with both the base and derived classes. Assuming you create a new instance of a class ArithmeticCalculator:

var c = new ArithmeticCalculator;

expressions c instanceof Calculator and c instanceof ArithmeticCalculator will both evaluate to true.

Notice, that the constructor of the base class in the example above is called at the point when the ArithmeticCalculator prototype is initialized and not when an instance of the derived class is created. This could have unwanted side effects and you should consider creating a separate function for initialization purposes. As the constructor is not a member function, it can't be called through this reference directly. We will need to create a "Calculator" member function to be able to call super:

function Calculator(ops) { ...};
with (Calculator) {
   prototype.Calculator = Calculator;

Now we can write an inherited class that explicitly calls the constructor in the base class:

function ArithmeticCalculator(ops) {
with (ArithmeticCalculator) {
   ArithmeticCalculator .prototype = new Calculator;
   prototype.constructor = ArithmeticCalculator;

   prototype.ArithmeticCalculator = ArithmeticCalculator;

JavaScript is a non-typed language where everything is an object. Accordingly, if there are two classes A and B, both defining method foo(), JavaScript will allow polymorphic invocation of foo() across instances of A and B even if there is no hierarchical relation (albeit implementational) whatsoever. From that perspective, JavaScript provides a wider polymorphism then Java. The flexibility, as usual, comes at a price. In this case, it is a price of delegating the type checking job to application code. Specifically, if there is a need to check that a reference indeed points to a desired base class, it can be done with the instanceof operator.

On the other hand, JavaScript doesn't check parameters in the function calls, which prevents from defining polymorphic functions with the same name and different parameters (and let the compiler choose the right signature). Instead, JavaScript provides an argument object - Java 5 style - within a function scope that allows you to implement a different behavior depending on the parameter's type and quantity.

Listing 1 implements a calculator that calculates expressions in a reverse Polish notation. It illustrates the main techniques described in the articles and also shows the usage of the unique JavaScript features, such as accessing object properties as an array element for a dynamic function call.

To make Listing 1 work we also need to provide a piece of code that instantiates the calculator objects and calls the evaluate method:

var e = new ArithmeticCalcuator([2,2,5,"add","mul"]);

AJAX Component Authoring
All AJAX component authoring solutions known today can be logically divided into two groups. The first group specifically targets the seamless integration with the HTML-based UI definition. The second group drops HTML as a UI definition language in favor of certain XML. In this article we illustrate one approach from the first group, an analog to JSP tags, albeit in the browser. These browser-specific component authoring extensions are called element behaviors in the IE case or extensible bindings in the case of the latest versions of Firefox, Mozilla, and Netscape 8.

Custom Tag Dialects
Internet Explorer, starting with version 5.5, enables the JavaScript authoring of custom, client-side HTML elements. Unlike JSP tags, these objects are not preprocessed into HTML on the server side. Rather, they're legitimate extensions of a standard HTML object model and everything, including control construction, happens dynamically on the client. Similarly, Gecko-engine based browsers can dynamically decorate any existing HTML element with a reusable functionality.

It's possible, therefore, to build a library of rich UI components with methods, events, and attributes that will have HTML syntax. Such components can be freely mixed with standard HTML. Internally, these components will communicate with application servers, AJAX style. In other words, it's possible (and relatively simple) to build your own AJAX object model.

The IE flavor of this approach is called HTC or HTML components; the Gecko version is called XBL - eXtensible Bindings Language. For the purposes of this article, we'll focus on IE.

Enter the HTML Components - HTC
HTC or HTML components are also called behaviors. In turn they are divided into attached behaviors that decorate any existing HTML element with a set of properties, events, and methods, and element behaviors that look like an extended set of custom HTML tags to the hosting page. Together, element and attached behaviors provide a simple solution for authoring both components and applications. Here we'll illustrate the most comprehensive case, element behaviors.

Data-Bound Checkbox Control
As an illustration of element behavior, we'll construct a custom data-bound checkbox. The rationale behind building such a control is that a standard HTML checkbox has several noticeable shortcomings:

  • It requires application code to map the value of the "checked" attribute into business domain values, such as "Y[es]"/"N[o]", "M[ale]"/"F[emale]", etc. The HTML checkbox uses "checked" contrary to many other HTML controls using "value".
  • It requires application code to maintain the state of the control (modified versus not modified). This is actually a common problem with all HTML controls.
  • It requires application code to create an associated label that should accept click and change the state of the checkbox accordingly.
  • The standard HTML checkbox doesn't support "validation" events to allow the canceling of a GUI action under certain application conditions.
To settle on a syntax, let's say that a sample usage of the control we are building could look the following way:

<checkbox id="cbx_1" value="N" labelonleft="true"
label="Show Details:" onValue="Y" offValue="N"/>

In addition, our control will support the cancelable event onItemChanging and the notification event onItemChanged.

More Stories By Victor Rasputnis

Dr. Victor Rasputnis is a Managing Principal of Farata Systems. He's responsible for providing architectural design, implementation management and mentoring to companies migrating to XML Internet technologies. He holds a PhD in computer science from the Moscow Institute of Robotics. You can reach him at [email protected]

More Stories By Anatole Tartakovsky

Anatole Tartakovsky is a Managing Principal of Farata Systems. He's responsible for creation of frameworks and reusable components. Anatole authored number of books and articles on AJAX, XML, Internet and client-server technologies. He holds an MS in mathematics. You can reach him at [email protected]

More Stories By Igor Nys

Igor Nys is a Director of Technology Solutions at EPAM Systems, Inc, a company combining IT consulting expertise with advanced onshore-offshore software development practices. Igor has been working on many different computer platforms and languages including Java, C++, PowerBuilder, Lisp, Assembler since the mid 80's. Igor is currently managing a number of large distributed projects between US and Europe. In addition Igor is the author of the award-winning freeware system-management tools, and he was closely involved in the development of XMLSP technology - one of the AJAX pioneers.

Comments (2) 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
David 11/29/05 01:24:43 PM EST

This looks like the true bleeding edge, once again creating more headaches in the write many, test many world that web services were supposed to have resolved.

What good is AJAX of this sort when there are differences between just two browsers? Do we really need more technology that is non-standard to the point where we'll need lots of adaptations just to handle the various types of browsers people will use? No doubt this will also mean variations will be needed even among differing versions of the same browser class.

Without a standard set of markup and scripting elements, AJAX is just going to make more bad web sites that work with only one browser but fail with others.

Edwin 11/25/05 03:06:50 PM EST

Software AG sells the Ajax based RIA developement environment CAI COmposite Application Integrator. This product is on the market for several years now. So saying there are no RAD Ajax tools available...