Rounding the corners of a DateField in Flex 4?
I'm using Flash builder, with flex 4开发者_运维问答 sdk and am trying to create a DateField
in which the TextInput
component has rounded corners.
I have tried the following code that doesn't work:
<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>
Can the community help me rectify any visible errors in my code or point me to a alternative guide or tutorial that demonstrates how to do this?
With Flex 4, everything is in the Skins. CSS is used largely just to apply one skin to a component or class of components, whereas in Flex 3 it was used to set tons of properties. The cool thing is, however, that you can define any arbitrary style property value in CSS and it will be accessible via getStyle
in the Skin!
As such, they don't have the cornerRadius
property anymore. Instead, you have to create a "DateFieldSkin", and apply it to your component via a css selector. The default DateField skin uses the DropDownSkin
. Here's the code to solve this:
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>
You can also hardcode radius values into the skin, or do something even more dynamic and optimized. This is just a start.
Let me know if that works, Lance
精彩评论