Flex视图创建与状态过渡动画应用技术详解.pptx

北风网项目培训

第15讲：Flex中创建视图和为视图状态变化应用过渡效果动画(2)

讲师：风舞烟

应用技术构建大型网上书店电子商务交易平台

全程实录

目录

什么是状态(States)?

定义状态

为一个状态设定属性，样式和事件

添加或移除组件

更改一个组件的父元素

添加子元素时的控制

创建状态组

与状态有关的事件

为进入和离开States创建Transitions

什么是状态(States)?

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

示例（Demo1）

下面这段代码呈现的首先是一个登陆的界面，当你单击注册的链接，它就会变成一个注册界面。

s:layout

s:BasicLayout/

/s:layout

s:states

s:Statename=default/

s:Statename=Register/

/s:states

!--SettitleofthePanelcontainerbasedontheviewstate.--

s:Panelid=loginPaneltitle=Logintitle.Register=Register

s:layout

s:VerticalLayout/

/s:layout

mx:Formid=loginForm

mx:FormItemlabel=Username:

s:TextInput/

/mx:FormItem

mx:FormItemlabel=Password:

s:TextInput/

/mx:FormItem

mx:FormItemid=confirmlabel=Confirm:includeIn=Register

!--AddaTextInputcontroltotheformfortheRegisterviewstate.--

s:TextInput/

/mx:FormItem

mx:FormItemdirection=horizontal

!--UsetheLinkButtontochangeviewstate.--

mx:Spacerwidth=100%id=spacer1/

!--Setlabelofthecontrolbasedontheviewstate.--

mx:LinkButtonid=registerLink

label=NeedtoRegister?

label.Register=ReturntoLogin

click=currentState=Register

click.Register=currentState=/

s:Buttonid=loginButton

label=Loginlabel.Register=Register/

/mx:FormItem

/mx:Form

/s:Panel

定义状态

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

s:states

s:Statename=State1/

s:Statename=State2/

s:Statename=State3/

.

.

/s:states

改变状态

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

s:Buttonid=b1label=ChangetoState1click=currentState=State2;x.State1=64y.State1=77x.State2=268y.State2=242/

s:Buttonid=b2label=Changetothedefaultclick=currentState=State1;x.State1=65y.State1=106x.State2=274y.State2=107/

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

为一个状态设定属性，样式和事件

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

s:Buttonlabel=DefaultStatelabel.State2=