zoukankan      html  css  js  c++  java
  • Flex State

    在Flex 程序中,引入了状态设计的概念。在一个程序中,按照功能的需求,将界面切分成相对独立的部分。运行过程中,随着用户交互,界面在各个部分之间切换。比如在购物车程序中,登录界面、选购商品界面、购物车界面、付款界面,这些部分代表着不同的功能,显示当前程序的运行状态,每个界面便是一个状态(Status)。       在State对象中可以使用以下的方法:

    setProperty:设置对象的属性

    setStyle:设置对象的样式

    setEventHandler:设置对象某一事件的监听方法

    removeChild:删除一个子级元素

    transition:设置状态的过渡动画效果

    addChild:向对象添加一个子级元素 <?xml version="1.0" encoding="utf-8"?> <mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300">     <mx:Script>         <![CDATA[             import mx.events.CloseEvent;             import mx.controls.Alert;             private function clickHandler(event:Event):void{                 Alert.show("Do you want to save your changes?","Save Changes",3,this,alertClickHandler);             }             private function alertClickHandler(event:CloseEvent):void{                 if(event.detail==Alert.YES){                     label1.text="Please Login!";                     currentState="";                 }else{                     currentState='Register';                 }             }         ]]>     </mx:Script>         <mx:states>         <mx:State name="Register">             <mx:AddChild relativeTo="{loginForm}" position="lastChild">//addChild:向对象添加一个子级元素 lastChild表示在最后位置添加                 <mx:target>                     <mx:FormItem id="confirm" label="Confirm:">                         <mx:TextInput/>                     </mx:FormItem>                 </mx:target>             </mx:AddChild>             <mx:AddChild relativeTo="{loginForm}" position="lastChild">                 <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"/>//设置id为loginPanel的Panel对象的title属性的值为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">//添加子元素在space1前面                 <mx:target>                     <mx:LinkButton id="loginLink" label="Return to login" click="currentState=''"/>                 </mx:target>             </mx:AddChild>         </mx:State>     </mx:states>     <mx:Panel title="Login" id="loginPanel" horizontalScrollPolicy="off" verticalScrollPolicy="off" paddingTop="10" paddingBottom="10"          paddingLeft="10" paddingRight="10">         <mx:Text width="100%" color="blue" id="label1" text="Click the 'Need to Register?'"/>         <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:Module>

  • 相关阅读:
    [MST] Test mobx-state-tree Models by Recording Snapshots or Patches
    [MST] Attach Behavior to mobx-state-tree Models Using Actions
    [MST] Describe Your Application Domain Using mobx-state-tree(MST) Models
    [Angular] Configure an Angular App at Compile Time with the Angular CLI
    [Angular] Configure an Angular App at Runtime
    [Test] Easy automated testing in NodeJS with TestCafe
    [React] Optimistic UI update in React using setState()
    [Javascript] Required function arguments in Javascript
    [Transducer] Lazyness in Transduer
    [Transducer] Create a Sequence Helper to Transduce Without Changing Collection Types
  • 原文地址:https://www.cnblogs.com/soundcode/p/3434669.html
Copyright © 2011-2022 走看看