O'Reilly    
 Published on O'Reilly (http://oreilly.com/)
 See this if you're having trouble printing code examples


Deep Linking with URLKit - Search Engine Optimization for Flash

by Todd Perkins

You can create deep links in Flex applications in many ways. So far, we’ve looked at the BrowserManager and SWFAddress. Another excellent and popular method of deep linking is URLKit. In this section, we’ll explore URLKit, its advantages, and how to use it in a Flex application.

Search Engine Optimization for Flash book cover

This excerpt is from Search Engine Optimization for Flash. Search Engine Optimization for Flash dispels the myth that Flash-based websites won't show up in a web search by demonstrating exactly what you can do to make your site fully searchable -- no matter how much Flash it contains. You'll learn best practices for using HTML, CSS and JavaScript, as well as SWFObject, for building sites with Flash that will stand tall in search rankings.

buy button

Benefits of URLKit

URLKit essentially does the same thing that SWFAddress does. It allows you to create deep links in your Flex applications using URL fragments. As with SWFAddress, these links can be used to create bookmarks and can even be indexed by search engines. Using URLKit, you get a lot of control in deciding how your deep links work. With this control, you can generate multi-fragment URLs based on property values of multiple UI elements. In addition to giving you a great control over deep links, URLKit is quite easy to use, even in a pre-existing application.

Implementing URLKit in a Flex Application

To implement URLKit in your applications, you’ll first need to download the necessary files at the URLKit website, http://code.google.com/p/urlkit/. Once you have the files, you just need to add an .swc file to your project’s build path; then you can add the URLKit code to add deep linking to your Flex application.

Adding urlkitFlex3.swc to your project’s build path

Adding a file to your project’s build path is simple. Start by opening your project’s Properties window by right-clicking or Control-clicking your folder in the Flex Navigator and choosing Properties (Figure 6.16, “Choosing Project Properties”). Then, in the Properties window (Figure 6.17, “The Project Properties window”), click the Flex Build Path option on the left. In the Flex Build Path area, click Library, and click the Add SWC… button on the right side of the window (Figure 6.18, “The Add SWC window”). From there, browse for the file urlkit/bin/urlkitFlex3.swc and choose that file to add to your Flex Build Path. Then click OK to close the Properties window.

Figure 6.16. Choosing Project Properties

Choosing Project Properties

Figure 6.17. The Project Properties window

The Project Properties window

Figure 6.18. The Add SWC window

The Add SWC window

Adding the URLKit code

Once you’ve added the URLKit file to your project’s build path, you’re ready to start using URLKit in your code. Basically, it’s set up in such a way that you can use virtually any navigation component (ViewStack, TabNavigator, etc.) and URLKit will write the URL fragments for you.

To implement URLKit in your Flex application, you first need to create a FlexBrowserManagerAdapter component using the allurent namespace:


<allurent:FlexBrowserManagerAdapter />

The FlexBrowserManagerAdapter component connects to the built-in Flex BrowserManager, which uses some JavaScript code to handle communication between the browser and the Flash Player.

Next, you will need to use a URL rule component to control how URLKit creates the URL fragments you’ll be working with. Your URL rule needs to be connected to the FlexBrowserManagerAdapter component using the FlexBrowserManagerAdapter component’s applicationState property. The following is an example of connecting the FlexBrowserManagerAdapter component to the URL rule component UrlValueRule.

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

Note

There are four different URL rules, but for the sake of this example, we’re going to look at the UrlValueRule and how to use it multiple times in one URL. For information about the other rules, see the note at the end of this section.

The UrlValueRule requires three more properties to function properly. The urlFormat property defines how to format the URL fragment created, the sourceValue property defines what component property to follow to get the data for the fragment, and the defaultValue property allows you to set a default value for the property used to create the URL fragment. Here’s an example of this implemented in code, connecting the UrlValueRule to a TabNavigator component with an id value of navigator:

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

<allurent:UrlValueRule id="allRules" urlFormat=";selectedIndex=*"
    sourceValue="navigator.selectedIndex" defaultValue="0" />

In the previous code, the value for urlFormat is ;selectedIndex=*. Remember, this is the value after the hash symbol (#) that defines the URL fragment. It starts with a semicolon to allow for easy separation of multiple values in the fragment. Then, an identifier name, selectedIndex, is given to the fragment, and the value is set to an asterisk (*). The asterisk character is a placeholder, and when URLKit processes the URL fragment, the asterisk will be replaced with the value of the property being followed, which in this case is navigator.selectedIndex. For example, when the selectedIndex of the TabNavigator is 1, the URL fragment will be #;selectedIndex=1.

The last step to this working properly is assigning a selectedIndex value that matches the defaultValue property of the UrlValueRule (which is 0) to the TabNavigator component:

<mx:TabNavigator id="navigator" width="400" height="150" selectedIndex="0">

</mx:TabNavigator>

Here’s what the entire application looks like:

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"
xmlns:allurent="http://www.allurent.com/2006/urlkit">
<allurent:FlexBrowserManagerAdapter applicationState="{allRules}" />

<allurent:UrlValueRule id="allRules" urlFormat=";selectedIndex=*"
    sourceValue="navigator.selectedIndex" defaultValue="0" />
<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:Application>

If you test this application in a web browser (see Figure 6.19, “URLKit working in Firefox”), you’ll find that it works as you’d expect it to, and pretty similar to SWFAddress. You can use the browser’s Back button, bookmark any application view, and return to it later to watch the application launch in that view.

Figure 6.19. URLKit working in Firefox

URLKit working in Firefox

Earlier in this section, I mentioned that you could easily implement multi-fragment URLs using URLKit. To do that, all you have to do is wrap multiple rules in an UrlRuleSet component, giving the UrlRuleSet an id value that matches that of the applicationState value for the FlexBrowserManagerAdapter component. Here’s an example of the application we just looked at, with the addition of a CheckBox component:

File: URLKitCheckbox.mxml

<?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>

The previous code follows the CheckBox component’s selected property. If you test the application in a web browser, you’ll find that both the selectedIndex of the TabNavigator and the selected value of the CheckBox are reflected in the URL fragment. (See Figure 6.20, “Viewing multiple fragments in the address bar created with URLKit”.)

Figure 6.20. Viewing multiple fragments in the address bar created with URLKit

Viewing multiple fragments in the address bar created with URLKit

Note

Though exhaustive coverage of URLKit is beyond the scope of this book, there are other places where you can learn as many details as you’d like. David Tucker (RIA guru) wrote a great article about implementing URLKit in your Flex applications, which you can find at http://www.insideria.com/2008/09/advanced-flex-deep-linking-wit-1.html. Further, documentation for URLKit is available at http://www.davidtucker.net/docs/urlkit/.

If you enjoyed this excerpt, buy a copy of Search Engine Optimization for Flash. .

Copyright © 2009 O'Reilly Media, Inc.