【转】谈flex切换状态

切换状态、flex 认为有以下两种：States、visible 1、<mx:states></mx:states> 很多认为不需要讲呀，帖个例子，外加主要是看官方api啦。 例子：哈哈，帖个大例子，其实什么都没做呢 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" > <mx:Style> global{    font-size:12px; } </mx:Style> <mx:Script>    <![CDATA[            private function manageState(event:MouseEvent):void {      if(event.target==addcatalogs){      this.currentState = "mainFrame";      }else{      this.currentState="manageState";      }     }            ]]> </mx:Script> <mx:states>    <mx:State name="mainFrame" >     <mx:AddChild relativeTo="{main}" position="lastChild">      <mx:target>       <mx:VBox>        <mx:Label text="add catalog"/>        <mx:Button label="aaaaaaaa"/>       </mx:VBox>            </mx:target>     </mx:AddChild>     <mx:SetProperty target="{show}" name="text" value=""/>        </mx:State>    <mx:State name="manageState">     <mx:AddChild relativeTo="{main}" position="lastChild">      <mx:target>             <mx:Label text="manage catalog"/>      </mx:target>     </mx:AddChild>     <mx:SetProperty target="{show}" name="text" value=""/>    </mx:State> </mx:states> <mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>     <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/> <mx:ApplicationControlBar id="top" dock="true" width="100%" height="90">    <mx:Canvas width="100%" height="100%" horizontalScrollPolicy="off"    verticalScrollPolicy="off">     <mx:Label text="Flex" x="0" y="0"/>     <mx:Label text="Thinker" x="40" y="0"/>     <mx:Label text="action" right="10"/>    </mx:Canvas> </mx:ApplicationControlBar> <mx:Label bottom="10" right="10" text="@www.thinker168.com"/> <mx:HDividedBox width="100%" height="100%" x="0" y="0">    <mx:Accordion id="accordion" width="20%" height="100%">             <!-- Define each panel using a VBox container. -->             <mx:VBox label="分类管理">                 <mx:LinkButton label="添加分类" id="addcatalogs" click="manageState(event)" />                 <mx:LinkButton label="分类管理" id="managecatalogs" click="manageState(event)"                 />             </mx:VBox>             <mx:VBox label="产品管理">             <mx:LinkButton id="addproducts" label="添加产品"/>             <mx:LinkButton id="manageproducts" label="产品管理"/>             </mx:VBox>             <mx:VBox label="用户管理">             <mx:LinkButton id="addusers" label="添加用户"/>             <mx:LinkButton id="manageusers" label="管理用户"/>             </mx:VBox>                    </mx:Accordion>    <mx:VBox id="main" height="100%" width="80%">     <mx:Label id="show" text="管理面板" x="10" y="10"/>         <!--     <view:catalogData paddingTop="0" paddingLeft="0" id="catalogManageView" visible="false"     />     -->    </mx:VBox>    </mx:HDividedBox> </mx:Application> 里面简单用了States，希望用到他的能用这个丰富这个例子把States吃透。哈哈， 2、visible 这个就不需要更多的说，并且认为例子都不需要了吧，哈哈， 下面还有个mxml和html传递的一个函数， navigateToURL （flash.net） 对于在浏览器中运行的本地 内容，只有在 SWF 文件和包含该文件的网页（如果有）位于受信任的本地安全沙箱时，才允许进行指定“javascript:”伪协议的 navigateToURL() 方法调用（通过作为第一个参数传递的 URLRequest 对象）。一些浏览器不支持通过 navigateToURL() 方法使用 javascript 协议。而应考虑使用 ExternalInterface API 的 call() 方法在包含该内容的 HTML 页中调用 JavaScript flex3.0和fb4.0相比， state语法的改变 state语法变了，变得更加的有弹性和直接。你甚至可以根据上下文来针对性的改变你的状态。下面是重点： 1，只有状态被定义到了状态数组。 2，AddChild和RemoveChild，不能再用了。取而代之的是includeIn和excludeFrme属性 。这两个属性是组件的属性。 看例子吧！ 这是flex3应用状态的方式。 <mx:states><mx:State name="submitState" basedOn=""> <mx:AddChild relativeTo="{loginForm}" > <mx:Button label="submit" bottom="10" right="10"/> </mx:AddChild> <mx:RemoveChild target="{firstTextInput}"/> </mx:State> </mx:states> <mx:TextInput id="firstTextInput" /> <mx:Canvas id="loginForm" /> 这是flex4 <s:states> <s:State name="submitState" /> </s:states> <s:TextInput id="firstTextInput" excludeFrom="submitState" /> <s:Group id="loginForm" > <s:Button label="submit" bottom="10" right="10" includeIn="submitState"/> </s:Group> 3,setProperty,setStyle和setEvent被点语法取代了。 下面是flex3的做法 <mx:states> <mx:State name="submitState" basedOn=""> <mx:SetProperty target="{submitButton}" name="label" value="submit" /> <mx:SetStyle target="{submitButton}" name="textDecoration" value="underline"/> <mx:SetEventHandler target="{submitButton}" name="click" handler="trace('done');"/> </mx:State> <mx:State name="clearState" basedOn=""> <mx:SetProperty target="{submitButton}" name="label" value="clear" /> <mx:SetEventHandler target="{submitButton}" name="click" handler="emptyDocument()" /> </mx:State> </mx:states> <mx:Button id="submitButton" /> 下面是flex4的做法 <s:states> <s:State name="submitState" /> <s:State name="clearState" /> </s:states> <s:Button label.submitState="submit" textDecoration.submitState="underline" click.submitState="trace('done')" click.clearState="emptyDocument()" label.clearState="clear" textDecoration.clearState="none"/> 4,组件不能在无状态或空的状态。它默认的状态时第一个声明的状态