Flex, Java/JavaFX, Silverlight, AJAX & RIA Frameworks

RIA Developer's Journal

Subscribe to RIA Developer's Journal: eMailAlertsEmail Alerts newslettersWeekly Newsletters
Get RIA Developer's Journal: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


RIA & Ajax Authors: Javier Paniza, Pat Romanski, RealWire News Distribution

Related Topics: RIA Developer's Journal, ColdFusion on Ulitzer

RIA & Ajax: Article

AJAX: Making the HTML User Experience Almost As Pleasant as Flash

The main advantage of Flash, in spite of its vector animations, is that you never reload the page

AJAX can make the HTML user experience almost as pleasant as Flash. The main advantage of Flash, in spite of its vector animations, is that you never reload the page. Flash Remoting allows you to interface with the server in the background and AJAX does exactly the same for HTML pages.

In my previous article, "What's AJAX?" (CFDJ, Vol. 7, issue 9), I covered the basics of AJAX - everything from setting it up, all the way to having it running in an MVC design with basic functionality. Thus far, we have only sent and received simple objects, which is good way to understand the principle, but far from reality.

CFAJAX allows you to send complex objects, but for some reason it's extremely difficult to receive and interpret them on the ColdFusion side. For this reason I came up with a much simpler and straightforward way: WDDX serialization.

This concept may be familiar to some of you. WDDX stands for Web Development Data Exchange and Allaire created it in 2001 to solve problems in exchanging data between Web applications. In a nutshell, WDDX is a technology that facilitates exchanging complex objects over XML. WDXX supports Booleans, numbers, strings, date-time, arrays, structures, and record sets. Modules for WDDX support exist in various languages, including but not limited to ColdFusion, Perl, Java, JavaScript, ASP, .NET, and PHP.

A JavaScript WDDX component is included in the cfide/scripts folder of every ColdFusion installation. You can locate it at /cfide/scripts/wddx.js.

Complex Object Example
Now I'll show you how to use it. Listing 1 shows a simple example in which I created a complex object in JavaScript - a structure that contains an array of structures - and serialized it before sending it to ColdFusion. All you have to do is initialize a new WDDX serializer and serialize the complex object. You can see in Listing 1 how simple it is; you don't need to know the structure of the packet.

Notice the line "DWREngine._execute(_cfscriptLocation, null, ' wddxTest', oWddx.serialize(_o), testResult);". Here the first argument is the location of the ColdFusion model; the wddxTest is the function to be called; the argument is being serialized by our JavaScript component; and the testResult is the callback function.

Listing 2 shows how simple it is to receive the call. The function takes only one argument: the WDDX packet. This packet is not an object; it's actually an XML string. Listing 2 returns it intact just so you see exactly what's happening behind the scenes, and the callback function alerts the return packet. If you run my example, you'll see that the XML string is being alerted to the screen by the testResult function.

Trick 1
Here is a very important cross-browser note for you. Pay special attention to the URLDecode function in the ColdFusion listener (see Listing 2). I found that if you don't use it, the code will work just fine in IE, Firefox, and Netscape, but it will break in Safari for Mac users. I learned this the hard way, so here I am sharing the trick. For some reason, Safari URL-Encodes the XML packet before sending it and ColdFusion cannot decode it, making the argument impossible to de-serialize. Ideally, you'll test your code in as many environments as possible before you go live, so remember this and it may save you some debugging time.

Login Example
I'll now demonstrate a login example and some useful debugging techniques. Sometimes you'll find that the user is navigating your site and he is allowed to log in by using a form that is always available, either in the top or side navigation. Sometimes the user just posts a form, for example, a search products form, and then decides to log in. This may or may not be a problem, but if you allow him to post just the login form, you will lose all other existing form variables. One solution, you may be thinking now, is to loop through the form collection in the login form and create hidden fields; it may work in some cases, however, in other cases such as add-to-cart or checkout, resubmitting the form may cause duplicate process pages. Using cflocate after each process page is a good practice, but I am digressing and won't get into that.

How about adding some of the concepts we learned in this article? How nice would it be to let the user know if her username or password does not match any existing one without refreshing the page? Or even more! How about logging the user in, hiding the login form, and adding her login status without refreshing the page, and thus, without resubmitting, redirecting, or even losing focus of the current item she may be seeing.

This time we'll send the user and password to the ColdFusion model and expect an array for the response. The array will have a "success" status: in case of error, a message; and in case of success, the name of the user. We could also pass a structure, but you'll find that if you pass a structure back, JavaScript will interpret it as an array or keys and values. Then you'll have to loop through the array and assign the values to the keys. An alternative could be using WDDX, but this time to encode the packet before sending it back to JavaScript and use the WDDX component in JavaScript to deserialize it.

Sometimes it's not that easy to know exactly how the structure that ColdFusion sent is being interpreted by JavaScript. In these cases, I always refer to the same debugging method: I loop over the entire scope or collection to find what is being sent back. Listing 3 shows a simple one-line loop that will do the trick. Try to return a structure and see for yourself the way it's being passed back.

Let us continue with our login example. The ColdFusion model will return an array of two elements: array[1] will be the success variable (true or false), and array[2] will be the error message in case of an error, or the name of the user in case of success. For the sake of this article, the model just checks for a static user and password; however, this is exactly where your login logic should be. The trick is to update the session in the model in the background and just send back to JavaScript what it needs for the presentation layer. For instance, you could add the User-ID for the session, and send back the name and last name so it can be displayed in the left navigation.

After the user successfully logged in, we will make the login form disappear and add a simple message that reads "logged in as %name%". We will do this by using the JavaScript innerHTML function. The innerHTML function lets you modify the source code on the fly. Our form was placed inside a DIV layer that is used as a holder and, after the login, we will change the code of the holder to display the new status. When using this method, make sure that the navigation does not have to change upon login, or, if it does, you may modify the navigation too by using innerHTML as well. If you code in an object-oriented fashion, your navigation would be generated by an object you may call in the login function and send the generated HTML back to the JavaScript controller, which will replace the existing one by using innerHTML functions.

Content Example
Another great advantage of AJAX is that it improves load time. For example, imagine a typical site: it has a design frame and content in the center area. Every click has to reload the entire frame to update the content. Ideally, you wouldn't have to transfer the code for the frame and download any of its graphic components again. Caching certainly helps, but AJAX can make it even faster. Listings 4 and 5 show a simple example in which the content is being generated in the ColdFusion model and passed back to the JavaScript controller. For simplicity, in this example I actually added the content directly in the Model.cfm page. In real-life examples, the ideal way would be to actually include a view template with a cfinclude inside the cfsavecontent tag; by doing that your views will not depend on the AJAX component. Perhaps you won't see a huge speed difference just by running this example; this is due to the fact it doesn't have any design elements. As an experiment, try to add a full design frame to my example with an average page weight of 100k or 200k in graphics and compare load times.

More Stories By Rob Gonda

Rob Gonda is an industry visionary and thought leader, speaks on emerging technologies conferences nationwide, and combines unique approaches to technology and marketing strategies. As a head of Creative Technologies at Sapient, Gonda is an interactive technical “guru,” who provides the knowledge and experience required to run high-level, multi-channel interactive campaigns that reach millions of consumers. Gonda has more than 15 years of experience in web development and 360 marketing campaigns for clients such as Coca-Cola, Adobe, Guinness, Toyota, Taco Bell, NBC, and others. His areas of specialty include emerging technologies, marketing strategy, social media, digital out-of-home, mobile, behavioral targeting, and multi-channel synergy. Before joining the strategy and technology leadership teams at Sapient, Gonda was co-founder and chief technical officer at iChameleon, a Hollywood FL-based agency renown for its emerging experiences and creative technology. In addition to his agency work, Gonda the chair for the digital media council at the Advertising Research Foundation, is the former editor-in-chief of the AJAX Developer’s Journal, co-author of “Real-World AJAX: Secrets of the Masters”, a passionate blogger who authors www.takemetoyourleader.com, and contributors to various publications such as Ad Age and Ad Week. He is a frequent figure on the speaker circuit, having presented at conferences from the senate’s CIO emerging technology to SXSW and Omma. Rob’s mission is to develop forward-thinking expertise that will ensure clients are always on par with rapidly changing technologies and maintain its ethos of evolving. You can reach him at rob[at]robgonda[dot]com and read his blog is at http://takemetoyourleader.com

Comments (17) 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
Dougal Mathers 02/13/08 12:19:23 PM EST

I cannot seem to get the table example to work and am wondering if you could help explain a bit more around it as with the other examples?

Great article to get people started. Many thanks,Dougal.

Thierry Nivelet 04/14/06 08:22:21 AM EDT

You may be interested in our catalog multi-criteria search engine
http://www.intuicat.com/IntuiCatAjaxDemo.asp

Interesting enough is that all presentation code lies on server, client merely executes change orders sent by server.

SYS-CON Belgium News Desk 04/11/06 11:15:58 AM EDT

AJAX can make the HTML user experience almost as pleasant as Flash. The main advantage of Flash, in spite of its vector animations, is that you never reload the page. Flash Remoting allows you to interface with the server in the background and AJAX does exactly the same for HTML pages.

SYS-CON India News Desk 04/11/06 10:07:45 AM EDT

AJAX can make the HTML user experience almost as pleasant as Flash. The main advantage of Flash, in spite of its vector animations, is that you never reload the page. Flash Remoting allows you to interface with the server in the background and AJAX does exactly the same for HTML pages.

Rob Gonda 12/09/05 12:34:11 AM EST

by the way, check out my latest alternative to cfajax. I developed an ajax CFC framework.

check it out at http://www.robgonda.com/blog/projects/ajaxcfc/

Jim @ The ZK Project 11/27/05 11:28:24 PM EST

>> First of all, I really disagree on rising cost of developing AJAX applications.

Adding an AJAX feature means an extra task, no matter how simple it is. It gets worse when we add more codes to the client. It means you might have to replicate business logic to clients. It also means you have to maintain two copies of codes.

>> It definitely helps with dhtml and look and feel, but it does not automate AJAX at all, it makes it actually
>> more difficult. It seems like that in order to make it work you need to add your Java server-side code
>> within your view. That will make maintenance really tedious.

Whether to embed codes in the view is up to developers, not the framework itself. It is designed to speed up prototyping and customization. If MVC or other design patterns are required, developers need only to provide a map between components to the real class they want.

On the other hand, traditional AJAX apps required developers to embed JavaScript into HTML pages.

AJAX has different meanings to different people. For us, it means a technology to enable a rich user interface that communicates with the backend server. What ZK does is to abstract the interaction and communication to Java level and make to the server side, not JavaScript or decorated HTML, not at the client that you are used to.

Rob 11/26/05 05:28:05 PM EST

BTW, for more info please visit my blog at http://www.robgonda.com/blog

Rob 11/25/05 11:36:26 AM EST

Jim,

First of all, I really disagree on rising cost of developing AJAX applications. Au contraire, they are going down as more and more developers get into it.

Although I usually do not check seeding or spam, I decided to check the ZK project.

It definitely helps with dhtml and look and feel, but it does not automate AJAX at all, it makes it actually more difficult. It seems like that in order to make it work you need to add your Java server-side code within your view. That will make maintenance really tedious.

Jim @ The ZK Project 11/25/05 03:42:40 AM EST

As AJAX gives Web applications a fresh look, the rising cost of developing AJAX applications is challenging its way to success.

That is the reason we founded the ZK project ( http://zk1.sourceforge.net ): make AJAX transparent to app developers.

ZK is an Open Source and Live Demo at http://www.potix.com/zkdemo/userguide.

ZK has the following characteristics.
* XUL-based Components.
* Event Driven Model.
* Server-Centric Processing.
* Script in Java and EL Expressions.

Rob 11/22/05 11:48:23 PM EST

Kevin, good call. I usually do, but with the rush of getting the article out it slipped... Thanks for pointing it out.

Rob 11/22/05 10:25:24 PM EST

By the way, can someone please fix this feedback tool?! I won't take 9 out of 10 posts I submit.

Rob 11/22/05 10:24:30 PM EST

Kevin, good call. I usually do, but with the rush of getting the article out it slipped.
Thanks for pointing it out.

Kevin Penny 11/22/05 06:49:12 PM EST

Excellent - you should scope your cfc vars however - makes it alittle easier to understand what vars come from where (arguments)

MissedOut? 11/17/05 07:40:22 AM EST

I've still yet to build my first AJAX request. Does that mean I'm too late to the party?

newbie 11/17/05 07:26:34 AM EST

So is AJAX a download or is it a technique? Pafrdon my ignorance...only now I am seeing AJAX, AJAX, AJAX everywhere but I don't really know what it *is* yet

newbie 11/17/05 07:26:32 AM EST

So is AJAX a download or is it a technique? Pafrdon my ignorance...only now I am seeing AJAX, AJAX, AJAX everywhere but I don't really know what it *is* yet

ByeBye HTML 11/17/05 06:43:27 AM EST

>> AJAX is extremely fast, secure, and allows
>> for advanced functionality that
>> synchronous HTML does not.

No wonder this is the hottest technology on earth right now. HTML is Dead!