浏览器前进后退按钮切换状态

Flex browser manager能够让用户通过浏览器的前进后退按钮来导航应用。因为这个browser manager能够对状态的切换进行跟踪。   
以前说过，每个状态是个新的界面，而不是一个新的页面。但是用浏览器也能实现不同状态之间的切换。如何做到呢？先看看背景知识。
BrowserManager:一个 Singleton 管理器，用于充当浏览器和应用程序之间的代理。使用它可以访问浏览器地址栏中的 URL，这与访问 JavaScript 中的 document.location 属性类似。它有一个getInstance() 方法，返回的是一个IBrowserManager类的实例。
IBrowserManager:由 BrowserManager 的共享实例实现的接口。init()方法：初始化 BrowserManager。fragment属性：当前 URL 显示在浏览器地址栏中时，“#”之后的部分。

<?xml version="1.0"?>
<!-- states\StatesBrowserManager.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:mx="library://ns.adobe.com/flex/halo"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   creationComplete="initApp();">
	<fx:Script>
		<![CDATA[
			import mx.managers.BrowserManager;
			import mx.managers.IBrowserManager;
			import mx.events.BrowserChangeEvent;
			import mx.utils.URLUtil;
			// The search string value.
			[Bindable]
			public var searchString:String;
			// 一个 BrowserManager 类的实例.
			private var browserManager:IBrowserManager;
			//在应用创建完成时初始化 BrowserManager.
			public function initApp():void {
				browserManager = BrowserManager.getInstance();
				browserManager.addEventListener(BrowserChangeEvent.BROWSER_URL_CHANGE, parseURL);
				browserManager.init("", "Browser Manager for View States");
				updateURL('default');
			}
			// 当用户按前进后退按钮时触发事件，事件处理器从URL里接到状态的值，从而。用他
			//设定当前状态。 
			private var stateFromURL:String;
			private function parseURL(e:Event):void {
				var o:Object = URLUtil.stringToObject(browserManager.fragment);
				stateFromURL = o.state;
				currentState=stateFromURL;
			}
			// 状态改变时改变地址。
			private function updateURL(myCurrentState:String):void {
				var s:String = "state=" + myCurrentState;
				browserManager.setFragment(s);
			}
			// 当按下go按钮时执行该方法。
			// 它会改变状态以及调用updateURL()方法来改变URL。
			public function doSearch():void {
				currentState = "results";
				updateURL('results');
				searchString = searchInput.text;
			}
			// 点击reset按钮时执行该方法，该方法是状态改到默认值，。并且改变URL
			public function reset():void {
				currentState = '';
				searchInput.text = "";
				searchString = "";
				updateURL('default');
			}
		]]>
	</fx:Script>
	<s:states>
		<!-- The state for displaying the search results -->
		<s:State name="default"/>
		<s:State name="results"/>
	</s:states>
	<!-- In the default state, just show a panel
	with a search text input and button. -->
	<s:Panel id="panel1"
			 title="Search" title.results="Results"
			 resizeEffect="Resize"
			 width="10%" height="10%"
			 width.results="100%" height.results="100%">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
		<s:SkinnableContainer id="searchFields" defaultButton="{b}">
			<s:layout>
				<s:HorizontalLayout/>
			</s:layout>
			<s:TextInput id="searchInput"/>
			<s:Button id="b"
					  label="Go"
					  click="doSearch();"/>
			<s:Button includeIn="results"
					  label="Reset"
					  click="reset();"/>
		</s:SkinnableContainer>
		<s:TextInput includeIn="results"
					  text="Search results for {searchString}"/>
	</s:Panel>
</s:Application>