flex 深度连接（url 地址# fragment处理）

【问题摘要】怎样通过URL来重制Flex状态（state）？
??????????????????????? （How do you recreate a Flex application state using an URL?）

【解决方法】深度链接（Deep Linking）为Flex应用程序的URL定位提供支持。

【详细解说】

什么是深度链接（Deep Linking）？
????????? 深度链接（Deep Linking）是为那些非Html页面应用而给定的一种关于URL定位的描述。例如，在一个网页里，如果有“Home”、“About Us”和“Contact”三个导航按钮，无论什么时候点击它们，都会定向到一个独立的URL，譬如http://riaoo.com/home.html、http://riaoo.com/contact.html。这样的好处是，你可以为你感兴趣的页面添加书签或者发给你的朋友。否则，你只能发送这个地址http://riaoo.com给你的朋友，然后告诉他如何才能进入到Contact页面（译者注：前者可以一步到位到http://riaoo.com/contact.html，后者只能先进入http://riaoo.com然后再进入到Contact页面）。
????????? 在Flex应用程序里，当你不使用深度链接（Deep Linking）时，就像上述的第二种情况一样，你不能为指定的状态（state）添加书签，没有Contact页的URL可以发给你的好友。深度链接（Deep Linking）可以解决这个问题并且支持浏览器的后退按钮。

在Flex里如何使用深度链接（Deep Linking）呢？
????????? 在Flex 3里，为实现深度链接（Deep Linking）功能，使用了片段（fragments）——跟在“#”号后面的那部分。例如“http://riaoo.com/page.html#view=1”这个链接，片段（fragments）是指“view=1”。无论你在什么时候为URL添加片段（事实上你还可以添加任意片段），浏览器都不会重新加载页面。在Flex里这就是你所需要的。在Flex应用程序中，你获得一个SWF文件里的所有状态（states），这样你就可以不用重新加载页面来改变内容。
????????? Flex使用片段（fragments）来“存储”状态（state），而且当一个URL被加载时，Flex应用程序可以分析URL上的片段来定位到对应于URL的状态。接下来让我们来看看程序员如何在一个Flex应用程序里写和读URL片段（fragments）。
?BrowserManager是一个在浏览器与Flex应用程序之间扮演着代理角色的单例。它能使你：
????????? ■?在当前的URL上插入片段（fragments）
????????? ■?设置Html页面的title
????????? ■?在URL改变事件中注册事件监听器
????????? 我们需要使用到的第二个类是URLUtil这个静态类，它拥有方便操作URL的方法。最后，为了防止干涉处理片段（fragments），我们需要禁用HistoryManager（这个家伙能控制Flex应用程序的后退和前进）。我们可以把historyManagementEnabled属性值设为false来禁用它（例如：<mx:Application historyManagementEnabled=”false”>）。
????????? 为使深度链接（Deep Linking）起作用，程序员所要做的事情主要就是编写函数来把当前状态（state）信息连载到URL上或者把它去掉，并通过那些状态信息来控制Flex应用程序的状态。（原话：Most of the work a programmer does for Deep Linking is centered on creating functions that either “serialize” the current state to URL or “deserialize” the URL and use that information to change the Flex application state.）

【简单例子】

????????? 我们来看看一个使用了深度链接（Deep Linking）的简单例子。它有三个状态（state）：默认状态、“Step 2”状态和“Step 3”状态。在这个Flex应用程序里为了表明这三种状态，我使用了Accordion组件。其实我可以使用mx:states控件、一个tabset或者其它UI组件。不过这些都没有关系，原理是一样的。正如我说的那样，使用深度链接（Deep Linking）的程序员的主要任务是编写函数来把状态（state）信息连载到URL上或者把它去掉。然后，你需要把那些函数在Flex应用程序里注册为事件监听器。在这个例子里，doUpdateURL()函数是用来向URL添加片段（fragments）的，parseURL()函数是用来去掉片段的。那个URL可以控制Accordion组件哪项被选择。为了这样，我取得当前Accordion组件的selectedIndex值并保存它作为片段（fragments）。例如，要通过URL来选择Accordion组件的第二项，应该要这样：http://riaoo.com/deep_linking_project.html#view=1，注意在尾部的“view=1”，这就是用来“存储”selectedIndex值的片段（fragments）了。
????????? 你应该看到了，我在mx:Application里把historyManagementEnabled属性值设为false了。然后我声明了三个变量：一个引用了BrowserManager、一个用来标识是否正在分析URL、最后一个是用来存储Html页面的title值。
?我定义了一个init()函数，当Application加载完成时执行的。在这个函数里，我初始化了BrowserManager变量，并把它作为URL改变时的事件监听器。最后一行调用了parseURL()函数，看注释就好。

// 引用单例的BrowserManager类
public var browserManager:IBrowserManager;
// 指示是否正在分析URL
private var isParsing:Boolean;
// 用来存储各个状态（state）的title
private var arrTitles:Array = ["Welcome to Flex Deep Linking Example","Step 2","Step 3"];
/**
 * 当application加载后，这个函数会被执行
 * 初始化browserManager 变量并为BROWSER_URL_CHANGE事件注册监听器
 */
private function init():void {
browserManager = BrowserManager.getInstance();
browserManager.init(“”,“Welcome to Flex Deep Linking Example”);
browserManager.addEventListener(BrowserChangeEvent.BROWSER_URL_CHANGE,parseURL);
callLater(parseURL);
}

/**
 * 一旦浏览器的URL被改变，这个函数就会被调用
 * @参数：event
 */
private function parseURL(event:Event = null):void {
    isParsing = true;
    // 从当前浏览器的URL上找到片段（fragments），然后把它解析为一个对象
// 例如：如果有一个“view=1”的片段，那么“view”会被解析为属性名，“1”会被解析为属性值
var o:Object = URLUtil.stringToObject(browserManager.fragment);
// 当没有片段时执行
if (o.view == undefined)
    o.view = 0;
// 把URL上找到的片段（fragments）值赋给Accordion组件的selectedIndex 属性，也就是根据片段view的值来改变Accordion组件的项
ac.selectedIndex = o.view;
    // 根据Accordion组件当前已被选择的项来改变浏览器的title
var title:String = arrTitles[o.view];
browserManager.setTitle(title);
isParsing = false;
}

/**
 * 为Accordion组件的改变事件注册监听器
 */
private function updateURL():void {
        if (!isParsing)
        // callLater函数延迟执行doUpdateURL()函数，是进入下一帧后才执行，就是UI被重绘后
        callLater(doUpdateURL);
}

/**
 * 这个函数修改浏览器的URL
 */
private function doUpdateURL():void {
var title:String = “”;
var fragments:String = “”;
var o:Object = {};
// 当用户选择了Accordion组件的非第一项时
if (ac.selectedIndex > 0)
    o.view = ac.selectedIndex;
// 为当前选择状态找到对应的title
title = arrTitles[ac.selectedIndex];
// 把对象解析为片段（fragments）字符串
fragments = URLUtil.objectToString(o);
// 改变浏览器的title
browserManager.setTitle(title);
// 向浏览器的URL追加片段
browserManager.setFragment(fragments);
}

<mx:HBox>
        <mx:Accordion id="ac" change="updateURL()" width="200">
            <mx:Canvas label="Step 1" width="100%" height="100%">
                <mx:TextArea editable="false" text="Step 1 Accordion Content" height="300" width="100%"/>
            </mx:Canvas>
            <mx:Canvas label="Step 2" width="100%" height="100%">
                <mx:TextArea editable="false" text="Step 2 Accordion Content" height="300" width="100%"/>
            </mx:Canvas>
            <mx:Canvas label="Step 3" width="100%" height="100%">
                <mx:TextArea editable="false" text="Step 3 Accordion Content" height="300" width="100%"/>
            </mx:Canvas>
        </mx:Accordion>
 
        <mx:Canvas width="439" height="82">
        <mx:TextArea x="19" y="10" width="410" height="62" editable="false" text="Sample Application for Deep Linking in Flex. As you change the Accordion selection the URL is updated and you can paste this URL in a new browser. The state of the application is recreated from the URL."/>
        </mx:Canvas>
</mx:HBox>