Do you want to create a Flex or AIR application with a menu, that looks and behave like the menus from applications or the operating system? Good, than you found just the right tutorial.

Recently I spend two days on creating a MenuBar in Actionscript/Flex (for an AIR application), that should look and behave just like an ordinary menu we know from simple applications. Two days! Flex offers with MenuBar a versatile and fancy menu with boosted graphical effects, complex skins, fade-ins or other extraordinary things, that distracts from the for the pureness of a simple menu. And it pulls resources as well. Strapping it down and uncluttering is a way to do so, if you want to do a extremly simple menu. But it will cost time and will mess up the code (but it is possible to do so, we will come to this also). There is a much more elegant way to do menus for AIR-applications: Native Menus.

AIR-Applications got their own special markup to build menues: “NativeMenu“, “FlexNativeMenu” and “ApplicationMenu“. This is no secret, but eventually you haven’t heard of it yet, because most tutorials and examples cover Flex, but not AIR.

To share a little secret, there is a excellent resource from Adobe with lots of implementation-details that come in handy for a quick start.

The “native menu components” work similar to the MenuBar-concept, but are attached to a Native Window. They add menu-functionality to the windows or the main-application and let the system choose the rest, like style and colors. Straighforward. This is most likely what you need, if you want to go for simple menus. ApplicationMenu and the NativeMenus have small differences, that you better look after, when you implement the details. For the purpose of easyness, we just dive into an example with NativeMenu. This will propably be the most straightforward choice also for you.

Working with Native Menus

Clean, with system colors and no padding on the side.

NativeMenus basically work like the MenuBars, they get data and commands from a data-provider, that will be the basis for the menu. It can look like this:

[Bindable]
private var menubarXML:XMLList =
<>
  <menuitem label="File" data="top">
    <menuitem label="Checkbox" type="check" toggled="true" data="CHECK"/>
    <menuitem label="Exit" data="QUIT"/>
  </menuitem>
  <menuitem label="Edit" data="top">
    <menuitem label="MenuItem 2-A" type="check" data="2A"/>
    <menuitem type="separator"/>
    <menuitem label="MenuItem 2-B" >
      <menuitem label="SubMenuItem 3-A" type="radio" groupName="one" data="3A"/>
      <menuitem label="SubMenuItem 3-B" type="radio" groupName="one" data="3B"/>
    </menuitem>
  </menuitem>
  <menuitem label="Window" data="top">
    <menuitem label="Overview" type="check" data="WINDOW-OVERVIEW" toggled="true" />
    <menuitem label="Color Palette" type="check" data="WINDOW-COLOR" toggled="true" />
  </menuitem>
</>;

The data-provider.

The Native Menu can be implemented by Flex-markup, like this. But keep in mind, that this only works for AIR-applications!

<mx:menu>
  <mx:FlexNativeMenu id="myMenu" showRoot="false"
    labelField="@label" dataProvider="{menubarXML}"
    itemClick="menuHandler(event);" />
</mx:menu>
Don’t forget to attach the FlexNativeMenu to the application with the mx:menu-tag

And that’s it. You’re done. The rest will the system handle for you. Don’t forget, that there is a wonderful resource from Adobe on that.

I found also a neat trick for doing platform-independent keyboard-shortcuts. Follow this tutorial.

Working with MenuBar

If you can not work with native windows, for example on a webbased-application, you also can not work with native menus. That’s the bad news. The good news is, that you can use the fancy MenuBar from Flex and strap it down, until it looks like a simple “native” menu.

Unfortunately the MenuBar has some drawbacks if you want to “simulate” a native menu, for example can’t you disable the border around the MenuBar. Also setting the width, or the padding right, can be a little bit tricky.

The MenuBar was not invented for the purpose to simulate a NativeMenu (that’s where the Native Menues are for, sounds logic, does it?).
The MenuBar was made to make rich, visually enhanced menus, that you can place somewhere within your Flex-Application.

What is all that borders and spaces? MenuBar can look a little like a mess.

If want to do a MenuBar, that looks and behaves like a Native Menu, look at this tutorial. Everything is covered there. But as you will see, this is not very straighforward.
It’s a much better choice to use the MenuBar for the purposes it was made for: making a rich menu experience, instead of simulating a standard menu.

Anyway, there is a quick hack, if you want to remove the fade-effect on the pull-down-menu of MenuBar. By default the menu fades in and out. To remove this tween-effect, just add the following .css to your project.


<mx:Style>
Menu {
  open-duration: 0;
}
</mx:Style>


Hope you enjoyed this tutorial or saved lots of time searching the web for this useful information. If you got anything to add, just feel free to comment.