flex---->样式和主题
行为和特效
Flash是一个表现力非常强的平台，可以创造出一切想要的特效效果。在Flex所提供的类库中，就包含了一些行为和特效，可以实现表现力很强的动画效果。
使用行为、拖放行为特效、使用ViewState、过度特效、使用ToolTips
一、 使用行为
行为可以添加一些效果和动作，以相应用户和程序的操作。例如，使用行为，可以使一个窗体慢慢的淡入，直到完全可见。
1.1 行为简介
在Flex中，提供了一些有关行为的组件，可以通过使用MXML或者ActionScript定义这些行为。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<!-- 定义翻转效果 -->
<mx:Rotate id="myRT" duration="1000" />
<!-- 设置按钮的 mouseDownEffect 属性-->
<mx:Button id="myButton" label="单击这里"
mouseDownEffect="{myRT}" x="44" y="30" fontSize="14"/>
</mx:Application>
1.2 在ActionScript中使用行为
除了使用MXML代码创建行为外，还可以使用ActionScript代码。所有的行为类都放在mx.effects包中，所以在使用行为类之前需要引入此包。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="createEffect(event);">
<mx:Script>
<![CDATA[
// 导入效果类
import mx.effects.Resize;
// 创建一个 Resize 类
private var resizeLarge:Resize = new Resize();
private function createEffect(eventObj:Event):void
{
// 设置特效目标对象
resizeLarge.target = myTA;
}
private function startEffect():void
{
resizeLarge.end();
// 设置宽度和高度
resizeLarge.widthTo = 250;
resizeLarge.heightTo = 250;
// 设置频率
resizeLarge.duration = 550;
resizeLarge.play();
}
private function resetEffect():void
{
resizeLarge.end();
// 设置宽度和高度
resizeLarge.widthTo = 200;
resizeLarge.heightTo = 200;
// 设置频率
resizeLarge.duration = 550;
resizeLarge.play();
}
]]>
</mx:Script>
<mx:VBox x="40" y="28">
<mx:HBox>
<mx:Button label="开始" fontSize="14" click="startEffect()"/>
<mx:Button label="重置" fontSize="14" click="resetEffect()"/>
</mx:HBox>
<mx:TextArea id="myTA" height="200" width="200"
text="Hello World." fontSize="14" />
</mx:VBox>
</mx:Application>
二、 拖放行为特效
拖放操作可以把数据从一个地方拖到另外一个地方。在可视化的应用系统中，这样的操作是非常便捷的。
2.1 容器之间移动数据
几乎每个数据容器组件都有两个属性：dragEnabled和dropEnabled。dragEnabled属性表示允许从组件中拖出数据，而dropEnabled属性则表示允许向组件中放置数据。
默认情况下，当移动数据的时候，向目标对象中添加数据，同时在源对象中就会删除相应的数据。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="initApp()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private function initApp():void
{
// 设置数据源
srclist.dataProvider =
new ArrayCollection(['软件开发工程师', '网络维护工程师', '软件测试工程师']);
destlist.dataProvider = new ArrayCollection([]);
}
]]>
</mx:Script>
<mx:HBox>
<mx:List id="srclist" allowMultipleSelection="true"
dragEnabled="true" dragMoveEnabled="true"
width="150" height="200" fontSize="14"/>
<mx:List id="destlist" dropEnabled="true"
width="150" height="200" fontSize="14"/>
</mx:HBox>
</mx:Application>
2.2 容器之间复制数据
在默认情况下，设置dragEnabled和dropEnabled属性的值，可以移动数据。但是有些情况下，需要复制数据。在数据容器之间复制数据，需要设置dragDrop事件。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="initApp();">
<mx:Script>
<![CDATA[
import mx.events.DragEvent;
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.collections.IList;
import mx.collections.ArrayCollection;
private function initApp():void
{
srcgrid.dataProvider = new ArrayCollection([
{Artist:'周杰伦', Album:'魔杰作', Price:41.68},
{Artist:'王力宏', Album:'摇滚怎么了', Price:39.09},
{Artist:'陶喆', Album:'太美丽', Price:36.59},
{Artist:'林俊杰', Album:'西界', Price:40.66}
]);
destgrid.dataProvider = new ArrayCollection([]);
}
private function dragDropHandler(event:DragEvent):void
{
if (event.dragSource.hasFormat("items"))
{
// 取消默认行为
event.preventDefault();
// 隐藏目标对象的指示器
event.currentTarget.hideDropFeedback(event);
// 获取拖放的目标对象
var dropTarget:DataGrid = DataGrid(event.currentTarget);
// 获取复制的数据集
var itemsArray:Array = event.dragSource.dataForFormat("items") as Array;
// 复制数据
var tempItem:Object = {
Artist1: itemsArray[0].Artist,
Album1: itemsArray[0].Album, Price1:
itemsArray[0].Price
};
// 获取拖放的目标对象的位置
var dropLoc:int = dropTarget.calculateDropIndex(event);
// 添加数据到目标对象的相应位置
IList(dropTarget.dataProvider).addItemAt(tempItem, dropLoc);
}
}
]]>
</mx:Script>
<mx:HBox>
<mx:VBox>
<mx:Label text="可选专辑" fontSize="14"/>
<mx:DataGrid id="srcgrid"
dragEnabled="true"
fontSize="12">
<mx:columns>
<mx:DataGridColumn dataField="Artist" headerText="歌手"/>
<mx:DataGridColumn dataField="Album" headerText="专辑"/>
<mx:DataGridColumn dataField="Price" headerText="价格"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
<mx:VBox>
<mx:Label text="已经选购的专辑" fontSize="14"/>
<mx:DataGrid id="destgrid"
dropEnabled="true"
fontSize="12"
dragDrop="dragDropHandler(event);">
<mx:columns>
<mx:DataGridColumn dataField="Artist1" headerText="歌手"/>
<mx:DataGridColumn dataField="Album1" headerText="专辑"/>
<mx:DataGridColumn dataField="Price1" headerText="价格"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:HBox>
</mx:Application>
2.3 手动添加拖放功能
数据控件中已经内置了拖放功能的支持，但是其他Flex组件却不受支持。想要非数据控件也支持拖放功能，必须通过相应的事件驱动来实现。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.core.DragSource;
import mx.managers.DragManager;
import mx.events.*;
import mx.containers.Canvas;
private function mouseMoveHandler(event:MouseEvent):void
{
// 获取拖放的源组件
var dragInitiator:Canvas = Canvas(event.currentTarget);
// 获取组件的颜色值
var dragColor:int = dragInitiator.getStyle('backgroundColor');
// 创建一个 DragSource 对象.
var ds:DragSource = new DragSource();
// 添加数据到对象中
ds.addData(dragColor, 'color');
// 调用 DragManager 类的 doDrag() 方法
DragManager.doDrag(dragInitiator, ds, event);
}
private function dragEnterHandler(event:DragEvent):void
{
// 判断源的数据格式
if (event.dragSource.hasFormat('color'))
{
// 获取目标对象
var dropTarget:Canvas = Canvas(event.currentTarget);
// 接受拖放
DragManager.acceptDragDrop(dropTarget);
}
}
private function dragDropHandler(event:DragEvent):void
{
var data:Object = event.dragSource.dataForFormat('color');
// 设置颜色.
myCanvas.setStyle("backgroundColor", data);
}
]]>
</mx:Script>
<!-- 可以拖放两种颜色的箱子. -->
<mx:VBox x="29" y="23">
<mx:HBox>
<mx:Canvas
width="30" height="30"
backgroundColor="red"
borderStyle="solid"
mouseMove="mouseMoveHandler(event);"/>
<mx:Canvas
width="30" height="30"
backgroundColor="green"
borderStyle="solid"
mouseMove="mouseMoveHandler(event);"/>
</mx:HBox>
<!-- 使用 dragEnter and dragDrop 事件允许拖放. -->
<mx:Canvas id="myCanvas"
width="100" height="100"
backgroundColor="#FFFFFF"
borderStyle="solid"
dragEnter="dragEnterHandler(event);"
dragDrop="dragDropHandler(event);"/>
<mx:Button id="b1"
label="清空"
click="myCanvas.setStyle('backgroundColor', '0xFFFFFF');"/>
</mx:VBox>
</mx:Application>
三、 使用View States
通过View States可以改变一个组件或是应用程序的外观，以相应用户的操作。例如，Adobe Reader阅读器中，当单击侧边栏相应按钮时，就会显示或隐藏书签和页面的导航栏。
3.1 使用View States改变局部视图
在Flex内置提供的View States组件中，可以向目标容器添加任意组件，还可以使用SetProperty设置其任意属性的值。通过这些特性，可以更新局部视图。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<!-- 定义 view states 组件的属性.-->
<mx:states>
<mx:State name="Register">
<!-- 在表单中添加一个 TextInput 控件. -->
<mx:AddChild relativeTo="{loginForm}"
position="lastChild">
<mx:FormItem id="confirm" label="再次确认密码:">
<mx:TextInput/>
</mx:FormItem>
</mx:AddChild>
<!-- 设置属性.-->
<mx:SetProperty target="{loginPanel}" name="title" value="注册"/>
<mx:SetProperty target="{loginButton}" name="label" value="注册"/>
<!-- 移除相应控件.-->
<mx:RemoveChild target="{registerLink}"/>
<!-- 添加相应控件-->
<mx:AddChild relativeTo="{spacer1}" position="before">
<mx:LinkButton label="返回登录"
click="currentState=''"/>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Panel id="loginPanel"
title="登录"
horizontalScrollPolicy="off"
verticalScrollPolicy="off">
<mx:Form id="loginForm">
<mx:FormItem label="用户名:">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="密码:">
<mx:TextInput/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar>
<mx:LinkButton id="registerLink"
label="是否注册?"
click="currentState='Register'"/>
<mx:Spacer width="100%" id="spacer1"/>
<mx:Button label="登录" id="loginButton"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
3.2 View States之间的继承关系
为了更好地应付复杂的代码，在View States组件中内置了继承的功能。所谓的继承，就是可以从其他的View States组件中继承相同的功能，而不需要再创建或设置一次。这样就大大增强了代码的重用性，使得开发更加快速，代码维护更加容易。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:states>
<mx:State name="NewButton">
<mx:AddChild relativeTo="{v1}">
<mx:Button id="b2" label="添加按钮 B2"/>
</mx:AddChild>
<mx:SetProperty target="{b1}"
name="enabled" value="false"/>
</mx:State>
<!-- 基于NewButton创建一个新的state -->
<mx:State name="NewButton2" basedOn="NewButton">
<mx:AddChild relativeTo="{v1}">
<mx:Button id="b3" label="添加按钮 B3"/>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:VBox id="v1" x="36" y="29">
<mx:Button id="b1" label="Initial Button"/>
<mx:Button label="NewButton状态"
click="currentState = 'NewButton';"/>
<mx:Button label="NewButton2状态"
click="currentState = 'NewButton2';"/>
<mx:Button label="返回到原始状态"
click="currentState = '';"/>
</mx:VBox>
</mx:Application>
3.3 使用比较运算符
通过使用比较运算符，可以使得在同一个组件中，控制不同的视图。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:states>
<mx:State name="Register">
<mx:SetProperty
target="{loginPanel}"
name="title" value="注册"/>
<mx:SetProperty
target="{loginButton}"
name="label" value="注册"/>
</mx:State>
</mx:states>
<mx:Panel id="loginPanel" title="登录"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
fontSize="12" x="65" y="30">
<mx:Form id="loginForm">
<mx:Button label="登录" id="loginButton"/>
</mx:Form>
<mx:ControlBar width="100%">
<mx:Button label="改变视图"
click="currentState =
currentState=='Register' ? '':'Register';"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
四、 过渡特效Transitions
View States是用来改变一个组件或是应用程序的外观。Transitions则是定义了在视图之间切换的动作行为。可以通过使用effect类，来定义视图切换的动画效果。
4.1 使用Transitions
Transitions组件通过使用effect类，可以设置切换视图的不同动画特效。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
// 导入 Bounce 特效
import mx.effects.easing.Bounce;
]]>
</mx:Script>
<!-- 定义 transition 效果 -->
<mx:transitions>
<mx:Transition>
<mx:Parallel
targets="{[loginPanel, registerLink, loginButton, confirm]}">
<mx:Resize duration="500" easingFunction="Bounce.easeOut"/>
<mx:Sequence target="{confirm}">
<mx:Blur duration="200" blurYFrom="1.0" blurYTo="20.0"/>
<mx:Blur duration="200" blurYFrom="20.0" blurYTo="1"/>
</mx:Sequence>
</mx:Parallel>
</mx:Transition>
</mx:transitions>
<!-- 定义 states -->
<mx:states>
<mx:State name="Register">
<mx:AddChild relativeTo="{loginForm}"
position="lastChild">
<mx:FormItem id="confirm" label="确认密码:">
<mx:TextInput/>
</mx:FormItem>
</mx:AddChild>
<mx:SetProperty target="{loginPanel}"
name="title" value="注册"/>
<mx:SetProperty target="{loginButton}"
name="label" value="注册"/>
<mx:RemoveChild target="{registerLink}"/>
<mx:AddChild relativeTo="{spacer1}" position="before">
<mx:LinkButton label="返回登录界面"
click="currentState=''"/>
</mx:AddChild>
</mx:State>
</mx:states>
<!-- 设置视图 -->
<mx:Panel title="登录" id="loginPanel" fontSize="12"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Form id="loginForm">
<mx:FormItem label="用户名:">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="密码:">
<mx:TextInput/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar>
<mx:LinkButton id="registerLink"
label="是否注册?"
click="currentState='Register'"/>
<mx:Spacer width="100%" id="spacer1"/>
<mx:Button label="登录" id="loginButton"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
五、 使用ToolTips
ToolTips用来向用户提供一些相关的帮助信息，这有助于用户的操作。当用户把鼠标移动到可视化的控件中时，ToolTips就会引导用户进一步的操作程序。
5.1 使用ToolTips属性
在很多应用程序中，ToolTips都是一个标准性的功能。在Flex中也不例外，同样也提供了这样的属性。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:VBox toolTip="VBOX" fontSize="12"> <mx:Button id="b1" label="Button 1" toolTip="这是一个按钮控件"/> <mx:Button id="b2" label="Button 2"/> </mx:VBox> </mx:Application>
5.2 设置ToolTips样式
如果默认的ToolTips样式不理想，可以通过Style组件，自己定义一个ToolTips样式。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
ToolTip
{
fontFamily: "微软雅黑";
fontSize: 19;
fontStyle: "italic";
color: #FF0000;
backgroundColor: #5596EE;
}
</mx:Style>
<mx:Button id="b1" label="按钮"
toolTip="这是 toolTip 效果." fontSize="12"/>
</mx:Application>
5.3 使用ToolTips管理器
在Flex中提供了一个ToolTipManager类，是用来设置ToolTips相关特性的，如是否显示。ToolTipManager类位于mx.managers包中。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
// 导入 ToolTipManager 类
import mx.managers.ToolTipManager;
private function toggleToolTips():void
{
if (ToolTipManager.enabled)
{
// 设置提示框不可用
ToolTipManager.enabled = false;
}
else
{
// 设置提示框可用
ToolTipManager.enabled = true;
}
}
]]>
</mx:Script>
<mx:Button id="b1"
label="单击改变提示框状态."
width="150" fontSize="12"
click="toggleToolTips();"
toolTip="这是按钮提示框."
/>
</mx:Application>
5.4 创建一个自定义的ToolTips
在ToolTipManager类中，提供了两种方法来使用ToolTips。一个是createToolTip，用来创建ToolTips。另一个是destroyToolTip，用来销毁ToolTips。使用这两个方法，就可以在所有的组件中定义ToolTips。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.managers.ToolTipManager;
import mx.controls.ToolTip;
public var myTip:ToolTip;
// 鼠标经过事件
private function createBigTip():void
{
var s:String = "这些按钮可以保存、应用、取消执行的操作。"
// 创建ToolTip对象
myTip = ToolTipManager.createToolTip(s,10,10) as ToolTip;
// 设置ToolTip对象样式
myTip.setStyle("backgroundColor",0xFFCC00);
myTip.setStyle("fontSize",12);
// 设置ToolTip对象宽度和高度
myTip.width = 250;
myTip.height = 30;
}
// 鼠标移除事件
private function destroyBigTip():void
{
// 销毁ToolTip对象
ToolTipManager.destroyToolTip(myTip);
}
]]>
</mx:Script>
<mx:Style>
Panel
{
paddingLeft: 15;
paddingRight: 15;
paddingTop: 15;
paddingBottom: 15;
}
</mx:Style>
<mx:Panel title="ToolTips" fontSize="12" x="50" y="50"
rollOver="createBigTip()" rollOut="destroyBigTip()">
<mx:Button label="保存" toolTip="保存并退出"/>
<mx:Button label="应用" toolTip="接受改变并继续"/>
<mx:Button label="取消" toolTip="取消并退出"/>
</mx:Panel>
</mx:Application>
