скин окна в соответствии с ОС

Question

Я пытаюсь создать определенный скин для окна в соответствии с операционной системой.

См. Ниже мой скин.

    <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"/>

Когда окна загружаются, кнопки выглядят хорошо.Но если окно отключено и после активации появляются кнопки MacOs и Windows.

Я не знаю, как решить эту проблему, не могли бы вы мне помочь?

Спасибо

Answer 1

Вы не должны устанавливать currentState Скина непосредственно из Скина, потому что hostComponent должен позаботиться об этом.Когда вы деактивируете и повторно активируете Window, hostComponent вернет состояние Skin в одно из своих первоначальных состояний (например, normal) и, следовательно, не учитывает ваши два пользовательских состояния.

Если вы хотите установитьСостояние скина, основанное на определенных условиях, вы должны переопределить getCurrentSkinState () метод hostComponent.Но в данном конкретном случае я не думаю, что это был бы правильный подход, потому что он был бы слишком сложным.

Самое простое решение здесь, я думаю, было бы переопределить метод Skin updateDisplayList() для позиционирования ваших элементов.,Это метод, который заботится о правильном отображении всех элементов в вашем скине.

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

Другой, возможно, даже лучший, подход заключается в создании двух отдельных скинов (один для Mac, один для Windows) ипримените правильный скин для Windows.Это избавило бы нас от непрерывной проверки возможностей.