Flex开发中多个module之间切换,在一个module页面中切换到另外一个module
2014-11-12 10:47
423 查看
在最近的开发中,需要在代码中实现页面的是互相切换。并不需要通过Application界面进行切换,查阅了多个资料,发现实现的方法都不是简单易懂的,自己找了一下资料并研究发现,直接通过下述方法就可以直接进行module页面的切换。使用这种方法实现页面切换,页面间的值传递也相对简单。
实现方法:在一个module页面中,定义两个panel面板,也就是两个页面需要显示的内容。然后定义好每个页面panel面板的状态,定义好includeIn属性,两个页面的includeIn属性是不一样的,然后通过设定currentState来设定需要显示的是哪个页面。由于两个panel页面定义在一个module页面中,页面之间的传值简单易实现。
废话不多说,代码实现如下:
<?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">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
[Bindable]
private var grid:ArrayCollection =new ArrayCollection( //主界面显示数据
[{number:"2014010101",name:"张三",sex:"男",age:"23"},
{number:"2014010102",name:"李四",sex:"女",age:"23"},
{number:"2014010103",name:"李四",sex:"男",age:"23"},
{number:"2014010104",name:"张三",sex:"男",age:"23"},
{number:"2014010105",name:"张三",sex:"男",age:"23"},
{number:"2014010106",name:"张三",sex:"男",age:"23"},
{number:"2014010107",name:"张三",sex:"男",age:"23"},
{number:"2014010108",name:"张三",sex:"男",age:"23"}
])
<span style="color:#ff0000;"> public function modify():void
{
this.currentState='downloadState';
}
public function change():void
{
this.currentState='modifyState';
}</span>
]]>
</fx:Script>
<s:Panel title="信息修改" width="100%"<span style="color:#ff0000;"> includeIn="modifyState"</span>>
<mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="60" paddingRight="60" paddingTop="40">
<mx:DataGrid id="datagrid" dataProvider="{grid}" rowCount="{grid.length+1}" width="100%" verticalAlign="middle" textAlign="center" allowDragSelection="true" allowMultipleSelection="true">
<mx:columns>
<mx:DataGridColumn headerText="学号" dataField="number"/>
<mx:DataGridColumn headerText="姓名" dataField="name"/>
<mx:DataGridColumn headerText="性别" dataField="sex"/>
<mx:DataGridColumn headerText="年龄" dataField="age"/>
<mx:DataGridColumn headerText="爱好" dataField="hobby"/>
</mx:columns>
</mx:DataGrid>
<mx:HBox width="100%" horizontalAlign="center" height="35" verticalAlign="middle" fontSize="12">
<s:Button id="popup" label="增加爱好信息" <span style="color:#ff0000;">click="modify()"</span>/>
</mx:HBox>
</mx:VBox>
</s:Panel>
<s:Panel title="信息下载" width="100%"<span style="color:#ff0000;"> includeIn="downloadState"</span>>
<mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="60" paddingRight="60" paddingTop="40">
<mx:DataGrid id="datagrid1" dataProvider="{grid}" rowCount="{grid.length+1}" width="100%" verticalAlign="middle" textAlign="center" allowDragSelection="true" allowMultipleSelection="true">
<mx:columns>
<mx:DataGridColumn headerText="学号" dataField="number"/>
<mx:DataGridColumn headerText="姓名" dataField="name"/>
<mx:DataGridColumn headerText="变化的页面" dataField="test"/>
<mx:DataGridColumn headerText="性别" dataField="sex"/>
<mx:DataGridColumn headerText="年龄" dataField="age"/>
<mx:DataGridColumn headerText="爱好" dataField="hobby"/>
</mx:columns>
</mx:DataGrid>
<mx:HBox width="100%" horizontalAlign="center" height="35" verticalAlign="middle" fontSize="12">
<s:Button id="popup1" label="增加爱好信息" <span style="color:#ff0000;">click="change()"/</span>>
</mx:HBox>
</mx:VBox>
</s:Panel>
<span style="color:#ff0000;"> <s:states>
<s:State name="downloadState" />
<s:State name="modifyState" />
</s:states></span>
</s:Application>标红的部分是现在这个功能的主要代码。通过修改this.currentState的值来确定需要显示的界面。
实现后的界面效果如下:
![](http://img.blog.csdn.net/20141112123809321?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZ2h0ODk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
点击按钮之后,替换显示界面:
![](http://img.blog.csdn.net/20141112123819664?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZ2h0ODk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
好的,搞定!
实现方法:在一个module页面中,定义两个panel面板,也就是两个页面需要显示的内容。然后定义好每个页面panel面板的状态,定义好includeIn属性,两个页面的includeIn属性是不一样的,然后通过设定currentState来设定需要显示的是哪个页面。由于两个panel页面定义在一个module页面中,页面之间的传值简单易实现。
废话不多说,代码实现如下:
<?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">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
[Bindable]
private var grid:ArrayCollection =new ArrayCollection( //主界面显示数据
[{number:"2014010101",name:"张三",sex:"男",age:"23"},
{number:"2014010102",name:"李四",sex:"女",age:"23"},
{number:"2014010103",name:"李四",sex:"男",age:"23"},
{number:"2014010104",name:"张三",sex:"男",age:"23"},
{number:"2014010105",name:"张三",sex:"男",age:"23"},
{number:"2014010106",name:"张三",sex:"男",age:"23"},
{number:"2014010107",name:"张三",sex:"男",age:"23"},
{number:"2014010108",name:"张三",sex:"男",age:"23"}
])
<span style="color:#ff0000;"> public function modify():void
{
this.currentState='downloadState';
}
public function change():void
{
this.currentState='modifyState';
}</span>
]]>
</fx:Script>
<s:Panel title="信息修改" width="100%"<span style="color:#ff0000;"> includeIn="modifyState"</span>>
<mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="60" paddingRight="60" paddingTop="40">
<mx:DataGrid id="datagrid" dataProvider="{grid}" rowCount="{grid.length+1}" width="100%" verticalAlign="middle" textAlign="center" allowDragSelection="true" allowMultipleSelection="true">
<mx:columns>
<mx:DataGridColumn headerText="学号" dataField="number"/>
<mx:DataGridColumn headerText="姓名" dataField="name"/>
<mx:DataGridColumn headerText="性别" dataField="sex"/>
<mx:DataGridColumn headerText="年龄" dataField="age"/>
<mx:DataGridColumn headerText="爱好" dataField="hobby"/>
</mx:columns>
</mx:DataGrid>
<mx:HBox width="100%" horizontalAlign="center" height="35" verticalAlign="middle" fontSize="12">
<s:Button id="popup" label="增加爱好信息" <span style="color:#ff0000;">click="modify()"</span>/>
</mx:HBox>
</mx:VBox>
</s:Panel>
<s:Panel title="信息下载" width="100%"<span style="color:#ff0000;"> includeIn="downloadState"</span>>
<mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="60" paddingRight="60" paddingTop="40">
<mx:DataGrid id="datagrid1" dataProvider="{grid}" rowCount="{grid.length+1}" width="100%" verticalAlign="middle" textAlign="center" allowDragSelection="true" allowMultipleSelection="true">
<mx:columns>
<mx:DataGridColumn headerText="学号" dataField="number"/>
<mx:DataGridColumn headerText="姓名" dataField="name"/>
<mx:DataGridColumn headerText="变化的页面" dataField="test"/>
<mx:DataGridColumn headerText="性别" dataField="sex"/>
<mx:DataGridColumn headerText="年龄" dataField="age"/>
<mx:DataGridColumn headerText="爱好" dataField="hobby"/>
</mx:columns>
</mx:DataGrid>
<mx:HBox width="100%" horizontalAlign="center" height="35" verticalAlign="middle" fontSize="12">
<s:Button id="popup1" label="增加爱好信息" <span style="color:#ff0000;">click="change()"/</span>>
</mx:HBox>
</mx:VBox>
</s:Panel>
<span style="color:#ff0000;"> <s:states>
<s:State name="downloadState" />
<s:State name="modifyState" />
</s:states></span>
</s:Application>标红的部分是现在这个功能的主要代码。通过修改this.currentState的值来确定需要显示的界面。
实现后的界面效果如下:
点击按钮之后,替换显示界面:
好的,搞定!
相关文章推荐
- Android的一个项目中,实现页面之间切换时的动画效果
- 用node.js+express.js+mongodb+jade开发一个完整的项目笔记(1)【页面即页面之间逻辑的制作】
- ITEXT实例学习与研究(二) 之 创建一个细长的浅黄色背景的页面以及纵向页面与横向页面之间的切换
- 编写一个项目,实现页面之间切换时的动画效果。上传代码并描述步骤
- android studio 开发过程中怎么解决同一个项目下,两module之间的相互访问
- FLEX:一个页面包含(或者说是引用)另外一个页面
- Apache模块开发/用C语言扩展apache(3:一个非常简单的apache module)
- GridView跳转到另外一个页面2种方法
- 关于提高Flex开发效率的一个模式设想
- 在Java applet中如何显示另外一个HTML页面
- flex开发air工程选项卡页面导航布局
- 一个通过Flash设计与Flex结合开发的网站www.mapgle.cn
- 用一个自动刷新的页面来刷新另外一个页面
- Flex中两个Application页面之间的传值
- YSlow是yahoo美国开发的一个页面评分插件,非常的棒,从中我们可以看出我们页面上的很多不足,并且可以知道我们改怎么却改进和优化。
- Flex 3 Module的一个诡异bug
- 关于flex的module开发
- 软件开发企业的一个研发、转发与销售之间的微笑模型
- [导入]一个通过Flash设计与Flex结合开发的网站www.mapgle.cn
- 何时一个类的指针可以强制转化为另外一个类的指针,即使它们之间没有派生关系?