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>