Deep Linking in Flex and Flash SEO

Posted on February 16, 2011 | Comments Off on Deep Linking in Flex and Flash SEO

How many of you are building your applications using deep linking with mx.managers.BrowserManager, or one of the deep linking libraries (URLKit, SWFAddress, etc)? Are you building your applications with SEO in mind or is this something that you see on the horizon but haven’t committed to yet? I have been experimenting with mx.managers.BrowserManager and find it very intuitive and easy to integrate into my applications. For example, here is a simple tab navigation example:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
               xmlns:s="library://ns.adobe.com/flex/spark"     
               xmlns:mx="library://ns.adobe.com/flex/halo"     
               minWidth="1024" minHeight="768" applicationComplete="init()">

      <fx:Script>
        <![CDATA[
              import mx.events.BrowserChangeEvent;
              import mx.managers.IBrowserManager;
              import   mx.utils.URLUtil;
            import mx.managers.BrowserManager;
            
            public var browserManager:IBrowserManager;
            
            private function init():void {
                browserManager     = BrowserManager.getInstance();
                browserManager.init();
                browserManager.addEventListener(BrowserChangeEvent.BROWSER_URL_CHANGE, parseURL);
                    callLater(parseURL);
            }

            private function parseURL(event:Event = null):void {
                var o:Object = URLUtil.stringToObject(browserManager.fragment);
                if (o.tabId == undefined)
                      o.tabId = 0;
                tabs.selectedIndex = o.tabId;
                setPageTitle();
            }
            
            private function updateURL():void {
                callLater(doUpdateURL);
              }

            private function doUpdateURL():void   {
                var title:String   = "";
                  var fragments:String = "";
                var o:Object = {};
                o.tabId   = tabs.selectedIndex;
                fragments = URLUtil.objectToString(o);
                  browserManager.setFragment(fragments);
                setPageTitle();
            }
            
            private function   setPageTitle():void{
                var title:String = Canvas(tabs.getChildAt(tabs.selectedIndex)).label;
                    browserManager.setTitle(title);
              }
        ]]>
    </fx:Script>
    <mx:TabNavigator   id="tabs" 
                     width="100%" 
                     height="100%" 
                     change="updateURL()">
        <mx:Canvas label="Tab 1" 
                   width="100%" 
                   height="100%" 
                   backgroundColor="0xFF0000">
            <mx:Label text="Tab 1" 
                      fontSize="48" 
                        horizontalCenter="0"   
                      verticalCenter="0"/>
          </mx:Canvas>
          <mx:Canvas label="Tab 2" 
                   width="100%" 
                   height="100%"   
                   backgroundColor="0xCCCCCC">
 <mx:Label   text="Tab   2"   
                          fontSize="48" 
                      horizontalCenter="0" 
                      verticalCenter="0"/>
        </mx:Canvas>
            <mx:Canvas label="Tab 3" 
                   width="100%" 
                   height="100%" 
                     backgroundColor="0x000066">
              <mx:Label text="Tab 3" 
                      fontSize="48" 
                      horizontalCenter="0"   
                        verticalCenter="0"/>
          </mx:Canvas>
    </mx:TabNavigator>
</s:Application>

• Tweet

Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.

Comments