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

?

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