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'"/>

Flex定制Tree外观

定制Tree 的外观 给Tree准备数据
  • erwin2012
  • erwin2012
  • 2017年06月14日 23:06
  • 259

FLEX4 语法及重点概要---入门篇(超详细)

chapter 1 : intruduction to flex4 1、flex包含一个基于组件的开发模型,你只需要按需求继承现有的组件并扩展相关的方法就可开发你的应用。2、可视化组件包括以下主要特...
  • xiunai78
  • xiunai78
  • 2016年12月21日 12:21
  • 1479

学习收藏:&nbsp;Flex之State状态的…

原文: http://www.cnblogs.com/orchid/archive/2009/07/18/1526221.html 什么是状态(States)? 在很多富互联网应用,网页外观...
  • tobesili2012
  • tobesili2012
  • 2014年01月08日 10:10
  • 321

Flex4 网页Application界面大小自适应屏幕

首先是按照常规思维在app中设置
  • u010395804
  • u010395804
  • 2014年06月27日 12:04
  • 1467

react学习笔记 item4 --- 状态(state)

React 把组件看成是一个状态机(State Machines)。本文介绍了react中组件的state(状态),以及常用的关于 state 的两个组件 API : setState 和replac...
  • u014607184
  • u014607184
  • 2016年11月19日 21:35
  • 1896

Java 实现状态(State)模式

/** * @author stone */ public class WindowState { private String stateValue; public WindowStat...
  • jjwwmlp456
  • jjwwmlp456
  • 2014年10月13日 23:19
  • 2786

flex4与Java交互的三种通信方式

原文链接: http://www.blogjava.net/sxyx2008/archive/2010/07/17/326360.html   flex4出来一段时间了,去年看了一段时间fle...
  • luohuayuan69
  • luohuayuan69
  • 2013年10月30日 14:24
  • 1729

[转载] Flex 4 皮肤功能介绍

原文: http://www.adobe.com/devnet/flex/articles/flex4_skinning.html 转载:http://www.smithfox.com/?e=34 ...
  • soanl
  • soanl
  • 2014年03月12日 13:33
  • 1388

深入剖析Flex4与自定义布局关系

在学习Flex4的过程中,你对自定义布局的概念是否熟悉,这里和大家分享一下Flex4与自定义布局的关系,Flex4/Spark组件架构的新功能之一是可以定制一个容器的布局而不必改变容器本身。您需要做的...
  • jonave
  • jonave
  • 2013年05月21日 17:15
  • 477

Flex框架及最详细比较 MX and Spark组件

Flex3到Flex4,增加了Spark组件,这是Flex的一次重要升级,基本上组件全部重写了一套,为了保持向下兼容,出现了同一组件两套实现并存的现象,虽然说Spark组件中也可嵌入MX组件,但实际使...
  • ajian005
  • ajian005
  • 2013年01月19日 10:54
  • 1687
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Flex4 State状态的使用
举报原因:
原因补充:

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