本文来自: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 skinthat stretches to fill the background.{'/r/r'}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 scalingfor its background image. Notice how the image is uniformly scaled, resulting
in aliasing. {'/r/r'}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>