flex TitleGroup

分組框（Group Box）是圍繞在一組相關控件周圍的帶標籤的矩形邊框。它提供了一種通過視覺展示控件關係

的方法。如下圖所示：

本文將通過以下幾步來實現：

一、繼承SkinnableContainer，創建組件類GroupBox。

二、聲明外觀部件titleDisplay用來顯示組合框的標題。
三、增加title屬性。
四、覆蓋partAdded方法，使標題字符串能夠作用於外觀部件titleDisplay。
五、創建它的默認外觀（皮膚）GroupBoxSkin。
六、爲GroupBox增加必要樣式。
---------------
一、繼承SkinnableContainer，創建組件類GroupBox。

Actionscript 3.0代碼

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

二、聲明外觀部件titleDisplay用來顯示組合框的標題。

Actionscript 3.0代碼

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

三、增加title屬性。

Actionscript 3.0代碼

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。

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代碼

 <!-- 邊框 -->
 <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，用於包含組合框的內容。

Mxml代碼

 <!-- 內容區域 -->
 <s:Group id="contentGroup"
    left="5" right="5" top="21" bottom="5">
  <s:layout>
   <s:VerticalLayout/>
  </s:layout>
 </s:Group>

注意，此時邊框是一個閉合的矩形。

圖2
從上圖，可以看出現在組合框的標題文字與邊框是重疊的，顯然這不符合我們的要求。
爲了解決這個問題，下面要爲邊框創建一個遮罩。

Mxml代碼

<!-- 邊框遮罩 -->
 <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:fill>
    <s:SolidColor color="#ff0000" alpha="1"/>
   </s:fill>
  </s:Rect>
  <s:Rect left="{titleDisplay.width+11}" width="100%" top="0" bottom="0">
   <s:fill>
    <s:SolidColor color="#ff0000" alpha="1"/>
   </s:fill>
  </s:Rect>
 </s:Group>

爲<s:Rect id="border"/>增加屬性：mask="{borderGroupMask}"。
六、爲GroupBox增加必要樣式。
第一步，在GroupBox類中增加以下樣式聲明，它們用來指定邊框的顏色和圓角。
增加borderColor樣式。

Actionscript 3.0代碼

 [Style(name="borderColor", type="uint", format="Color", inherit="no", theme="spark")]
 [Style(name="cornerRadius", type="Number", format="Length", inherit="no", theme="spark")]

第二步，在GroupBoxSkin中覆蓋updateDisplayList，把樣式應用於外觀。

Actionscript 3.0代碼

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

Actionscript 3.0代碼

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", type="Number", inherit="no", theme="spark")]
	
	/**
	 *  The color of the border for this component.
	 *
	 *  @default 0
	 * 
	 *  @langversion 3.0
	 *  @playerversion Flash 10
	 *  @playerversion AIR 1.5
	 *  @productversion Flex 4
	 */
	[Style(name="borderColor", type="uint", format="Color", inherit="no", theme="spark")]
	/**
	 *  The radius of the corners for this component.
	 *
	 *  @default 5
	 * 
	 *  @langversion 3.0
	 *  @playerversion Flash 10
	 *  @playerversion AIR 1.5
	 *  @productversion Flex 4
	 */
	[Style(name="cornerRadius", type="Number", format="Length", inherit="no", theme="spark")]
	
	public class GroupBox extends SkinnableContainer
	{
		public function GroupBox()
		{
			super();
		}
		//----------------------------------
		//  titleField
		//---------------------------------- 
		
		[SkinPart(required="false")]
		
		/**
		 *  定義容器中標題文本的外觀的外觀部件。
		 *
		 *  @see jx.skins.GroupBoxSkin
		 *  
		 *  @langversion 3.0
		 *  @playerversion Flash 10
		 *  @playerversion AIR 1.5
		 *  @productversion Flex 4
		 */
		public var titleDisplay:TextBase;
		
		
		//----------------------------------
		//  title
		//----------------------------------
		
		/**
		 *  @private
		 */
		private var _title:String = "";
		
		/**
		 *  @private
		 */
		private var titleChanged:Boolean;
		
		[Bindable]
		
		/**
		 *  標題或者說明。
		 *  @default ""
		 *  @langversion 3.0
		 *  @playerversion Flash 10
		 *  @playerversion AIR 1.5
		 *  @productversion Flex 4
		 */
		public function get title():String 
		{
			return _title;
		}
		
		/**
		 *  @private
		 */
		public function set title(value:String):void 
		{
			_title = value;
			
			if (titleDisplay)
				titleDisplay.text = title;
		}
		override protected function partAdded(partName:String, instance:Object):void
		{
			super.partAdded(partName, instance);
			
			if (instance == titleDisplay)
			{
				titleDisplay.text = title;
			}
		}		
	}
}

2 GroupBoxSkin.mxml

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;
		}
		
		/**
		 * @private
		 */
		override protected function initializationComplete():void
		{
			useChromeColor = true;
			super.initializationComplete();
		}
		private var cornerRadius:Number;		
		/**
		 * @private
		 */
		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);
		}
	</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:fill>
				<s:SolidColor color="#ff0000" alpha="1"/>
			</s:fill>
		</s:Rect>
		<s:Rect left="{titleDisplay.width+11}" width="100%" top="0" bottom="0">
			<s:fill>
				<s:SolidColor color="#ff0000" alpha="1"/>
			</s:fill>
		</s:Rect>
	</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 實例文件

Mxml代碼

<?xml version="1.0" encoding="utf-8"?>
<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/>
		<s:Button/>
		<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 = 1;
					this.borderColor = 0;			// 黑
//					this.borderColor = 0xD3D3D3;	// 灰
//					this.borderColor = 0x104778;	// 藍
					this.cornerRadius = 5;
//					this.dropShadowVisible = true;
//					this.borderWeight = 1;
				}
				styleManager.setStyleDeclaration("jx.components.GroupBox", css, true);
			}
			return true;
		}

SQL優化-20231016

五大方法實現Flex性能優化

flex 渲染機制之外部渲染器

Flex 4 ：導出 TextFlow 對象

ASP .Net C# 下對Word的操作開發資料

FluorineFx：認證與授權

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結