Flex 4 樣式與布局
第一篇 Flex 4 與自定義布局（Layout）
Flex 4/Spark組件架構的新功能之一是可以定制一個容器的布局而不必改變容器本身。您需要做的就是定義一個自定義布局。
Flex 4/Spark架構中的容器並不控制它們自己的布局。相反，每種容器具有一個布局屬性，用於確定如何在屏幕上設置子元素的布局。可以使用一個單獨的Group容器，並賦予其一個垂直布局、水平布局或平鋪布局，這取決於您將如何創建它。代碼很簡單，如下所示：
|
<s:layout> <s:VerticalLayout/> </s:layout> |
不過真正的好處在於您不必局限於框架中定義的默認布局。您可以輕松定制BaseLayout類來實現自己定制的布局邏輯。
|
<s:DataGroup width="100%" height="100%" dataProvider="{ dataSource }" itemRenderer="SimpleItemRenderer">
<s:layout> <local:CircularLayout /> </s:layout>
</s:DataGroup> |
（參考文章：Flex 4與自定義布局：
譯文：http://blog.csdn.net/lihe111/archive/2009/07/06/4325571.aspx
原文：http://insideria.com/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：
- <fx:Metadata>
- <![CDATA[
- [HostComponent("spark.components.Button")]
- ]]>
- </fx:Metadata>
2、 States
如果HostComponent中有SkinState（一般用metadata標簽來聲明），例如：
s: ButtonBase中包含了
- [SkinState("up")]
那么在相應的skinclass mxml文件中必須有如下相應的state：
1. <s:states>
- <s:State name="up"/>
3、 Skin parts
HostComponent中的屬性可以被定義為必須或者是可選的部分（skin parts），可選的屬性一般通過metadata標簽將其默認設置為false。如果s:ButtonBase中包含一下的屬性：
|
[SkinPart(required="false")] public var labelDisplay:TextBase; |
那么，skin文件應該包含一下相應的聲明：
|
<s:Label id="labelDisplay"/> |
二、SkinClass的使用方法：
（skins.CustomApplicationSkin 為Skinclass指向的mxml文件路徑）
1、屬性引用：
|
<s:Application name="Spark_Application_skinClass_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" skinClass="skins.CustomApplicationSkin"> </s:Application> |
2、CSS引入：
|
<fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; s|Application { skinClass: ClassReference("skins.CustomApplicationSkin"); } </fx:Style> |
3、AS代碼指定，比較適合動態皮膚。
|
<fx:Script> <![CDATA[ import skins.CustomApplicationSkin;
protected function btn_click(evt:MouseEvent):void { setStyle("skinClass", CustomApplicationSkin); } ]]> </fx:Script> |
三、示例
見word文檔《Flex 4 skinclass 簡單示例》
第三篇 Flex 4 CSS
Flex 4 對CSS做了很大的改進，雖然還不能像HTML那樣隨心所欲，但是也能滿足任何項目的要求了。
Flex 不支持使用層疊樣式表 (CSS) 來控制組件的所有可視方面。屬性, 比如 x, y, width 和 height 是 UIComponent 類的屬性, 而不是其樣式, 因此, 無法在 CSS 中進行設置。您還必須知道您的主題支持哪些屬性。Flex 中的默認主題並不支持所有樣式屬性。
在 Flex 中應用樣式有許多方法。 某些樣式提供更多粒度控制並能以編程方式被執行。其他樣式不像那么靈活, 但可能需要較少的計算
一、設置樣式的幾種方式
- 使用本地樣式定義
|
<fx:Style> |
- 使用外部樣式表
|
<fx:Style source="external.css"/> |
- 使用內聯樣式
可以像設定組件的屬性一樣在MXML標簽中設定樣式屬性。內聯樣式的優先級高於本地樣式和外部樣式。
例如：<:Button id="myButton" fontSize="15" label="My Button"/>
- 使用 setStyle() 方法
可以在ActionScript中使用方法來操作組件的樣式屬性。使用setStyle()方法的優先級是最高的。
setStyle() 方法采用兩個參數: 樣式名稱和樣式值。
|
<fx:Script> <![CDATA[ private function initVbox():void { box2.setStyle("paddingTop",12); box2.setStyle("paddingBottom",12); box2.setStyle("borderStyle","solid"); } ]]> </fx:Script> |
二、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、示例（各種使用方法匯總）
|
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
<fx:Style source="mycss.css"/>
<!--1、全局選擇：定制全局樣式--> <mx:Button id="s01ID" x="500" y="20" label="方式1_1號"/> <s:Button id="s02ID" x="500" y="50" label="方式1_2號" />
<!--2、全局選擇器：可在組件的屬性里面指定樣式類，然后在css中聲明相應的樣式類--> <mx:Canvas id="s03ID" x="500" y="100" width="200" height="100" styleName="myStyleClass"/>
<!--3、ID選擇：組件ID設置相應的組件樣式--> <mx:Canvas id="can01ID" x="500" y="220" width="200" height="100"/>
<!--4、派生選擇：類里面的組件ID來定義樣式--> <s:VGroup id="vGroupID" x="500" y="350"> <mx:ProgressBar id="progressBarID"/> </s:VGroup>
<!--5、狀態選擇：通過狀態定義樣式，只適用於Button組件--> <s:Button id="can02ID" x="500" y="450" width="200" height="100" label="方式5"/>
</s:Application> |
1）CssTest.mxml 文件
|
/* CSS file */ @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/halo";
/*-----------1、全局選擇：定制全局樣式-----------*/ mx|Button s|Button{ color: #FF0000; } s|Button{ color: #FF00FF; } /*-----------2、全局選擇器：可在組件的屬性里面指定樣式類，然后在css中聲明相應的樣式類-----------*/ .myStyleClass{ backgroundColor: #000000; color:#0000FF; } /*-----------3、ID選擇：組件ID設置相應的組件樣式-----------*/ #can01ID{ backgroundColor: #0000FF; } /*-----------4、派生選擇：類里面的組件ID來定義樣式-----------*/ s|VGroup#vGroupID mx|ProgressBar{ color:#FF0000; } /*-----------5、狀態選擇：通過狀態定義樣式，只適用於Button組件-----------*/ s|Button:down{ fontSize:20; color:#FF0000; } |
2）mycss.css 文件
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
/*-----------1、全局選擇：定制全局樣式-----------*/
mx|Button s|Button{
color: #FF0000;
}
s|Button{
color: #FF00FF;
}
/*-----------2、全局選擇器：可在組件的屬性里面指定樣式類，然后在css中聲明相應的樣式類-----------*/
.myStyleClass{
backgroundColor: #000000;
color:#0000FF;
}
/*-----------3、ID選擇：組件ID設置相應的組件樣式-----------*/
#can01ID{
backgroundColor: #0000FF;
}
/*-----------4、派生選擇：類里面的組件ID來定義樣式-----------*/
s|VGroup#vGroupID mx|ProgressBar{
color:#FF0000;
}
/*-----------5、狀態選擇：通過狀態定義樣式，只適用於Button組件-----------*/
s|Button:down{
fontSize:20;
color:#FF0000;
}
參考文章：
http://wenku.baidu.com/view/4d25346e561252d380eb6ed4.html
http://wenku.baidu.com/view/bde2b74ffe4733687e21aaf8.html
http://blog.163.com/huangwei913@126/blog/static/23263222201251571153630/