Flex4 State状态的使用

原创 2011年01月18日 13:01:00

什么是状态(States)?

在很多富互联网应用,网页外观的改变基于用户的行为。一个状态就定义了组件的一种表现样式。要想使用状态,你应该首先定义一个默认的状态,然后在此基础上重写或者更改,这样就形成了一系列的其他样式。你可以添加、移除某些子元素,更改CSS或者属性的值,更改触发的事件。这些如何做到,我们会一一介绍。

下面我们先通过一个例子大概看一下如何使用State。

下面这段代码呈现的首先是一个登陆的界面,当你单击注册的链接,它就会变成一个注册界面。它是新的界面但不是新的页面。通过浏览器的后退按钮你是回不到原来的状态的。当然,我们也会有办法实现这个功能,以后会介绍。



<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/halo" minWidth="1024" minHeight="768">
<s:layout>
<s:BasicLayout/>
</s:layout>

<s:states>
<s:State name="default"/>
<s:State name="Register"/>
</s:states>

<!-- Set title of the Panel container based on the view state.-->
<s:Panel id="loginPanel"
title="Login" title.Register="Register">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:Form id="loginForm">
<mx:FormItem label="Username:">
<s:TextInput/>
</mx:FormItem>
<mx:FormItem label="Password:">
<s:TextInput/>
</mx:FormItem>
<mx:FormItem id="confirm" label="Confirm:" includeIn="Register">
<!-- Add a TextInput control to the form for the Register view state. -->
<s:TextInput/>
</mx:FormItem>
<mx:FormItem direction="horizontal">
<!-- Use the LinkButton to change view state.-->
<mx:Spacer width="100%" id="spacer1"/>
<!-- Set label of the control based on the view state.-->
<mx:LinkButton id="registerLink"
label="Need to Register?"
label.Register="Return to Login"
click="currentState='Register'"
click.Register="currentState=''"/>
<s:Button id="loginButton"
label="Login" label.Register="Register"/>
</mx:FormItem>
</mx:Form>
</s:Panel>
</s:Application>


定义状态

flex4里状态的定义与flex3不同,你只需在<states></states>标签内定义状态就可以了。添加子元素和设置属性之类,不在这里进行了。如下所示:



<s:states>
<s:State name="State1"/>
<s:State name="State2"/>
<s:State name="State3"/>
.
.
</s:states>


改变状态

UIComponent类定义了一个currentState属性,通过改变这个属性的值来更换状态,这个属性的默认值是定义在需在<states></states>标签内的第一个状态。例如:



<s:Button id="b1" label="Change to State 1" click="currentState='State2';"/>
<s:Button id="b2" label="Change to the default" click="currentState='State1';"/>


当然也可以通过UIComponent类的setCurrentState方法。


为一个状态设定属性,样式和事件
这是与flex3很不同的地方。在flex4里通过点语法来设定一个组件属于某个状态的属性值。例如:


<s:Button label="Default State" label.State2="New State"/>

上述的代码的意思是,这个按钮的lable值在State2状态下是New State,在其他状态下是Default State。
上述代码也可以这样写:



<s:Button >
<s:label>Default State</s:label>
<s:label.State2>new State</s:label.State2>
</s:Button>


要想在某个状态里清除某个属性的值,可以让属性值等于@clear。如下:

<Button color="0xFF0000" color.State1="@Clear"/>

对于事件也一样可以用点语法,例如:



<s:Button id="b1" label="Click Me"
click="ta1.text='hello';"
click.State1="ta1.text='goodbye'"/>

相关文章推荐

flex4中State的使用

State提供了页面切换的一种途径,如在登录成功后由登录页面切换到主页面,那么可以定义两个状态(State):login,main,flex4中状态的定义的代码如下: 定义状态后,还需...
  • i84cha
  • i84cha
  • 2011年07月04日 16:24
  • 278

FLEX4中使用CursorManager自定义忙状态光标

  • mnorst
  • mnorst
  • 2011年08月16日 15:58
  • 2868

Flex4 state基本操作 以及 <fx:Reparent>标签

原文:http://shazhifeng.iteye.com/blog/531081 1.FLEX4状态概述    在很多富互联网应用,网页外观的改变基于用户的行为。一个状态就定义了组...
  • ld_flex
  • ld_flex
  • 2012年03月14日 16:16
  • 1327

Flex4之控制状态转换以及产生动画特效【登录示例】

话不多说,Flex4的动画效果的确让人赏心悦目,既然是登陆肯定有画面之间的转化,那么在Flex中,这就叫做不同状态之间的变换,本实例中我做的是登陆验证,如果登录失败,则登陆框会出现左右抖动现象,用过M...

Flex4之元数据标签使用

转自:http://javacrazyer.iteye.com/blog/733045  标签描述[ArrayElementType]在数组中定义所有允许的数据类型。[Bindable]声明一个属性可...

flex4使用itemrenderer后报Error #1009

昨天改ABPlayer的时候想要加个屏蔽效果,在网上找了找知道应该用itemrenderer,于是我用flash builder4自带的提示加入了一个itemrenderer 创建后默认...

flex4 + spring + blazeds , 使用anonation(注解)机制,利用push技术的实现例子和过程。

实现目标:java做后台service,每隔300毫秒,生成一个uuid,以 testJob做为订阅关键词,发布给所有订阅此关键词的flex客户端。 配置过程和源码: 1.修改blazeds自动生成的...

flex4 中获取Microphone,抑制回声和使用Speex编码音频的方法

flex4 中获取Microphone,抑制回声和使用Speex编码音频的方法,该方法经过本人测试可用。 一、如果你不关心请直接把代码复制,如果想要了解细节的请继续往下看 private funct...

Flex4之自定义动画效果,使用自定义Parallel类来实现

首先附上要做动画效果的组件: 然后需要自定义Parallel类,如下所示: public function init():void...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Flex4 State状态的使用
举报原因:
原因补充:

(最多只允许输入30个字)