Flex的一点入门经验(3)--利用state进行页面切换

http://kabike.iteye.com/blog/1851032里我们已经有了列表页面,下面弄个简单的"列表-查看"页面.在传统的web程序中,查看页面往往是url的跳转.在flash中,页面的迁移则可以用组件的显示与隐藏来进行.
先看一个半成品.

<?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"
			   minWidth="955" minHeight="600" creationComplete="init()">
	<fx:Declarations>
		<s:RemoteObject id="studentRO" destination="student">
			<s:method name="findStudentList" result="studentList=event.result as ArrayCollection"/>
		</s:RemoteObject>
		
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import com.crap.event.CrapEvent;
			import com.crap.model.Student;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			
			[Bindable]
			private var currentStudent:Student;
			
			[Bindable]
			private var studentList:ArrayCollection;
			
			private function init():void{
				this.addEventListener("edit",foo);
				this.addEventListener("show",onShow);
			}
			
			private function onShow(event:CrapEvent):void{
				var  student:Student=event.data as Student;
				this.currentStudent=student;
			}
			
			private function onShowReturn():void{
				
			}
			
			private function foo(event:CrapEvent):void{
				var  student:Student=event.data as Student;
				Alert.show(event.type+student.id);
			}
		]]>
	</fx:Script>
	
	
	
	<s:VGroup>
			<s:Button label="刷新" click="studentRO.findStudentList()"/>
		
		<s:DataGrid id="studentDG" width="100%" dataProvider="{studentList}">
			<s:columns>
				<s:ArrayList>
					<s:GridColumn dataField="id" headerText="ID"/>
					<s:GridColumn dataField="name" headerText="姓名"/>
					<s:GridColumn headerText="操作">
						<s:itemRenderer>
							<fx:Component>
								<s:GridItemRenderer>
									<fx:Script>
										<![CDATA[
											import com.crap.event.CrapEvent;
											import com.crap.model.Student;
											private function sendEvent(type:String,data:Student):void{
												var event:CrapEvent=new CrapEvent(type,true);
												event.data=data;
												this.dispatchEvent(event);
											}
										]]>
									</fx:Script>
									
									<s:layout>
										<s:HorizontalLayout/>
									</s:layout>
									
									<s:Button label="编辑" click="sendEvent('edit',data as Student)"/>
									<s:Button label="查看" click="sendEvent('show',data as Student);"/>
								</s:GridItemRenderer>
							</fx:Component>
						</s:itemRenderer>
					</s:GridColumn>
				</s:ArrayList>
			</s:columns>
		</s:DataGrid>
	</s:VGroup>
	
	<s:VGroup width="100%" x="30" y="400">
		<s:Label text="{currentStudent.name}"/>
		<s:Button label="返回" click="onShowReturn()"/>
	</s:VGroup>
	
	
</s:Application>

列表页面和查看页面就这么暴露在光天化日之下.为了实现web页面那种效果,我们可以用viewStack那一套把这两个容器装进一个更大的容器中,控制大容器子容器的显示,或者用view state,这里我们用一下页面state.
最终代码如下:

<?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"
			   minWidth="955" minHeight="600" creationComplete="init()">
	<fx:Declarations>
		<s:RemoteObject id="studentRO" destination="student">
			<s:method name="findStudentList" result="studentList=event.result as ArrayCollection"/>
		</s:RemoteObject>
		
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import com.crap.event.CrapEvent;
			import com.crap.model.Student;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			
			[Bindable]
			private var currentStudent:Student;
			
			[Bindable]
			private var studentList:ArrayCollection;
			
			private function init():void{
				this.addEventListener("edit",foo);
				this.addEventListener("show",onShow);
			}
			
			private function onShow(event:CrapEvent):void{
				var  student:Student=event.data as Student;
				this.currentStudent=student;
				this.currentState="show";
			}
			
			private function onShowReturn():void{
				this.currentState="list";
			}
			
			private function foo(event:CrapEvent):void{
				var  student:Student=event.data as Student;
				Alert.show(event.type+student.id);
			}
		]]>
	</fx:Script>
	
	<s:states>
		<s:State name="list"/>
		<s:State name="add"/>
		<s:State name="edit"/>
		<s:State name="show"/>
	</s:states>
	
	<s:VGroup includeIn="list">
			<s:Button label="刷新" click="studentRO.findStudentList()"/>
		
		<s:DataGrid id="studentDG" width="100%" dataProvider="{studentList}">
			<s:columns>
				<s:ArrayList>
					<s:GridColumn dataField="id" headerText="ID"/>
					<s:GridColumn dataField="name" headerText="姓名"/>
					<s:GridColumn headerText="操作">
						<s:itemRenderer>
							<fx:Component>
								<s:GridItemRenderer>
									<fx:Script>
										<![CDATA[
											import com.crap.event.CrapEvent;
											import com.crap.model.Student;
											private function sendEvent(type:String,data:Student):void{
												var event:CrapEvent=new CrapEvent(type,true);
												event.data=data;
												this.dispatchEvent(event);
											}
										]]>
									</fx:Script>
									
									<s:layout>
										<s:HorizontalLayout/>
									</s:layout>
									
									<s:Button label="编辑" click="sendEvent('edit',data as Student)"/>
									<s:Button label="查看" click="sendEvent('show',data as Student);"/>
								</s:GridItemRenderer>
							</fx:Component>
						</s:itemRenderer>
					</s:GridColumn>
				</s:ArrayList>
			</s:columns>
		</s:DataGrid>
	</s:VGroup>
	
	<s:VGroup width="100%" includeIn="show">
		<s:Label text="{currentStudent.name}"/>
		<s:Button label="返回" click="onShowReturn()"/>
	</s:VGroup>
	
	
</s:Application>

注意到我们一开始用

<s:states>
		<s:State name="list"/>
		<s:State name="add"/>
		<s:State name="edit"/>
		<s:State name="show"/>
	</s:states>

定义了这个application所能够切换的所有状态.其中列表里的第一个将作为这个页面的初始状态.
在列表和详细容器上,则利用includeIn这个属性指定这个容器应该在哪个状态时出现.而this.currentState="list";这样的语句则将当前的application的状态进行切换,

这个是列表页面


这个是详细页面