Oracle Seeker, Oracle探索者

Flex3应用中需要通过样式来控制控件的表现，如背景颜色、边框颜色、边框的左边和右边宽度等等，Flex3中每个控件都会有一些特别的样式属性，具体可以参考asdoc

在Flex3应用开发中 MXML 和 ActionScript 中设置样式的方式并不完全一样，主要有以下几种方式：

1. 通过指定组件的样式属性来设置属性的值
2. 设置组件的styleName属性来引用css文件中的样式定义
3. 通过组件的styleDeclaration属性来设置样式的值
4. 通过组件的setStyle方法来设置样式的值

一、MXML中设置组件的样式

在MXML中主要通过两种方式来设置组件的样式

首先是在MXML文件中直接通过flex的组件样式属性来指定样式的值，如下我通过backgroundColor属性来设置flex应用的背景颜色为：#FFFFFF ，其它样式相关的属性可以查看asdoc中的Style部分

1

其次是通过定义css样式，然后MXML中引入样式内容之后，通过styleName属性来指定样式定义的名称，从而达到对组件样式的设置

1. 创建一个css文件
2. 在css文件中定义样式
3. 在MXML文件中通过<mx:Style source=”"/>组件来引入样式定义文件的内容
4. 通过组件的styleName属性来指定css样式文件中定义的样式名称

如下创建一个CustomCreatePanelStyle.css的样式文件，定义如下的样式内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.CreatePanelStyle
{
	borderThicknessBottom:0 ;
	borderThicknessLeft:1 ;
	borderThicknessRight:1 ;
	top:5 ;
	left:5 ;
	right:5 ;
	bottom:2 ; 
	backgroundColor:#FFFFFF ;
	backgroundAlpha:1.0 ;
	alpha:1.0 ;
	borderColor:#d5dced;
	cornerRadius:5;
	roundedBottomCorners:true;
	dropShadowEnabled:false;
}

然后在MXML应用中使用CreatePanelStyle样式，注意在css文件定义的时候，样式名称之前必须有一个点号(.)

1
2
3
4

 
 
 
        ......

二、ActionScript中设置组件的样式

如果通过ActionScript来创建组件的话，设置样式的方式和MXML不一样，在ActionScript中可以通过三种方法来指定组件的样式。

1，通过组件的styleName方法来指定外部定义的css样式定义

对于CSS样式的定义和上面MXML中的一样，继续上面关于Panel的设置，下面创建一个CustomCreatePanel来扩展Panel组件，使用上面的样式对扩展的Panel进行设置：

1
2
3
4
5
6
7
8

public class CustomCreatePanel extends Panel
{
  public function CustomCreatePanel()
  {
    super();
    this.styleName = "CreatePanelStyle";
  }
}

2，通过组件的styleDeclaration属性来指定样式修饰对象CSSStyleDeclaration

1
2
3
4
5
6
7
8
9
10
11
12
13

CustomCreatePanel extends Panel
{
  public function CustomCreatePanel()
  {
    super();
 
    var style:CSSStyleDeclaration = new CSSStyleDeclaration();
    style.setStyle(”borderThicknessBottom”, 0);
    style.setStyle(”top”, 5); 
    ......
    this.styleDeclaration = style;
  }
}

3，通过组件的setStyle方法来设置样式

1
2
3
4
5
6
7
8
9
10
11

CustomCreatePanel extends Panel
{
  public function CustomCreatePanel()
  {
    super();
 
    this.setStyle(”borderThicknessBottom”, 0);
    this.setStyle(”top”, 5); 
    ......
  }
}

–

相关文章:

1. Flex中使用ItemRenderer实现表格行超链接