Exercise 6-4: Deep Linking with URLKit - Search Engine Optimization for Flash

Choose File→Import→Flex Project, and import the Exercise 6-4 folder into your Flex workspace.

Open the file URLKit.mxml in the src folder to view its contents.

File: URLKit.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initApp()" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
        import mx.containers.VBox;
        import flash.events.Event;
        import flash.net.URLLoader;
        import flash.net.URLRequest;
        import mx.controls.Text;

        private var req:URLRequest;
        private var loader:URLLoader;
        private var xmlData:XML;

        private function initApp():void
        {
            req = new URLRequest("data.xml");
            loader = new URLLoader();
            loader.addEventListener(Event.COMPLETE,loadComplete);
            loader.load(req);
        }

        private function loadComplete(event:Event):void
        {

            xmlData = new XML(loader.data);
            for each(var game:XML in xmlData.game)
            {
                var vbox:VBox = new VBox();
                var field:Text = new Text();
                field.text = game.description;
                vbox.label = game.title;
                navigator.addChild(vbox);
                vbox.addChild(field);
                field.width = 375;
                field.height = 100;
            }

        }
        ]]>
    </mx:Script>
    <mx:TabNavigator id="navigator" width="400" height="150" 
selectedIndex="0">

    </mx:TabNavigator>
    <mx:CheckBox label="Checkbox" id="box" selected="false"/>
</mx:Application>

Note that the setup of the application is similar to other files we’ve worked with throughout this chapter, in that it uses data from an XML file to populate a TabNavigator component.

Next, add the file urlkitFlex3.swc to your Flex project’s build path. Start by opening the Project Properties window. Do this by right-clicking (or Control-clicking) your Flex project in the Flex navigator and choosing Properties.

In the Project Properties window, select the Flex Build Path option on the left side of the window.

Select the Library Path option in the center of the window.

Click the Add SWC button on the right side of the window, which opens the Add SWC window.

Click the Browse button and find the file urlkitFlex3.swc, which is located in the urlkit-0.92/urlkit/bin directory.

Click OK to accept the changes you’ve made and to close the Project Properties window.

In the file URLKit.mxml, add the following code below the <mx:Application> tag:

<allurent:FlexBrowserManagerAdapter applicationState="{allRules}" />

Below the code that you just wrote, create an UrlRuleSet component with an id of allRules:

<allurent:FlexBrowserManagerAdapter applicationState="{allRules}" />
<allurent:UrlRuleSet id="allRules">
</allurent:UrlRuleSet>

Inside of the UrlRuleSet, create an UrlValueRule component connected to the selected property of the CheckBox component. The CheckBox component has an id of box:

<allurent:FlexBrowserManagerAdapter applicationState="{allRules}" />
<allurent:UrlRuleSet id="allRules">

<allurent:UrlValueRule urlFormat=";checked=*"
    sourceValue="box.selected" defaultValue="false" />
</allurent:UrlRuleSet>

Below the code you wrote in the last step, create an UrlValueRule connected to the selectedIndex property of the TabNavigator component, which is named navigator:

<allurent:FlexBrowserManagerAdapter applicationState="{allRules}" />
<allurent:UrlRuleSet id="allRules">
<allurent:UrlValueRule urlFormat=";checked=*"
    sourceValue="box.selected" defaultValue="false" />
<allurent:UrlValueRule urlFormat=";selectedIndex=*"
    sourceValue="navigator.selectedIndex" defaultValue="0" />
</allurent:UrlRuleSet>

Review your code for errors. Here’s what the finished application should look like:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initApp()" viewSourceURL="srcview/index.html"
xmlns:allurent="http://www.allurent.com/2006/urlkit">
<allurent:FlexBrowserManagerAdapter applicationState="{allRules}" />
<allurent:UrlRuleSet id="allRules">
<allurent:UrlValueRule urlFormat=";checked=*"
    sourceValue="box.selected" defaultValue="false" />
<allurent:UrlValueRule urlFormat=";selectedIndex=*"
    sourceValue="navigator.selectedIndex" defaultValue="0" />
</allurent:UrlRuleSet>
    <mx:Script>

        <![CDATA[
        import mx.containers.VBox;
        import flash.events.Event;
        import flash.net.URLLoader;
        import flash.net.URLRequest;
        import mx.controls.Text;

        private var req:URLRequest;
        private var loader:URLLoader;
        private var xmlData:XML;

        private function initApp():void
        {
            req = new URLRequest("data.xml");
            loader = new URLLoader();
            loader.addEventListener(Event.COMPLETE,loadComplete);
            loader.load(req);
        }

        private function loadComplete(event:Event):void
        {

            xmlData = new XML(loader.data);
            for each(var game:XML in xmlData.game)
            {
                var vbox:VBox = new VBox();
                var field:Text = new Text();
                field.text = game.description;
                vbox.label = game.title;
                navigator.addChild(vbox);
                vbox.addChild(field);
                field.width = 375;
                field.height = 100;
            }

        }
        ]]>
    </mx:Script>
    <mx:TabNavigator id="navigator" width="400" height="150" 
selectedIndex="0">
    </mx:TabNavigator>
    <mx:CheckBox label="Checkbox" id="box" selected="false"/>
</mx:Application>

Test the application, and notice the browser address updating as you click the different tabs and the checkbox.