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

Flex 3快速入门（15）: 构建高级用户界面 设置组件的皮肤
Flex 3快速入门: 构建高级用户界面 设置组件的皮肤<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>

结果

?