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

 public class CustomBitmapApplicationSkin extends ApplicationSkin
 {
  [Embed("style/background.jpg")]
  protected const BgImg:Class;

  public function 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[
   override protected function 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>