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}"??
????????????><!--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;??
????????}??
?
完整的项目请下载附件GroupBoxExam.zip。
- GroupBoxExam.zip?(4.9 KB)
- 下载次数: 731
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
