flex4 Application backgroundImage

群里一哥们问我 f4 设置 Application 的 backgroundImage  问题，

就写了一个demo  Application  skin文件  图片是http形式的

原理利用有 BorderContainer 控件 这个控件一般用来做边框，背景贴图。。。当然了这个空间有一个特殊的CSS属性

backgroundImage 底层的skin就是添加了 BorderContainer控件

1.新建一个 spark.components.Application skin

去掉系统的背景填充

<s:Rect id="backgroundRect" left="10" right="10" top="10" bottom="10" radiusX="10" radiusY="10"  >  

      <s:fill>            

  <s:SolidColor id="bgRectFill" color="yellow"/>  

        </s:fill>  

    </s:Rect>  

  添加

	<s:BorderContainer id="backgroundImg"
					   backgroundColor="#FFFFFF"
					   borderVisible="false"
					   left="0" right="0" top="0" bottom="0" />

 

修改 updateDisplayList（）方法

			override protected function updateDisplayList(unscaledWidth:Number, 
														  unscaledHeight:Number):void {
				backgroundImg.setStyle("backgroundAlpha", 
					getStyle("backgroundAlpha"));
				backgroundImg.setStyle("backgroundColor", 
					getStyle("backgroundColor"));
					backgroundImg.setStyle("backgroundImage", 
						getStyle("backgroundImage"));
					backgroundImg.setStyle("backgroundImageFillMode", "repeat");
				super.updateDisplayList(unscaledWidth, unscaledHeight);
			}

 

源文件如下：

<?xml version="1.0" encoding="utf-8"?>

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2008 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for the Spark Application component. 
        
       @see spark.components.Application
        
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<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" alpha.disabledWithControlBar="0.5">

    <fx:Metadata>
    <![CDATA[ 
        /** 
         * A strongly typed property that references the component to which this skin is applied.
         */
        [HostComponent("spark.components.Application")]
    ]]>
    </fx:Metadata> 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /**
             *  @private
             */
			override protected function updateDisplayList(unscaledWidth:Number, 
														  unscaledHeight:Number):void {
				backgroundImg.setStyle("backgroundAlpha", 
					getStyle("backgroundAlpha"));
				backgroundImg.setStyle("backgroundColor", 
					getStyle("backgroundColor"));
					backgroundImg.setStyle("backgroundImage", 
						getStyle("backgroundImage"));
					backgroundImg.setStyle("backgroundImageFillMode", "repeat");
				super.updateDisplayList(unscaledWidth, unscaledHeight);
			}
        ]]>
    </fx:Script>
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalWithControlBar" />
        <s:State name="disabledWithControlBar" />
    </s:states>
	<s:BorderContainer id="backgroundImg"
					   backgroundColor="#FFFFFF"
					   borderVisible="false"
					   left="0" right="0" top="0" bottom="0" />
	
    <!-- fill -->
    <!--- 
        A rectangle with a solid color fill that forms the background of the application.
        The color of the fill is set to the Application's backgroundColor property.
    -->       
    <s:Group left="0" right="0" top="0" bottom="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" />
        </s:layout>

        <!--- 
            @private
            Application Control Bar
        -->
        <s:Group id="topGroup" minWidth="0" minHeight="0"
                    includeIn="normalWithControlBar, disabledWithControlBar" >

            <!-- layer 0: control bar highlight -->
            <s:Rect left="0" right="0" top="0" bottom="1" >
               <s:stroke>
                    <s:LinearGradientStroke rotation="90" weight="1">
                        <s:GradientEntry color="0xFFFFFF" />
                        <s:GradientEntry color="0xD8D8D8" />
                    </s:LinearGradientStroke>
               </s:stroke>
            </s:Rect>

            <!-- layer 1: control bar fill -->
            <s:Rect left="1" right="1" top="1" bottom="2" >
               <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="0xEDEDED" />
                        <s:GradientEntry color="0xCDCDCD" />
                    </s:LinearGradient>
               </s:fill>
            </s:Rect>

            <!-- layer 2: control bar divider line -->
            <s:Rect left="0" right="0" bottom="0" height="1" alpha="0.55">
                <s:fill>
                    <s:SolidColor color="0x000000" />
                </s:fill>
            </s:Rect>

            <!-- layer 3: control bar -->
            <!--- @copy spark.components.Application#controlBarGroup -->
            <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                <s:layout>
                    <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                </s:layout>
            </s:Group>
        </s:Group>

        <!--- @copy spark.components.SkinnableContainer#contentGroup -->
        <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />

    </s:Group>

</s:Skin>

 

然后外部引用css 当然了这个css特殊的地方必须有 backgroundImage 这个属性

例如：

	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		s|Application
		{
			backgroundImage: Embed("http://www.beasy.org/wp-content/uploads/2011/10/sh.jpg");
		}
	</fx:Style>

 

测试ok