v5_05 了解皮肤

v5_05 Introducing skinning 了解皮肤

 

ex5_05

这部分主要讲

如何创建Spark组件的皮肤,以及使用可设计外观的Spark容器

使用基于约束的布局来排列皮肤内的容器内容,然后使用CSS将皮肤应用到一个组件

 

mx的皮肤是固化在组件中的

spark的皮肤是与组件的内容和功能相分离的,一个皮肤可以包含图形,文本,图片和动画

它们还支持组件的状态,因此应用了皮肤的组件可以直观地响应用户或系统事件

可以通过CSS,MXML,ActionScript应用皮肤到一个组件

 

MX组件,可以以属性值 的方式直接对组件应用很多样式

Spark组件的构建方式不同,只有几个可用的属性可以设置,如backgroundColor

所以想要对一个Spark组件应用样式,通常需要为它创建一个皮肤

 

创建皮肤作为分离的MXML类文件,然后通过使用skinClass属性将其启用到一个组件中

 

1.创建一个皮肤及应用

HostComponent表明这个皮肤可以被应用于哪些components

这个皮肤的最后一个元素是一个必需的Group容器,它的id属性值必须是<!--WizRtf2Html Charset=0 -->contentGroup

<!--WizRtf2Html Charset=0 -->contentGroup 是一个皮肤部件,它代表了在主应用文件中的Application容器的开始和结束标签之间定义的所有可见的内容

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx">
<!-- Properties of the parent ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<s:states>
<s:State name="normal"/>
<s:State name="disabled"/>
</s:states>
<!-- Metadata ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<fx:Metadata>
[HostComponent("spark.components.Application")]
</fx:Metadata>
<!-- UI components ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<s:Rect width="973" height="636" x="0" y="0">
<s:stroke>
<s:LinearGradientStroke weight="1"/>
</s:stroke>
</s:Rect>
<s:Group id="contentGroup"
left="20" right="10"
top="25" bottom="10">
</s:Group>
</s:SparkSkin>

  

 

2.对不可外观的容器使用皮肤

Group和DataGroup容器,是不可见的,它不能设计外观,如果想要设计它的外观

应该分别使用一个SkinnableContainer或者SkinnableDataContainer容器来代替

<s:SkinnableContainer width="933" height="81" 
skinClass="skins.TopContainerSkin">
<mx:Image source="assets/logo.png" />
<s:Label text="Employee" 
fontWeight="bold" fontSize="38"
alignmentBaseline="ideographicBottom"/>
<s:Label text="Portal" 
fontSize="38" 
alignmentBaseline="ideographicBottom"/>
</s:SkinnableContainer>

  

 

3.在css中使用皮肤

s|Panel
{
skinClass:ClassReference("skins.PanelSkin");
}