flex 4 佈局樣式

 

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 中新的改變外觀架構能夠在很大的程度上將組件和組件的外觀設計分開，這樣組件外觀設計的代碼經過改變小部分的代碼就能夠獲得重用了。

 

1、SkinClass必須包含的三樣東西：

一、 HostComponent metadata

SkinClass文件須要引用HostComponent對象，而HostComponent是指須要改變外觀的組件。咱們能夠經過metadata標籤來指定HostComponent。如：咱們須要設置Button的外觀，那麼Button就是HostComponent。 

Code：

1. <fx:Metadata>
2.    <![CDATA[
3.    [HostComponent("spark.components.Button")]
4.    ]]>
5. </fx:Metadata>

 

二、 States

若是HostComponent中有SkinState（通常用metadata標籤來聲明），例如：

s: ButtonBase中包含了

1.  [SkinState("up")]

那麼在相應的skinclass mxml文件中必須有以下相應的state：

1. <s:states>

1. <s:State name="up"/>

 

三、 Skin parts

HostComponent中的屬性能夠被定義爲必須或者是可選的部分（skin parts），可選的屬性通常經過metadata標籤將其默認設置爲false。若是s:ButtonBase中包含一下的屬性：

             

[SkinPart(required="false")]     public var labelDisplay:TextBase;

 

 

 

 

那麼，skin文件應該包含一下相應的聲明：

 

<s:Label id="labelDisplay"/>

      

 

 

 

2、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>

 

 

3、示例

見word文檔《Flex 4 skinclass 簡單示例》

 

第三篇 Flex 4 CSS

Flex 4 對CSS作了很大的改進，雖然還不能像HTML那樣爲所欲爲，可是也能知足任何項目的要求了。

 

Flex 不支持使用層疊樣式表 (CSS) 來控制組件的全部可視方面。屬性, 好比 x, y, width 和 height 是 UIComponent 類的屬性, 而不是其樣式, 所以, 沒法在 CSS 中進行設置。您還必須知道您的主題支持哪些屬性。Flex 中的默認主題並不支持全部樣式屬性。

 

在 Flex 中應用樣式有許多方法。 某些樣式提供更多粒度控制並能以編程方式被執行。其餘樣式不像那麼靈活, 但可能須要較少的計算

 

1、設置樣式的幾種方式

• 使用本地樣式定義

             

<fx:Style>        @namespace mx "library://ns.adobe.com/flex/halo";        @namespace s "library://ns.adobe.com/flex/spark";        .solidBorder{ border-style:solid;}        #solidBorderPaddedVertically{         padding-top:12;         padding-bottom:12;         border-style:solid;        }     </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>

 

2、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"/>                       <!--一、全局選擇：定製全局樣式-->            <mx:Button id="s01ID"     x="500" y="20" label="方式1_1號"/>            <s:Button id="s02ID"     x="500" y="50" label="方式1_2號"     />                       <!--二、全局選擇器：可在組件的屬性裏面指定樣式類，而後在css中聲明相應的樣式類-->            <mx:Canvas id="s03ID"     x="500" y="100" width="200"     height="100" styleName="myStyleClass"/>                       <!--三、ID選擇：組件ID設置相應的組件樣式-->            <mx:Canvas id="can01ID"     x="500" y="220" width="200"     height="100"/>                       <!--四、派生選擇：類裏面的組件ID來定義樣式-->            <s:VGroup id="vGroupID"     x="500" y="350">                   <mx:ProgressBar     id="progressBarID"/>            </s:VGroup>                        <!--五、狀態選擇：經過狀態定義樣式，只適用於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";           /*-----------一、全局選擇：定製全局樣式-----------*/     mx|Button     s|Button{            color: #FF0000;     }   s|Button{            color: #FF00FF;     } /*-----------二、全局選擇器：可在組件的屬性裏面指定樣式類，而後在css中聲明相應的樣式類-----------*/     .myStyleClass{            backgroundColor: #000000;            color:#0000FF;     } /*-----------三、ID選擇：組件ID設置相應的組件樣式-----------*/     #can01ID{            backgroundColor: #0000FF;     } /*-----------四、派生選擇：類裏面的組件ID來定義樣式-----------*/     s|VGroup#vGroupID     mx|ProgressBar{            color:#FF0000;     } /*-----------五、狀態選擇：經過狀態定義樣式，只適用於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";

 

/*-----------一、全局選擇：定製全局樣式-----------*/

mx|Button s|Button{

       color: #FF0000;

}

 

s|Button{

       color: #FF00FF;

}

 

/*-----------二、全局選擇器：可在組件的屬性裏面指定樣式類，而後在css中聲明相應的樣式類-----------*/

.myStyleClass{

       backgroundColor: #000000;

       color:#0000FF;

}

 

/*-----------三、ID選擇：組件ID設置相應的組件樣式-----------*/

#can01ID{

       backgroundColor: #0000FF;

}

 

/*-----------四、派生選擇：類裏面的組件ID來定義樣式-----------*/

s|VGroup#vGroupID mx|ProgressBar{

       color:#FF0000;

}

 

/*-----------五、狀態選擇：經過狀態定義樣式，只適用於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/