응용 프로그램 backgroundImage를 flex 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> 

배경 화면을 표시합니다. 그러나 구성 요소/컨테이너를 응용 프로그램에 넣으면 해당 구성 요소/컨테이너가 응용 프로그램에 표시되지 않습니다. 피부를 제거한 후에는 애플리케이션의 해당 구성 요소/컨테이너 디스플레이 만 제거합니다.

Answer 1

귀하의 사용자 정의 스킨은 "contentGroup"라는 그룹이없는

플렉스는 보통 용기에 표시되어야합니다 모든 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>