The Joy of Flex

If your Flex application has a menu bar and there are control-key or command-key accelerators for items in the menu bar, you’d like to label your menu bar items with the accelerators. So, for example, if your File / Save command has a Control-S accelerator, you’d like the menu item to read “Save” with a “Ctrl-S” label to the right.

Trouble is, there’s no way to specify decorations in the framework menu classes. So here’s a quick cookbook on how to do it yourself. The basic approach is to subclass MenuItemRenderer and add an additional right-aligned UITextField to display your accelerator decoration.

1. In your menu XML, add an @acceleratorKey attribute to each menu item that has one. So, for example, the entry for Save might say <menuitem label=”Save” acceleratorKey=”s”/>.

2. Subclass MenuItemRenderer, and override createChildren(), measure(), updateDisplayList(), and the data setter function. In the createChildren() override, create a UITextField and add it as a child. In measure(), adjust measuredWidth by the textWidth of the UITextField. In updateDisplayList(), set your UITextField’s x position, and in the data setter, get the accelerator decoration text out of the value object and set it into your UITextField.

3. Subclass MenuBar, and override getMenuAt(). First chain up to the superclass, then set its menuItemRenderer to a ClassFactory that takes your MenuItemRenderer subclass as its parameter.

If you are supporting both Mac and Windows, it’s probably a good idea to write some code in your MenuBar subclass that figures out whether you’re running on Mac or Windows and updates the decoration prefix to “Ctrl-” or “Cmd-” accordingly.

Technorati Tags: Flex, Flex Tip of the Day