flex---->样式和主题
样式
样式对于一个应用程序来说也是非常有用的，使用样式和主题可以改变单个组件或者全部组件的外观，使他们看起来更加舒服。使用样式、使用字体、指针管理
一、使用样式
通过样式属性可以更改Flex组件的外观，这些属性包含了文字大小、背景颜色等定义。定义样式属性可以有几种方法，包括内部定义、设置组件样式属性、通过外部样式表文件等。
1.1 使用Style组件定义样式
通过<mx:Style>标记，可以定义CSS 2.0的语法。可以把定义的这些样式应用到当前文档或者其子文档。使用<mx:Style>标记定义样式的格式如下所示。
<mx:Style>
selector_name
{
style_property: value;
[...]
}
</mx:Style>
其中，selector_name是样式名称，style_property是样式属性，value是属性的值。这些都是严格遵循CSS 2.0的语法。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
Button
{
fontSize: 15;
color: #B3381A;
}
</mx:Style>
<mx:Button id="myButton" label="按钮1" x="150" y="50"/>
<mx:Button id="myButton2" label="按钮2" x="50" y="50"/>
</mx:Application>
1.2 使用StyleManager类定义样式
在ActionScript中使用StyleManager类，可以使用类的选择器设置样式。使用StyleManager类，还可以声明新的CSS样式，并且应用到Flex程序中的控件。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp(event)"> <mx:Style> .myStyle { color: #FFFFFF; } </mx:Style> <mx:Script> <![CDATA[ import mx.styles.StyleManager; public function initApp(e:Event):void { // 设置 Button 控件的字体代谢哦啊 StyleManager.getStyleDeclaration("Button").setStyle("fontSize",24); // 设置 myStyle 样式类的 color 值 StyleManager.getStyleDeclaration(".myStyle").setStyle("color",0xB3381A); // 设置全局样式 StyleManager.getStyleDeclaration("global").setStyle("fontStyle","italic"); } ]]> </mx:Script> <mx:Button id="myButton" label="按钮1" styleName="myStyle" x="20" y="39"/> <mx:Label id="myLabel" text="这是一个文本标签." x="123" y="41" styleName="myStyle"/> </mx:Application>
1.3 外部样式表
Flex同HTML一样，也支持外部的CSS样式表。使用<mx:Style>标记中的source属性，可以把外部的样式表应用到当前文档或者其子文档中。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Style source="style.css"/> <mx:Button id="myButton" label="按钮" x="68" y="41"/> </mx:Application>
二、 使用字体
在应用程序中可以包含字体。包含的字体既可以是默认操作系统内置的，还可以是其他的外部字体。如果使用非系统默认的，那么就需要嵌入到应用程序中。
2.1 使用系统字体
通过fontFamily属性，可以把任何一个字体应用到程序中。然而，并不是所有的系统拥有所有的字体。系统字体并不能以外部信息的形式导出来，也不能嵌入在SWF文件中一起发布。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
VBox
{
fontFamily: 微软雅黑;
fontSize: 14pt;
}
Panel
{
paddingLeft: 10;
paddingTop: 10;
paddingBottom: 10;
paddingRight: 10;
}
</mx:Style>
<mx:Panel title="字体显示面板" x="10" y="10">
<mx:VBox>
<mx:Button label="这个按钮使用了微软雅黑"/>
<mx:Label text="这个文本使用微软雅黑"/>
<mx:TextArea height="75">
<mx:text>
这个文本域使用了微软雅黑
</mx:text>
</mx:TextArea>
</mx:VBox>
</mx:Panel>
</mx:Application>
2.2 使用嵌入式字体
相比较使用系统字体，嵌入式字体的优势在于在程序运行时，指定的字体总是显示出来，不管系统中是否有这种字体。开发时不用去考虑字体样式丢失的问题。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
@font-face
{
src: url("assets/msyh.ttf");
fontFamily: myFontFamily;
advancedAntiAliasing: true;
}
VBox
{
fontFamily: fontFamily;
fontSize: 14pt;
}
Panel
{
paddingLeft: 10;
paddingTop: 10;
paddingBottom: 10;
paddingRight: 10;
}
</mx:Style>
<mx:Panel title="嵌入式字体" x="10" y="10">
<mx:VBox>
<mx:Button label="这个按钮嵌入了微软雅黑"/>
<mx:Label text="这个文本嵌入了微软雅黑"/>
<mx:TextArea height="75">
<mx:text>
这个文本域嵌入了微软雅黑
</mx:text>
</mx:TextArea>
</mx:VBox>
</mx:Panel>
</mx:Application>
三、 指针管理器
在Flex中，使用指针管理器可以控制鼠标指针的图片。当程序等待进程到完成的过程中，可以使用指针管理器提供一个用户提示。这些图片类型可以包括JPEG、GIF、PNG以及SVG等，还可以是一个Sprite对象，或者一个SWF文件。
指针管理器是放在包mx.managers.CursorManager中的，通过CursorManager类的静态属性和方法就可以控制鼠标指针的样式。
<?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.CursorManager;
import flash.events.*;
// 定义指针变量ID
private var cursorID:Number = 0;
// 嵌入等待图片
[Embed(source="assets/wait.gif")]
private var waitCursorSymbol:Class;
// 加载图片
private function initImage(event:MouseEvent):void
{
// 设置光标忙碌状态
cursorID = CursorManager.setCursor(waitCursorSymbol);
// 加载图片
image1.load("http://pic.nipic.com/2008-03-10/200831013447396_2.jpg");
}
// 完成图片加载，移除指针样式
private function loadComplete(event:Event):void
{
CursorManager.removeCursor(cursorID);
}
]]>
</mx:Script>
<mx:VBox x="36" y="23">
<!-- 按钮触发图片加载 -->
<mx:Button id="myButton" label="加载图片" fontSize="14" click="initImage(event);"/>
<!-- 图像控件 -->
<mx:Image id="image1"
scaleContent="true"
complete="loadComplete(event);"/>
</mx:VBox>
</mx:Application>
