Flex Deep Link(深链接)

╰半橙微兮° 2022-08-08 06:46 448阅读 0赞

最近做flex[项目][Link 1]的时候，发现退出登陆时URL上会自动加上一个“\#”字符，很奇怪，Google+Baidu无数次都没有找到答案。今天无意间看到几个群友在 说通过“BrowserManager”获取URL，于是仔细查看了API，又发现了“HistoryManager”，这个问题终于明白了。  
  
我 们通常看的Web页面 可以通过浏览器的“前进”“后退”来查看刚才看过的页面，同样，嵌入的页面中的flash也可以实现这样的功能。方法是通过 HistoryManageer类和BrowserManager类两种方法来实现。HistoryManageer类主要是用在Flex2，Flex3 后很少用了。待会我将分别介绍这两种方法。  
  
回到刚才说URL上自动加“\#”号的问题：原因是Application 默认historyManagementEnabled属性是ture，也就是说HistoryManageer类功能自动开启 了，Application 里面通过程序控制addChild或removeChild任何组件所导致的变化，将会记录在flash的history中，导致重写url，加上“\#” 字符。故有了这个奇怪的“\#”号。在Flex3中，HistoryManager功能在Flex项目中默认打开的还有Accordion 和 TabNavigator组件。对于没有默认打开该功能的组件，如果要实现该功能，则需要另外注册。下面引用两片文章加以说明：  
对于一个网站来 说，其是有若干个网页组成的。而各个网页之间的链接叫做超链接。链接成为网页和网页之间的桥梁。那么，对于一个Flash整站来说，有没有一个办法来实现 Flash各页面（更恰当的说是各功能模块）之间的链接呢。比如，我想在浏览器中输入一个链接便可以链到Flash整站中的一页—一个功能模块，而不是每 次都要通过Flash整站的第一个页面的功能导航进入。把Flash的各个功能块页面化，那么我们该怎么实现呢。到底能不能实现呢？  
答案是肯定的，通过Flex Deep Link 便能实现上述功能。

## Flex Deep Link(深链接)-第一，Deep Link 简介。 ##

Deep Link其实也是依赖Flash和浏览器的交互来实现的，通过获取链接地址中\#后面的参数来实现页面标记，当你在Flex Bulid3发布一个项目时，其会自动你发布的目录生成一个名为History的文件夹，里面有 History.js,HistoryFrame.html,history.css这三个文件，可见Deep Link也是通过和浏览器交互来实现的.如果浏览器不支持JavaScript或者禁用JavaScript，那么Deep LinK肯定是不能用的。  
对于Deep Link应用，最重要的就是学会应用BrowserManager和HistoryManager这两个类。我们由简单到困难，先讲一讲HistoryManager这个类的应用。

**Flex Deep Link(深链接)-  第二，HistoryManager。**

HistoryManager功能在Flex项目中是默认打开的，比如在使用Accordion 和 TabNavigator组件时，在不同区域切换时，Flex会自动记录下各个状态，我们可以通过点击浏览器的“前进”和“后退”按钮来前进和倒退，在你 切换这些组件的区域时，Flex会自动你在网页链接的后面加写参数，以便记录当前页面的状态。  
默认情况下HistoryManager的功能是打开的，你可以通过设置各个组件或Application的historyManagementEnabled属性为false（默认为TRUE）来关闭此功能。  
这些都没什么好讲的。关键是怎么在一些普通组建上使用HistoryManager功能，默认的navigator container组建都是支持该功能的。要使一些普通组建也支持此功能，必须：  
1.实现mx.managers.IHistoryManagerClient接口。  
2.用HistoryManager'的register()方法为组建注册。  
3.当组件状态改变时保存组件的状态。  
4.通过实施IHistoryManagerClient的saveState() 和 loadState()方法来保存和读取组件状态。  
  
  
拿CheckBox为例：  
  
  
<?xml version="1.0"?>  
<mx:CheckBox   
xmlns:mx="http://www.adobe.com/2006/mxml"  
label="Check me"   
  
implements="mx.managers.IHistoryManagerClient" //关键步骤1，实现接口  
creationComplete="mx.managers.HistoryManager.register(this);"//关键步骤2，注册组件  
change="boxChanged(event)"//关键步骤3，当组件发生变化时保存状态  
>  
  
<mx:Script><!\[CDATA\[  
import mx.managers.HistoryManager;  
//实施IHistoryManagerClient的saveState()方法保存状态  
public function saveState():Object \{  
return \{selected:selected\};  
\}  
//实施IHistoryManagerClient的loadState()方法读取状态  
public function loadState(state:Object):void \{  
var newState:Boolean = state;  
  
if (newState != selected) \{  
selected = newState;  
\} else \{  
if (newState) \{  
;  
\} else \{  
selected = true;  
\}  
\}  
\}  
  
// 保存状态  
private function boxChanged(e:Event):void \{  
HistoryManager.save();  
\}    
\]\]></mx:Script>  
  
</mx:CheckBox>  
注意：如果你把实现HistoryManager功能的组件放到module中，再在主程序中调用，那么HistoryManager功能是没用的。  
麻雀虽小，五脏俱全。上面例子就是如何让任意组件实现HistoryManager的典型案例。点击浏览器的“前进”和“后退”来恢复上个或下个状态。  
BrowserManager类要比HistoryManager类更复杂些。BrowserManager类好比就是Flex程序和浏览器之间的一个代理。当浏览地址栏的地址发生变化时，浏览器通过BrowserManager类告知Flex程序。   
可以通过BrowserManager类的getInstance()方法来获得其一个实施了IBrowserManager接口的实例。这样就可以访问 其setTitle()和setFragment()方法和属性了。下面我就来介绍一下BrowserManager类的一些属性和方法。

**Flex Deep Link(深链接)-方法：**

1.init(fragment,title)  
该方法可以定义默认的链接参数和网页标题。一般在初始化时用到。例如：  
browserManager.init("", "Test Deep Linking");定义了参数为空，标题为Test Deep Linking的网页。  
2.setTitle(title)  
该方法用来设置网页标题。例如：  
browserManager.setTitle("The New Title") 设置网页标题为“The New Title”。  
3.setFragment(fragment)  
该方法用来设置网页参数。例如：  
browserManager.setFragment("id=3") 设置参数“id=3”。

## Flex Deep Link(深链接)-属性： ##

1.url  
browserManager.url获得页面完整链接。  
2.base  
browserManager.base获得页面基地址。  
3.fragment  
browserManager.fragment获得页面链接\#后的参数。  
4.lastURL  
browserManager.lastURL获得上一个页面链接——IE6我获得是失败的，火狐正确。大家可以自己试试。  
  
注意：上面的browserManager便是BrowserManager类的一个实例。实例化过程如下：  
import mx.events.BrowserChangeEvent;  
import mx.managers.IBrowserManager;  
import mx.managers.BrowserManager;  
private var browserManager:IBrowserManager;  
private function initApp():void \{  
browserManager = BrowserManager.getInstance();  
browserManager.addEventListener(BrowserChangeEvent.BROWSER\_URL\_CHANGE, parseURL);  
browserManager.init("", "Test Deep Linking");  
\}

**Flex Deep Link(深链接)-  如何分析URl**

可以用URLUtil类方便的分析Url  
类路径mx.utils.URLUtil，例如链接：http://127.0.0.1/index.html\#a=3&b=1  
var o:Object = URLUtil.stringToObject(browserManager.fragment,"&");  
trace(o.a,o.b)  
反过来设置地址栏链接：  
o.a=5；o.b=7；  
var s:String = URLUtil.objectToString(o,"&");  
browserManager.setFragment(s);  
注意：如果 URLUtil.objectToString()方法第二个参数为空，那么默认的参数分隔符为"；"号。  
  
BrowserManager类的事件  
BrowserManager类有三种事件：  
1.applicationURLChange事件；  
当在程序执行时调用setFragment()等方法改变URL时派发此事件。  
2.browserURLChange事件；  
当手动改变浏览器链接或点击“前进”或“后退”时派发此事件。  
3.urlChange事件；  
applicationURLChange事件或browserURLChange事件派发时，都将触发该事件。

**Flex Deep Link(深链接)-  获得链接信息**

可以通过BrowserManager类的属性和URLUtil的一些方法来获得链接信息，例如：  
var url:String = browserManager.url;  
baseURL = browserManager.base;  
fragment = browserManager.fragment;    
previousURL = e.lastURL;    
  
fullURL = mx.utils.URLUtil.getFullURL(url, url);  
port = mx.utils.URLUtil.getPort(url);  
protocol = mx.utils.URLUtil.getProtocol(url);  
serverName = mx.utils.URLUtil.getServerName(url);  
isSecure = mx.utils.URLUtil.isHttpsurl(/url);  
  
具体含义也很清楚，我也就不多讲了。  
关于BrowserManager类大致也就上面的内容。要注意的是BrowserManager类和HistoryManager类不能同时使用，也就 是说用了BrowserManager类就不能再用HistoryManager类了，当你用了BrowserManager类后，系统会自动禁用 HistoryManager类。  
既然能获得了参数，那么实现文章开头那些功能也就没什么了。通过在初始化程序中获取相应的参数，再根据这些参数控制程序显示。和.net,asp,php 类似，万物皆规律。有了BrowserManager类的帮助，加上一些程序控制，现在我在浏览器输入http://127.0.0.1 /news.html\#id=20便能在Flash整站中显示某个新闻页面了。

[Link 1]: http://www.tr158.com