window skin according OS

Question

I try to have a specific window skin according operating system.

See below my skin.

    <s:SparkSkin 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:Layout="skin.Layout.*"
         alpha.disabledGroup="0.5"
         creationComplete="sparkskin1_creationCompleteHandler(event)">

<fx:Metadata>
    [HostComponent("fr.inter.ui.windowSkin.wCustomWindow")]
</fx:Metadata>


<fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;
        protected function btResize_mouseDownHandler(event:MouseEvent):void
        {
            btResize.addEventListener( MouseEvent.MOUSE_UP, btResize_mouseUpHandler );
            stage.nativeWindow.startResize();
        }

        protected function btResize_mouseOutHandler(event:MouseEvent):void
        {
            btResize.removeEventListener( MouseEvent.MOUSE_OUT, btResize_mouseOutHandler );             
        }


        protected function btResize_mouseUpHandler(event:MouseEvent):void
        {
            btResize.removeEventListener( MouseEvent.MOUSE_UP, btResize_mouseUpHandler );



        }

        protected function sparkskin1_creationCompleteHandler(event:FlexEvent):void
        {

            if (NativeApplication.supportsDockIcon)
            {
                this.currentState = "supportsDockIcon";//mac
            }
            else
            {
                this.currentState = "supportsSystemTray";
            }
        }


    ]]>
</fx:Script>


<s:states>
    <s:State name="disabledAndInactive" stateGroups="disabledGroup, inactiveGroup" />
    <s:State name="maximizedGroup"/>
    <s:State name="normal" />
    <s:State name="disabled" stateGroups="disabledGroup" />
    <s:State name="normalAndInactive" stateGroups="inactiveGroup" />
    <s:State name="supportsDockIcon" />
    <s:State name="supportsSystemTray"/>
</s:states>

<s:Rect id="backgroundRect"
        left="0"
        right="0"
        top="0"
        bottom="0"
        alpha="0"
        >
    <s:fill>
        <s:SolidColor alpha="0"/>
    </s:fill>
</s:Rect>

<s:Group bottom="0" left="0" right="0"
         top="0"  
         >
    <!--Fond de la fenetre-->
    <s:Rect bottom="0" left="0" right="0"
            top="0"
            radiusX="8" radiusY="8" >
        <s:fill>
            <s:SolidColor color="#656565" alpha=".7" />
        </s:fill>
        <s:stroke>
            <s:SolidColorStroke color="#666666" />
        </s:stroke>
    </s:Rect>

    <s:Group height="38" id="moveArea"
             left="0" right="0" >

        <!--Barre bleu avec filet-->
        <s:Rect  height="25" left="10" right="10" top="10">
            <s:fill>
                <s:SolidColor color="#055a90" />
            </s:fill>
            <s:stroke>
                <s:SolidColorStroke color="#666666" />
            </s:stroke>
        </s:Rect>


        <s:BitmapImage id="icon"
                       left.supportsSystemTray="5" right.supportsDockIcon="5"
                       verticalCenter="0" />

        <s:Label id="titleDisplay"
                 styleName="swindowTitle"
                 left.supportsSystemTray="60" left.supportsDockIcon="{this.width/2}"
                 top="18" verticalAlign="middle" horizontalCenter="0"
                 />

        <!--Zone de bouton-->

        <s:HGroup right.supportsSystemTray="12" left.supportsDockIcon="12" verticalCenter="0">

            <s:Button id="btMinimize" buttonMode="true" 
                      skinClass.supportsSystemTray="skin.components.MinimizeButtonSkin"
                      skinClass.supportsDockIcon="skin.components.MinimizeButtonSkinM"
                      verticalCenter="0"/>

            <s:Button id="btMaximize" buttonMode="true" 
                      skinClass.supportsSystemTray="skin.components.MaximizeButtonSkin"
                      skinClass.supportsDockIcon="skin.components.MaximizeButtonSkinM"
                      verticalCenter="0"/>

            <s:Button id="closeButton" buttonMode="true" 
                      skinClass.supportsSystemTray="skin.components.CloseButtonSkin"
                      skinClass.supportsDockIcon="skin.components.CloseButtonSkinM"
                      verticalCenter="0"/>

        </s:HGroup>

    </s:Group>

    <!--Fond de la zone principale-->

    <s:Rect id="background" left="10" top="35" right="10" bottom="10">
        <s:fill>
            <s:LinearGradient rotation="-90">
                <s:GradientEntry color="#edf0f7"/>
                <s:GradientEntry color="#fcfbfb" />
            </s:LinearGradient>
        </s:fill>
        <s:stroke>
            <s:SolidColorStroke color="#666666" />
        </s:stroke>
    </s:Rect>

    <!--Zone dans laquelle les elements vont se positionner-->


    <s:Group id="contentGroup" left="15" right="15" top="43" bottom="15" minWidth="0"
             minHeight="0" width="100%" height="100%">

    </s:Group>



</s:Group>
<s:Button height="15" id="btResize" width="15"
          bottom="0" right="0"
          skinClass="spark.skins.spark.windowChrome.GripperSkin" 
          mouseDown="btResize_mouseDownHandler(event)"
          buttonMode="true"/>

When windows is loading firt, buttons appear well. But if window is desactivate and after activate, MacOs and Windows buttons appear.

I don't know how to solve that, could you help me?

Thanks

Answer 1

You're not supposed to set the Skin's currentState directly from within the Skin because the hostComponent should take care of that. When you deactivate and re-activate the Window, the hostComponent will set the Skin state back to one of its original states (e.g. normal) and hence disregards your two custom states.

If you want to set the Skin's state based on certain conditions you should override the getCurrentSkinState() method of the hostComponent. But in this particular case I don't think that would be the right approach, because it would be too complicated.

The easiest solution here I think would be to override the Skin's updateDisplayList() method to position your elements. This is the method that takes care of correctly displaying all the elements in your Skin.

<fx:Script>
    <![CDATA[
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            if (NativeApplication.supportsDockIcon) {
                titleDisplay.left = width / 2;
                //position other elements for mac
            }
            else {
                titleDisplay.left = 60;
                //position other elements for win
            }
        }
    ]]>
</fx:Script>

Another - perhaps even better - approach would be to create two separate Skin's (one for Mac, one for Windows) and apply the correct Skin to your Windows. This would rid us of the continous if/else checking for capabilities.