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>

结果

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值