一、概述
二、LIB庫包配置
- 下載需要的LIB庫
- Spring AS 依賴包
as3commons-bytecode-0.7.swc、as3commons-lang-0.3.swc、as3commons-logging-1.2.swc、as3commons-reflect-1.3.1.swc - Spring AS：
核心庫：spring-actionscript-core-1.1.swc、針對於cairngorm3的庫 spring-actionscript-cairngorm-1.1.swc - 導航庫LIB庫：
navigationSpringAS-1.7.swc![]()
- Spring AS 依賴包
- 設置編譯屬性
打開工程屬性選擇 Flex 編譯器選項卡，在“附加的編譯器參數”添加“ -include-libraries flex_libs/as3commons-reflect-1.3.1.swc flex_libs/as3commons-lang-0.3.swc flex_libs/as3commons-logging-1.2.swc ”。將依賴包添加到編譯器裏面編譯，這樣在啓動時才能使用Spring AS。![]()
三、定義導航點 ContentDestination
package cn.com.enboga.scdemo.core.application
{
public class ContentDestination
{
public static const LOGIN:String = "content.login";
public static const MAIN:String = "content.main";
public static const MAIN_TRUE:String = "content.main.true";
public static const MAIN_FALSE:String = "content.main.false";
}
}
四、設置導航器，並設置導航點
在導航器裏面需要定義元數據[Waypoint]設置爲導航器，然後設置每個導航點的automationName爲上面定義的導航點名稱。這樣導航點時候可以根據這個名字導航到這個導航點上。
<?xml version="1.0" encoding="utf-8"?>
<mx:ViewStack xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"
xmlns:main="cn.com.enboga.scdemo.core.presentation.main.*"
xmlns:login="cn.com.enboga.scdemo.core.presentation.login.*">
<fx:Metadata>
[Waypoint]
</fx:Metadata>
<fx:Script>
<![CDATA[
import cn.com.enboga.scdemo.core.application.ContentDestination;
]]>
</fx:Script>
<s:NavigatorContent width="100%"
height="100%"
automationName="{ ContentDestination.LOGIN }">
<login:UILoginGroup />
</s:NavigatorContent>
<s:NavigatorContent width="100%"
height="100%"
automationName="{ ContentDestination.MAIN }">
<main:UIMainGroup />
</s:NavigatorContent>
</mx:ViewStack>
五、接下來爲導航器定義一個PM
navigateTo 方法傳入導航點名稱，就可以導航定位到該導航點
package cn.com.enboga.scdemo.core.presentation
{
import com.adobe.cairngorm.LogUtil;
import com.adobe.cairngorm.navigation.NavigationEvent;
import com.adobe.cairngorm.navigation.state.ISelectedIndex;
import mx.logging.ILogger;
import org.springextensions.actionscript.core.event.EventBus;
[Landmark(name="content")]
public class ContentPM implements ISelectedIndex
{
private static const LOG:ILogger = LogUtil.getLogger(ContentPM);
[Bindable]
/** 導航索引 */
public var selectedIndex:int;
[Enter(time="first")]
public function firstEnter():void
{
LOG.info("content:FirstEnter");
}
[Enter(time="next")]
public function enter():void
{
LOG.info("content:Enter");
}
[Exit]
public function exit():void
{
LOG.info("content:Exit");
}
/** 導航到destination */
public function navigateTo(destination:String):void
{
EventBus.dispatchEvent(NavigationEvent.createNavigateToEvent(destination));
}
/** 導航到destination */
public function navigateAway(destination:String):void
{
EventBus.dispatchEvent(NavigationEvent.createNavigateAwayEvent(destination));
}
}
}
六、將導航器組件加入到Spring AS 配置文件
- 定義配置文件
<?xml version="1.0" encoding="utf-8"?> <Objects xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://www.springactionscript.org/mxml/config" xmlns:application="cn.com.enboga.scdemo.core.application.*" xmlns:presentation="cn.com.enboga.scdemo.core.presentation.*" xmlns:stage="org.springextensions.actionscript.stage.*" xmlns:config="org.springextensions.actionscript.ioc.factory.config.*" xmlns:cairngorm="http://ns.adobe.com/cairngorm" xmlns:main="cn.com.enboga.scdemo.core.presentation.main.*" xmlns:login="cn.com.enboga.scdemo.core.presentation.login.*"> <!-- Presentation --> <presentation:ContentPM /> <!-- Application --> <!-- Infrastructure --> <!--Spring AS specific initializations--> <stage:DefaultAutowiringStageProcessor/> <config:EventHandlerMetadataProcessor/> <cairngorm:NavigationAdaptor/> <cairngorm:FirstEnterProcessor/> <cairngorm:EveryEnterProcessor/> <cairngorm:NextEnterProcessor/> <cairngorm:ExitProcessor/> <cairngorm:LandmarkProcessor/> <cairngorm:WaypointProcessor/> <cairngorm:WaypointHistory id="contentHistory"> <mx:String>content</mx:String> </cairngorm:WaypointHistory> <cairngorm:GlobalHistory id="globalHistory"/> </Objects>
- 加載配置文件，這裏是使用的是MXML的加載模式，也可以使用配置文件的加載模式。
同時把導航器放入主容器裏面。<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:cairngorm="com.adobe.cairngorm.*" minWidth="955" minHeight="600" creationComplete="creationCompleteHandler()" xmlns:presentation="cn.com.enboga.scdemo.core.presentation.*"> <fx:Script> <![CDATA[ import cn.com.enboga.scdemo.ContentContext; import cn.com.enboga.scdemo.core.presentation.UIContentViewStack; import mx.controls.Alert; import mx.events.FlexEvent; import mx.logging.LogEventLevel; import org.springextensions.actionscript.context.support.FlexXMLApplicationContext; import org.springextensions.actionscript.context.support.MXMLApplicationContext; /** Spring 上下文 */ private var _appContext:FlexXMLApplicationContext = new FlexXMLApplicationContext(); private var appContext:MXMLApplicationContext; /** 初始化 */ protected function creationCompleteHandler():void { // _appContext = new FlexXMLApplicationContext(); // _appContext.addConfigLocation("config/application-context.xml"); // _appContext.addEventListener(Event.COMPLETE, applicationContext_completeHandler); // _appContext.addEventListener(IOErrorEvent.IO_ERROR, applicationContext_ioErrorHandler); // _appContext.load(); appContext = new MXMLApplicationContext(ContentContext); appContext.load(); } /** Spring 配置文件初始化完成後執行 */ private function applicationContext_completeHandler(event:Event):void { this.addElement(new UIContentViewStack()); } /** Spring 配置文件初始化錯誤 */ private function applicationContext_ioErrorHandler(event:IOErrorEvent):void { Alert.show("讀取StringAS配置文件出錯！", "錯誤"); } ]]> </fx:Script> <fx:Declarations> <!-- 定義日誌 --> <mx:TraceTarget level="{ LogEventLevel.ALL }" includeCategory="true"> <mx:filters> <fx:Array> <fx:String>com.adobe.cairngorm.*</fx:String> <fx:String>cn.com.enboga.scdemo.*</fx:String> </fx:Array> </mx:filters> </mx:TraceTarget> </fx:Declarations> <presentation:UIContentViewStack /> </s:Application>
七、在導航點裏面導航到其他導航點
- UILoginGroup.mxml
<?xml version="1.0" encoding="utf-8"?> <s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"> <fx:Script> <![CDATA[ import cn.com.enboga.scdemo.core.application.ContentDestination; import cn.com.enboga.scdemo.core.presentation.ContentPM; [Bindable] [Autowired] public var contentPM:ContentPM; ]]> </fx:Script> <s:Button label="首頁" click="contentPM.navigateTo(ContentDestination.MAIN)" /> <s:Button label="true" click="contentPM.navigateTo(ContentDestination.MAIN_TRUE)" /> <s:Button label="false" click="contentPM.navigateTo(ContentDestination.MAIN_FALSE)" /> </s:VGroup>
- UIMainGroup.mxml
<?xml version="1.0" encoding="utf-8"?> <s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300" xmlns:main="cn.com.enboga.scdemo.core.presentation.main.*"> <fx:Script> <![CDATA[ import cn.com.enboga.scdemo.core.application.ContentDestination; import cn.com.enboga.scdemo.core.presentation.ContentPM; [Bindable] [Autowired] public var contentPM:ContentPM; ]]> </fx:Script> <s:Button label="返回登錄" click="contentPM.navigateTo(ContentDestination.LOGIN)" /> <s:Button label="true" click="contentPM.navigateTo(ContentDestination.MAIN_TRUE)" /> <s:Button label="false" click="contentPM.navigateTo(ContentDestination.MAIN_FALSE)" /> <main:UIMainViewStack /> </s:VGroup>
- UIMainViewStack.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:ViewStack xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"> <fx:Metadata> [Waypoint] </fx:Metadata> <fx:Script> <![CDATA[ import cn.com.enboga.scdemo.core.application.ContentDestination; ]]> </fx:Script> <s:NavigatorContent width="100%" height="100%" automationName="{ ContentDestination.MAIN_TRUE }"> <s:Label text="MAIN_TRUE" /> </s:NavigatorContent> <s:NavigatorContent width="100%" height="100%" automationName="{ ContentDestination.MAIN_FALSE }"> <s:Label text="MAIN_FALSE" /> </s:NavigatorContent> </mx:ViewStack>