flex的groupbox

发布时间：2020-12-15 05:12:04 所属栏目：百科来源：网络整理

导读：本文将通过以下几步来实现：一、继承SkinnableContainer，创建组件类GroupBox。二、声明外观部件titleDisplay用来显示组合框的标题。三、增加title属性。四、覆盖partAdded方法，使标题字符串能够作用于外观部件titleDisplay。五、创建它的默认外观（皮

本文将通过以下几步来实现：

一、继承SkinnableContainer，创建组件类GroupBox。

二、声明外观部件titleDisplay用来显示组合框的标题。
三、增加title属性。
四、覆盖partAdded方法，使标题字符串能够作用于外观部件titleDisplay。
五、创建它的默认外观（皮肤）GroupBoxSkin。
六、为GroupBox增加必要样式。
---------------
一、继承SkinnableContainer，创建组件类GroupBox。

    Actionscript 3.0代码?? 
   
 public?class?GroupBox?extends?SkinnableContainer??
 {??
 ?public?function?GroupBox()??
 ?{??
 ??super();??
 ?}??
 }??

二、声明外观部件titleDisplay用来显示组合框的标题。

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

三、增加title属性。

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。
 override?protected?function?partAdded(partName:String,?instance:Object):void??
 ?super.partAdded(partName,?instance);??
 ?if?(instance?==?titleDisplay)??
 ?
 至此，GroupBox组件类基本创建完成，但是还不能显示。下面来创建它的默认外观（皮肤）GroupBoxSkin。
 五、创建它的默认外观（皮肤）GroupBoxSkin。
 ?第一步，创建组合框的边框。
 <!--?边框?-->??
 <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，用于包含组合框的内容。
<!--?内容区域?-->?? <s:Group?id="contentGroup"??
 ???left="5"?right="5"?top="21"?bottom="5">??
 ?<s:layout>??
 ??<s:VerticalLayout/>??
 ?</s:layout>??
 </s:Group>????
 
 ?注意，此时边框是一个闭合的矩形。
 
 ?
 ?图2?
 ?从上图，可以看出现在组合框的标题文字与边框是重叠的，显然这不符合我们的要求。
 ?为了解决这个问题，下面要为边框创建一个遮罩。
 ?
<!--?边框遮罩?-->?? ?<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:Rect?left="{titleDisplay.width+11}"?width="100%"?top="0"?bottom="0">??
 ?</s:Group>??
 ?为<s:Rect id="border"/>增加属性：mask="{borderGroupMask}"。
 六、为GroupBox增加必要样式。
 ?第一步，在GroupBox类中增加以下样式声明，它们用来指定边框的颜色和圆角。
 ?增加borderColor样式。
 [Style(name="borderColor",?type="uint",?format="Color",?inherit="no",?theme="spark")]??
 
  
 [Style(name="cornerRadius",?type="Number",?format="Length",?theme="spark")]??
 第二步，在GroupBoxSkin中覆盖updateDisplayList，把样式应用于外观。
 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

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",250); line-height:18px"> ??????

?????*??The?color?of?the?border?for?this?component.??

0??

????[Style(name="borderColor",250); line-height:18px"> ?????*??The?radius?of?the?corners?for?this?component.??

5??

????[Style(name="cornerRadius",250); line-height:18px"> ????public?class?GroupBox?extends?SkinnableContainer??

????{??

????????public?function?GroupBox()??

????????{??

????????????super();??

????????}??

????????//----------------------------------??

????????//??titleField??

????????//----------------------------------???

??????????

????????[SkinPart(required="false")]??

????????/**??

?????????*??定义容器中标题文本的外观的外观部件。??

?????????*??

?????????*??@see?jx.skins.GroupBoxSkin??

?????????*????

?????????*??@langversion? ?????????*??@playerversion?Flash? ?????????*??@playerversion?AIR? ?????????*??@productversion?Flex? ?????????*/??

????????public?var?titleDisplay:TextBase;??

????????//??title??

?????????*??@private??

????????private?var?_title:String?=?"";??

????????private?var?titleChanged:Boolean;??

????????[Bindable]??

?????????*??标题或者说明。??

?????????*??@default?""??

????????public?function?get?title():String???

????????????return?_title;??

????????public?function?set?title(value:String):void???

????????????_title?=?value;??

??????????????

????????????if?(titleDisplay)??

????????????????titleDisplay.text?=?title;??

????????override?protected?function?partAdded(partName:String,250); line-height:18px"> ????????????super.partAdded(partName,250); line-height:18px"> ????????????if?(instance?==?titleDisplay)??

????????????{??

????????????}??

????????}?????????

????}??

?
2 GroupBoxSkin.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;??

????????override?protected?function?initializationComplete():void??

????????????useChromeColor?=?true;??

????????????super.initializationComplete();??

????????private?var?cornerRadius:Number;??????????

????????override?protected?function?updateDisplayList(unscaledWidth:Number,250); line-height:18px"> ????????????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,250); line-height:18px"> ????</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:Rect?left="{titleDisplay.width+11}"?width="100%"?top="0"?bottom="0">??

????</s:Group>??

??????

????<s:Rect?id="border"?left="0"?right="0"?top="10"?bottom="0"???

????????????radiusX="4"?radiusY="4"??

????????????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 实例文件

<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/>??

????</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;??
 5 代码方式指定组件的默认CSS样式
 

    Actionscript3.0代码?? 
    ????????private?static?const?classConstructed:Boolean?=?classConstruct();??
 ??
 ????????//?指定默认样式??
 ????????private?static?function?classConstruct():Boolean?{??
 ????????????var?styleManager:IStyleManager2?=?FlexGlobals.topLevelApplication.styleManager;??
 ????????????if?(!styleManager.getStyleDeclaration("jx.components.GroupBox"))?{??
 ????????????????var?css:CSSStyleDeclaration?=?new?CSSStyleDeclaration(null,?styleManager);??
 ????????????????css.defaultFactory?=?function():void?{??
 ????????????????????this.skinClass?=?GroupBoxSkin;??
 ????????????????????this.borderAlpha?=? ????????????????????this.borderColor?=?0;???????????//?黑??
 //??????????????????this.borderColor?=?0xD3D3D3;????//?灰??
0x104778;????//?蓝??
 ????????????????????this.cornerRadius?=? //??????????????????this.dropShadowVisible?=?true;??
 //??????????????????this.borderWeight?=? ????????????????}??
 ????????????????styleManager.setStyleDeclaration("jx.components.GroupBox",?css,?true);??
 ????????????return?true;??
 ????????}??



（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!