在Flex 4中舍入DateField的角？

Question

我正在使用Flash Builder，使用flex 4 sdk，並試圖創建一個DateField，其中TextInput組件具有圓角。

我曾嘗試下面的代碼不起作用：

<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" 
    xmlns:components="components.*"> 

    <fx:Style> 
     @namespace s "library://ns.adobe.com/flex/spark"; 
     @namespace mx "library://ns.adobe.com/flex/halo"; 
     @namespace components "components.*"; 

     .roundedTI 
     { 
      corner-radius: 10; 
      borderStyle: solid; 
     } 

    </fx:Style> 

    <mx:DateField textInputStyleName="roundedTI"/> 

</s:Application> 

社區能否幫我糾正任何錯誤，可見在我的代碼或指向我一個另類指南或教程演示如何做到這一點？

Answer 1

隨着Flex 4，一切都在皮膚。 CSS主要用於將一個外觀應用於組件或類組件，而在Flex 3中，它用於設置大量屬性。不過，很酷的是，您可以在CSS中定義任意樣式屬性值，並且可以通過皮膚中的getStyle進行訪問！

因此，它們不再具有cornerRadius屬性。相反，你必須創建一個「DateFieldSkin」，並通過一個css選擇器將它應用到你的組件。默認的DateField皮膚使用DropDownSkin。下面就來解決這個代碼：

DateFieldSkin：

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

    <s:states> 
     <s:State name="normal"/> 
     <s:State name="disabled"/> 
    </s:states> 

    <!--- @private --> 
    <s:Rect id="border" left="0" right="0" top="0" bottom="0" 
     radiusX="{getStyle('cornerRadius')}" radiusY="{getStyle('cornerRadius')}"> 
     <s:stroke>   
      <!--- @private --> 
      <s:SolidColorStroke id="borderStroke" color="0x5380D0" /> 
     </s:stroke> 
     <s:fill> 
      <!--- @private --> 
      <s:SolidColor id="bgFill" color="0xFFFFFF"/> 
     </s:fill> 
    </s:Rect> 
</s:Skin> 

示例應用程序：

<?xml version="1.0" encoding="utf-8"?> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/halo" 
    minWidth="1024" minHeight="768"> 

    <fx:Style> 
     @namespace s "library://ns.adobe.com/flex/spark"; 
     @namespace mx "library://ns.adobe.com/flex/mx"; 

     .roundedTI 
     { 
      corner-radius: 10; 
      borderStyle: solid; 
      borderSkin: ClassReference("DateFieldSkin"); 
     } 

    </fx:Style> 

    <mx:DateField textInputStyleName="roundedTI"/> 

</s:Application> 

您還可以硬編碼的半徑值到皮膚，或者做更多動態的東西並進行優化。這只是一個開始。

讓我知道這是否有效， 蘭斯