在flex中設置應用程序backgroundImage 4.6

Question

我想在flex 4.6中設置應用程序的BackgroundImage通過創建應用程序的皮膚。

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"> 
<!-- host component --> 
<fx:Metadata> 
    [HostComponent("spark.components.Application")] 
</fx:Metadata> 

<!-- states --> 
<s:states> 
    <s:State name="normal" /> 
    <s:State name="disabled" /> 
    <s:State name="normalWithControlBar" /> 
    <s:State name="disabledWithControlBar" /> 
</s:states> 

<s:Group id="backgroundRect" width="100%" height="100%"> 
    <s:layout> 
     <s:VerticalLayout gap="0" horizontalAlign="justify" /> 
    </s:layout> 

    <s:BitmapImage source="@Embed('assets/css/1.jpg')" left="0" right="0" top="0" bottom="0" scaleMode="stretch"/> 
</s:Group> 
</s:Skin> 

它顯示背景Image.but如果我把任何組件/容器在應用程序，然後該組件/容器不顯示在應用程序。一旦我刪除皮膚，那麼只有應用程序上的組件/容器顯示。

Answer 1

您的自定義皮膚沒有一個叫「contentGroup的」集團

這是Flex的通常應顯示在一個容器中的所有MXML的添加成分提出。

嘗試增加：

<s:Group id='contentGroup' width='100%' height='100%' /> 

你的皮膚。

我認爲這樣做。

通常情況下，複製原始皮膚文件並更改其中的內容通常會更容易，而不是寫入新的皮膚文件。這樣，你確定，你不會忘記任何重要的事情。

Answer 2

這裏我的應用程序皮膚漸變背景：

<?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" 
     xmlns:mx="library://ns.adobe.com/flex/mx" 
     alpha.disabledWithControlBar="0.5" 
     alpha.disabled="0.5"> 

    <fx:Metadata> 
    <![CDATA[ 
     [HostComponent("spark.components.Application")] 
    ]]> 
    </fx:Metadata> 

    <fx:Script fb:purpose="styling"> 
     <![CDATA[ 
      import flash.filters.DropShadowFilter; 

      private static const W:uint = 700; 
      private static const H:uint = 525; 

      private static const COLORS:Array = [0xFFFFFF, 0xFFFFFF]; 
      private static const ALPHAS:Array = [1, 0]; 
      private static const RATIOS:Array = [0, 255]; 
      private static const SHADOW:Array = [new DropShadowFilter(0, 0, 0x000000, 1.0, 12.0, 12.0, 1.0, 3, true)]; 

      private var _matrix:Matrix = new Matrix(); 

      private function drawBG(w:Number, h:Number):void { 
       _bgShading.graphics.clear(); 
       _matrix.createGradientBox(w * 1.2, h * 2.2, 0, -w * 0.1, -h * 0.8); 
       _bgShading.graphics.beginGradientFill(GradientType.RADIAL, 
        COLORS, 
        ALPHAS, 
        RATIOS, 
        _matrix, 
        SpreadMethod.PAD, 
        InterpolationMethod.LINEAR_RGB, 
        0); 
       _bgShading.graphics.drawRect(0, 0, w, h); 
       _bgShading.graphics.endFill(); 

       _bgShading.filters = SHADOW; 

       _bgTexture.graphics.clear(); 
       _bgTexture.graphics.beginFill(0x99CC99); 
       _bgTexture.graphics.drawRect(0, 0, w, h); 
       _bgTexture.graphics.endFill(); 

       _bgShading.blendMode = BlendMode.OVERLAY; 
      }   

      public function setBackgroundSize(w:uint=W, h:uint=H):void { 
       var screenRatio:Number = w/h; 
       var stageRatio:Number = stage.stageWidth/stage.stageHeight; 
       var ratio:Number = screenRatio/stageRatio; 

       // ratio > 1 if screen is broader than stage 
       mainGroup.width = stage.stageWidth * Math.max(1, ratio); 

       drawBG(mainGroup.width, H); 
      } 

      public function showBackground(b:Boolean):void { 
       _bgTexture.visible = b; 
       _bgShading.visible = b; 
      } 
     ]]> 
    </fx:Script> 

    <s:states> 
     <s:State name="normal" /> 
     <s:State name="disabled" /> 
     <s:State name="normalWithControlBar" /> 
     <s:State name="disabledWithControlBar" /> 
    </s:states> 

    <mx:UIComponent id="_bgTexture" /> 
    <mx:UIComponent id="_bgShading" /> 

    <s:Group id="mainGroup" x="0" y="0" width="700" height="525"> 
     <s:layout> 
      <s:VerticalLayout gap="0" horizontalAlign="justify" /> 
     </s:layout> 

     <s:Group id="contentGroup" width="700" height="100%" minWidth="0" minHeight="0" /> 

     <s:Group id="topGroup" minWidth="0" minHeight="0" 
        includeIn="normalWithControlBar, disabledWithControlBar" > 

      <s:Rect left="1" right="1" top="1" bottom="1" > 
       <s:fill> 
        <s:LinearGradient rotation="90"> 
         <s:GradientEntry color="#66BBEE" /> 
         <s:GradientEntry color="#3399CC" /> 
        </s:LinearGradient> 
       </s:fill> 
      </s:Rect> 

      <s:Rect left="2" right="2" bottom="0" height="1" alpha="0.5"> 
       <s:fill> 
        <s:SolidColor color="#333333" /> 
       </s:fill> 
      </s:Rect> 

      <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0"> 
       <s:layout> 
        <s:HorizontalLayout paddingLeft="6" paddingRight="6" paddingTop="6" paddingBottom="6" gap="10" /> 
       </s:layout> 
      </s:Group> 
     </s:Group> 

    </s:Group> 
</s:Skin>