Kurt Cagle

Subscribe to Kurt Cagle: eMailAlertsEmail Alerts
Get Kurt Cagle via: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn

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

RIA & Ajax: Article

Real-World AJAX Book Preview: Playing with User Interfaces

Real-World AJAX Book Preview: Playing with User Interfaces

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs for the special pre-order price, click here for more information. Aimed at everyone from enterprise developers to self-taught scripters, Real-World AJAX: Secrets of the Masters is the perfect book for anyone who wants to start developing AJAX applications.

Playing with User Interfaces
For a long time user interface development has gotten something of a bum rap with the programming community, in great part because such programming usually doesn't involve high-performance computing, complex mathematical algorithms, or the manipulation of large sets of data. Instead, it deals with what is often called the eye candy of programming - the visual interfaces that connect the heavy-duty processes at the back end with the user.

Admittedly, this attitude usually results in user interfaces that are clunky, overly complex, and visually confusing. Throw into this mix the fact that the developers are "Web designers" who deal primarily with HTML and the derision usually goes through the roof. It's hard to be a self-respecting UI developer, especially given the fact that it is actually fairly difficult to do it well. JavaScript is easy - unless it's being used to glue together several dozen different objects with dozens of separate methods, properties, and handled events, dealing with distributed, asynchronous programming, and the developer has to worry about the constraints of minimizing code being sent over the wire.

For this reason, it's best to put preconceived notions about how to program Web pages aside and take advantage of contemporary programming techniques and methodologies to do your job right. Embrace OOP and more, and learn how to move beyond OOP into the abstractions made possible by XML. The examples given in this section will show how to build increasingly rich "components" that will lead to the introduction of XMLHttpRequest, XSLT, and related XML technologies.

Creating a Clock
One of the keys to most JavaScript/AJAX components in use today is the effective use of animation. Indeed, the principles of animation nicely show off a number of the different objects that you'll likely work with.

As a fairly simple example, consider a simple JavaScript clock, then a couple of not so simple clocks. The simplest clock updates the contents of a text span at one-second intervals, using the setInterval() method and is illustrated as follows:

Listing 2.1 Simple Clock 1

<html xmlns="http://www.w3.org/1999/xhtml">
       <title>Clock Experiment 1</title>
       <script type="text/JavaScript"><![CDATA[
       function startClock(id){
    var clockNode = document.getElementById(id);
    var token = window.setInterval(function(){
       clockNode.innerHTML = (new Date());
    <body onload="startClock(‘clock')">
<p>The time is <span id="clock"></span></p>

A screenshot of this page is shown in Figure 2.3.

This illustrates several useful concepts that have wider potential use. First, the clock is started from the onload() event of the body element that will only be invoked once everything has been instantiated in the body. This makes it an ideal place to put initialization functions.

The document.getElementById() method is one of the most frequently used DOM commands, retrieving an element by a specific ID. Internet Explorer supports this method as well, but also uses the non-standard document.all() method to do the same thing.

The startClock function, defined in Listing 2.1, makes use of closure to pass both the token from setInterval and the clockNode variable into a new anonymous function invoked by the setInterval() method, which gets fired once every 1,000 milliseconds (one second). This function in turn sets the innerHTML property of the clockNode to the string conversion of a new Date() object.

innerHTML is another extraordinarily useful property. When used as an RValue (it appears on the right side of an assignment), it converts the DOM children (elements, attributes, and text nodes) into text representations in a process called serialization. On the other hand, if the innerHTML property is used as an LValue, it converts a text representation of an XHTML resource into the corresponding underlying DOM text nodes and elements. This reverse process is called parsing. Serialization and parsing are actually done so often that they are core services in most systems, and will be discussed in more detail shortly.

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs, click here to order.

More Stories By Kurt Cagle

Kurt Cagle is a developer and author, with nearly 20 books to his name and several dozen articles. He writes about Web technologies, open source, Java, and .NET programming issues. He has also worked with Microsoft and others to develop white papers on these technologies. He is the owner of Cagle Communications and a co-author of Real-World AJAX: Secrets of the Masters (SYS-CON books, 2006).

Comments (0)

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.