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. 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:
<script type="text/javascript" src="../javascripts/prototype.js"> </script>
<script type="text/javascript" src="../javascripts/window.js"> </script>
<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:
<a id="done" name="done" href="BLOCKED SCRIPTif(PageIsDirty())
{OpenSaveDiscardCancelDialog('save');} else { window.close(); }">
Done</a>
I created a new page saveDiscardCancel.htm which contains the OpenSaveDiscardCancelDialog function and the HTML elements to be included in the dialog:
<html>
<script type="text/javascript">
function OpenSaveDiscardCancelDialog(saveElementId){
Dialog.info($('sdcDialog').innerHTML, {className:"alphacube",destroyOnClose:true,width:300,height:120});
Dialog.SaveElementId = saveElementId;
}
function sdcSaveButtonClick(){
Dialog.closeInfo();
$(Dialog.SaveElementId).click();
}
</script>
<body>
<div id="sdcDialog" style="display:none">
<p>
The information on this page has been changed.
</p>
<p>
Please choose one of the following:
</p>
<p>
<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();">
</p>
</div>
</body>
</html>
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.
