custom Flex component Basics

When you explore all the components and there wont be anything left. You know how to design layout of your application using some HBox, VBox, or Canvas. Sometimes you want to make something new.

Maybe a new sandwich cause you are hungry while waiting for pizza.

But sometimes you really want to make some brand new component to stay between those written by Adobe guys.

If you came here and still want to do this keep reading and you maybe do some.

So where to start ?

Well there are 2 ways:

The hard one:

First you need to know that Flex framework is not the bunch of MXML components but it's build on top of flashplayer purely in Actionscript 3. Yes all the flex components are build in Actionscript and if you know some Object Oriented Programming you are now definitely not reading this post but start exploring.

Well you can. But there is not only the advanced part that you must extend and build everything on top of some class keeping everything strict to framework rules extending / updating etc.

And the simple one:

You can make new components directly in MXML just using something called itemRenderer

Item Renderer cannot be changed on every components. Why you want to change it on buttons ? :>

It can be changed on every component that consist more then one data object. Simply that have dataProvider attribute. Well that's combobox, list or datagrid.

Let's make a simple list displaying application:

	
		
			One
			Two
			Three
		
	

Well it only displays a list of 3 strings something like that
One
Two
Three
Not much you can say but let's make some custom component to display my list named ListItem.mxml
Base it on

	
					
			override public function set data(value:Object):void {
				super.data = value;
				test.text = (data as String).charAt();
			}
		]]>
	
	

The magic here is with override the function to set data I added onle line to set some data for my . The data I get to my ListItem is the current position from dataProvider passed to our custom component so the data will be: One, Two, Three. Everything else so generating multiple ListItem components as more the data you have is done automatic in my Flex List component I only care of the look of my itemRenderer
Well... I hope you get it.
To prove I also added some simple rollOver / rollOut actions to my label that will display full name of the data when you roll over on that Label (notice that your events are in that LabelItem not in the main application)
The LabelItem looks now like this:

	
					
			override public function set data(value:Object):void {
				super.data = value;
				test.text = (data as String).charAt();
			}
			
			private function rollOverHandler():void {
				test.text = data as String;
			}
			
			private function rollOutHandler():void {
				test.text = (data as String).charAt();
			}
		]]>
	
	

The second magic is add to my list the class to the itemRenderer parameter.
Simply itemRenderer="the.place.where.my.component.is.MyComponent".
Well my component is in the same path that my application so I simply put the string with my component name:

	
		
			One
			Two
			Three
		
	

And that's it now when you build your project you get your unique List component.
Well...
You can pass whatever you want to your dataprovider class and then receive only one item for your itemRenderer.
Ex. you get multiple VOs that have image urls and labels (let's name it ImageVO) and you want to display it in your flex application. All you need is List
the sample itemRenderer will look similar to above but we will add Image component that will autoLoad our images and display it as 40x40px
so the code will look like this

	
					
			override public function set data(value:Object):void {
				super.data = value;
				test.text =(data as ImageVO).title
				img.source = (data as ImageVO).url;
				
			}
			
		]]>
	
	
	

Easy enough ? Well that's basic.
Next time I try to show you how to display bigger image when you roll over on that 40x40 one just with simple code. You can try yourself using toolTip property

Have fun and happy coding with flex that's easy