學習收藏: Flex之State狀態的使用 …

原文: http://www.cnblogs.com/orchid/archive/2009/07/18/1526310.html

與狀態有關的事件

下面接收4個與狀態有關的事件:

• enterState:進入一個新狀態後觸發，觸發者是state object和組件。
• exitState:一個狀態將要離開時觸發，觸發者是state object和組件。
• currentStateChanging：在狀態即將改變時觸發。它被一個currentState屬性值改變的組件觸發。你可以利用這個事件向服務器請求即將被新狀態用到的數據。
• currentStateChange：在一個狀態已經完全改變了後觸發。你可以利用這個事件向服務器發回一個數據，指明用戶當前的狀態。

看個實例好了！

<?xml version="1.0"?>
<!-- states\StatesSimpleEvent.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">
<s:states>
<!-- Define the new view states. -->
<s:State name="default"
enterState="MyEnterTA.text = 'Enter state: default';"
exitState="MyExitTA.text = 'Exit state: default';"/>
<s:State name="NewButton"
enterState="MyEnterTA.text = 'Enter state: NewButton';"
exitState="MyExitTA.text = 'Exit state: NewButton';"/>
</s:states>
<s:VGroup id="g1">
<s:HGroup>
<s:Button id="b1" label="Click Me"
enabled.NewButton="false"/>
<s:Button id="b2" label="New Button"
includeIn="NewButton"/>
</s:HGroup>
<s:Button label="Change to NewButton state"
click="currentState='NewButton';"/>
<s:Button label="Change to default view state"
click="currentState='default';"/>
<s:TextArea id="MyEnterTA"/>
<s:TextArea id="MyExitTA"/>
</s:VGroup>
</s:Application>

 

用瀏覽器切換狀態

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:SimpleText includeIn="results"
text="Search results for {searchString}"/>
</s:Panel>
</s:Application>

有點長哦！
在這個實例中，當用戶改變狀態時，updateURL()就會將相應的地址寫到瀏覽器的地址欄，當按瀏覽器的前進或者後退按鈕時，parseURL()方法會從URL中獲得當前狀態值，並且改變狀態。