小菜学Flex2(二 currentState初步使用)
2007-03-20 19:49
246 查看
currentState意思是当前的状态,Flex可以设置当前页面的多个状态(states),只需要将页面的currentState属性设置为其中某个状态,就会让当前页面变成这个状态时的样式,其中可以设置由A状态转化(transitions)为B状态的过程
下面是实现的代码
38-39为一个Panel,ID为catalogPanel,其中有Click事件
5-15行,为AS3脚本,目的是执行在点击Panel时的改变当前的状态
19-26行为状态集,分别为toLeft和toRight两个状态,toLeft就是设置目标为catalogPanel的left样式值为1,即让此Panel左边距为1,toRight同理
28-36行为转化集,其中Sequence表示按顺序转化,Parallel表示同时转化,这里由于只有Move一种转化,所以不存在顺序或同时转化的情况,duration表示延迟的时间,毫秒为单位。
总的来说,此段代码的意思就是最开始时,即在Application里设置当前状态为toLeft,所以Panel在左边。然后当点击Panel时,Panel的状态变为了toRight,由于设置了变化过程是Move,在1000毫秒完成,所以就有了移动的效果,再次点击,状态又改回为toLeft,则Panal就移回了左侧。
1<?xml version="1.0" encoding="utf-8"?>
2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" currentState="toLeft">
3 <mx:Script>
4 <![CDATA[
5 public function movePanel(): void
6 {
7 if (currentState == 'toLeft')
8 {
9 currentState = 'toRight';
10 }
11 else
12 {
13 currentState = 'toLeft';
14 }
15 }
16 ]]>
17 </mx:Script>
18
19 <mx:states>
20 <mx:State name="toLeft">
21 <mx:SetStyle target="{catalogPanel}" name="left" value="1"/>
22 </mx:State>
23 <mx:State name="toRight">
24 <mx:SetStyle target="{catalogPanel}" name="right" value="1"/>
25 </mx:State>
26 </mx:states>
27
28 <mx:transitions>
29 <mx:Transition fromState="*" toState="*">
30 <mx:Sequence id="t1" target="{catalogPanel}">
31 <mx:Parallel>
32 <mx:Move duration="1000"/>
33 </mx:Parallel>
34 </mx:Sequence>
35 </mx:Transition>
36 </mx:transitions>
37
38 <mx:Panel id="catalogPanel" width="400" height="300" x="0" y="0" click="movePanel();">
39 </mx:Panel>
40
41</mx:Application>
42
样例展现:
下面是实现的代码
38-39为一个Panel,ID为catalogPanel,其中有Click事件
5-15行,为AS3脚本,目的是执行在点击Panel时的改变当前的状态
19-26行为状态集,分别为toLeft和toRight两个状态,toLeft就是设置目标为catalogPanel的left样式值为1,即让此Panel左边距为1,toRight同理
28-36行为转化集,其中Sequence表示按顺序转化,Parallel表示同时转化,这里由于只有Move一种转化,所以不存在顺序或同时转化的情况,duration表示延迟的时间,毫秒为单位。
总的来说,此段代码的意思就是最开始时,即在Application里设置当前状态为toLeft,所以Panel在左边。然后当点击Panel时,Panel的状态变为了toRight,由于设置了变化过程是Move,在1000毫秒完成,所以就有了移动的效果,再次点击,状态又改回为toLeft,则Panal就移回了左侧。
1<?xml version="1.0" encoding="utf-8"?>
2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" currentState="toLeft">
3 <mx:Script>
4 <![CDATA[
5 public function movePanel(): void
6 {
7 if (currentState == 'toLeft')
8 {
9 currentState = 'toRight';
10 }
11 else
12 {
13 currentState = 'toLeft';
14 }
15 }
16 ]]>
17 </mx:Script>
18
19 <mx:states>
20 <mx:State name="toLeft">
21 <mx:SetStyle target="{catalogPanel}" name="left" value="1"/>
22 </mx:State>
23 <mx:State name="toRight">
24 <mx:SetStyle target="{catalogPanel}" name="right" value="1"/>
25 </mx:State>
26 </mx:states>
27
28 <mx:transitions>
29 <mx:Transition fromState="*" toState="*">
30 <mx:Sequence id="t1" target="{catalogPanel}">
31 <mx:Parallel>
32 <mx:Move duration="1000"/>
33 </mx:Parallel>
34 </mx:Sequence>
35 </mx:Transition>
36 </mx:transitions>
37
38 <mx:Panel id="catalogPanel" width="400" height="300" x="0" y="0" click="movePanel();">
39 </mx:Panel>
40
41</mx:Application>
42
样例展现:
相关文章推荐
- loadrunner中log的使用初步总结
- GridView控件初步使用概括11.23
- 图解使用PowerTool对Windows内核做初步研究探索
- [转]C#中TreeView组件使用方法初步
- EventBus使用详解(一)——初步使用EventBus
- EventBus使用详解(一)——初步使用EventBus
- Jaxb Annotation初步使用
- Oracle-18-select语句初步&SQL中用算术表达式&别名的使用&连接运算符%distinct&where子句
- iOS-ReactiveCocoa(RAC)的初步了解以及基本使用
- EventBus使用详解(一)——初步使用EventBus
- Qt学习之路_4(Qt UDP的初步使用)
- 百度地图初步使用
- 使用vue开发web app - 1 - 初步使用vue创建组件
- gson初步使用
- 3.1.1zookeeper的java客户端初步使用
- Repeater的初步使用
- Heritrix使用的初步总结(转贴)
- Qt UDP的初步使用
- haproxy初步使用
- Angular 2 + 折腾记 :(3)初步了解服务及使用