Округление углов DateField в Flex 4?

Question

Я использую Flash-строитель, с 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 в Skin!

Таким образом, у них нет собственности 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> 

Sample App:

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

Вы также можете жёстко значения радиуса в кожу, или сделать что-то еще более динамичным и оптимизированы. Это только начало.

Позвольте мне знать, если это работает, Lance