- Flex例7【使用视图状态和切换】
Use View States and Transitions
关于View States 和 Transitions 的解释：
A view state is a named layout that
you define for a single MXML
application or component.
You can define several view states for
an application or component, and
switch from one view state to another
depending on the user's actions.
View states allow you to dynamically
change the user interface in response
to users' actions or progressively reveal more information based on the context.
A transition is one or more effects grouped together to play when a view state
changes.
The purpose of a transition is to make the visual change smoother and more
interesting.
点击Advanced Options连接按钮,视图状态从Base state 转换到Advanced state,再次点击时,视图又回到Base state,切换的效果就是Transitions的设置了。和动作一样，切换效果也可以组合起来使用。
以下为MXML：
程序代码
上一篇：Flex例6【行为的使用】 下一篇：Flex例8【创建自定义组件】
关于View States 和 Transitions 的解释：
A view state is a named layout that
you define for a single MXML
application or component.
You can define several view states for
an application or component, and
switch from one view state to another
depending on the user's actions.
View states allow you to dynamically
change the user interface in response
to users' actions or progressively reveal more information based on the context.
A transition is one or more effects grouped together to play when a view state
changes.
The purpose of a transition is to make the visual change smoother and more
interesting.
点击Advanced Options连接按钮,视图状态从Base state 转换到Advanced state,再次点击时,视图又回到Base state,切换的效果就是Transitions的设置了。和动作一样，切换效果也可以组合起来使用。
以下为MXML：
程序代码<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="300" height="200">
<mx:transitions>
<mx:Transition id="myTransition" fromState="*" toState="Advanced">
<mx:Parallel target="{myVBox}">
<mx:WipeDown duration="1000" />
<mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="1000"/>
</mx:Parallel>
</mx:Transition>
</mx:transitions>
<mx:states>
<mx:State name="Advanced">
<mx:AddChild relativeTo="{panel1}" position="lastChild">
<mx:VBox id="myVBox" x="53" y="66" width="160" height="66">
<mx:CheckBox label="Regular Expression "/>
<mx:CheckBox label="Case sensitive"/>
<mx:CheckBox label="Exact Phrase"/>
</mx:VBox>
</mx:AddChild>
<mx:SetEventHandler target="{linkbutton1}" name="click"
<mx:transitions>
<mx:Transition id="myTransition" fromState="*" toState="Advanced">
<mx:Parallel target="{myVBox}">
<mx:WipeDown duration="1000" />
<mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="1000"/>
</mx:Parallel>
</mx:Transition>
</mx:transitions>
<mx:states>
<mx:State name="Advanced">
<mx:AddChild relativeTo="{panel1}" position="lastChild">
<mx:VBox id="myVBox" x="53" y="66" width="160" height="66">
<mx:CheckBox label="Regular Expression "/>
<mx:CheckBox label="Case sensitive"/>
<mx:CheckBox label="Exact Phrase"/>
</mx:VBox>
</mx:AddChild>
<mx:SetEventHandler target="{linkbutton1}" name="click"
handler="currentState=''"/>
</mx:State>
</mx:states>
<mx:Panel x="10" y="10" width="280" height="180" layout="absolute"
</mx:State>
</mx:states>
<mx:Panel x="10" y="10" width="280" height="180" layout="absolute"
id="panel1" title="Use View States and Transitions ">
<mx:Label x="6" y="10" text="Search:"/>
<mx:TextInput x="53" y="8" width="150"/>
<mx:Button x="211" y="8" label="Go"/>
<mx:LinkButton x="53" y="38" label="Advanced Options" textAlign="left"
<mx:Label x="6" y="10" text="Search:"/>
<mx:TextInput x="53" y="8" width="150"/>
<mx:Button x="211" y="8" label="Go"/>
<mx:LinkButton x="53" y="38" label="Advanced Options" textAlign="left"
id="linkbutton1" click="currentState='Advanced'"/>
</mx:Panel>
</mx:Application>
</mx:Panel>
</mx:Application>
上一篇：Flex例6【行为的使用】 下一篇：Flex例8【创建自定义组件】
辅助软件
Copyright © 2006-2008 flashas.net All Rights Reserved.
网站内容咨询：
admin#flashas.net （#为@） 联系QQ：
：40777822
浙ICP备06033001号 （本网站最佳浏览解析度为1024*768, 建议使用IE 6.0或以上版本浏览器。）