Flex个人知识库7之漂亮框框

[size=large]1、 效果如图：[img]
[img]http://dl.iteye.com/upload/attachment/362569/6de29319-c30d-30a6-a223-ba49379864ae.png[/img]
[/img]

实现方式：
FieldSet类

/**
* copyright 2006 Mike Nimer, All rights reserved.
 */
package component
{
	import mx.containers.VBox;
	import mx.controls.Label;
	import mx.skins.Border;
	import mx.skins.RectangularBorder;
	import mx.utils.ColorUtil;

	public class FieldSet extends VBox
	{
		protected var legend:Label;

		public function FieldSet()
		{
			super();
			this.setStyle("borderColor", "#2d90e3");
			this.setStyle("cornerRadius", 5);
			this.setStyle("borderSkin", FieldSetBorder); 

		}

		public function getLabelWidth():int
		{
			return this.legend.textWidth;
		}

		override protected function createChildren():void
		{			
			var cr:int = getStyle("cornerRadius");
			legend = new Label();
			legend.text = this.label;
			legend.setStyle("color", "#2d90e3");
			legend.setStyle("paddingLeft", cr + 10);
			this.addChild(legend);
			super.createChildren();			
		}

		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth, unscaledHeight);	
		}

	}
}

FieldSetBorder:

/**
 * copyright 2006 Mike Nimer, All rights reserved.
 */
package component
{
	import flash.display.Graphics;

	import mx.controls.Label;
	import mx.core.EdgeMetrics;
	import mx.skins.RectangularBorder;

	public class FieldSetBorder extends RectangularBorder
	{
		public function FieldSetBorder()
		{
			super(); 
		}

		//----------------------------------
		//  borderMetrics
		//----------------------------------

		/**
		 *  @private
		 *  Storage for the borderMetrics property.
		 */
		private var _borderMetrics:EdgeMetrics;

		/**
		 *  @private
		 */
		override public function get borderMetrics():EdgeMetrics
		{		
			if (_borderMetrics)
				return _borderMetrics;

			var borderStyle:String = getStyle("borderStyle");

			_borderMetrics = new EdgeMetrics(3, 1, 3, 3);

			return _borderMetrics;
		}		

		/**
		 *  @private
		 *  Draw the background and border.
		 */
		override protected function updateDisplayList(w:Number, h:Number):void
		{	
			super.updateDisplayList(w, h);

			var borderAlpha:int = 1.0;
			var borderThickness:int = getStyle("borderThickness");
			var borderStyle:String = getStyle("borderStyle");
			var borderColor:uint = getStyle("borderColor");
			var cornerRadius:Number = getStyle("cornerRadius");
			var backgroundColor:uint = getStyle("backgroundColor");
			var backgroundAlpha:Number= getStyle("backgroundAlpha");


			var labelWidth:int = 0;
			if( this.parent is FieldSet )
				labelWidth = FieldSet(this.parent).getLabelWidth(); 


			var g:Graphics = graphics;
			g.clear();

			g.lineStyle( borderThickness, borderColor, borderAlpha );							

		    var startX:Number = labelWidth +cornerRadius + 10 + 10;
		    var startY:Number = 10;

			if( backgroundColor != 0 )
				g.beginFill(backgroundColor, backgroundAlpha);

			g.moveTo( startX, startY );
			g.lineTo( width-cornerRadius, startY );
			g.curveTo(width-1, startY+1, width, startY+cornerRadius);	
			g.lineTo( width, height-cornerRadius );	
			g.curveTo(width-1, height-1, width-cornerRadius, height);	
			g.lineTo( 0+cornerRadius, height );	
			g.curveTo(0+1, height-1, 0, height-cornerRadius);	
			g.lineTo( 0, startY+cornerRadius );	
			g.curveTo(0+1, startY+1, cornerRadius, startY);	
			g.lineTo( cornerRadius+10, startY );

			if( backgroundColor != 0 )
				g.endFill();
		}

	}
}

使用方式：

<?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:component="component.*" >
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<component:FieldSet label="漂亮的框框" width="200" height="100" left="100">
		<s:Group>
			<s:Label text="Hello World"/>
		</s:Group>
	</component:FieldSet>
</s:Application>

[/size]

使用率柱状图：
[img]http://dl.iteye.com/upload/attachment/362573/83479a54-a9e0-37c6-8537-bb2c41e50c4c.png[/img]
ComplexHPercentageBar.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx" 
				xmlns="library://ns.apuisc.com/flex"
				width="220" left="5" verticalAlign="middle"
				xmlns:local="*" xmlns:component="component.*"
				>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import spark.components.Label;
			[Bindable]
			public var percentageBarBgColor:uint = uint("0x04dc04");
			[Bindable]
			public var percent:int=60;
			[Bindable]
			public var detail:String="使用率";

		]]>
	</fx:Script>
	<local:HPercentageBar id="percentageBar" width="40%" height="20" bgColor="{percentageBarBgColor}" percent="{percent}"/>
	<s:Label width="60%" height="100%" id="label" text="{detail}" paddingLeft="3" paddingRight="3" paddingBottom="3" paddingTop="3"/>
</s:HGroup>

HPercentageBar.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
		  xmlns:s="library://ns.adobe.com/flex/spark" 
		  width="100%" height="100%" borderWeight="1">
	<s:layout>
		<s:HorizontalLayout verticalAlign="middle" gap="10"/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			[Bindable]
			public var bgColor:uint = uint("0x04dc04");
			[Bindable]
			public var percent:int;

		]]>
	</fx:Script>
	<s:Rect percentWidth="{percent}" percentHeight="100" alpha="0.8f" >
		<s:fill >
			<s:SolidColor color="{bgColor}" />
		</s:fill>
	</s:Rect>
</s:BorderContainer>

使用：

<?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:component="component.*" xmlns:hp="*">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
   <hp:ComplexHPercentageBar width="200" height="100" left="100"/>
</s:Application>