BrowserManager的高级应用

上一次我们谈了一下BrowserManager的简单应用:使用BrowserManager来改变页面标题,这回我们将讲述BrowserManager的高级应用:深层链接。

深层链接(Deep-Link),相信大家不会陌生,主要是使用JS结合框架技术,从而让嵌入swf页面可以利用浏览器的前进后退按钮导航。如果我们是用Flex Bulder来发布页面,默认下会该页面会具有深层链接功能。细心的读者会发现在页面所在的目录下有一个history目录,有关深层链接的JS、框架、css文件都在里面。那么怎样使用BrowserManager实现深层链接呢?

一、使用BrowserManager实现数据的深层链接

该功能可以将数据在从浏览器URL与Flex控件相互传递, 当然我们还利用浏览器的前进后退导航按钮查看历史数据。

我们可以使用BrowserManager类的BrowserChangeEvents事件来将数据读写到地址栏链接。不管是何时通过在地址栏输入文本还是使用进后退导航按钮来改变浏览器URL,都将通过BrowserManager实例调度BrowserChangeEvent.BROWSER_URL_CHANGE事件,该事件会调用Flex控件内部的updateValues方法来更改值。

点击查看实例效果,点击查看下面实例源码。

上述实例展示了怎样从浏览器的URL读取数据,并将该数据值显示在Flex文本输入框中。具体说来,当应用加载时,将从当前URL读取数据并将firstName和lastName参数值写入到firstName和lastName文本输入框中。另一方面,当firstName和lastName文本输入框的值改变时,将调用BrowserManager的setFragment方法来更改浏览器URL的firstName和lastName参数值。

二、使用BrowserManager实现容器的深层链接

使用BrowserManager类的BrowserChangeEvents事件来控制Flex可视组件的可见性和跟踪其历史记录。

下面我们使用URL片段来控制跟踪Flex应用中的哪些组件和容器是可见的。当应用加载时,将初始化BrowserManager实例来解析处理浏览器的URL,updateContainers方法(如下代码)决定TabNavigator实例的哪一个tab是可见的。另一方面,只要TabNavigator实例的选项卡的可见性一改变,将通过下面的代码改变URL片段的selectedIndex参数:

bm.setFragment( "selectedIndex=" + tabNav.selectedIndex );

这一句将更改浏览器URL并将改变添加到浏览器的历史记录。如果用户想复制粘贴当前的浏览器URL,他将会直接链接到当前所选的选项卡。

点击此处查看实例效果,点击此处下载该实例源码。

你也许注意到了historyManagementEnabled属性设置成了false,这是因为这是因为 HistoryManager 通常与应用程序处理 URL 片段的方法冲突。我们使用BrowserManager事件来侦听浏览器URL是否改变,并相应更改tab内容。可视选项卡的每一次改变最终将改变浏览器的历史记录,用户可以使用前进后退按钮导航支上一个或下一个可见的选项卡。

发表评论