Dnes jsem potřeboval vytvořit AIRovou miniaplikaci, která má vlastní chrome, jenže WindowedApplication (respektive Window/NativeWindow) ve Flex SDK 4 nemá property backgroundAlpha. Jak tedy na transparentní pozadí?

Řešení není nijak závratně složité. Nejdříve je třeba nastavit v AIR Application Descriptoru hodnotu systemChrome na none a transparent na true. Tohle se nijak neliší od předchozí verze SDK. Stejně jako dříve je třeba nastavit v tagu WindowedApplication několik hodnot:

• type na NativeWindowType.LIGHTWEIGHT
• systemChrome na NativeWindowSystemChrome.NONE
• transparent na true
• showStatusBar na false
• showTitleBar na false
• opaqueBackground na null

Poté je třeba vytvořit nový skin pro komponentu WindowedApplication nejjednodušší řešení je udelat si kopii defaultního skinu a z ní odmazat pozadí, které tam mít nechceme. Výsledný skinClass pak vypadá zhruba takto:

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    alpha.disabledGroup="0.5" >

    <fx:Metadata>
      [HostComponent("Object")]
    </fx:Metadata>

    <fx:Script>
        static private const exclusions:Array = ["backgroundRect", "bgFill", "contentGroup", "statusText"];
        override public function get colorizeExclusions():Array {return exclusions;}
    </fx:Script>

     <s:states>
        <s:State name="normal" />
        <s:State name="disabled" stateGroups="disabledGroup" />
        <s:State name="normalInactive" stateGroups="inactiveGroup" />
        <s:State name="disabledInactive" stateGroups="disabledGroup, inactiveGroup" />
    </s:states>

    <!-- layer 2: content + status bar -->
    <s:Group left="0" right="0" top="0" bottom="0" minHeight="24" minWidth="0" >
        <s:layout>
            <s:VerticalLayout gap="0"/>
        </s:layout>

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

        <!-- status bar -->
        <s:Group id="statusBar" width="100%" minHeight="24" >
            <!-- status text -->
            <s:SimpleText id="statusText" top="2" bottom="2" left="10" right="10" verticalAlign="middle"
                fontSize="10" color="0x585858" width="100%" truncation="1" />
        </s:Group>
    </s:Group>

</s:SparkSkin>

Tento vytvořený skin pak předejte WindowedApplication a vše je hotové.

Připomínám, že tento článek je psaný v době, kdy je Flex SDK 4 ve verzi beta 2. Ve finální verzi se může leccos změnit.