Creating AIR submenus for a native menu with Flash CS4 - Part 2 (The Essential Guide to Flash CS4 AIR Development Highlight)

The Essential Guide to Flash CS4 AIR Development book is oriented to Flash developers interested in building desktop applications via Adobe AIR. You can preorder The Essential Guide to Flash CS4 AIR Development  on Amazon or buy it on local bookstore starting from 22nd December.

In the first part of this article dedicated on AIR menus you've learned how to create an AIR native menu (read the full Creating AIR native menu with Flash CS4 - Part 1 article)

To create a submenu item, you use the NativeMenuItem class . Begin by opening the Ch06p01.as class and add the createFirstSubMenu() method , which creates an item of the NativeMenuItem class and adds two elements. This item will be used as a first submenu of the native menu you’re creating. Here’s the code:

private function createFirstSubMenu():NativeMenuItem
{

Next, create an instance of the NativeMenuItem class by showing the label that it needs to be associated with. Assign an instance of the NativeMenu class to the submenu property of the element you’ve just created. The native menu object associated with the submenu property will contain the subitems you’ll create for this element of the menu.

// create first submenu
var subMenu:NativeMenuItem =
new NativeMenuItem( "My first custom submenu" );
// initialize child container
subMenu.submenu = new NativeMenu();

Follow these steps to define the elements that will be displayed as children of the element of the menu you’ve just created:

1. Instantiate an object of the NativeMenuItem class by giving the constructor a label for the element.

2. Register an event listener method for the SELECT event (Event.SELECT). Each time the user selects this element from the menu, the menuItemSelected() method will
be executed.

3. Finally, add the element of the menu you’ve created to the submenu property of the submenu you’re creating with the addItem() method of the NativeMenuItem
class. Here’s the code:

// create first submenu child
var subMenuItem1:NativeMenuItem =
new NativeMenuItem( "menu 1 item 1" );
// register event listener for menu item
subMenuItem1.addEventListener( Event.SELECT, menuItemSelected );
// add item to submenu
subMenu.submenu.addItem( subMenuItem1 );

Create a second object of the NativeMenuItem class. Then register the selection event of the element to the menuItemSelected() method . Finally, add the element to the submenu you’re creating. Here’s the code:

// create a second child, register event listener for
// selection event and assign to submenu
var subMenuItem2:NativeMenuItem =
new NativeMenuItem( "menu 1 item 2" );
subMenuItem2.addEventListener( Event.SELECT, menuItemSelected );
subMenu.submenu.addItem( subMenuItem2 );

Next, return the menu you’ve created so that it can be added as a child of the main context menu.

return subMenu;
}

The first submenu has been created and is ready to use. Before testing your application, you have to define the createSecondSubMenu() method , which will deal with initializing the second submenu of the context menu you’re creating.

The following sequence of operations to execute is very similar to the procedure to create the first submenu:

1. Create an object of the NativeMenuItem class.

2. Assign an instance of the NativeMenu class to its submenu property.

3. Populate the submenu object with the elements you like.

This menu will also have a submenu and will contain an element separator. For each item on the menu, you will have to register a selection event on the menuItemSelected() event listener method . Here’s the code:

private function createSecondSubMenu():NativeMenuItem
{
// create first submenu
var subMenu:NativeMenuItem =
new NativeMenuItem( "Second submenu" );
// initialize child container
subMenu.submenu = new NativeMenu();
// create first submenu child
var subMenuItem1:NativeMenuItem =
new NativeMenuItem( "menu 2 item 1" );
// register event listener for menu item
subMenuItem1.addEventListener( Event.SELECT, menuItemSelected );
// add item to submenu
subMenu.submenu.addItem( subMenuItem1 );

Creating element separators

The element separators in a native menu are in turn instances of the NativeMenuItem class. The separators display a horizontal line instead of a text label. The line shows the border between different groups of elements. To create an element separator, you instantiate an object of the NativeMenuItem class, providing it with a Boolean value (true) as a second argument. This second argument is false by default, and tells the object that it has to ignore the text label property and show a separator line.
Now create an element separator and add it to the menu, under the first element you created previously:

// add a separator item
// label will be ignored for separator items
var subMenuSeparator:NativeMenuItem =
new NativeMenuItem( "", true );
// add separator to menu
subMenu.submenu.addItem( subMenuSeparator );

After the element separator, you create and add a new item to the submenu. Then you create and add an element that will contain another submenu. To populate the internal submenu, populate the submenu property of a native element of the menu with the necessary items. Here’s the code:

// create a second child, register event listener for
// selection event and assign to submenu
var subMenuItem2:NativeMenuItem = new NativeMenuItem( "menu 2 item 2" );
subMenuItem2.addEventListener( Event.SELECT, menuItemSelected );
subMenu.submenu.addItem( subMenuItem2 );

// create a new item as an internal submenu
// using addSubmenu command
var childSubMenu:NativeMenuItem = subMenu.submenu.addSubmenu( new NativeMenu(), "Nested menu" );

// initialize child container
childSubMenu.submenu = new NativeMenu();

// create a child, register event listener for
// selection event and assign to internal submenu

var subMenuItem3:NativeMenuItem = new NativeMenuItem( "menu 2 nested item 1" );
subMenuItem3.addEventListener( Event.SELECT, menuItemSelected );
childSubMenu.submenu.addItem( subMenuItem3 );
return subMenu;
}

Next, you’ll employ the menuItemSelected() method , which will be launched each time the user selects one of the items on the context menu. When a selection event is generated, the event listener method receives an instance of the flash.events.Event class as an argument.

Comments

[burberry outlet]

Very good article. Congrats to everyone who are involved with this project.It's great to hear from you and see what you've been up to. In your blog I feel your enthusiasm for life. thank you.
Burberry was founded in 1856 when 21-year-old Thomas Burberry (1835 - 1926), a former draper's apprentice, opened his own store in Basingstoke, Hampshire, England.

[cheap uggs]

thanks a lot. Great Tute! I’ve being hunting round for a clean example like this. Stop by the news site if you get a chance. Have a good one.

[Raman Aurora]

Thank you for the sensible critique. Me and my neighbor were just preparing to do some research about this. We got a grab a book from our local library but I think I learned more from this post. I am very glad to see such great information being shared freely out there.