【转】谈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" />
handler="emptyDocument()" />
</mx:State>
</mx:states>
 <mx:Button id="submitButton" /> <mx:SetEventHandler target="{submitButton}" name="click" 

下面是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,组件不能在无状态或空的状态。它默认的状态时第一个声明的状态