FlexNativeMenu Tutorial & Issues

February 5th, 2008

So you want to have cool menus when you right-click an object in your flex app.

First, create the FlexNativeMenu:

The popupMenuDataProvider refers to an Arraycollection:

[Bindable] private var popupMenuDataProvider:ArrayCollection =
new ArrayCollection([
{text:"Add something", action: "add"},
{text:"Remove something", action: "remove"}]);

The menu will be displayed within a listener such as rightClick on a component of your choice:

private function onRightClick(e:MouseEvent) {
  popupMenu.display(this.stage, e.stageX, e.stageY);
}

Now we need to handle the click in the menu:

private function popupMenuClick(e:FlexNativeMenuEvent):void {
  txtLog.text = e.item.action;
}

I ran into a bit of trouble when I tried to modify the dataProvider for the FlexNativeMenu component. It seems that the NativeMenu that it wraps does not receive the dataProvider updates. A solution was to reassign the dataProvider after a change:

popupMenuDataProvider.addItem({text:"Edit something", action: "edit"});
popupMenu.dataProvider = popupMenuDataProvider;

Previous: AS3 and Runtime Sharing Next: Sending headers