Using modern JavaScript libraries to create a better user experience in fcClient
Gary Sherman
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:

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:

subcase_sdc

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:

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

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

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.

 subcase_sdc_lightbox

 

A similar example : an elapsed time dialog

Before:

subcase_duration  

 

After: 

subcase_duration_lightbox 

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.

One Comment to "Using modern JavaScript libraries to create a better user experience in fcClient"
  1. gsherman says:

    Gary – thanks for reminding us about jQuery.
    I forgot about that one.
    I’ve heard good things about that library, its becoming pretty popular as well.
    Curious – are you using it within fcClient?

Leave a Comment

International: +1 (512) 610-5400
Toll Free: 1 (800) 684-2055