Flex之DeepLink

RIA开发中有一个很重要的问题，那就是对搜索引擎不友善，因为对搜索引擎来说，Rich Internet Application通常是一页HTML。
换个角度说，在传统的基于页面流的方式我们可以通过[url]http://imzw.iteye.com/blogs/165173[/url]导航到一个页面。但RIA的方式通常不行，也就是我们通常无法通过一个链接导航到程序的一个操作界面。Ajax，Flash等RIA技术都面临着这个问题。Ajax可通过JavaScript调用浏览器相关的对象实现。Flash相对要困难些。Flex中已经内建了[b]DeepLink[/b]来解决这个问题。
[b]DeepLink[/b]是通过[b]锚点[/b]，即[url]http://imzw.iteye.com/blogs/165173[/url]#view=0;showDetails=true这样一个链接导航到Flex应用程序某一操作界面。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	historyManagementEnabled="false"
	layout="absolute"
	backgroundImage="{bgSource}"
	backgroundColor="#97A5E3"
	initialize="init()"
	>
	<mx:Script>
		<![CDATA[
			import mx.events.BrowserChangeEvent;
			import mx.managers.IBrowserManager;
			import mx.managers.BrowserManager;
			import mx.utils.URLUtil;
			import mx.controls.Alert;
			import mx.collections.ArrayCollection;
			import mx.rpc.events.ResultEvent;

			[Bindable]
			[@Embed(source="assets/dog.jpg")]
			public var dog:Class;

			[Bindable]
			public var bgSource:String;

			public var browserManager:IBrowserManager;

			private function init():void{
				initApp();
				bgHttpService.send();
			}
			private function initApp():void
		    {
		        browserManager = BrowserManager.getInstance();
				browserManager.addEventListener(BrowserChangeEvent.BROWSER_URL_CHANGE, parseURL);
				browserManager.init("", "Dog");
		    }
		    private var parsing:Boolean = false;
		    private function parseURL(event:Event):void{
		        parsing = true;

		        var o:Object = URLUtil.stringToObject(browserManager.fragment);
		        if (o.view == undefined){
		            o.view = 0;
		        }
		        tn.selectedIndex = o.view;
		        browserManager.setTitle((tn.selectedIndex == 0) ? "AnotherDog" : "Dog");
		        tn.validateNow();

		        var details:Boolean = o.details == true;
		        if (tn.selectedIndex == 0){
		            shipDetails.selected = details;
		        }else{
		            recvDetails.selected = details;	
		        }
		        parsing = false;		
		    }

		    private function updateURL():void{
		        if (!parsing)
		            callLater(actuallyUpdateURL);
		    }

		    private function actuallyUpdateURL():void{
		        var o:Object = {};
		        var t:String = "";

		        if (tn.selectedIndex == 1){
		            t = "AnotherDog";
		            o.view = tn.selectedIndex;
		            if (recvDetails.selected){
		                o.details = true;
		            }
		        }else{
		            t = "Dog";
		            o.view = tn.selectedIndex;
		            if (shipDetails.selected){
		                o.details = true;
		            }
				}
		        var s:String = URLUtil.objectToString(o);
		        browserManager.setFragment(s);
		        browserManager.setTitle(t);
		    }

			private function bgHandler(event:ResultEvent):void{
				var bgData:ArrayCollection = event.result.backgrounds.image;
//				mx.controls.Alert.show("result");
				var minBg:int = 0;
				var maxBg:int = bgData.length - 1;
				var range:int =maxBg - minBg;
				var bgIndex:int = Math.round(Math.random() * range) + minBg;
				bgSource ="assets/"+ bgData.getItemAt(bgIndex).path;
			}
		]]>
	</mx:Script>
	<mx:HTTPService id="bgHttpService" 
		url="assets/backgrounds.xml" showBusyCursor="true"  method="get"
		fault="{Alert.show(event+'')}"		
		result="{bgHandler(event)}" />


	<mx:VBox width="100%" height="100%" 
		horizontalAlign="right" 
		verticalAlign="middle">

                <!-- 当Tab Change更新URL-->
		<mx:TabNavigator id="tn" change="updateURL()">

			<mx:Panel label="Dog">
				<mx:Image id="img" width="400" height="300"
					source="{dog}" 
					scaleContent="true"  />
                               <!-- 当CheckBox Change更新URL-->
				<mx:CheckBox id="shipDetails" label="Show Details" change="updateURL()" />
			</mx:Panel>

			<mx:Panel label="Another Dog">
				<mx:Image id="img1" width="400" height="300"
					source="{dog}" 
					scaleContent="true"  />
				<mx:CheckBox id="recvDetails" label="Show Details" change="updateURL()" />
			</mx:Panel>

		</mx:TabNavigator>

	</mx:VBox>

</mx:Application>

[b]关键点：[/b]
1. 在Application中设置 historyManagementEnabled="false" ，因为Flex有些组件（eg：Tab）默认提供了DeepLink功能。
2. 调用BrowserManager.init() 在Application初始化的时候. 参数 "" 意思是 '#'后面什么都没有.
3. 在需要的地方更新地址栏URL。
4. 在Application初始化的时候调用 BrowserManager.addEventListener()监听浏览器的变化。
5. parseURL()解析URL导航到相应界面（更新的相应状态）。

你可以看这里[url]http://www.mizhongwang.cn/flex-app/RandomBackgroundAndDeepLink/RandomBackgroundAndDeepLink.html[/url]

[color=indigo]PS:源码中还包含了[b]动态显示不同的背景[/b]的代码。每次进入是背景是随机显示的，多刷新几次就能看出来，图片太少了。[/color]

--EOF--