This week I’ve been working on a project that uses deep linking with SWFAddress library. SWFAddress is a useful tool that lets you go to a specified part of a flash site by changing the browser’s url.

Anyway this project was in part completed but had to do some changes and fix some bugs. Most bugs were found using Internet Explorer 6. If you wonder why IE6 in the era of Firefox and IE8, because today it has 25% of the market (but going down which is a very good thing) and the client needs to be compliant with it. IE6 is not working on Vista so I had to use a Virtual PC image of XP Sp3 to test with IE6.

The biggest bug found was related to SWFAddress Javascript classes. The site continued to jump from one page to another without no reason. I want to mention that this bug did not appeared on Firefox or IE8 or other browser and I have the following browsers for testing: Firefox, Opera, IE8, SeaMonkey and Google Chrome.

I did some research on Google and I found a comment, “Left by Niklas at Thu, 2 Nov 4:07 PM” on the following page: http://www.asual.com/blog/swfaddress/swfaddress-deep-linking-for-flash.html. That way I found that for IE6 the swfaddress.html file must be placed in the same folder where swfaddress.js resides. That didn’t resolved it then I started to test the examples from the SWFAddress zip file.

I’ve seen that in adobe folder is an approach like mine: use on Flash/Flex Javascript classes with SWFAddress. Tested it on IE6 and is working. Then i started comparing with my project. The difference was that in my project I used also the Flash/Flex history Javascript class. So I removed the following line from my project:

<script src="history/history.js" language="javascript"></script>

That fixed my bug. Two this I had to do:

1. add swfaddress.html
2. remove the Flash/Flex history Javascript libraries

As far us I noticed if you used SWFObject with SWFAddress this problem will not occur because, I think, SWFObject do not uses history.

I hope, in the future, to write an entire article dedicated to deep linking, but I need time for that.

Some resources bellow:
http://www.asual.com/blog/swfaddress/swfaddress-deep-linking-for-flash.html
http://www.asual.com/swfaddress/
http://code.google.com/p/swfobject/

These days I was struggling with this problem: I needed to scroll the page (using javascript) to the embeded swf object. After some search and tests I used the following function (found here) to find the Y position of the object.

function findPosY(obj) {
    var curtop = 0;
    if(obj.offsetParent)
        while(1) {
            curtop += obj.offsetTop;
            if(!obj.offsetParent)
                break;
            obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
}

The next step was to use it with according to my need. So I taken the following steps:

1. get the object using getElementById (my object has an id set)
2. put the obtained object into the findPosY funtion to get its Y position
3. use scrollTo function to scroll the page to the desired Y position

But… big problem occurred. Firefox browser is returning a totally different Y position (afterward I found that it happens to all Gecko based browsers). The difference is approximately the height of the swf object. By trial and error I found that I have to substract the swf height and add 15 pixels.

Using embeds doesn’t give you the same problem. Instead of document.getElementById() function use document.embeds[] array and you won’t have this problem. You can test all these following this link.

The scrolling method is here:

function scrollToMovie(obj) {
    var cy = 0;
    // get the y position
    cy = findPosY(obj);
    // Gecko engine work arround
    // 
    // Gecko returns another value (when using the
    // object tag instead of embed tag) which is 
    // somehow equal with:
    //     y position + object height - 15
    // (this was found by trial and error)
    if (obj.tagName == "OBJECT") {
        if (navigator.userAgent.indexOf("Gecko")!=-1) {
            cy = cy - obj.height + 15;
        }
    }
    // scroll to the movie
    window.scrollTo(0, cy - 10);
}

Please notice that we check if OBJECT is used and if the browser is Gecko. This is it. Archive with the HTML file can be downloaded at the end. If you’ll open the HTML file from your desktop a notification window will appear regarding flash security issues.

The test page is here: http://www.flexer.info/wp-content/uploads/2008/10/test_object_embed.html.

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.