Flex 4 SDK 新特性教程系列 – 改进的视图状态 (1)

现在的位置: 首页 > 综合 > 正文

RSS

Flex 4 SDK 新特性教程系列 – 改进的视图状态 (1)

2013年08月19日 ⁄ 综合 ⁄ 共 2757字 ⁄ 字号小中大 ⁄ 评论关闭

文章目录

Flex 3的视图状态(View States)
Flex 4：全新的视图状态语法

本章是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>