تقريب زوايا DateField في Flex 4؟

Question

أنا أستخدم 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>

هل يمكن للمجتمع مساعدتي في تصحيح أي أخطاء مرئية في الكود الخاص بي أو توجيهي إلى دليل أو برنامج تعليمي بديل يوضح كيفية القيام بذلك؟

Answer 1

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

يمكنك أيضًا ترميز قيم نصف القطر في الجلد، أو القيام بشيء أكثر ديناميكية وتحسينًا.هذه فقط البداية.

اسمحوا لي أن أعرف إذا كان هذا يعمل ، لانس