Using modern JavaScript libraries to create a better user experience in fcClient

September 26, 2007

Over the last couple of years, a number of very useful JavaScript libraries and frameworks have been introduced that make it tremendously easier to build rich web applications. A few of the more popular ones:

• Prototype
• Script.aculo.us
• MooTools

These frameworks allow developers to easily write very rich, cross-browser web applications.

I’ve heard about these libraries for some time, and have experienced many great web apps that use these libraries.

So I asked myself whether I could use these modern libraries with fcClient. The answer is a resounding Yes!

A simple example: Modify the Save/Discard/Cancel page in order to improve the user experience.

How it used to work

If a page was "dirty", meaning that data on that page had changed, and the user attempts to dismiss the page (such as by clicking the Done button), then a Save/Discard/Cancel window is posted, which is a new IE window.

Here’s what it looks like before:

The plan

I wanted to eliminate the additional IE window, thus reducing window clutter, and removing the physical disconnect between the dialog and the main window.

The library

I did some research and chose the Prototype Window class. This Javascript class allows you to create windows or dialogs in a HTML page.This class is based on Prototype [prototype.conio.net which is unavailable]. The code is inspired by the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows.

The execution

On the main page, I include the prototype and window libraries, as well as the stylesheets:

link href="../stylesheets/themes/default.css" rel="stylesheet" type="text/css"/
link href="../stylesheets/themes/alphacube.css" rel="stylesheet" type="text/css"/

The click action for the Done button simply calls on the the OpenSaveDiscardCancelDialog function, if the page is dirty:

{OpenSaveDiscardCancelDialog('save');} else { window.close(); }";
Done;

I created a new page saveDiscardCancel.htm which contains the OpenSaveDiscardCancelDialog function and the HTML elements to be included in the dialog:

  The information on this page has been changed.
  
  

  Please choose one of the following:
  
  

  input type="button" id="sdc_save"    value="Save"    onclick="sdcSaveButtonClick();" 
  input type="button" id="sdc_discard" value="Discard" onclick="window.close();"
  input type="button" id="sdc_cancel"  value="Cancel"  onclick="Dialog.closeInfo();"
  

;

The result

Notice that we've used a "lightbox" presentation, where the main page is dimmed, and the new content is front, center, and clear - just where we want it. And notice that the Save/Discard/Cancel is not a separate page.

 

 

A similar example : an elapsed time dialog

Before:

 

 

After: 

 

Summary

It doesn't matter whether your web application is ASP.NET, Java, Ruby on Rails, or Classic ASP - these powerful Javascript libraries can make your developers more productive and make your user experience much richer.