[url]http://kabike.iteye.com/blog/1851032[/url]里我们已经有了列表页面,下面弄个简单的"列表-查看"页面.在传统的web程序中,查看页面往往是url的跳转.在flash中,页面的迁移则可以用组件的显示与隐藏来进行.
先看一个半成品.
[img]http://dl.iteye.com/upload/picture/pic/125158/eb87f6a2-959a-3591-afe7-9c241d688c1a.jpg[/img]
列表页面和查看页面就这么暴露在光天化日之下.为了实现web页面那种效果,我们可以用viewStack那一套把这两个容器装进一个更大的容器中,控制大容器子容器的显示,或者用view state,这里我们用一下页面state.
最终代码如下:
注意到我们一开始用
定义了这个application所能够切换的所有状态.其中列表里的第一个将作为这个页面的初始状态.
在列表和详细容器上,则利用includeIn这个属性指定这个容器应该在哪个状态时出现.而this.currentState="list";这样的语句则将当前的application的状态进行切换,
这个是列表页面
[img]http://dl.iteye.com/upload/picture/pic/125160/a45a3ec8-5eaa-3272-8534-ff553e518791.jpg[/img]
这个是详细页面
[img]http://dl.iteye.com/upload/picture/pic/125162/8288f7b8-8d49-3429-b195-ba9636c99a85.jpg[/img]
先看一个半成品.
<?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>
[img]http://dl.iteye.com/upload/picture/pic/125158/eb87f6a2-959a-3591-afe7-9c241d688c1a.jpg[/img]
列表页面和查看页面就这么暴露在光天化日之下.为了实现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的状态进行切换,
这个是列表页面
[img]http://dl.iteye.com/upload/picture/pic/125160/a45a3ec8-5eaa-3272-8534-ff553e518791.jpg[/img]
这个是详细页面
[img]http://dl.iteye.com/upload/picture/pic/125162/8288f7b8-8d49-3429-b195-ba9636c99a85.jpg[/img]