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

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

[ 来源：Adobe.com AIRI原创教程翻译 ] [ 作者：Adobe devnet ] [ 日期：08-08-14 ] [ 浏览：3768 次]

设置皮肤是通过修改或替换的可视元素来更改组件的外观。 这些元素可以是图像，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>

结果

 

 

 

编程设置皮肤

在类文件中使用ActionScript 语句绘制外观。

编程设置皮肤优点是它提供了大量的样式控制。 例如你无法通过样式表控制按钮控件的圆角半径，但可以通过编程方式来定义外观。你可以直接在FLEX环境下或文本文档中编

辑，无需借助图形工具。使用编程方式定义外观会占用较小的内存，因为没有包含外部图形文件。

当然，试用编程方式需要你具备ActionScript相关的知识。

提示：当您编译应用程序时,编程外观的类文件必须在 Flex 应用程序的 Classpath 中。

下面的示例使用编程方式创建自定义的边框外观。CustomBorder 类来扩展RectangularBorder 类，并且继承其 drawRoundRect() 方法。 此方法源自ProgrammaticSkin 类，是所有的内置 Flex 外观的基类中。

您的皮肤类可以扩展 ProgrammaticSkin 类或其子类别，如 RectangularBorder 继承更高级的绘图和实用工具方法。

代码
ActionScript

package
{

    import mx.skins.RectangularBorder;
    import flash.display.Graphics;
    import mx.graphics.RectangularDropShadow;

    public class CustomBorder extends RectangularBorder
    {

        private var dropShadow:RectangularDropShadow;

        override protected function updateDisplayList
        (unscaledWidth:Number, unscaledHeight:Number):void
        {

            super.updateDisplayList(unscaledWidth, unscaledHeight);
            var cornerRadius:Number = getStyle("cornerRadius");
            var backgroundColor:int = getStyle("backgroundColor");
            var backgroundAlpha:Number = getStyle("backgroundAlpha");
            graphics.clear();
           
            // Background

            drawRoundRect
            (
                0, 0, unscaledWidth, unscaledHeight,
                {tl: 0, tr: cornerRadius, bl: cornerRadius, br: 0},
                backgroundColor, backgroundAlpha
            );
           
            // Shadow

            if (!dropShadow)
                dropShadow = new RectangularDropShadow();
           
            dropShadow.distance = 8;
            dropShadow.angle = 45;
            dropShadow.color = 0;
            dropShadow.alpha = 0.4;
            dropShadow.tlRadius = 0;
            dropShadow.trRadius = cornerRadius;
            dropShadow.blRadius = cornerRadius;
            dropShadow.brRadius = 0;
           
            dropShadow.drawShadow(graphics, 0, 0, unscaledWidth, unscaledHeight);
        }

    }
}

MXML file

<?xml version="1.0" encoding="utf-8"?>

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml "
     viewSourceURL="src/ProgrammaticSkinning/index.html"
>
    <mx:VBox
        borderSkin="CustomBorder"
        backgroundColor="0xCCCC99"   
        backgroundAlpha="0.8"
        cornerRadius="14"
        paddingLeft="20" paddingTop="20"   
        paddingRight="20" paddingBottom="20"

    >
        <mx:Text text="The VBox has a {&apos;\r&apos;}programmatic skin."/>
    </mx:VBox>
   
</mx:Application>

结果