Flex 4에서 DateField의 모서리를 둥글게 만드시나요?

Question

저는 Flex 4 SDK와 함께 Flash 빌더를 사용하고 있으며 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.이를 해결하기 위한 코드는 다음과 같습니다.

날짜필드스킨:

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