Arrondir les coins d'un DateField dans Flex 4?

Question

J'utilise Flash Builder, avec 4 flex sdk et essaie de créer un DateField dans lequel le composant de TextInput a des coins arrondis.

J'ai essayé le code suivant qui ne fonctionne pas:

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

La communauté peut me aider à rectifier des erreurs visibles dans mon code ou me pointer vers un guide alternatif ou tutoriel qui montre comment faire?

Answer 1

Avec Flex 4, tout est dans le Skins. CSS est utilisé en grande partie juste pour appliquer une peau à un composant ou une catégorie de composants, alors que dans Flex 3, il a été utilisé pour définir des tonnes de propriétés. Cependant, la chose est cool, que vous pouvez définir une valeur de propriété de style arbitraire dans CSS et il sera accessible via getStyle dans la peau!

En tant que tel, ils ne sont pas la propriété cornerRadius plus. Au lieu de cela, vous devez créer un « DateFieldSkin », et l'appliquer à votre composant via un sélecteur de css. La valeur par défaut la peau DateField utilise le DropDownSkin. Voici le code pour résoudre ceci:

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>

App échantillon :

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

Vous pouvez également hardcode valeurs de rayon dans la peau, ou faire quelque chose encore plus dynamique et optimisé. Ceci est juste un début.

Faites-moi savoir si cela fonctionne, Lance