Как получить угловой луч на компоненте Flex 4 TextInput

Question

Как получить угловой радиус для моего компонента TextInput во Flex 4.

<s:TextInput prompt="username" width="150" maxChars="100" id="txt_username"
    color="#000000"/>

Answer 1

Создайте пользовательский скин (возможно, скопировав свечу TextInputSkin) и добавьте изображение границы с закругленными углами, например:

<!-- border -->
<s:Rect id="border" left="0" right="0" top="0" bottom="0" 
        radiusX="10" radiusY="10">

    <s:stroke>
        <s:SolidColorStroke id="borderStroke" weight="1" />
    </s:stroke>
</s:Rect>

Если вы хотите больше специальных закругленных углов, вы также можете использовать следующие атрибуты:

topLeftRadiusX="4" topLeftRadiusY="8" 
bottomLeftRadiusX="2" bottomRightRadiusY="10"

По умолчанию TextInputSkin не допускает закругленные углы, поэтому нет стиля, который вы могли бы установить в TextInput для этого. Так что нет, нет другого способа, кроме как создать собственный класс скина.

Answer 2

Вы можете сделать шаг вперед и сделать его динамичным. Создайте пользовательский TextInputSkin на основе искры TextInputSkin и в методе updateDisplayList добавьте этот код над вызовом super.updateDisplayList ().

In YourTextInputSkin.mxml,

// in updateDisplayList()
if (getStyle("cornerRadius")!==undefined) {
    border.radiusX = border.radiusY = getStyle("cornerRadius");
    background.radiusX = background.radiusY = getStyle("cornerRadius");
}

Вот и все. Вы сделали!

Теперь, чтобы использовать его, добавьте селектор класса CSS для добавления стиля cornerRadius, например:

/* set the Textinput.styleName to this style */

s|TextInput.roundedInput
{
    contentBackgroundAlpha: .4;
    contentBackgroundColor: #000000;
    cornerRadius:           10;
    skinClass:              ClassReference("view.skins.TextInputRoundedSkin");  
}

И установите свой экземпляр для класса,

<s:TextInput styleName="roundedInput"/>

К сожалению, вы не можете установить стиль cornerRadius для экземпляра компонента TextInput в MXML. Должен ли Flex поддерживать тег стилей для такого типа вещей, как теги HTML? Должны ли стили, объявленные в скине, передаваться на компонент, использующий их? В настоящее время компилятор Flex будет выдавать ошибку, если вы объявите стиль в скине и попытаетесь использовать его в экземпляре компонента, даже если это допустимо для объявления этого стиля и любого другого стиля в CSS. А что если в UIComponents есть прокси-объект стиля, который позволяет вам устанавливать стили? В любом случае, я отвлекся.

Если вы хотите сделать этот стиль доступным в экземпляре TextInput в дополнение к предыдущим методам, вы можете сделать это, расширив TextInput и добавив в него метаданные стиля cornerRadius. Вы также можете установить skinClass (встроенный или в файле defaults.css в библиотеке), пока вы в нем.

Примерно так:

<?xml version="1.0" encoding="utf-8"?>
<s:TextInput xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:mx="library://ns.adobe.com/flex/mx"
             skinClass="TextInputRoundedSkin" >
    <fx:Metadata>
        [Style(name="cornerRadius", inherit="no", type="uint")]
    </fx:Metadata>
</s:TextInput>

Для использования

<local:MyExtendedTextInput cornderRadius="8" />

В будущем вам не нужно будет объявлять CSS.