Flex 3快速入门: 构建高级用户界面 设置组件的皮肤

本文来自：http://www.airia.cn/FLEX_Directory/programmatic/

设置皮肤是通过修改或替换的可视元素来更改组件的外观。 这些元素可以是图像，SWF文件或包含绘图 API 方法的类文件组成。Skins定义组件的部分或整个过程的视觉效果。 例如，一个 Button 控件有很多外观表现按钮的状态。 使用 downSkin，upSkin 和 overSkin 样式属性分别定义：鼠标离开时、正常时、当鼠标移动至其上时。

有几种方法来定义外观：
 
在内部通过使用 setStyle() 方法
使用样式表 (CSS)。

本节中会分别演示这些方法。

你可以通过两种方式设置FLEX组件皮肤

图形设置皮肤

编程设置皮肤

 

图形设置皮肤

图形设置皮肤，在Flex 应用程序中嵌入图像文件。 然后，可以使用这些文件来替换组件的现有的外观。

使用图形设置皮肤的主要优点是设计者可以各种可视化工具，例如使用  Photoshop、Fireworks 来创建组件的外观，允许设计者不懂得ActionScript方面的知识。

但是使用图形设置皮肤会比编程设置皮肤占用更高的内存，因为最终需要将外部图像或者是SWF文件嵌入到FLEX的SWF文件中。

提示： 如果更改一个或多个外观图形文件，您必须重新编译 Flex 应用程序才可以生效。

FLEX包装在类中嵌入图像。因此，将外观应用样式属性时，应认为每个皮肤作为一个类。如果您设置 Button 控件（例如以"myimage.jpg"）upSkin 属性值，那么要更改当前

皮肤类到新类。

下面的示例使用 CSS 选择器设置 upSkin，overSkin 和 downSkin 样式属性，所有的Button 控件，使用外部 PNG 图像。

代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    viewSourceURL="src/SkinningGraphical1/index.html"
    layout="horizontal" width="270" height="100"

    horizontalAlign="center" verticalAlign="middle"
>

    <mx:Style>
        Button
        {
            upSkin: Embed("assets/box_closed.png");

            overSkin: Embed("assets/box.png");
            downSkin: Embed("assets/box_new.png");

        }
    </mx:Style>
   
    <mx:Button/>
   
    <mx:Text text="Roll over and click the box!"/>

</mx:Application>

结果

 

右键“View Source ”查看源码

 

图形设置皮肤和9-slice 缩放

使用图形设置皮肤有一个缺点，如果你调整组件大小他们可能会扭曲变形。这个时候可以使用9-slice切片缩放技术来避免因调整组件大小而产生扭曲。

使用 9-slice切片缩放功能，图像的的四个角并不全部缩放，水平的边框比例仅在水平的方向，垂直边框比例仅在垂直方向。

此示例在 CSS 中使用 scaleGridTop，scaleGridBottom，scaleGridLeft 和scaleGridRight 的网格线位置属性定义 VBox 组件的背景图像的缩放 9 片网格。该示例的第二个区域是不使用 9 片缩放嵌入的背景图像的效果。

代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    viewSourceURL="src/SkinningGraphical2/index.html"

    layout="vertical" width="525" height="500"
>   
    <mx:Style>
        .nineSliceScalingBackground
        {

            background-image: Embed("assets/fancy_background.png",
                scaleGridTop="55", scaleGridBottom="137",
                scaleGridLeft="57", scaleGridRight="266");

            background-size:"100%";           
        }

        .nonNineSliceScalingBackground
        {
           
            background-image:Embed("assets/fancy_background.png");

            background-size:"100%";
        }       

        VBox
        {
            padding-bottom:50;
            padding-top:50;
            padding-left:60;
            padding-right:60;

        }
    </mx:Style>

    <mx:VBox styleName="nineSliceScalingBackground" width="100%"

height="50%">

        <mx:Text
            width="100%"
            text="This VBox has a graphical 9-slice scaling background skin

that stretches to fill the background.{&apos;/r/r&apos;}Notice how the

corners do not scale. You can also use a preset padding value to offset your

content so it appears inside the borders of the background image."
        />

    </mx:VBox>

    <mx:VBox styleName="nonNineSliceScalingBackground" width="100%"

height="50%">
        <mx:Text
            width="100%"
            text="This VBox, on the other hand, does not use 9-slice scaling

for its background image. Notice how the image is uniformly scaled, resulting

in aliasing. {&apos;/r/r&apos;}Also, notice how this text overlaps the

background as the corners do not have fixed dimensions that we can compensate

for by using padding."
        />
    </mx:VBox>
   
</mx:Application>