Friday, December 17, 2004
Macromedia Flex Custom Control Tutorial (cont.)
Step 4: Custom Controls
Now while this works, you can see how code-heavy it is, and this is only one pair of combo boxes. Our application is going to need three pair, so this method is far too cumbersome.
To create a custom component, you simply build as if you were building an Application, but the root tag is the component name instead of "Application"
months.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:dataProvider>
<mx:Array>
<mx:Object label="" data="" />
<mx:Object label="January 1" data="January" />
<mx:Object label="July 1" data="July" />
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
years.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:dataProvider>
<mx:Array>
<mx:Object label="" />
<mx:Object label="1980" />
<mx:Object label="1981" />
<mx:Object label="1982" />
<mx:Object label="1983" />
<mx:Object label="1984" />
<mx:Object label="1985" />
<mx:Object label="1986" />
<mx:Object label="1987" />
<mx:Object label="1988" />
<mx:Object label="1989" />
<mx:Object label="1990" />
<mx:Object label="1991" />
<mx:Object label="1992" />
<mx:Object label="1993" />
<mx:Object label="1994" />
<mx:Object label="1995" />
<mx:Object label="1996" />
<mx:Object label="1997" />
<mx:Object label="1998" />
<mx:Object label="1999" />
<mx:Object label="2000" />
<mx:Object label="2001" />
<mx:Object label="2002" />
<mx:Object label="2003" />
<mx:Object label="2004" />
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
And there are our custom controls, as simple as that.
Step 5: Use Custom Controls
To utilize our custom controls, we use the name of the file as the control name, but we also have to identify the local namespace so Flex can find them.
streetmileage.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns:local="*"> <local:months /> <local:years /> </mx:Application>
