Flex4实现分组框GroupBox

作者：筷子 | 来源：互联网 | 2023-05-20 16:45

原文地址：http:www.iteye.comtopic773679分组框（GroupBox）是围绕在一组相关控件周围的带标签的矩形边框。它提供了一种通过视觉展示控件关系的方法。如

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

的方法。如下图所示：

《Flex4实现分组框GroupBox》

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

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

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

Actionscript 3.0代码

public class GroupBox extends SkinnableContainer
{
public function GroupBox()
{
super();
}
}

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

Actionscript 3.0代码

[SkinPart(required=&＃8220;false&＃8221;)]
public var titleDisplay:TextBase;

三、增加title属性。

Actionscript 3.0代码

private var _title:String = &＃8220;&＃8221;;
[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代码

&＃8220;border&＃8221; left=&＃8220;0&＃8221; right=&＃8220;0&＃8221; top=&＃8220;10&＃8221; bottom=&＃8220;0&＃8221;
radiusX=&＃8220;4&＃8221; radiusY=&＃8220;4&＃8221;
>
&＃8220;borderStroke&＃8221; weight=&＃8220;1&＃8221;/>

第二步，创建外观部件titleDisplay。

Mxml代码

&＃8220;titleDisplay&＃8221;
maxDisplayedLines=&＃8220;1&＃8221;
left=&＃8220;9&＃8221; top=&＃8220;0&＃8221;
minhttps://img.php1.cn/3cd4a/1eebe/cd5/1113165c4904ecc5.webp" src="https://img.php1.cn/3cd4a/1eebe/cd5/1113165c4904ecc5.webp" alt="《Flex4实现分组框GroupBox》" />
图2
从上图，可以看出现在组合框的标题文字与边框是重叠的，显然这不符合我们的要求。
为了解决这个问题，下面要为边框创建一个遮罩。

Mxml代码
2. &＃8220;borderGroupMask&＃8221; left=&＃8220;0&＃8221; right=&＃8220;0&＃8221; top=&＃8220;0&＃8221; bottom=&＃8220;0&＃8221;>
3. &＃8220;0&＃8221; https://img.php1.cn/3cd4a/1eebe/cd5/7494af3c1cda418d.webp" src="https://img.php1.cn/3cd4a/1eebe/cd5/7494af3c1cda418d.webp" alt="《Flex4实现分组框GroupBox》" />
  图3
  完整的文件如下：
  1 GroupBox.as
  
  Actionscript 3.0代码
  1. package jx.components
  2. {
  3. import spark.components.SkinnableContainer;
  4. import spark.components.supportClasses.TextBase;
  5. /**
  6. * The alpha of the border for this component.
  7. *
  8. * @default 0.5
  9. *
  10. * @langversion 3.0
  11. * @playerversion Flash 10
  12. * @playerversion AIR 1.5
  13. * @productversion Flex 4
  14. */
  15. [Style(name=&＃8220;borderAlpha&＃8221;, type=&＃8220;Number&＃8221;, inherit=&＃8220;no&＃8221;, theme=&＃8220;spark&＃8221;)]
  17. /**
  18. * The color of the border for this component.
  19. *
  20. * @default 0
  21. *
  22. * @langversion 3.0
  23. * @playerversion Flash 10
  24. * @playerversion AIR 1.5
  25. * @productversion Flex 4
  26. */
  27. [Style(name=&＃8220;borderColor&＃8221;, type=&＃8220;uint&＃8221;, format=&＃8220;Color&＃8221;, inherit=&＃8220;no&＃8221;, theme=&＃8220;spark&＃8221;)]
  28. /**
  29. * The radius of the corners for this component.
  30. *
  31. * @default 5
  32. *
  33. * @langversion 3.0
  34. * @playerversion Flash 10
  35. * @playerversion AIR 1.5
  36. * @productversion Flex 4
  37. */
  38. [Style(name=&＃8220;cornerRadius&＃8221;, type=&＃8220;Number&＃8221;, format=&＃8220;Length&＃8221;, inherit=&＃8220;no&＃8221;, theme=&＃8220;spark&＃8221;)]
  40. public class GroupBox extends SkinnableContainer
  41. {
  42. public function GroupBox()
  43. {
  44. super();
  45. }
  46. //&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;-
  47. // titleField
  48. //&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;-
  50. [SkinPart(required=&＃8220;false&＃8221;)]
  52. /**
  53. * 定义容器中标题文本的外观的外观部件。
  54. *
  55. * @see jx.skins.GroupBoxSkin
  56. *
  57. * @langversion 3.0
  58. * @playerversion Flash 10
  59. * @playerversion AIR 1.5
  60. * @productversion Flex 4
  61. */
  62. public var titleDisplay:TextBase;
  65. //&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;-
  66. // title
  67. //&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;&＃8212;-
  69. /**
  70. * @private
  71. */
  72. private var _title:String = &＃8220;&＃8221;;
  74. /**
  75. * @private
  76. */
  77. private var titleChanged:Boolean;
  79. [Bindable]
  81. /**
  82. * 标题或者说明。
  83. * @default &＃8220;&＃8221;
  84. * @langversion 3.0
  85. * @playerversion Flash 10
  86. * @playerversion AIR 1.5
  87. * @productversion Flex 4
  88. */
  89. public function get title():String
  90. {
  91. return _title;
  92. }
  94. /**
  95. * @private
  96. */
  97. public function set title(value:String):void
  98. {
  99. _title = value;
  101. if (titleDisplay)
  102. titleDisplay.text = title;
  103. }
  104. override protected function partAdded(partName:String, instance:Object):void
  105. {
  106. super.partAdded(partName, instance);
  108. if (instance == titleDisplay)
  109. {
  110. titleDisplay.text = title;
  111. }
  112. }
  113. }
  114. }
  2 GroupBoxSkin.mxml
  Mxml代码
  1. &＃8220;1.0&＃8221; encoding=&＃8220;utf-8&＃8221;?>
  2. &＃8220;http://ns.adobe.com/mxml/2009&＃8221;
  3. xmlns:mx=&＃8220;library://ns.adobe.com/flex/mx&＃8221;
  4. xmlns:s=&＃8220;library://ns.adobe.com/flex/spark&＃8221;
  5. xmlns:fb=&＃8220;http://ns.adobe.com/flashbuilder/2009&＃8221;
  6. alpha.disabled=&＃8220;0.5&＃8221;>
  8. [HostComponent(&＃8220;jx.components.GroupBox&＃8221;)]
  11. &＃8220;styling&＃8221;>
  12. static private const exclusions:Array = [&＃8220;titleDisplay&＃8221;, &＃8220;contentGroup&＃8221;];
  14. /**
  15. * @private
  16. */
  17. override public function get colorizeExclusions():Array {
  18. return exclusions;
  19. }
  21. /**
  22. * @private
  23. */
  24. override protected function initializationComplete():void
  25. {
  26. useChromeColor = true;
  27. super.initializationComplete();
  28. }
  29. private var cornerRadius:Number;
  30. /**
  31. * @private
  32. */
  33. override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
  34. {
  35. var cr:Number = getStyle(&＃8220;cornerRadius&＃8221;);
  36. if (cornerRadius != cr)
  37. {
  38. cornerRadius = cr; // 取变量
  39. border.topLeftRadiusX = cornerRadius;
  40. border.topRightRadiusX = cornerRadius;
  41. border.bottomLeftRadiusX = cornerRadius;
  42. border.bottomRightRadiusX = cornerRadius;
  43. }
  45. borderStroke.color = getStyle(&＃8220;borderColor&＃8221;);
  46. borderStroke.alpha = getStyle(&＃8220;borderAlpha&＃8221;);
  47. //
  48. super.updateDisplayList(unscaledWidth, unscaledHeight);
  49. }
  53. &＃8220;normal&＃8221; />
  54. &＃8220;disabled&＃8221; />
  57. &＃8220;borderGroupMask&＃8221; left=&＃8220;0&＃8221; right=&＃8220;0&＃8221; top=&＃8220;0&＃8221; bottom=&＃8220;0&＃8221;>
  58. &＃8220;0&＃8221; GroupBox {
  59. skinClass: ClassReference(&＃8220;jx.skins.GroupBoxSkin&＃8221;);
  60. cornerRadius: 5;
  61. borderColor: #104778;
  62. borderWeight: 1;
  63. dropShadowVisible: false;
  64. }
  5 代码方式指定组件的默认CSS样式
  Actionscript3.0代码
  1. private static const classConstructed:Boolean = classConstruct();
  3. // 指定默认样式
  4. private static function classConstruct():Boolean {
  5. var styleManager:IStyleManager2 = FlexGlobals.topLevelApplication.styleManager;
  6. if (!styleManager.getStyleDeclaration(&＃8220;jx.components.GroupBox&＃8221;)) {
  7. var css:CSSStyleDeclaration = new CSSStyleDeclaration(null, styleManager);
  8. css.defaultFactory = function():void {
  9. this.skinClass = GroupBoxSkin;
  10. this.borderAlpha = 1;
  11. this.borderColor = 0; // 黑
  12. // this.borderColor = 0xD3D3D3; // 灰
  13. // this.borderColor = 0x104778; // 蓝
  14. this.cornerRadius = 5;
  15. // this.dropShadowVisible = true;
  16. // this.borderWeight = 1;
  17. }
  18. styleManager.setStyleDeclaration(&＃8220;jx.components.GroupBox&＃8221;, css, true);
  19. }
  20. return true;
  21. }
  完整的项目请下载附件GroupBoxExam.zip。
  - GroupBoxExam.zip (4.9 KB)
  - 下载次数: 731
  - 查看图片附件

推荐阅读

string
Flex根据后台的数据自动生成AdvancedDataGrid

在企业级应用开发中AdvancedDataGrid和DataGrid使用的非常广。当然最基本的也是最常用的就是数据的直接绑定，固定列头和固定数据的列数。而这往往不能满足需求，企业应用 ... [详细]

蜡笔小新 2023-10-09 19:46:49
go
在类中定义数组时出错 - Error on defining arrays in class

Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ... [详细]

蜡笔小新 2023-12-14 17:38:12
default
Spring源码解密之默认标签的解析方式分析

本文分析了Spring源码解密中默认标签的解析方式。通过对命名空间的判断，区分默认命名空间和自定义命名空间，并采用不同的解析方式。其中，bean标签的解析最为复杂和重要。 ... [详细]

蜡笔小新 2023-12-14 17:24:50
stream
向QTextEdit拖放文件的方法及实现步骤

本文介绍了在使用QTextEdit时如何实现拖放文件的功能，包括相关的方法和实现步骤。通过重写dragEnterEvent和dropEvent函数，并结合QMimeData和QUrl等类，可以轻松实现向QTextEdit拖放文件的功能。详细的代码实现和说明可以参考本文提供的示例代码。 ... [详细]

蜡笔小新 2023-12-14 16:06:38
string
C#学习教程：在Console中工作但在Windows窗体中不工作的异步代码分享

本文分享了一个关于在C#中使用异步代码的问题，作者在控制台中运行时代码正常工作，但在Windows窗体中却无法正常工作。作者尝试搜索局域网上的主机，但在窗体中计数器没有减少。文章提供了相关的代码和解决思路。 ... [详细]

蜡笔小新 2023-12-14 15:56:00
string
Linux重启网络命令实例及关机和重启示例教程

本文介绍了Linux系统中重启网络命令的实例，以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法，以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]

蜡笔小新 2023-12-14 15:52:52
match
android listview OnItemClickListener失效原因

最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]

蜡笔小新 2023-12-14 14:25:50
select
关于cuowu类的错误提示和使用AdjustmentListener的问题

本文讨论了一个关于cuowu类的问题，作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案，并给出了两个可能导致错误的原因。 ... [详细]

蜡笔小新 2023-12-13 22:09:56
go
游戏开发_Html5+Lufylegend.js游戏开发引擎介绍及原理

篇首语：本文由编程笔记#小编为大家整理，主要介绍了Html5+Lufylegend.js游戏开发引擎介绍及原理相关的知识，希望对你有一定的参考价值。 ... [详细]

蜡笔小新 2023-09-25 12:59:24
go
Voicewo在线语音识别转换jQuery插件的特点和示例

本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

蜡笔小新 2023-12-13 20:01:16
string
java 线程死锁模拟

1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]

蜡笔小新 2023-12-13 19:12:25
string
PHP中的单例模式与静态变量的区别及使用方法

本文介绍了PHP中的单例模式与静态变量的区别及使用方法。在PHP中，静态变量的存活周期仅仅是每次PHP的会话周期，与Java、C++不同。静态变量在PHP中的作用域仅限于当前文件内，在函数或类中可以传递变量。本文还通过示例代码解释了静态变量在函数和类中的使用方法，并说明了静态变量的生命周期与结构体的生命周期相关联。同时，本文还介绍了静态变量在类中的使用方法，并通过示例代码展示了如何在类中使用静态变量。 ... [详细]

蜡笔小新 2023-12-13 18:03:36
string
XML介绍与使用的概述及标签规则

本文介绍了XML的基本概念和用途，包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则，包括标签的尖括号和合法标识符的组成，标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读，读者可以对XML的基本知识有一个全面的了解。 ... [详细]

蜡笔小新 2023-12-13 17:39:50
string
PHP for Flash FMS动态网站开发手札

查看书籍详细信息：PHPforFlashFMS动态网站开发手札(附光……编辑推荐本书采用最新FlashRemoting技术，搭配开放原码，包括最新流行的Adobe官方支援Zend_ ... [详细]

蜡笔小新 2023-10-11 10:36:22
string
Flash　宝典

Flash　宝典2001-07-24星河整理yeskyalignrightmarginwidth0marginheight0srchttp:www.chinabyte ... [详细]

蜡笔小新 2023-09-24 10:52:43

筷子

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章