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

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:


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 [ which is unavailable]. The code is inspired by the powerful library. You can even use all 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 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







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.