A user e-mailed with an interesting question. He has a ColdFusion powered Flex application that uses lots of DateField controls. By default, DateField displays left and right buttons to change months, but no buttons to change years. Changing years is supported by specifying yearNavigationEnabled=”true”, but he wanted to know if there was a way to change the default behavior so as to not have to add that property over and over.
The solution is a very simple one, and is a nice demonstration of the simplest form of Flex custom components. This first code snippet is a new DateField2 component:
And here is the equivalent DateChooser2 component:
That’s all there is to it, just use DateField2 instead of DateField, and DateChooser2 instead of DateChooser, and you’re done.
Changing Control Defaults By Using Flex Custom Components
One response to “Changing Control Defaults By Using Flex Custom Components”
-
Nice solution, but I think there is a better way:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="doComplete();">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.core.UIComponent;
private var _className:String = "DateChooser";
private var _property:String = "yearNavigationEnabled";
private var _value:Object = true;
private function doComplete():void
{
this.setDefaults(this);
}
private function setDefaults(o:UIComponent):void
{
for (var i:int=0; i<o.numChildren; i++)
{
if ( (o.getChildAt(i) as UIComponent).numChildren > 0 )
this.setDefaults( (o.getChildAt(i) as UIComponent) );
if ( (o.getChildAt(i) as UIComponent).className == this._className )
(o.getChildAt(i) as UIComponent)[this._property] = this._value;
}
}
]]>
</mx:Script>
<mx:Button label="aSADSA" />
<mx:DateChooser xmlns:mx="http://www.adobe.com/2006/mxml" />
</mx:Application>
The base idea is to create recursive method which will take set of classes names and properties with values. Then it will check each child in the controls tree and if control is of required type it will assign required properties.
Because setDefaults takes just one argument of type UIComponent it can be initialized on any control/any depth.
Data for this method (which should be really the class) can be provided by external XML file.
Sample XML file may look like this:
<?xml version="1.0" encoding="utf-8"?>
<Defaults>
<DateChooser>
<yearNavigationEnabled>true</yearNavigationEnabled>
</DateChooser>
</Defaults>
Using e4x you should be able to assign default properties without any problem.
Above sample is only the prototype written in 10 minutes but it shows the base idea.
Leave a Reply