Flex 2 MXML Component Development

So I spent most of this weekend creating a few MXML and AS3 based components in preparation for my talk at Flash on the Beach in December. The thing that has struck me when developing MXML based visual components is that it is more of a process to pre-fabricated / pre-configure components. Thus saving on implementation time by not having to configure them once in situ. It reminds me of code snippets in Dreamweaver (code based but with visual elements).

For example if you are form building does it not make sense to pre-configure a selection of ComboBoxes so they have the ability to display information you would usually have in a form. Things like a salutation selector, or country drop down:

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:dataProvider>
		<mx:String>Miss</mx:String>
		<mx:String>Mrs</mx:String>
		<mx:String>Mr</mx:String>
		<mx:String>Dr</mx:String>
	</mx:dataProvider>
</mx:ComboBox>

This is a quick example of how to extend a ComboBox to have pre-filled data (this way all you need to do is include it in your application and link it into your Event model). Perhaps not ideal – for a a start all of the values would be hard coded but you get the premise.

Obviously you can also extend your own custom MXML components if you needed to add additional functionality. The example below doesn’t add any additional functionality but you can see it is extended off of FGComboBox. So when implemented it too will have the same dataprovider values.

< ?xml version="1.0" encoding="utf-8"?>
<fgcombobox xmlns="com.flashgen.components.flex.controls.*" xmlns:mx="http://www.adobe.com/2006/mxml">
</fgcombobox>

It doesn’t end there though – you can get quite complex in your fabrication if you start at a lower level – take <mx:Panel></Panel> as a base and you can start to do all manner of composition. The example below shows a quick lay-up of a form (I wouldn’t do it this way normally but it helps illustrate the point). Notice that it also includes 2 custom MXML components as part of the layout controls

< ?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="MyForm" width="280" height="300" xmlns:fgx="com.flashgen.components.flex.controls.*">
	<mx :Label text="myForm Contents" x="10" y="10" fontWeight="bold"/>
	<mx :Button x="112" y="228" label="Button"/>
	<mx :Button x="185" y="228" label="Button"/>
	<mx :TextInput x="10" y="100"/>
	<mx :TextInput x="10" y="70"/>
	<mx :TextInput x="10" y="40"/>
	<fgx :FGComboBox x="10" y="130" width="160"/>
	<fgx :FGExtendedComboBox x="10" y="160" width="160"/>
</mx:Panel>

What if we need to add functionality to our component? Well we can do that too. However you must remember not to put your <mx:Script></Script> tag or any other come to that, outside of your base component tag otherwise it will error along these lines: “The prefix “mx” for element “mx:Script” is not bound”.

The sample below shows a quick and dirty handler to respond to a click of the Reset button. Nothing special and not how you would implement it in a proper application but you get the gist of what you can do.

< ?xml version="1.0" encoding="utf-8"?>
<mx :Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="MyForm" width="280" height="300" xmlns:fgx="com.flashgen.components.flex.controls.*">
	</mx><mx :Script>
		< ![CDATA[
			private function handleEvent(eventObj:Event):void
			{
				lbl_msg.text="The Reset button was pressed";
			}
		]]>
	</mx>
	<mx :Label text="myForm Contents" x="10" y="10" fontWeight="bold" id="lbl_contentInfo"/>
	<mx :Button x="112" y="228" label="Reset" id="btn_reset" click="{handleEvent(event)}"/>
	<mx :Button x="185" y="228" label="Submit" id="btn_submit"/>
	<mx :TextInput x="10" y="100" id="txt_fName"/>
	<mx :TextInput x="10" y="70" id="txt_lName"/>
	<mx :TextInput x="10" y="40" id="txt_email"/>
	<fgx :FGComboBox x="10" y="130" width="160" id="cmb_title"/>
	<fgx :FGExtendedComboBox x="10" y="160" width="160" id="cmb_extraTitle"/>
	<mx :Label x="10" y="190" width="240" id="lbl_msg"/>
</mx:Panel>

Hopefully that has given a quick (yet dirty) guide to getting MXML based components going. And remember if you want to know more you can catch my talk on Flex 2 and AS3 component development at Flash on the Beach in 5 weeks time

NOTE: It appears the syntax hiliter I use is screwing the code up so I have uploaded the files as a project here