When speaking about RIA one of many nice usabilities is that to be able to give feedback to the user when it comes to critical actions like submitting important data, saving work, etc. Let’s have the following example: You log in into a RIA with your user and password, you do changes to your data but you didn’t press save or your data is saved at logout and you close the window. All your work is lost and frustration takes its place. This article we will look into JavaScript, DOM and Flex to be able to tell the user to save its work before closing the browser window by a confirmation. Many of you have seen that in action in Ajax sites and I think one good example is GMail which display a confirmation dialog when trying to leave a page where you create a new message without saving.

We will build a simple case: a flex application with a checkbox that will enable or disable the checking system when closing the browser window.

You can use this afterwards in applications where you need to check if data is saved, if you’re logged in or out and in many other cases.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" applicationComplete="init();">
    <mx:Script>
        <![CDATA[
            public function cancloseornot():Boolean
            {
                return closeornot.selected;
            }
 
            public function init():void
            {
                ExternalInterface.addCallback("cancloseornot",
                                               cancloseornot);
            }
        ]]>
    </mx:Script>
    <mx:CheckBox id="closeornot" label="Direct close? (Checked=Yes)" />
</mx:Application>

At application initialization (function init) we instruct the player to make available to the HTML document - through ExternalInterface - the cancloseornot function which is returning if the checkbox is checked or not. addCallback method of ExternalInterface takes 2 parameters:

1. the external name of the function made available to HTML document and
2. the name of the function inside the flex application

This way our cancloseornot function will be available outside flex application to HTML document and JavaScript.

In the HTML document we set the onbeforeunload event handler:

window.onbeforeunload = function () {
    if (!${application}.cancloseornot())
    {
        return "Checkbox checked."
    }
}

onbeforeunload event is occurring for the following actions:

1. close
2. moving away from the page: back, forward, following links

${application} is the id of the swf file that is resulting after compiling the flex application (the object has id and embed has name) and in the template file everything with the pattern ${variable} will be replaced at compile time with values. So by this way both swf and our JavaScript will have the same application id.

It is IMPORTANT to know that ExternalInterface have security requirements as described here. To be short: “By default, an HTML page can only communicate with the ActionScript in your Flex application if it originates from the same domain.”

With this thing we can provide nice usability to users and keep them out of frustration.

Popularity: 98%