样式
样式对于一个应用程序来说也是非常有用的,使用样式和主题可以改变单个组件或者全部组件的外观,使他们看起来更加舒服。使用样式、使用字体、指针管理
一、使用样式
通过样式属性可以更改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>