的方法。如下图所示:
本文将通过以下几步来实现:
一、继承SkinnableContainer,创建组件类GroupBox。
二、声明外观部件titleDisplay用来显示组合框的标题。
三、增加title属性。
四、覆盖partAdded方法,使标题字符串能够作用于外观部件titleDisplay。
五、创建它的默认外观(皮肤)GroupBoxSkin。
六、为GroupBox增加必要样式。
---------------
一、继承SkinnableContainer,创建组件类GroupBox。
public class GroupBox extends SkinnableContainer
{
public function GroupBox()
{
super();
}
}
二、声明外观部件titleDisplay用来显示组合框的标题。
三、增加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。
至此,GroupBox组件类基本创建完成,但是还不能显示。下面来创建它的默认外观(皮肤)GroupBoxSkin。
五、创建它的默认外观(皮肤)GroupBoxSkin。
第一步,创建组合框的边框。
第二步,创建外观部件titleDisplay。
第三步,创建外观部件contentGroup,用于包含组合框的内容。
注意,此时边框是一个闭合的矩形。
图2
从上图,可以看出现在组合框的标题文字与边框是重叠的,显然这不符合我们的要求。
为了解决这个问题,下面要为边框创建一个遮罩。
为<s:Rect id="border"/>增加属性:mask="{borderGroupMask}"。
六、为GroupBox增加必要样式。
第一步,在GroupBox类中增加以下样式声明,它们用来指定边框的颜色和圆角。
增加borderColor样式。
第二步,在GroupBoxSkin中覆盖updateDisplayList,把样式应用于外观。
至此所有工作完成。效果如下:
图3
完整的文件如下:
1 GroupBox.as
2 GroupBoxSkin.mxml
3 GroupBoxExam.mxml 实例文件
4 css
可以通过css为GroupBox指定样式的默认值。
5 代码方式指定组件的默认CSS样式