- 浏览: 274770 次
- 性别:
- 来自: 西安
文章分类
最新评论
-
JQ_AK47:
谢谢你的ANT 五篇博文让我对Ant了解入门。
用Ant实现Java项目的自动构建和部署(4) -
lanluo:
这个源码,能给我一份吗?
自定义标签感想 -
mapeijie888:
google 翻译 用的不错
AMF使用简介 -
满分水:
如果有看到,讲解一下,谢谢!
IIs工作原理 -
满分水:
想了解一下IIS服务器是怎样与我们的web应用程序间交互的,终 ...
IIs工作原理
在Flex 程序中,引入了状态设计的概念。在一个程序中,按照功能的需求,将界面切分成相对独立的部分。运行过程中,随着用户交互,界面在各个部分之间切换。比如在购物车程序中,登录界面、选购商品界面、购物车界面、付款界面,这些部分代表着不同的功能,显示当前程序的运行状态,每个界面便是一个状态(Status)。
在一个复杂的程序中,将程序按照功能进行结构划分是非常重要的,这样,问题会变得明了,这也是使用状态设计的原因。
其实,我们和状态打过很多交道,只不过没有把它理论化。比如,鼠标的点击动作,也是由几个状态组成的:鼠标移上、鼠标按下、鼠标松开、鼠标移开。用这种视角来分析问题,条理就很清楚,不容易陷入令人烦恼的逻辑纠纷中。
当状态发生改变时,我们可以为两个状态的切换添加形变动画。形变动画由若干个动画效果组成,可以理解为:状态的切换也是行为的一种,因此,形变动画的创建和使用与行为一样,非常简单。
在Flex中,状态的创建也是很简单的。我们不需要花费时间在界面的设计上,也不用去关心状态的运作方式,这些都由Flex来完成。
所有的组件都实现了状态机制,一般情况下,容器类组件或有容器特色的组件和状态机制是最佳组合,这样状态机制就可以控制程序的一个功能块。
请看实例demo.mxml的源程序:
<?xml version="1.0" ?>
<!-- Simple example to demonstrate the States class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
private function clickHandler(event:Event):void {
Alert.show("Do you want to save your changes?", "Save Changes", 3, this, alertClickHandler);
}
// Event handler function for displaying the selected Alert button.
private function alertClickHandler(event:CloseEvent):void {
if (event.detail==Alert.YES)
{
//status.text="You answered Yes";
lable1.text = "Please Login!";
currentState='';
}
else
{
currentState='Register';
//status.text="You answered No";
}
}
]]>
</mx:Script>
<!-- Define one view state, in addition to the base state.-->
<mx:states>
<mx:State name="Register">
<mx:AddChild relativeTo="{loginForm}" position="lastChild">
<mx:target>
<mx:FormItem id="confirm" label="Confirm:">
<mx:TextInput/>
</mx:FormItem>
</mx:target>
</mx:AddChild>
<mx:AddChild relativeTo="{loginForm}" position="lashChild">
<mx:target>
<mx:FormItem id="email" label="Email:">
<mx:TextInput id="emailId"/>
</mx:FormItem>
</mx:target>
</mx:AddChild>
<mx:SetProperty target="{loginPanel}" name="title" value="Register"/>
<mx:SetProperty target="{loginButton}" name="label" value="Register"/>
<mx:SetEventHandler target="{loginButton}" name="click" handlerFunction="clickHandler" />
<mx:SetStyle target="{loginButton}"
name="color" value="blue"/>
<mx:RemoveChild target="{registerLink}"/>
<mx:AddChild relativeTo="{spacer1}" position="before">
<mx:target>
<mx:LinkButton id="loginLink" label="Return to Login" click="currentState=''"/>
</mx:target>
</mx:AddChild>
</mx:State>
</mx:states>
<!-- Define a Panel container that defines the login form.-->
<mx:Panel title="Login" id="loginPanel"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Text width="100%" color="blue" id="lable1"
text="Click the 'Need to Register?' link to change state. Click the 'Return to Login' link to return to the base state."/>
<mx:Form id="loginForm" >
<mx:FormItem label="Username:">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="Password:">
<mx:TextInput/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar>
<mx:LinkButton id="registerLink" label="Need to Register?"
click="currentState='Register'"/>
<mx:Spacer width="100%" id="spacer1"/>
<mx:Button label="Login" id="loginButton"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
这里在mx:states标签中添加了一对mx:State标签,用来定义一个状态,并命名为“detail”。在State对象可以使用如下方法:
l SetEventHandler:设置对象某一事件的监听方法
l SetProperty:设置对象的属性
l SetStyle:设置对象的样式
l AddChild:向对象添加一个子级元素
l RemoveChild:删除一个子级元素
l Transition:设置状态的过渡动画效果
当程序或组件切换到目标状态时,里面添加的方法就会被自动调用。
在上面的实例中,使用了AddChild和RemoveChild方法。其中AddChild的relativeTo属性表示目标容器,position表示新对象在容器中的位置,可选的值有before、after、firstChild和lastChild。
<mx:AddChild relativeTo="{contentPanel}" position="lastChild" creationPolicy="all">
……
</mx:AddChild>
position 默认是lastChild,表示在所有子级元素的最后;firstChild表示添加在目标的所有子级元素最前面;before和after分别表示添加到对象的所在容器中,处于对象位置的前面和后面。在添加对象时,creationPolicy可以控制对象对子级元素的显示操作,可选的值有:all, auto,none和queued。all表示总是创建对象;auto表示只有需要对象时才创建;queued表示将对象放在等待创建的队列中,对象完成初始化再开始创建子级元素;none则表示不创建对象,直到调用了createComponentsFromDescriptors函数时才创建它。默认为auto,有时为了强迫对象总是显示出来,可以设为all。如果没有特殊的需求,设为all就可以了。
RemoveChild使用起来比较简单,只要指定目标即可:
<mx:RemoveChild target="{img}"></mx:RemoveChild>
这条语句表示删除img对象。
在使用State对象时,currentState属性代表了当前对象的状态,利用它我们可以很方便地操作状态的切换。在函数changeState中,就是利用currentState来改变状态的:
//判断当前状态,状态默认为空值
if(currentState == "detail"){
currentState = ""; //切换到默认状态
btn.label = "了解详情"; //修改按钮的文字
}else{
currentState = "detail"; //切换到detail状态
btn.label = "返回简介";
}
在从默认状态切换到“detail”状态时,<mx:State name = "detail">…< mx:State>标签内的代码开始执行。如果再次返回默认状态,所有的物件仍会恢复原貌。也就是说,“detail”状态下通过 AddChild、RemoveChild等进行的修改不会影响默认状态,被删除的物件仍然还在。
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/YooLive/archive/2008/05/08/2417661.aspx
评论
发表评论
-
史上最全Flex网站集合
2010-07-27 17:19 1527一、国外站点 1.资源 类 Adobe Flex 2 C ... -
flex 弹出对话框
2009-08-18 12:29 2198******************************* ... -
Flex Junit单元测试
2009-08-03 17:57 1089在java中使用比较多的测试工具就是Junit,现在Flex也 ... -
Flex显示图片的常用方式
2009-07-24 16:06 3842第一种: 使用绑定的方式 <?xml version= ... -
Flex视频播放器
2009-07-16 19:43 2304使用Flex实现了一个FlV格式 ... -
Flex是真火啊......
2009-07-16 18:18 810Flex正在以迅雷不及掩耳之势的速度向我们的生 ... -
Flex文件上传
2009-07-09 19:40 27911. 实现文件上传即客户端向服务器发送一个请求,把 ... -
AMF使用简介
2009-07-04 17:41 2452什么是AMF? (来源:htt ... -
对于Flex最需要了解的10件事情
2009-07-02 20:49 9921。Flex是web标准 MXML是Fle ... -
Flex与Java通过实体传递数据
2009-07-02 18:30 1969假如在前台登录的时候用户名和密码包装成 ... -
MXML标记语言
2009-07-02 16:56 14551. MXML标记语言:一种在XML基础上发展起来 ... -
Flex入门知识
2009-07-02 15:40 10131. FLEX:Flex 是一个提供开发设计和运行 ... -
Flex 数据绑定
2009-07-01 13:57 803Flex 的绑定机制和几种数据绑定形式,文档详细说明 ... -
Flex与Java数据交互
2009-06-30 12:31 1471Flex与Java数据交互,在JAVA后台返回不 ... -
Flex 与 Spring整合
2009-06-30 12:28 980Spring、Flex、blazeds的经典 ... -
Flex随笔
2009-06-03 17:24 2397以前用JAVA开发项目,都是使用Jsp、HTML作为客户端,使 ...
相关推荐
了解 flex State对象 以及关于flex state的demo的代码
flex-最简单的state对象控制,可以实现相互切换,两种状态转换。
java flex 对象定义 数据类型定义
范例使用 SuperMap iClient Flex几何对象生成泰森多边形。
flex开发的跳转例子,使用state来实现跳转功能
flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图...
flex访问java对象,文档中为一个简单的ActionScript远程访问Java对象的例子
FLEX特效FLEX特效FLEX特效FLEX特效 FLEX特效FLEX特效FLEX特效FLEX特效 FLEX特效FLEX特效FLEX特效FLEX特效 FLEX特效FLEX特效FLEX特效FLEX特效
Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex ...
Flex简介Flex简介Flex简介Flex简介Flex简介
flex事件flex事件flex事件flex事件flex事件
flex 精通 flexflex 精通 flexflex 精通 flexflex 精通 flexflex 精通 flexflex 精通 flexflex 精通 flexflex 精通 flexflex 精通 flexflex 精通 flexflex 精通 flexflex 精通 flexflex学习的好资源啊
Flex 组件Flex 组件Flex 组件Flex 组件Flex 组件
java flexjava flexjava flex
Flex万年历记事本_flex源码
Flex相册 Flex图片
flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式
flex皮肤flex皮肤flex皮肤flex皮肤flex皮flex皮肤肤
flex+java交互 后台传参 前台操作
flex 面试题flex 面试题flex面试题flex