本文详细介绍了Flex中的行为设计概念，包括触发和效果的绑定机制，如何使用MXML和ActionScript进行配置，以及如何通过数据绑定和样式应用效果。此外，还提供了多个示例帮助理解。
关于行为
一个行为是触发和效果的绑定。触发是一个动作，比如鼠标点击一个组件而取得聚焦，或者是一个组件变得可见。效果发生在组件上某一段时间内可见的或者可听见的改变，通常用milliseconds来计算。效果的例子如：退去(fading),尺寸调整(resizing),移动(moving)等。
关于行为的应用
你可以通过使用MXML和ActionScript创建，配置并且应用效果到Flex组件。使用MXML, 你必须把效果和触发关联起来作为应用程序的行为设计的一部分。比如：
<?xml version="1.0"?>
<!-- behaviors\ButtonWL.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!-- Define effect. -->
<mx:WipeLeft id="myWL" duration="1000"/>
<!-- Assign effect to targets. -->
<mx:Button id="myButton" label="Click Me" mouseDownEffect="{myWL}"/>
<mx:Button id="myOtherButton" label="Click Me" mouseDownEffect="{myWL}"/>
</mx:Application>
这个例子中，使用的效果是wipeLeft，持续时间是1000ms.即同效果的开始到结束用了1000ms.
你还可以通过数据绑定的方法把效果赋给按钮控件的mouseDownEffect属性。mouseDownEffect这个属性是一个效果触发用来指定当用户点击控件时显示效果。前面的例子中，效果使得按钮控件从右到左的擦除显示。
你可以可以使用ActionScript创建，修改和显示效果。你可以为每一个触发配置不同的效果，也可以显示的调用paly()方法来执行效果的显示。ActionScript使得你能够用户的喜好来设定效果，或者根据用户的操作来修改效果。举例：
<?xml version="1.0"?>
<!-- behaviors\AsEffect.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="createEffect(event);" >
<!-- Define effect. -->
<mx:Script>
<![CDATA[
// Import the effect class.
import mx.effects.*;
// Define effect variable.
private var myWL:WipeLeft;
private function createEffect(eventObj:Event):void {
// Create the WipeLeft effect object.
myWL=new WipeLeft();
// Set the effect duration.
// Assign the effects to the targets.
myButton.setStyle('mouseDownEffect', myWL);
myOtherButton.setStyle('mouseDownEffect', myWL);
}
]]>
</mx:Script>
<mx:Button id="myButton" label="Click Me"/>
<mx:Button id="myOtherButton" label="Click Me"/>
</mx:Application>
这个例子显示了使用事件触发效果。如果想要效果按照程序规划来显示，那么你可以调用paly()方法。
关于工厂(factory)和实例类
Flex利用两个类的架构,工厂类和实例类来实现效果。
工厂类创建了实例类的对象来展现目标组件的效果。你可以在程序中创建工厂类的实例，通过配置必要的属性来控制效果。你可以把工厂类的实例赋给目标组件的效果触发器：
<!-- Define factory class. -->
<mx:WipeDown id="myWD" duration="1000"/>
<!-- Assign factory class to effect targets. -->
<mx:Button id="myButton" mouseDownEffect="{myWD}"/>
<mx:Button id="myOtherButton" mouseDownEffect="{myWD}"/>
按照规定，工厂类的名字就是效果的名字，比如Zoom或者Fade。
实例类实现了效果的逻辑。当一个效果触发，或者你调用了paly()方法来调用效果，工厂类创建了实例类的对象来展现目标组件的效果。当效果结束时，Flex销毁实例对象。假如某个效果对应多个组件，那么工厂类创建多个实例对象，每个目标组件一个。
按照规定，实例类的名字就是效果类命ide加上后缀Instance,比如ZoomInstance或者FadeInstance.
关于Flex效果类的层次结构，可以参考develop guide.这里不介绍了。Flex可用的效果包括：AnimateProperty, Blur, Bissolve, Fade, Glow, Iris, Move, Pause, Resize, Rotate, SoundEffect, WipeLeft, WipeRight,WipeUp,WipeDown, Zoom.具体使用参考开发文档。可用的触发包括如下; addedEffect, creationCompleteEffect, foucusInEffect…参考开发文档。Page565.
MXML中行为的使用
在MXML中，你使用触发器的名字作为MXML组件标记中的一个属性来配置组件的显示效果。比如，要配置Button控件的WipeLeft效果，你可以使用mouseDownEffect触发属性作为<mx:Button>一个属性来实现。：
<?xml version="1.0"?>
<!-- behaviors\ButtonWL.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!-- Define effect. -->
<mx:WipeLeft id="myWL" duration="1000"/>
<!-- Assign effect to targets. -->
<mx:Button id="myButton" label="Click Me" mouseDownEffect="{myWL}"/>
<mx:Button id="myOtherButton" label="Click Me" mouseDownEffect="{myWL}"/>
</mx:Application>
下个例子中，你将创建两个可变大小的效果的按钮控件，其中一个效果是当用户按下按钮时把按钮的大小扩展10pexels,另外一个效果是当放开鼠标时重新回复到按钮原来的大小。持续时间为200ms.
<?xml version="1.0"?>
<!-- behaviors\ButtonResize.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Resize id="myResizeUp"
widthBy="50" heightBy="50"
duration="200"
/>
<mx:Resize id="myResizeDown"
widthBy="-50" heightBy="-50"
duration="200"
/>
<mx:Button id="myButton"
label="Click Me"
mouseDownEffect="{myResizeUp}"
mouseUpEffect="{myResizeDown}"
/>
</mx:Application>
MXML使用数据绑定的行为设计
在MXML中你可以使用数据绑定来设置效果的属性。比如，一下的例子就是让用户使用TextInput控件来设定zoomHeightTo和zoomWidthTo属性。这两个属性分别指定了完成Zoom效果的一个比例。其值在0.0和1.0之间，默认的为1.0，这个是对象的一般大小：
<?xml version="1.0"?>
<!-- behaviors\DatabindingEffects.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Zoom id="mZoom"
zoomHeightTo="{Number(zoomHeightInput.text)}"
zoomWidthTo="{Number(zoomWidthInput.text)}"
/>
<mx:Form>
<mx:FormItem label="Zoom Height:">
<mx:TextInput id="zoomHeightInput" text="1.0" width="30"/>
</mx:FormItem>
<mx:FormItem label="Zoom Width:">
<mx:TextInput id="zoomWidthInput" text="1.0" width="30"/>
</mx:FormItem>
</mx:Form>
<mx:Button label="Mouse Over Me" rollOverEffect="{mZoom}"/>
</mx:Application>
默认的，TextInput的text属性的值为1.0，用户可以自行指定大小。
MXML中使用styles的行为设计
所有的MXML属性对应的效果触发都实现了CSS Styel.因此，你也可以使用<mx:Style>来运用效果。比如，你可以为程序中所有的TExtArea控件设置mouseDownEffect的属性值，你可以使用CSS类型选择器：
<?xml version="1.0"?>
<!-- behaviors\MxmlTypeSel.mxml-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
TextArea { mouseDownEffect: slowWipe; }
</mx:Style>
<mx:WipeLeft id="slowWipe" duration="5000"/>
<mx:TextArea id="myTA"
text="This TextArea slowly wipes in."
/>
<mx:TextArea id="myTA2"
text="This TextArea control has no effect."
mouseDownEffect="none"
/>
</mx:Application>
在组件标签中设定的mouseDownEffect属性值重写了<mx:Style>中设定的任何设置。假如你要移除定义在类型选择器中的效果，你可以显示设置任何触发器的值为none.比如：
<mx:TextArea id="myTA" mouseDownEffect="none"/>
你可以可使用类选择器来使用效果：
<?xml version="1.0"?>
<!-- behaviors\ButtonWLClassSel.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<!-- Define a class selector for a TextArea control -->
<mx:Style>
.textAreaStyle { mouseDownEffect: WipeLeft; }
</mx:Style>
<mx:WipeLeft id="slowWipe" duration="5000"/>
<mx:TextArea id="myTA"
styleName="textAreaStyle"
text="This TextArea control quickly wipes in."
/>
</mx:Application>
利用setSytel()和getStyle()使用定义在MXML中的行为
触发器的属性被实现为styles,因此，你可以使用setStyle()和getStyle()方法来控制触发器以及他们关联的效果。setStyle方法有一下的定义格式：
setStyle("trigger_name", effect)
trigger_name，是触发器属性的名字，比如mouseDownEffect.
Effect, 表示和触发器管理的效果。Effect的类型属于Effect对象。
getStyle（）的设定如下：
getStyle("trigger_name"):return_type
参数属性同setStyle.
以下的例子显示如何使用getStyle()来使用定义的MXML的行为。其返回一个Effect对象，对性的类型决定与你所指定的效果类型。
<?xml version="1.0"?>
<!-- behaviors\ButtonWLGetStyleMXML.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
<![CDATA[
private function displayStyle():void {
var s:String = String(myB.getStyle('mouseDownEffect').duration)
myTA.text = "mouseDownEffect duration: " + s;
}
private function changeStyle(n:Number):void {
myB.getStyle('mouseDownEffect').duration = n;
}
]]>
</mx:Script>
<!-- Set the behavior in MXML. -->
<mx:WipeLeft id="slowWipe" duration="5000"/>
<mx:Button id="myB" label="Click Me" mouseDownEffect="{slowWipe}"/>
<mx:TextArea id="myTA" width="200"/>
<!-- Call getStyle() to return an object of type WipeLeft. -->
<mx:HBox>
<mx:Button label="Get Style" click="displayStyle();"/>
<mx:Button label="Change Style" click="changeStyle(1000);"/>
<mx:Button label="Reset" click="changeStyle(5000);"/>
</mx:HBox>
</mx:Application>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
