how to round the corners of a DateField in Flex 4

Question

I'm using Flash builder, with flex 4 sdk, I'm trying to create a DateField in which the TextInput component has rounded corners, this is my code, for some reason it doesn't work, anyone knows why?

<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

Hey,

With Flex 4, everything is in the Skins. CSS is used largely just to apply one skin to a component or class of components, whereas in Flex 3 it was used to set tons of properties. The cool thing is, however, that you can define any arbitrary style property value in CSS and it will be accessible via getStyle in the Skin!

As such, they don't have the cornerRadius property anymore. Instead, you have to create a "DateFieldSkin", and apply it to your component via a css selector. The default DateField skin uses the DropDownSkin. Here's the code to solve this:

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>

You can also hardcode radius values into the skin, or do something even more dynamic and optimized. This is just a start.

Let me know if that works, Lance