20.8.经由BrowserManager深度-链接容器

20.8.1 问题
我需要根据URL 参数控制Flex 3 容器内的科室内容
20.8.2 解决办法
使用BrowserManager 类和BrowserChangeEvents 控制可视性和跟踪可视Flex 组件的历史轨迹。
20.8.3 讨论
在此情形下,你是用URL 的fragment 片断来控制并跟踪Flex 应用里那些可视的容器和组件。

当加载应用程序的时候,你就初始化BrowserManager 类实例,该实例可以帮助你解析并处理浏览器URL。updateContainers 方法(下面代码段中的方法)决定mx:TabNavigator 实例内那些tab 项为可视的。每当该tab 导航器的可视tab 项改变的时候,你可以通过使用下面的代码段来设置URL fragment 片段中的selectedIndex 属性。
+展开
-ActionScript
bm.setFragment( "selectedIndex=" + tabNav.selectedIndex );

这就更新了浏览器的URL 并且将变化添加到浏览器历史记录中。如果有人复制粘贴当前浏览器的URL,则该用户可以直接连接到当前选中的tab 导航器。
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxmllayout="absolute"
creationComplete="onCreationComplete()">

<mx:Script>
<![CDATA[
import mx.events.BrowserChangeEvent;
import mx.managers.IBrowserManager;
import mx.managers.BrowserManager;
import mx.utils.URLUtil;
private var bm:IBrowserManager;
private function onCreationComplete() : void
{
//get an instance of the browser manager
bm = BrowserManager.getInstance();
//initialize the browser manager
bm.init();
//set visible containers based on url parameters
updateContainers();
//add event listeners to handle back/forward browser buttons
bm.addEventListener( BrowserChangeEvent.BROWSER_URL_CHANGE, onURLChange );
updateURL():
}
private function updateContainers():void
{
//convert url parameters to an actionscript object
var o:Object = URLUtil.stringToObject(bm.fragment);
//set the selected index
if ( !isNaN(o.selectedIndex) )
{
var newIndex : Number = o.selectedIndex;
if ( newIndex >= 0 && newIndex < tabNav.numChildren )
tabNav.selectedIndex = newIndex;
}
}
private function onURLChange( event:BrowserChangeEvent ):void
{
//call updateContainers when url value changes
updateContainers();
}
private function updateURL():void
{
bm.setFragment( "selectedIndex=" + tabNav.selectedIndex );
}

]]>
</mx:Script>
<mx:TabNavigator
bottom="10top="10right="10left="10id="tabNavhistoryManagementEnabled="false">

<mx:Canvas label="Tab 0show="updateURL()" >
<mx:Label text="Tab 0 Contents" />
</mx:Canvas>
<mx:Canvas label="Tab 1show="updateURL()" >
<mx:Label text="Tab 1 Contents" />
</mx:Canvas>
<mx:Canvas label="Tab 2show="updateURL()" >
<mx:Label text="Tab 2 Contents" />
</mx:Canvas>
</mx:TabNavigator>
</mx:Application>

你也可能已经注意到TabNavigator 上的historyManagementEnabled 参数已经设置为false 了。

这是因为你使用BrowserManager 类的事件来判断浏览器URL 是否已经改变,并据此更新tab项内容。每次可视tab 项的变化都会导致浏览器历史记录的变化;用户可以通过使用浏览器上的前进后退按钮在该tab 导航器的可视tab 项之间来回切换。

加支付宝好友偷能量挖...


评论(0)网络
阅读(81)喜欢(0)flash/flex/fcs/AIR