Закругление углов DateField во Flex 4? - PullRequest
Новая
       28

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

3 голосов
/ 15 февраля 2010

Я использую 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>

Может ли сообщество помочь мне исправить любые видимые ошибки в моем коде или указать альтернативное руководство или учебное пособие, демонстрирующее, как это сделать?

1 Ответ

5 голосов
/ 16 февраля 2010

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

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

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

...