1.4 Dynamically change the look of an application by using view states,transitions and effects

1.示例代码如下：

<?xml version="1.0"?> <!-- states/LoginExample.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle"> <!-- The Application class states property defines the view states.--> <mx:states> <mx:State name="Register"> <!-- Add a TextInput control to the form. --> <mx:AddChild relativeTo="{loginForm}" position="lastChild"> <mx:FormItem id="confirm" label="Confirm:"> <mx:TextInput/> </mx:FormItem> </mx:AddChild> <!-- Set properties on the Panel container and Button control.--> <mx:SetProperty target="{loginPanel}" name="title" value="Register"/> <mx:SetProperty target="{loginButton}" name="label" value="Register"/> <!-- Remove the existing LinkButton control.--> <mx:RemoveChild target="{registerLink}"/> <!-- Add a new LinkButton control to change view state back to the login form.--> <mx:AddChild relativeTo="{spacer1}" position="before"> <mx:LinkButton label="Return to Login" click="currentState=''"/> </mx:AddChild> </mx:State> </mx:states> <mx:Panel id="loginPanel" title="Login" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Form id="loginForm"> <mx:FormItem label="Username:"> <mx:TextInput/> </mx:FormItem> <mx:FormItem label="Password:"> <mx:TextInput/> </mx:FormItem> </mx:Form> <mx:ControlBar> <!-- Use the LinkButton to change to the Register view state.--> <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，即多个状态

——mx:State的name属性相当于id标识，可以为currentState赋值，从而改变视图状态；basedOn属性是该视图状态基于的视图状态，如果该值为 null，则该视图状态基于根状态（包括不是使用 State 类为组件定义的属性、样式、事件处理函数和子项）

——为了视图之间可以共享组件，mx:State下通过mx:AddChild、mx:RemoveChild、mx:SetProperty、mx:SetEventHandler、mx:SetStyle、mx:Transition来实现添加、删除、设置属性、事件处理、样式、动画

——mx:AddChild将子显示对象（如组件）作为视图状态的一部分添加到容器。relativeTo属性是相对于其添加子项的对象，该属性与position属性结合使用.如果省略此属性，Flex 将使用 State 对象的直接父级，即具有 states 属性的组件，或指定 State 对象的 <mx:states> 标签;position显示列表中子项的位置，随 relativeTo 属性指定的对象而变化;creationPolicy属性指该子级的创建策略

——mx:RemoveChild属性将子显示对象（如组件）作为视图状态的一部分从容器中删除。子项只是从显示列表中移除，但未被删除

——mx:SetProperty指定只在父视图状态期间有效的属性值

——mx:SetStyle指定只在父视图状态期间有效的样式

<mx:transitions> <mx:Transition> <mx:Parallel targets="{[loginPanel, registerLink, loginButton, confirm]}"> <mx:Resize duration="500" easingFunction="Bounce.easeOut"/> <mx:Sequence target="{confirm}"> <mx:Blur duration="200" blurYFrom="1.0" blurYTo="20.0"/> <mx:Blur duration="200" blurYFrom="20.0" blurYTo="1"/> </mx:Sequence> </mx:Parallel> </mx:Transition> </mx:transitions> 

——mx:Transition类定义了一组在响应视图状态更改时播放的效果。默认情况下，fromState 和 toState 属性均设置为“*”，表示将过渡应用到视图状态的任何更改。可以使用 effect 属性来指定应用过渡时要播放的 Effect 对象。通常，它是一个包含多个效果的复合效果对象（如 Parallel 或 Sequence 效果）