现在的位置: 首页 > 综合 > 正文

【转】BrowserManager和HistoryManager的应用

2013年10月04日 ⁄ 综合 ⁄ 共 4567字 ⁄ 字号 评论关闭

 

BrowserManager是一个Singleton 管理器,用于充当浏览器和应用程序之间的代理。使用它可以访问浏览器地址栏中的URL,这与访问JavaScript 中的document.location 属性类似。这一节我们将介绍其简单应用。

一、改变HTML页面标题

使用setTitle更改浏览器标题栏中的文本。看如下代码:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.managers.IBrowserManager;
			import mx.managers.BrowserManager;
			private function changePageTitle(newTitle:String) : void
			{
			    // 取得browser manager单例
			    var bm:IBrowserManager = BrowserManager.getInstance();
			    // 初始化browser manager
			    bm.init();
			    // 改变HTML页面标题
			    bm.setTitle( newTitle );
			}
		]]>
	</mx:Script>
	<mx:HBox>
		<mx:Button label="按钮一" click="changePageTitle('标题一')"/>
		<mx:Button label="按钮二" click="changePageTitle('标题二')"/>
	</mx:HBox>
</mx:Application>

二、从浏览器当前URL读取解析数据

这里还需要用到URLUtil类。在Flex 3中使用深层链接(Deep linking)时,链接分成两个部分:基本(base)和片段(fragment)。基本是当前URL显示在浏览器地址栏中时,#之前的部分;而片段是前URL 显示在浏览器地址栏中时,#之后的部分。片段用来将值传给Flex应用,当然也可以用来管理浏览历史。注意用来分隔URL片段中的名称=值对。看如下代码:

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    creationComplete="parseURL()">

    <mx:Script>
        <![CDATA[
            import mx.utils.ObjectUtil;
            import mx.managers.IBrowserManager;
            import mx.managers.BrowserManager;
            import mx.utils.URLUtil;

            private function parseURL() : void
            {
                var bm:IBrowserManager = BrowserManager.getInstance();
                bm.init();
                // 输出url参数值
                   output.text += "Full URL:/n" + bm.url + "/n/n";
                output.text += "Base URL:/n" + bm.base + "/n/n";
                output.text += "URL Fragment:/n" + bm.fragment + "/n/n";
                // 使用URLUtil将url参数转换成actionscript object
                var o:Object = URLUtil.stringToObject(bm.fragment);
                output.text += "Object:/n" + ObjectUtil.toString(o) + "/n/n";
                output.text += "name:/n" + o.name + "/n/n";
                output.text += "index:/n" + o.index + "/n/n";
                output.text += "productId:/n" + o.productId + "/n/n";

                // 使用URLUtil解析URL
                output.text += "URL Port:/n" + URLUtil.getPort(bm.url) + "/n/n";
                output.text += "URL Protocol:/n" + URLUtil.getProtocol(bm.url) + "/n /n";
                output.text += "URL Server:/n" + URLUtil.getServerName(bm.url) + "/n/n";
                output.text += "URL Server with Port:/n" + URLUtil.getServerNameWithPort( bm.url );
            }

        ]]>
    </mx:Script>
    <mx:TextArea id="output" left="10" top="10" bottom="10" right="10"/>
</mx:Application>

输入服务端URL,如http://localhost/Main.html#firstName=Flying;lastName=Li;age=30 进行测试。

 

上一次我们谈了一下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内容。可视选项卡的每一次改变最终将改变浏览器的历史记录,用户可以使用前进后退按钮导航支上一个或下一个可见的选项卡。

 

说到深层链接(Deep linking),少不了要讲一讲Flex 2中的HistoryManager。利用HistoryManager,用户可以使用Web 浏览器的后退和前进导航按钮在Flex 应用程序中导航,与Flex 3中的BrowserManager功能相似。

通常情况下,应使用BrowserManager类和深层链接来维护Flex 应用中的状态并处理URL和浏览器历史记录。但有些导航器容器(如Accordion和TabNavigator )默认情况下启用历史记录管理功能,因此这种情况下会比使用BrowserManager简单。但对于其他组件和容器,我们需要自定义历史记录管理,相对复杂,因此更多时候不使用HistoryManager类。

我们可通过将上述导航器容器的historyManagementEnabled 属性设置为false来禁用历史记录管理。要向HistoryManager 类注册一个组件,需要调用HistoryManager 类的
register()方法,还必须实现 IHistoryManagerClient 接口的saveState()loadState()方法。

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

创建自定义列表框后,我们必须向HistoryManager类注册其实例。一般是在creationComplete事件处理函数中注册,如下面的代码:

creationComplete="mx.managers.HistoryManager.register(this);"

IHistoryManagerClient接口要求在列表框中实现saveState和loadState方法。当该列表框的选项一更改,将调用listChanged方法,该方法会调用HistoryManager的save方法来保存用户当前选择的哪一选项。保存完成后会调用saveState方法,而该方法将返回一个对象来保存浏览器记录。在本例中,saveState方法返回属性为selectedIndex的对象,该属性值等于自定义列表框的选项索引。

当使用后退和前进导航按钮更改浏览器历史记录时,将调用loadState方法。该方法从State参数对象中读取 selectedIndex属性值并更改列表框的selectedIndex属性。

从本例也可以看出,使用HistoryManager和BrowserManager进行深层链接时,浏览器URL片段是不同的。前者会自动添加app参数,app参数值及其它参数名的前缀(状态ID)都是16进制压缩的字符串。注意HistoryManager是用&来分隔URL片段中的名称=值对。

抱歉!评论已关闭.