Home > Adobe, Flex, RIA > Nice menu panel in Flex

Nice menu panel in Flex

Hi all!

Recently I had to make an application in Flex that obviously required a menu displaying all the options so I started to think in which menu will be fine or not. Finally I decide that I wanted the menu options in the title of a panel, but when I analyze the API of the panel I didn’t saw anything that allow me to do that.

So after a large series of tests I found a solution to do that, and here is it ) here is the menu running:

So to make this first I create a new component called MenuButton for the menu options and basically it is only a LinkButton with a new attribute called “canvasIndex” (as you can see in the source code), this attribute will be used to show the selection in the panel as we will see later

After I have that new component I create a new one called “MenuPanel” that inherits of a Panel and here is the moho of all this menu :). For this component I added a new attribute called “viewStack” where we will set a view stack later and also I override the createChildren function of the panel and now looks like:

picture-27.png

As you can see here we add two instances of MenuButton in the title bar of the panel, also if you are a good observer ;) you will noticed that there is a function called “changeCanvas”, this function basically change the selected option and the styles associated (you can see the code of the function in the source code).

Finally we have to integrate all this in our application ) this is very straight forward as you will see:

picture-28.png

As you can see I only added the MenuPanel component and inside the menu a ViewStack with two canvas.. really easy right? )

Actually as you will see in the source code we also has to associate the ViewStack with the MenuPanel, but that is not so relevent.. I think )

Obviously there are a lot of improvements to add:

  • get the information to the buttons dynamically from the XML
  • add some listeners
  • hmm I will think in more… )

Here is the code

Advertisements
Categories: Adobe, Flex, RIA Tags: , ,
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: