Flex_4_样式与布局小结

Flex 4 样式与布局
第一篇 Flex 4 与自定义布局（Layout）
Flex 4/Spark组件架构的新功能之一是可以定制一个容器的布局而不必改变容器本身。

您需要做的就是定义一个自定义布局。

Flex 4/Spark架构中的容器并不控制它们自己的布局。

相反，每种容器具有一个布局属性，用于确定如何在屏幕上设置子元素的布局。

可以使用一个单独的Group容器，并赋予其一个垂直布局、水平布局或平铺布局，这取决于您将如何创建它。

代码很简单，如下所示：
（参考文章：Flex 4与自定义布局：
译文：/lihe111/archive/2009/07/06/4325571.aspx
原文：/2009/05/flex-4-custom-layouts.html）
第二篇 Flex 4 SkinClass 改变组件外观
在Flex 4中，SkinClass指向的文件通常用一个使用s:skin标签（或者sparkskin）的MXML 文件进行定义。

通过skinclass来改变外观的spark组件通常也是skinclass引用的Host component。

Flex 4 中新的改变外观架构可以在很大的程度上将组件和组件的外观设计分开，这样组件外观设计的代码通过改变小部分的代码就可以得到重用了。

一、SkinClass必须包含的三样东西：
1、HostComponent metadata
SkinClass文件需要引用HostComponent对象，而HostComponent是指需要改变外观的组件。

我们可以通过metadata标签来指定HostComponent。

如：我们需要设置Button 的外观，那么Button就是HostComponent。

Code：
1.<fx:Metadata>
2. <![CDATA[
3. [HostComponent("ponents.Button")]
4. ]]>
5.</fx:Metadata>
2、States
如果HostComponent中有SkinState（一般用metadata标签来声明），例如：
s: ButtonBase 中包含了 1. [SkinState("up")]
那么在相应的skinclass mxml 文件中必须有如下相应的state ： 1. <s:states>
2. <s:State name="up"/>
3、 Skin parts
HostComponent 中的属性可以被定义为必须或者是可选的部分（skin parts ），可选的属性一般通过metadata 标签将其默认设置为false 。

如果s:ButtonBase 中包含一下的属性：
那么，skin 文件应该包含一下相应的声明：
二、SkinClass 的使用方法：
（skins.CustomApplicationSkin 为Skinclass 指向的mxml 文件路径） 1、属性引用：
2、
CSS 引入：
3、AS代码指定，比较适合动态皮肤。

三、示例
见word文档《Flex 4 skinclass 简单示例》
第三篇 Flex 4 CSS
Flex 4 对CSS做了很大的改进，虽然还不能像HTML那样随心所欲，但是也能满足任何项目的要求了。

Flex 不支持使用层叠样式表(CSS) 来控制组件的所有可视方面。

属性, 比如x, y, width 和height 是UIComponent 类的属性, 而不是其样式, 因此, 无法在CSS 中进行设置。

您还必须知道您的主题支持哪些属性。

Flex 中的默认主题并不支持所有样式属性。

在Flex 中应用样式有许多方法。

某些样式提供更多粒度控制并能以编程方式被执行。

其他样式不像那么灵活, 但可能需要较少的计算
一、设置样式的几种方式
∙使用本地样式定义
∙使用外部样式表
∙使用内联样式
可以像设定组件的属性一样在MXML标签中设定样式属性。

内联样式的优先级高于本地样式和外部样式。

例如：<:Button id="myButton" fontSize="15" label="My Button"/>
∙使用setStyle() 方法
可以在ActionScript中使用方法来操作组件的样式属性。

使用setStyle()方法的优先级是最高的。

setStyle() 方法采用两个参数: 样式名称和样式值。

二、Flex CSS样式设置
详细见文档：《FLEX 4 CSS样式设置例》
1、四种基本的选择方式：
1）Type
例如：s|Button{ color: #FFFFFF; }
适合任意一个Button的实例。

2）Universal
例如：* { fontWeight: bold; } （注意要加上*号）
对程序中所有组件的字体都有效。

3）Class：由组件的stylename属性引用
例如：.rounded { cornerRadius: 10;｝
则引用为：<s:Button styleName="rounded" label="Here be a Button"/> 4）ID：对应组件的ID
例如：#header{ backgroundColor: #FF0000; } （header为组件的ID）
Note：四种方式可以也可以通过组合形成新的选择方式
5）组合方式
例如：.main s|Button{ fontSize: 15; }
即对引用Class 为main的组件内所有Button的样式都有影响。

2、示例（各种使用方法汇总）
1）CssTest.mxml 文件
2）mycss.css 文件
3、效果如下图：。