窗口皮膚根據操作系統

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應注意這一點。當您禁用並重新激活窗口時，hostComponent會將外觀狀態設置回其原始狀態之一（例如normal），因此忽略您的兩個自定義狀態。

如果你要根據你應該重寫hostComponent區域的getCurrentSkinState()方法一定的條件來設置皮膚的狀態。但在這種特殊情況下，我認爲這不是正確的做法，因爲這太複雜了。

這裏，我覺得這是覆蓋皮膚的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。這將消除連續的if/else檢查功能。