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

一、SkinClass必须包含的三样东西：

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

2、 States

如果HostComponent中有SkinState（一般用metadata标签来声明），例如：

s: ButtonBase中包含了

1.  [SkinState("up")]

那么在相应的skinclass mxml文件中必须有如下相应的state：

1. <s:states>

1. <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>
       @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>

   

   

二、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/