Is there any way to synchronize flex application tool with browser forward and backward button

Question

I have create an flex application tool which used BrowserManager class to synchronization between flex application tool and browser forward/backward button. It works fine in firefox but did not work properly in other browser(safari,IE,Chrome).

Code is as folow :

 <?xml version="1.0" encoding="utf-8"?>
    <mx:Application
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="absolute" 
        historyManagementEnabled="false"
        creationComplete="onCreationComplete()">

        <mx:Script>
            <![CDATA[
                import mx.effects.effectClasses.AddRemoveEffectTargetFilter;
                import mx.events.BrowserChangeEvent;
                import mx.managers.IBrowserManager;
                import mx.managers.BrowserManager;
                import mx.utils.URLUtil;

                private var bm:IBrowserManager;

                private function onCreationComplete() : void
                {
                    bm = BrowserManager.getInstance();  //get an instance of the browserManager
                    bm.init(); //initialize the browser manager
                    updateContainers(); //set visible containers based on url parameters
                    bm.addEventListener( BrowserChangeEvent.BROWSER_URL_CHANGE, onURLChange );     //add event listeners to handle back/forward browser buttons
                updateURL();
                }

            private function updateContainers():void
            {
                var o:Object = URLUtil.stringToObject(bm.fragment);
                if ( !isNaN(o.selectedIndex) )
                {
                    var newIndex : Number = o.selectedIndex;
                    if ( newIndex >= 0 && newIndex < tabNav.numChildren )
                        tabNav.selectedIndex = newIndex;
                }
            }

            private function onURLChange( event:BrowserChangeEvent ):void
            {
                 updateContainers();
            }

            private function updateURL():void
            {
                bm.setFragment( "selectedIndex=" + tabNav.selectedIndex );
            }

        ]]>
    </mx:Script>

<mx:TabNavigator
        bottom="10" 
        top="10" 
        right="10" 
        left="10"
        id="tabNav"
        historyManagementEnabled="false"
        >

        <mx:Canvas label="Tab 0" show="updateURL()" >
            <mx:Label text="Tab 0 Contents" />
        </mx:Canvas>

        <mx:Canvas label="Tab 1" show="updateURL()" >
            <mx:Label text="Tab 1 Contents" />
        </mx:Canvas>

        <mx:Canvas label="Tab 2" show="updateURL()" >
            <mx:Label text="Tab 2 Contents" />
        </mx:Canvas>

    </mx:TabNavigator>
</mx:Application>

Is there any solution for this problem...?

Answer 1

I have got an answer of mine own question. The code is as follow :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" 
    historyManagementEnabled="false"
    creationComplete="onCreationComplete()">

    <mx:Script>
        <![CDATA[
            import com.asual.swfaddress.SWFAddressEvent;
            import com.asual.swfaddress.SWFAddress;
            import mx.effects.effectClasses.AddRemoveEffectTargetFilter;
            import mx.events.BrowserChangeEvent;
            import mx.managers.IBrowserManager;
            import mx.managers.BrowserManager;
            import mx.utils.URLUtil;
            import com.asual.swfaddress.*;

            private var bm:IBrowserManager;

            private function onCreationComplete() : void
            {
                SWFAddress.addEventListener(SWFAddressEvent.CHANGE, onChange);
            }

            private function onChange(e:SWFAddressEvent):void
            {
                if(e.value != "/")
                    SWFAddress.setTitle("Nail Designer " + e.value.substring(1));
                else
                    SWFAddress.setTitle("Nail Designer - Tab1Selected ");

                switch(e.value)
                {
                    case "/Tab1Selected":
                        tabNav.selectedIndex = 0;
                        break;

                    case "/Tab2Selected":
                        tabNav.selectedIndex = 1;
                        break;

                    case "/Tab3Selected":
                        tabNav.selectedIndex = 2;
                        break;

                    case "/":
                        tabNav.selectedIndex = 0;
                        break;
                }
            }

            public  function onCanvas_Click():void
            {
                if(tabNav.selectedIndex == 0)
                    SWFAddress.setValue("Tab1Selected");
                else if(tabNav.selectedIndex == 1)
                    SWFAddress.setValue("Tab2Selected");
                else if(tabNav.selectedIndex == 2)
                    SWFAddress.setValue("Tab3Selected");    
            }

     ]]>
    </mx:Script>

    <mx:TabNavigator
        bottom="10" 
        top="10" 
        right="10" 
        left="10"
        id="tabNav"
        historyManagementEnabled="false"
        >

        <mx:Canvas label="Tab 1" show="onCanvas_Click()" >
            <mx:Label text="Tab 0 Contents" />
        </mx:Canvas>

        <mx:Canvas label="Tab 2" show="onCanvas_Click()" >
            <mx:Label text="Tab 1 Contents" />
        </mx:Canvas>

        <mx:Canvas label="Tab 3" show="onCanvas_Click()" >
            <mx:Label text="Tab 2 Contents" />
        </mx:Canvas>

    </mx:TabNavigator>
</mx:Application>

This code only run when you have swfaddress.js, swfobject.js file and SWFAddress.as, SWFAddressEvent.as class. This files you can download fron link : http://www.asual.com/swfaddress/