Adobe Flex迷你教程 —Flex圆角容器

    在Flex3时代可以设置borderSides属性达到圆角效果，如：borderSides="top left right" ，在Flex4中borderSides属性貌似已经没有了（其实flex3中很多的属性，在flex4中都没有了，已经换了其他实现方式）
那么，在flex4中要如何做才能达到上面说的效果呢？ 当然是SKIN，在flex4中更推荐用SKIN来控制组件的样式。
    我们写一个用 flashbuilder 来创建一个BoderContainer的圆角皮肤。

1.点击创建MXML外观，填好响应的参数，点击完成。

2.工具帮我们自动生成一个原有的skin，我们只需需要修改它的填充方式就达到了圆角的效果，看代码。

<?xml version="1.0" encoding="utf-8"?>



<!--



    ADOBE SYSTEMS INCORPORATED

    Copyright 2008 Adobe Systems Incorporated

    All Rights Reserved.



    NOTICE: Adobe permits you to use, modify, and distribute this file

    in accordance with the terms of the license agreement accompanying it.



-->



<!--- The default skin class for a Spark SkinnableContainer container.



 @see spark.components.SkinnableContainer



 @langversion 3.0

 @playerversion Flash 10

 @playerversion AIR 1.5

 @productversion Flex 4

-->

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"

        xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">



    <fx:Metadata>

    <![CDATA[

        /**

         * @copy spark.skins.spark.ApplicationSkin#hostComponent

         */

        [HostComponent("spark.components.SkinnableContainer")]

        ]]>

    </fx:Metadata>



    <fx:Script fb:purpose="styling">

        <![CDATA[

        /**

         *  @private

         */

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void

        {

            // Push backgroundColor and backgroundAlpha directly.

            // Handle undefined backgroundColor by hiding the background object.

            if (isNaN(getStyle("backgroundColor")))

            {

                background.visible = false;

            }

            else

            {

                background.visible = true;

                bgFill.color = getStyle("backgroundColor");

                bgFill.alpha = getStyle("backgroundAlpha");

            }



            super.updateDisplayList(unscaledWidth, unscaledHeight);

        }

        ]]>        

    </fx:Script>



    <s:states>

        <s:State name="normal" />

        <s:State name="disabled" />

    </s:states>



    <!--- Defines the appearance of the SkinnableContainer class's background.
我们在默认的Rect里添加 radius属性，它的值来自于 样式属性 conrnerRadius，我们只需在使用的组件上设置这个属性的值，就可以达到圆角的效果。

 -->

    <s:Rect id="background" left="0" right="0" top="0" bottom="0"

            radiusX="{getStyle('cornerRadius')}" radiusY="{getStyle('cornerRadius')}"

            >

        <!---边框的样式，我们也可以给这个颜色设置style，在updatedisplaylist里应用他-->

        <s:stroke>

            <!---@private -->

            <s:SolidColorStroke id="borderStroke" color="0x5380D0"/>

        </s:stroke>

        <s:fill>

            <!--- @private -->

            <s:SolidColor id="bgFill" color="#FFFFFF"/>

        </s:fill>

    </s:Rect>



    <!--

        Note: setting the minimum size to 0 here so that changes to the host component's

        size will not be thwarted by this skin part's minimum size.   This is a compromise,

        more about it here: http://bugs.adobe.com/jira/browse/SDK-21143

    -->

    <!--- @copy spark.components.SkinnableContainer#contentGroup -->

    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">

        <s:layout>

            <s:BasicLayout/>

        </s:layout>

    </s:Group>



</s:Skin>

3.skin的使用，看代码。

<?xml version="1.0"?>

<!-- 

 * Created with IntelliJ IDEA.

 * @author DongYang

 * Date: 13-7-10

 * Time: 上午11:47

 * Progress every day a little more -->

<s:Application 

        xmlns:fx="http://ns.adobe.com/mxml/2009" 

        xmlns:s="library://ns.adobe.com/flex/spark">

        <s:BorderContainer skinClass="component.skin.BorderContainerAngleSkin" 

                           width="200" height="400"

                           backgroundColor="0xFF0000"

                           cornerRadius="10"

                 />

</s:Application>