Create your own custom menu in Flex 4

Hi there, what I’m bringing here today is a “kind of tutorial” on how to build your own custom menu with the new Flex 4. I’ll be mostly talking about skinning and you’ll see that this maybe is the most power full tool on the new Flex SDK.Before we start let’s just see an image with the final result, IMO it came out pretty well, what do you think?

So let’s just start…

Create a new project on Flash Builder(if you don’t have it yet you can grab the 30 days free license at adobe website) and lets create three folders: Components, Events and Skins. This way we can get things in order. First lets start with the skins, to what we need to achieve, we need to custom skins, one for each button and one for the background of the menu, right?^^

For the button skin we have this little amount of code:

If you come from Flex 3 you might be wondering, what the heck are those mxml tags?oO Calm down, calm down! As you might know, Flex 4 supports fxg so we can use fxg tags and this is suppa duppa cool because you can jump to you Adobe Illustrator, draw whatever you want, export for .fxg, open that image with any text editor, copy that code,past it to flash builder, run it and voilá, you get that image rendered in your application!Adding to that we can even use binding methods with it so that, for example, we get some dynamic width or height!Let’s just see what this does:

first of all you can see this is a Skin type component, and this let us assign this skin to the skinClass property of any skinnable component.But how do we specify that this this skin is for one Button?Simple, you just need to add the metadata HostComponent.

As you know,base Button has 4 states: up, down, over, disabled, but we are going to use the toggle Button in order to get the selected state, so we end up with this more states: upAndSelected, overAndSelected, downAndSelected and disabledAndSelected.

Next we start the real “drawing” and we want to create one background filled with a gradient:

As you could see, every buttons have a separator between them.If you want the button to be dynamic then we need to get a solution to make those separators appear automatically, and we do this by creating a right margin on each button..simple uh?xP

And for the last, the dynamic text on the button:

What we do to get dynamic text is just make a reference to the hostComponent.label property, see that our HostComponent makes reference to the togglebutton class, and the ToggleButton component has one property named label, so all we have to do is to bind that label to the text property of the SimpleText component and we do that with text=”{hostComponent.label}”.You can see that the text color is black however we want to make it red when we mouse over it or select it, and we can do this by simple do color.nameOfTheState = “#wantedColor”.

For the button skin, thats it! Next is the skin for the background.

Well, this is pretty much the same as the button skin so I wont explain the code.

Now we create a new component based on the SkinnableContainer and place it on the Components folder. This is going to be the content holder for the buttons that makes our menu.

I think the comments on the code say it all, however don’t hesitate to ask me anything!

And for the last the custom event:

Now all you have to do in order to get it working is this:

That’s it, hope you liked