第三步,创建外观部件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指定样式的默认值。
5 代码方式指定组件的默认CSS样式
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。