Hi you geeky people,

Here’s the first of (I hope) many flex 4 tutorials and code snippets. Let’s start of with something not too hard: a custom dropdown list. I needed this one in a widget I was making as a proof of concept. The special needs for this dropdown were: custom styling, custom button placement and an image as an icon in front of the text.

So how to begin? First off, you need to put the “host component” in the mxml where you want it to appear on the screen, like you’re already used to do:

Pretty basic huh? :) As you can see, it’s a spark (s:) dropdownlist with a skinclass and an itemrenderer.

Let’s take a look at the skinclass first:

    <!-- states -->
 
    <!-- host component -->
 
    <![CDATA[
        [HostComponent("spark.components.DropDownList")]
    ]]>
 
    <!--- here we use a popUpAnchor to display the dropdownlist itself -->
 
	    <!--- here we draw the background and border for the dropdown list -->
 
	 	<!--- here we define the datagroup that contains our data and the scroller to scroll trough it -->
 
	            <!--- The container for the data items in the drop-down list. -->
 
    <!--- Here we have another background for the closed state and the button that opens the dropdown -->
 
 	<!--- This is the label and an Image that are shown in the dropdown when it's not opened -->

Nothing really superfancy going on here either, comments are in the code to explain the function of every codeblock. So now let’s take a look at the itemRenderer:

As you can see the itemRenderer is pretty basic too :) It has 2 text-tags, one for the normal text, one for hovered and selected text and also an Image that’s shown as an icon in front of the text.

And that’s all there’s to it. All you need to do is: define the hostcomponent, make a skinclass which can contain almost anything you’d like and create the itemRenderer to display your data and you’re done :)

Technorati Tags: custom component, dropdownlist, flex4, gumbo, skinclass