Flex 做网格背景

对于Flex4来讲，可以自定义skin，然后就可以做出来很漂亮的网格背景。

APP:

<?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"
			   width="100%" height="100%"
			   skinClass="com.view.skin.CrossGroupSkin"
			   click="application1_clickHandler(event)">
	
	<fx:Script>
		<![CDATA[
			protected function application1_clickHandler(event:MouseEvent):void
			{
				(skin as Object).grapWidth -= 1;
			}
		]]>
	</fx:Script>
	
</s:Application>

 SkinClass:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
    <fx:Metadata>
    <![CDATA[
        [HostComponent("spark.components.SkinnableContainer")]
    ]]>
    </fx:Metadata> 
    <fx:Script fb:purpose="styling">
        <![CDATA[         
			private var _grapWidth: Number = 50;
			public function set grapWidth(value:Number):void
			{
				this._grapWidth = value;
				this.invalidateDisplayList();
			}
			
			public function get grapWidth():Number
			{
				return _grapWidth;
			}
			public function drawGrid():void
			{
				this.graphics.clear();
				this.graphics.beginFill(0xFFFFFF);
				this.graphics.drawRect(0, 0, this.width, this.height);
				this.graphics.endFill();				
				this.graphics.lineStyle(1, 0xBBBBBB);
				
				//画横线
				var i : int = 0;
				var totalLength: Number = 0;
				while(totalLength < this.height){
					if(grapWidth * i < this.height)
					{
						this.graphics.moveTo(0, grapWidth * i);
						this.graphics.lineTo(this.width, grapWidth * i);
					}
					else
					{
						this.graphics.moveTo(0, this.height);
						this.graphics.lineTo(this.width, this.height);
					}
						
					totalLength = grapWidth * i;
					i ++;
				}
				
				//变量清零
				totalLength = 0;
				i = 0;
				
				//画竖线
				while(totalLength < this.width){
					if(grapWidth * i < this.width)
					{
						this.graphics.moveTo(grapWidth * i, 0);
						this.graphics.lineTo(grapWidth * i, this.height );
					}
					else
					{						
						this.graphics.moveTo(this.width, 0);
						this.graphics.lineTo(this.width, this.height );
					}
					
					totalLength = grapWidth * i;
					i ++;
				}
			}
			
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
            {
                if (isNaN(getStyle("backgroundColor")))
                {
                    background.visible = false;
                }
                else
                {
                    background.visible = true;
                    bgFill.color = getStyle("backgroundColor");
                    bgFill.alpha = getStyle("backgroundAlpha");
                }
                
                super.updateDisplayList(unscaledWidth, unscaledHeight);
				drawGrid();
            }
        ]]>        
    </fx:Script>
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    <s:Rect id="background" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:SolidColor id="bgFill" color="#FFFFFF"/>
        </s:fill>
    </s:Rect>
    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
    </s:Group>
</s:Skin>