在Flex4 Spark Application中设置图片背景解决方案汇总

问题：如何在 Flex4 Spark Application 中添加图片背景？

方案1:自定义含有BitmapGraphic的皮肤类，然后再MXML,CSS,AS中设置skinClass的皮肤样式

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

<s:Application name="Spark_Application_skinClass_test"

        xmlns:fx="http://ns.adobe.com/mxml/2009"

        xmlns:s="library://ns.adobe.com/flex/spark"

        xmlns:mx="library://ns.adobe.com/flex/halo"

        skinClass="skins.CustomApplicationSkin">

    <s:layout>

        <s:BasicLayout/>

    </s:layout>

</s:Application>

自定义皮肤类, skins/CustomApplicationSkin.mxml代码如下：

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

<s:Skin name="CustomApplicationSkin"

        xmlns:fx="http://ns.adobe.com/mxml/2009"

        xmlns:s="library://ns.adobe.com/flex/spark"

        alpha.disabled="0.5">

    <s:states>

        <s:State name="normal"/>

        <s:State name="disabled"/>

    </s:states>

    <fx:Metadata>

    <![CDATA[

        [HostComponent("spark.components.Application")]

    ]]>

    </fx:Metadata>

    <!-- fill -->

    <s:BitmapImage id="img"

            source="@Embed('image1.jpg')"

            smooth="true"

            left="0" right="0"

            top="0" bottom="0"/>

    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0"/>

</s:Skin>

你也可以通过外部.css样式表文件或者使用<Style/>标签来设置使用skinClass样式

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

<s:Application name="Spark_Application_skinClass_test"

        xmlns:fx="http://ns.adobe.com/mxml/2009"

        xmlns:s="library://ns.adobe.com/flex/spark"

        xmlns:mx="library://ns.adobe.com/flex/halo">

    <s:layout>

        <s:BasicLayout/>

    </s:layout>

    <fx:Style>

        @namespace s "library://ns.adobe.com/flex/spark";

        s|Application {

            skinClass: ClassReference("skins.CustomApplicationSkin");

        }

    </fx:Style>

</s:Application>

或者你可以使用ActionScript来设置skinClass样式，代码如下:

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

<s:Application name="Spark_Application_skinClass_test"

        xmlns:fx="http://ns.adobe.com/mxml/2009"

        xmlns:s="library://ns.adobe.com/flex/spark"

        xmlns:mx="library://ns.adobe.com/flex/halo"creationComplete=”init();”>

    <fx:Script>

        <![CDATA[

            import skins.CustomApplicationSkin;

            protected function init():void {

                setStyle("skinClass", CustomApplicationSkin);

            }

        ]]>

    </fx:Script>

</s:Application>

方案2：在运行时embedded图片到BitmapFill对象中，修改Application皮肤的backgroundRect皮肤部分的填充属性。代码如下:

 

<?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:ho="library://ns.adobe.com/flex/halo"

              xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"creationComplete="init();">

    <fx:Script>

       <![CDATA[

           import mx.graphics.BitmapFill;

           import mx.graphics.BitmapFillMode;

           import spark.skins.spark.ApplicationSkin;

           [Embed("style/background.jpg")]

           protected const BgImg:Class;

           protected function init():void{

              var bmpFill : BitmapFill = new BitmapFill();

              bmpFill.source = BgImg;

              bmpFill.fillMode = BitmapFillMode.SCALE;

              ApplicationSkin(skin).backgroundRect.fill=bmpFill;

       ]]>

    </fx:Script>

</s:Application>

 

方案3：扩展默认的Spark包 中Application 皮肤，并通过embedded图片来覆盖backgroundRect皮肤部分的填充属性，代码如下:

<?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:ho="library://ns.adobe.com/flex/halo"

              xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"skinClass="skins.CustomBitmapApplicationSkin">

</s:Application>

扩展的自定义的应用程序皮肤类，skins/CustomBitmapApplicationSkin.as如下：

package skins{

    import mx.graphics.BitmapFill;

    import mx.graphics.BitmapFillMode;

    import spark.skins.spark.ApplicationSkin;

    publicclass CustomBitmapApplicationSkin extends ApplicationSkin{

       [Embed("style/background.jpg")]

       protectedconst BgImg:Class;

       publicfunction CustomBitmapApplicationSkin(){

           super();

           var bmpFill:BitmapFill = new BitmapFill();

           bmpFill.source=BgImg;

           bmpFill.fillMode = BitmapFillMode.SCALE;

           backgroundRect.fill = bmpFill;

       }

    }

}

 

方案4:自定义皮肤类（有别于方案一,不需要BitmapGraphic）实现代码如下:

<?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:ho="library://ns.adobe.com/flex/halo"

              xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"skinClass="skins.CustomBitmapApplicationSkin2">

    <fx:Style>

       @namespace s "library://ns.adobe.com/flex/spark";

       s|Application {

           backgroundImage: Embed("style/background.jpg");

       }

    </fx:Style>

</s:Application>

自定义的应用程序皮肤类，skins/CustomBitmapApplicationSkin2.as如下：

<?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.disabledStates="0.5">

    <s:states>

       <s:State name="normal" />

       <s:State name="disabled" stateGroups="disabledStates" />

       <s:State name="normalWithControlBar" stateGroups="controlBarStates" />

       <s:State name="disabledWithControlBar" stateGroups="disabledStates,controlBarStates" />

    </s:states>

    <fx:Metadata>

       [HostComponent("spark.components.Application")]

    </fx:Metadata>

   

    <fx:Script fb:purpose="styling">

       <![CDATA[

           overrideprotectedfunction updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

              backgroundRect.setStyle("backgroundAlpha", getStyle("backgroundAlpha"));

              backgroundRect.setStyle("backgroundColor", getStyle("backgroundColor"));

             

              if (getStyle("backgroundImage")) {

                  backgroundRect.setStyle("backgroundImage", getStyle("backgroundImage"));

                  backgroundRect.setStyle("backgroundImageFillMode", "repeat");

              }

             

              super.updateDisplayList(unscaledWidth, unscaledHeight);

           }

       ]]>

    </fx:Script>

   

    <!-- 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:BorderContainer id="backgroundRect"

                     backgroundColor="#FFFFFF"

                     borderVisible="false"

                     left="0" right="0" top="0" bottom="0" />

    <s:Group left="0" right="0" top="0" bottom="0">

       <s:layout>

           <s:VerticalLayout gap="0" horizontalAlign="justify" />

       </s:layout>

       <!--- Application Control Bar -->

       <s:Group id="topGroup"

               minWidth="0" minHeight="0"

               includeIn="controlBarStates" >

           <!-- 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 -->

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

       <s:Group id="contentGroup"

               width="100%" height="100%"

               minWidth="0" minHeight="0" />

    </s:Group>

</s:Skin>

 

本人关于Flex4 Spark Application 背景图片设置的解决方案就到此，如有其它更高效，更可行的方案可以分享出来，互相学习。