flex4 分组框（转帖）

http://www.iteye.com/topic/773679

分组框（Group Box）是围绕在一组相关控件周围的带标签的矩形边框。它提供了一种通过视觉展示控件关系
的方法。如下图所示：


本文将通过以下几步来实现：
一、继承SkinnableContainer，创建组件类GroupBox。
二、声明外观部件titleDisplay用来显示组合框的标题。
三、增加title属性。
四、覆盖partAdded方法，使标题字符串能够作用于外观部件titleDisplay。
五、创建它的默认外观（皮肤）GroupBoxSkin。
六、为GroupBox增加必要样式。
---------------
一、继承SkinnableContainer，创建组件类GroupBox。
Actionscript 3.0代码
public class GroupBox extends SkinnableContainer 
{ 
public function GroupBox() 
{ 
  super(); 
} 
} 


二、声明外观部件titleDisplay用来显示组合框的标题。
Actionscript 3.0代码
[SkinPart(required="false")] 
public var titleDisplay:TextBase; 


三、增加title属性。

Actionscript 3.0代码
private var _title:String = ""; 
[Bindable] 
public function get title():String  
{ 
return _title; 
} 
public function set title(value:String):void  
{ 
_title = value; 
  
if (titleDisplay) 
  titleDisplay.text = title; 
} 

四、覆盖partAdded方法，使标题字符串能够作用于外观部件titleDisplay。
Actionscript 3.0代码
override protected function partAdded(partName:String, instance:Object):void 
{ 
super.partAdded(partName, instance); 
  
if (instance == titleDisplay) 
{ 
  titleDisplay.text = title; 
} 
} 

至此，GroupBox组件类基本创建完成，但是还不能显示。下面来创建它的默认外观（皮肤）GroupBoxSkin。
五、创建它的默认外观（皮肤）GroupBoxSkin。
第一步，创建组合框的边框。
Actionscript 3.0代码
<!-- 边框 --> 
<s:Rect id="border" left="0" right="0" top="10" bottom="0"  
  radiusX="4" radiusY="4" 
  > 
<s:stroke> 
  <s:SolidColorStroke id="borderStroke" weight="1"/> 
</s:stroke> 
</s:Rect> 

第二步，创建外观部件titleDisplay。
Mxml代码
<!-- 标题 --> 
<s:Label id="titleDisplay" 
   maxDisplayedLines="1" 
   left="9" top="0" 
   minHeight="20" 
   verticalAlign="middle"  
   textAlign="start"/> 

第三步，创建外观部件contentGroup，用于包含组合框的内容。
Mxml代码
<!-- 内容区域 --> 
<s:Group id="contentGroup" 
   left="5" right="5" top="21" bottom="5"> 
<s:layout> 
  <s:VerticalLayout/> 
</s:layout> 
</s:Group>   

注意，此时边框是一个闭合的矩形。


图2
从上图，可以看出现在组合框的标题文字与边框是重叠的，显然这不符合我们的要求。
为了解决这个问题，下面要为边框创建一个遮罩。

Mxml代码
<!-- 边框遮罩 --> 
<s:Group id="borderGroupMask" left="0" right="0" top="0" bottom="0"> 
  <s:Rect left="0" width="7" top="0" bottom="0"> 
   <s:fill> 
    <s:SolidColor color="#ff0000" alpha="1"/> 
   </s:fill> 
  </s:Rect> 
  <s:Rect left="7" width="{titleDisplay.width+4}" top="30" bottom="0"> 
   <s:fill> 
    <s:SolidColor color="#ff0000" alpha="1"/> 
   </s:fill> 
  </s:Rect> 
  <s:Rect left="{titleDisplay.width+11}" width="100%" top="0" bottom="0"> 
   <s:fill> 
    <s:SolidColor color="#ff0000" alpha="1"/> 
   </s:fill> 
  </s:Rect> 
</s:Group> 


为<s:Rect id="border"/>增加属性：mask="{borderGroupMask}"。
六、为GroupBox增加必要样式。
第一步，在GroupBox类中增加以下样式声明，它们用来指定边框的颜色和圆角。
增加borderColor样式。
Actionscript 3.0代码
[Style(name="borderColor", type="uint", format="Color", inherit="no", theme="spark")] 
[Style(name="cornerRadius", type="Number", format="Length", inherit="no", theme="spark")] 
第二步，在GroupBoxSkin中覆盖updateDisplayList，把样式应用于外观。


Actionscript 3.0代码
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
{ 
  var cr:Number = getStyle("cornerRadius"); 
  if (cornerRadius != cr) 
  { 
   cornerRadius = cr; // 取变量 
   border.topLeftRadiusX = cornerRadius; 
   border.topRightRadiusX = cornerRadius; 
   border.bottomLeftRadiusX = cornerRadius; 
   border.bottomRightRadiusX = cornerRadius; 
  } 
   
  borderStroke.color = getStyle("borderColor"); 
  borderStroke.alpha = getStyle("borderAlpha"); 
  // 
  super.updateDisplayList(unscaledWidth, unscaledHeight); 
} 

至此所有工作完成。效果如下：

图3
完整的文件如下：
1 GroupBox.as
Actionscript 3.0代码
package jx.components 
{ 
    import spark.components.SkinnableContainer; 
    import spark.components.supportClasses.TextBase; 
    /** 
     *  The alpha of the border for this component. 
     * 
     *  @default 0.5 
     *  
     *  @langversion 3.0 
     *  @playerversion Flash 10 
     *  @playerversion AIR 1.5 
     *  @productversion Flex 4 
     */ 
    [Style(name="borderAlpha", type="Number", inherit="no", theme="spark")] 
     
    /** 
     *  The color of the border for this component. 
     * 
     *  @default 0 
     *  
     *  @langversion 3.0 
     *  @playerversion Flash 10 
     *  @playerversion AIR 1.5 
     *  @productversion Flex 4 
     */ 
    [Style(name="borderColor", type="uint", format="Color", inherit="no", theme="spark")] 
    /** 
     *  The radius of the corners for this component. 
     * 
     *  @default 5 
     *  
     *  @langversion 3.0 
     *  @playerversion Flash 10 
     *  @playerversion AIR 1.5 
     *  @productversion Flex 4 
     */ 
    [Style(name="cornerRadius", type="Number", format="Length", inherit="no", theme="spark")] 
     
    public class GroupBox extends SkinnableContainer 
    { 
        public function GroupBox() 
        { 
            super(); 
        } 
        //---------------------------------- 
        //  titleField 
        //----------------------------------  
         
        [SkinPart(required="false")] 
         
        /** 
         *  定义容器中标题文本的外观的外观部件。 
         * 
         *  @see jx.skins.GroupBoxSkin 
         *   
         *  @langversion 3.0 
         *  @playerversion Flash 10 
         *  @playerversion AIR 1.5 
         *  @productversion Flex 4 
         */ 
        public var titleDisplay:TextBase; 
         
         
        //---------------------------------- 
        //  title 
        //---------------------------------- 
         
        /** 
         *  @private 
         */ 
        private var _title:String = ""; 
         
        /** 
         *  @private 
         */ 
        private var titleChanged:Boolean; 
         
        [Bindable] 
         
        /** 
         *  标题或者说明。 
         *  @default "" 
         *  @langversion 3.0 
         *  @playerversion Flash 10 
         *  @playerversion AIR 1.5 
         *  @productversion Flex 4 
         */ 
        public function get title():String  
        { 
            return _title; 
        } 
         
        /** 
         *  @private 
         */ 
        public function set title(value:String):void  
        { 
            _title = value; 
             
            if (titleDisplay) 
                titleDisplay.text = title; 
        } 
        override protected function partAdded(partName:String, instance:Object):void 
        { 
            super.partAdded(partName, instance); 
             
            if (instance == titleDisplay) 
            { 
                titleDisplay.text = title; 
            } 
        }        
    } 
} 

2 GroupBoxSkin.mxml
Mxml代码
<?xml version="1.0" encoding="utf-8"?> 
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"  
        xmlns:mx="library://ns.adobe.com/flex/mx"  
        xmlns:s="library://ns.adobe.com/flex/spark"  
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"  
        alpha.disabled="0.5"> 
    <fx:Metadata> 
        [HostComponent("jx.components.GroupBox")] 
    </fx:Metadata>  
     
    <fx:Script fb:purpose="styling"> 
        static private const exclusions:Array = ["titleDisplay", "contentGroup"]; 
         
        /** 
         * @private 
         */   
        override public function get colorizeExclusions():Array { 
            return exclusions; 
        } 
         
        /** 
         * @private 
         */ 
        override protected function initializationComplete():void 
        { 
            useChromeColor = true; 
            super.initializationComplete(); 
        } 
        private var cornerRadius:Number;         
        /** 
         * @private 
         */ 
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
        { 
            var cr:Number = getStyle("cornerRadius"); 
            if (cornerRadius != cr) 
            { 
                cornerRadius = cr;  // 取变量 
                border.topLeftRadiusX = cornerRadius; 
                border.topRightRadiusX = cornerRadius; 
                border.bottomLeftRadiusX = cornerRadius; 
                border.bottomRightRadiusX = cornerRadius; 
            } 
             
            borderStroke.color = getStyle("borderColor"); 
            borderStroke.alpha = getStyle("borderAlpha"); 
            // 
            super.updateDisplayList(unscaledWidth, unscaledHeight); 
        } 
    </fx:Script> 
     
    <s:states> 
        <s:State name="normal" /> 
        <s:State name="disabled" /> 
    </s:states> 
    <!-- 边框遮罩 --> 
    <s:Group id="borderGroupMask" left="0" right="0" top="0" bottom="0"> 
        <s:Rect left="0" width="7" top="0" bottom="0"> 
            <s:fill> 
                <s:SolidColor color="#ff0000" alpha="1"/> 
            </s:fill> 
        </s:Rect> 
        <s:Rect left="7" width="{titleDisplay.width+4}" top="30" bottom="0"> 
            <s:fill> 
                <s:SolidColor color="#ff0000" alpha="1"/> 
            </s:fill> 
        </s:Rect> 
        <s:Rect left="{titleDisplay.width+11}" width="100%" top="0" bottom="0"> 
            <s:fill> 
                <s:SolidColor color="#ff0000" alpha="1"/> 
            </s:fill> 
        </s:Rect> 
    </s:Group> 
    <!-- 边框 --> 
    <s:Rect id="border" left="0" right="0" top="10" bottom="0"  
            radiusX="4" radiusY="4" 
            mask="{borderGroupMask}" 
            ><!--mask="{borderGroupMask}"--> 
        <s:stroke> 
            <s:SolidColorStroke id="borderStroke" weight="1"/> 
        </s:stroke> 
    </s:Rect> 
    <!-- 标题 --> 
    <s:Label id="titleDisplay" 
             maxDisplayedLines="1" 
             left="9" top="0" 
             minHeight="20" 
             verticalAlign="middle"  
             textAlign="start"/> 
    <!-- 内容区域 --> 
    <s:Group id="contentGroup" 
             left="5" right="5" top="21" bottom="5"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
    </s:Group>         
</s:SparkSkin> 

3 GroupBoxExam.mxml 实例文件
Mxml代码
<?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/mx" minWidth="955" minHeight="600" xmlns:components="jx.components.*"> 
    <s:layout> 
        <s:BasicLayout/> 
    </s:layout> 
    <fx:Declarations> 
    </fx:Declarations> 
    <components:GroupBox skinClass="jx.skins.GroupBoxSkin" title="用户配置文件" cornerRadius="5"> 
        <components:layout> 
            <s:HorizontalLayout/> 
        </components:layout> 
        <s:Button/> 
        <s:Button/> 
        <s:Button/> 
    </components:GroupBox> 
</s:Application> 


4 css 可以通过css为GroupBox指定样式的默认值。
Css代码
@namespace components "jx.components.*"; 
components|GroupBox { 
    skinClass: ClassReference("jx.skins.GroupBoxSkin"); 
    cornerRadius: 5; 
    borderColor: #104778; 
    borderWeight: 1; 
    dropShadowVisible: false; 
}