Flex 4 SDK 新特性教程系列 – 改进的视图状态 (1)
本章是Flex 4 SDK 新特性教程系列的第5章。本章将介绍Flex 4全新的视图状态语法。
Flex 3的视图状态(View States)
在此之前有多少人使用过视图状态？至少我没用过。:P
下面是一个典型的例子：
<mx:states> <mx:State name="State1"> <mx:SetStyle target="{btn}" name="color" value="0xAAAAAA"/> <mx:SetProperty target="{btn}" name="enabled" value="false"/> <mx:SetEventHandler target="{btn}" name="click" handler="handler()"/> <mx:AddChild relativeTo="{v1}"> <mx:Button label="New Button" /> </mx:AddChild> </mx:State> <mx:State name="State2"> ... </mx:State> </mx:states>
我们知道，使用MXML而不是ActionScript的一大好处在于，用MXML所表达的内容非常易读和直观（设计师也可以理解），而且MXML易于编写。但是在Flex 3中使用视图状态时，这些优点都丧失了：描述状态的MXML语法即不易读，也难以编写和维护。如果你想了解某一个特定状态下的实际效果，你必须把这些看起来更像ActionScript的MXML代码在脑海中“运行”一遍，而且要确保你的记性足够好。:P
但是在Flex 4中，情况则大不相同了。
Flex 4：全新的视图状态语法
在Flex 4中，我们使用美观的“点语法”来代替丑陋的SetProperty，SetEventHandler以及SetStyle，如下例：
<mx:Button label.state1="State 1" label.state2="State 2" color.state1="0xFF0000" color.state2="0xFFFF00" click.state1="handler1(event)" click.state2="handler2(event)"/>
上面的代码我想不需要任何解释也能非常容易地理解，类似地，我们使用includeIn和excludeFrom来代替AddChild/RemoveChild:
- includeIn声明当前组件“只存在于特定状态中”。
- excludeFrom声明当前组件“只在特定状态中不存在”。
例如：
<s:states> <s:State name="state1"/> <s:State name="state2"/> <s:State name="state3"/></s:states> <mx:Button id="button1" includeIn="state1" /> <mx:Button id="button2" excludeFrom="state3" /> <mx:Button id="button3" includeIn="state2,state3" />
在上面的例子中：
- button1存在于state1，在state2和state3中不存在。
- button2存在于state1和state2，在state3中不存在。
- button3存在于state2和state3，在state1中不存在。
可以看到，新的视图语法将所有与状态有关的设定“嵌入”到组件的标签中，并使用了简化的语法，从而大大提高了可读性并降低了编写的难度。我想视图状态将成为我在Flex 4中经常使用的特性。:P（需要注意的是，想要使用新的视图状态语法，你必须使用MXML 2009版本。)
下面是一个Flex3中经典的使用视图状态的实例：用户登陆/注册对话框。用户通过点击按钮来切换状态并显示不同内容。我将这个例子用Flex 4的视图状态语法改写，你可以拷贝代码并编译运行来看到效果：
<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"><s:states><s:State name="login"/><s:State name="register"/></s:states> <s:Panel title="Login" title.register="Register" height="138" height.register="170" verticalCenter="0" horizontalCenter="0" width="290"><s:TextInput x="89" y="10" width="177"/><s:TextInput x="89" y="42" width="177"/><s:Label x="10" y="10" text="User Name:" width="66" height="21" verticalAlign="middle"/><s:Label x="10" y="44" text="Password:" width="66" height="21" verticalAlign="middle"/><s:Button x="10" label="Need to Register?" label.register="Back to login" bottom="8" click="currentState='register'" click.register="currentState='login'"/><s:Button x="196" bottom="8" label="Login" label.register="Register"/><s:Label includeIn="register" x="10" y="82" text="Confirm:" /><s:TextInput includeIn="register" x="89" y="72" width="177"/></s:Panel></s:Application>
更酷的是，Flash Builder 4提供了代码环境下可以动态切换视图状态的功能，所有在当前选择的视图状态下无效的代码将会以灰度显示，使你可以更加直观的检查不同状态下的生效代码，例如选中上面例子中login状态：
在下一章中，我们将介绍其他与状态视图有关的新特性，包括如何控制组件在不同视图状态下的创建和销毁，状态群组，以及<fx:Reparent>标签等等。
相关日志：
浙公网安备 33010602011771号