Para redondear las esquinas de un DateField en Flex 4?
-
20-09-2019 - |
Pregunta
Estoy usando constructor de Flash, con Flex SDK 4 y estoy tratando de crear un DateField
en la que el componente TextInput
tiene las esquinas redondeadas.
He probado el siguiente código que no funciona:
<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>
¿Puede la comunidad me ayude a rectificar los errores visibles en mi código o que me señale una guía alternativa o tutorial que muestra cómo hacer esto?
Solución
Con Flex 4, todo está en las pieles. CSS se utiliza en gran medida sólo para aplicar una piel a un componente o clase de componentes, mientras que en Flex 3 se utiliza para establecer toneladas de propiedades. Lo interesante es, sin embargo, que se puede definir cualquier valor de la propiedad estilo arbitrario en CSS y será accesible a través de getStyle
en la piel!
Como tal, ellos no tienen la propiedad cornerRadius
más. En su lugar, usted tiene que crear un "DateFieldSkin", y aplicarlo a su componente a través de un selector CSS. La piel DateField utiliza por defecto el DropDownSkin
. Aquí está el código para resolver esto:
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>
Sample App :
<?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>
También puede codificar valores de radio en la piel, o hacer algo aún más dinámico y optimizado. Esto es sólo un comienzo.
Quiero saber si eso funciona, Lanza