Округление углов поля даты в Flex 4?
-
20-09-2019 - |
Вопрос
Я использую 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>
Может ли сообщество помочь мне исправить любые видимые ошибки в моем коде или указать мне на альтернативное руководство, демонстрирующее, как это сделать?
Решение
С Flex 4 все находится в Оболочках.CSS используется в основном только для применения одного скина к компоненту или классу компонентов, тогда как в Flex 3 он использовался для установки множества свойств.Однако самое классное, что вы можете определить любое произвольное значение свойства style в 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>
Вы также можете жестко закодировать значения radius в оболочке или сделать что-то еще более динамичное и оптимизированное.Это только начало.
Дай мне знать, если это сработает, Лэнс