Welcome!

AJAX & REA Authors: John Funnell, Bob Little, Kevin Hoffman, Maureen O'Gara, Onkar Singh

Related Topics: Open Source

Open Source: Article

AjaxWord: An Open Source Web Word Processor

AjaxWord: An Open Source Web Word Processor
By Coach Wei
Article Rating:
March 18, 2007 02:00 PM EDT
Reads:
 28,808

Initializing the Application User Interface and Asynchronous Communications
After all script files have been downloaded, AjaxWord initializes its user interface by loading the following HTML document (ajaxword.html). It, in turn, loads two additional HTML documents, nwWordIEMenubar.html and nwWordBg.html. The entire user interface is defined by these two HTML documents. The former defines the menu bar and toolbar. The latter defines the application's MDI environment. Listing 5 is the HTML document (ajaxword.html) responsible for initializing the application user interface

After ajaxword.html finishes loading, the "onLoad" event will cause the "initDoc" method defined in this HTML document to be executed, which in turn loads nwWordIEMenubar.html and nwWordBg.html into separate container panels.

As you might have noticed from Listing 15.5, ajaxword.html also defines a few hidden "Iframe" objects. These Iframe objects are used for asynchronously communicating with the server. XML HttpRequest is not the only way to do asynchronous communication in the AJAX model. In some cases, it's actually more convenient to use the hidden "Iframe" instead. When AjaxWord was written, "Iframe" was the only option.

Further, ajaxword.html contains a few "form" elements that all fields are hidden fields. These forms are actually used to do asynchronous communications as well. When the AjaxWord client needs to send a message to the server in the background, the message is actually inserted into a hidden form field and posted to the server side as a "multipart/form-data" URL request.

Connecting the UI to Application Logic
After the nwWordIEMenubar.html file is loaded, nwWord.js is loaded in the background (actually it was already loaded by the initial loading progress screen and then cached by the browser) and the "initWord" method is called at the "onLoad" event:

<body scroll="no" class="toolbarBody"
      onselectstart="event.cancelBubble=true;return false;"
      onload="initWord()">

The "initWord()" method defined in "nwWord.js" initializes the AjaxWord client logic. It instantiates the menu bar and toolbar JavaScript controllers and associates them with the actual view objects. It also instantiates a "nwWordGUIActionListener" that listens to the menu bar and toolbar events. This is done by calling the global event manager and registering this listener object with "MenuClick," "BUTTONCLICK," "FOCUS," and "BLUR" events. "initWord" also registers the "onWordExit" method to handle the browser window close event - a subject that will be explained later in this chapter.

Event Processing
"nwWordGUIActionListener.js" defines the event-handling code for this application. After it's instantiated and registered as the event handler for all menu bar and toolbar events, the event manager will route these events to this object.

This object contains two methods: onMenuClick and onButtonClick. These two methods are actually implemented by the same JavaScript function called "menuClicked." For each event, this JavaScript function will examine the "command" parameter and the source object, and route the event to the appropriate destination for processing

Handling the Application's Exit
Unlike classic Web application developers, AJAX application developers have to pay special attention to the client-side "exit" event (say the user clicks the "close" button in the browser window). The reason is that AJAX applications typically hold state information on the client side. If the browser window is closed without proper handling, the client-side state will be lost and cause problems for the application.

AjaxWord is a good example. When the user is editing a document, if he somehow clicks the "close" button on the browser window by mistake, the browser window will be closed and his document lost.

A general way to handle this situation is to register an event handler for the "onbeforeunload" event of the "window" object. The event handler can do processing before the browser window is closed.

The code below is the "onbeforeunload" event handler for AjaxWord. It loops though all the currently opened editing windows (stored in the "winArray" variable). For each visible editing window, it tries to save the content (the logic defined in the "onClose()" method for the "window" object). In the end, the event handler asks the user whether he or she really wants to exit from AjaxWord. If the user chooses "cancel" from the dialog, the event will be cancelled. If the user chooses "ok" from the confirmation dialog, the browser window will be closed and the application terminated on the client side.

The event handler code is:

function _onWordExit()
{
   for(var i=0;i<winArray.length;i++)
   {
     var wi=winArray[i];
     if(wi.isVisible())
     {
       if(wi.onClose()==false)
       {
         if(event)
         {
           event.returnValue="Exit from AjaxWord?";
           event.cancelBubble=true;
         }
         return false;
       }
     }
   }
   if(event) event.returnValue="Exit from AjaxWord?";
   return true;
}

AjaxWord Server Logic
AjaxWord server code is actually fairly simple, straightforward Java code. It does user registration, verification, and loads and saves files. Such tasks are trivial to Java developers and so we're not going to elaborate on them.

Summary
AjaxWord is a Web-based word processor that aims to mimic Microsoft Word. It closely resembles the look-and-feel of Microsoft Word with a rich graphical user interface, partial screen update, and asynchronous server communications. Its Web-based nature lets users securely store user documents on the server and so gives users the flexibility to use the application from anywhere.

Writing complex applications like AjaxWord requires careful design - otherwise there will be significant development and maintenance challenges. AjaxWord uses a central controller to manage and dispatch requests on the server side. On the client side, it separates all rich UI widget-related code into a generic AJAX toolkit and uses an "event dispatching" mechanism to process client events.

AJAX applications tend to keep state information on the client side. This requires developers to pay attention to state consistency. For example, it's recommended that they write code to handle application state when the user closes the browser window.

AjaxWord is open source. It's available as a free service at www.ajaxword.com. Developers can also download the entire code from this Web site.

Published March 18, 2007 – Reads 28,808
Copyright © 2007 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.

More Stories By Coach Wei

Coach Wei is the Founder and Chairman of Nexaweb (www.nexaweb.com), developers of the leading software platform for building and deploying Web 2.0 and AJAX applications. Previously, he played a key role at EMC Corporation in the development of a new generation of storage network management software. Wei has his master's degree from MIT, holds several patents, is the author of several technology publications including JDJ, Web 2.0 Journal, and AJAXWorld Magazine, and is an industry advocate for the proliferation of open standards.

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
bijalvp 10/07/09 03:08:00 AM EDT

Great post. Thank you for sharing about what seems to be a great platform. Your website www.ajaxword.com is not accessible however so cannot get to the source code. Can you kindly tell me how to access this information and/or website?

Thanks again.

Bijal
arun_in_1980 11/01/08 05:09:44 AM EDT

Hi
i have gone through your site http://ajax.sys-con.com/node/345840 and found that ajaxword is a very good application.
as stated that www.ajaxword.com has all the necessary information and source code for this application, this site (www.ajaxword.com) is not working.

Please look into the matter and please give me some other link or other source to get source code of this application.

Given the listings of code at http://ajax.sys-con.com/node/345840 are not appropriate as they only give the technical overview of the application.

So please provide me the full source code so that i can take advantage of it.

Regards
arun_in_1980@yahoomail.com