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

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

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

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

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

方案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?背景图片设置的解决方案就到此，如有其它更高效，更可行的方案可以分享出来，互相学习。