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

Flex个人知识库7之漂亮框框
[size=large]1、 效果如图：[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]

使用率柱状图：

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>