Digital Edition

SYS-CON.TV
Creating Adobe AIR Submenus for a Native Menu with Flash CS4
How to create an AIR submenu item using the NativeMenuItem class with Flash CS4 - Part II

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;
}

In the next article 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.

You can find the original article published on Marco Casario's personal blog.

About Marco Casario
Marco Casario is CEO of Comtaste, a company devoted to develop Rich Internet Applications on the Web and for mobile devices.

He collaborates intensively with Adobe Italy as a speaker at conferences and as a consultant for Flash, Flex, and Flash Lite.

Learn more about Marco Casario at his blog http://casario.blogs.com. In 2005, Marco has founded Comtaste, a company dedicated to exploring new frontiers in Rich Internet Applications and the convergence between the web and the world of mobile devices — MobyMobile and YouThru are representative of their recent work. He is founder of the biggest worldwide Flash Lite User Group and of www.augitaly.com, a reference point for the Italian community of Adobe users, in which he carries out the role of Channel Manager for the section dedicated to Flex.



ADS BY GOOGLE
Subscribe to the World's Most Powerful Newsletters

ADS BY GOOGLE

Bill Schmarzo, author of "Big Data: Understanding How Data Powers Big Business" and "Big Data MBA: D...
A valuable conference experience generates new contacts, sales leads, potential strategic partners a...
DXWorldEXPO LLC announced today that ICOHOLDER named "Media Sponsor" of Miami Blockchain Event by Fi...
SYS-CON Events announced today that IoT Global Network has been named “Media Sponsor” of SYS-CON's @...
The best way to leverage your Cloud Expo presence as a sponsor and exhibitor is to plan your news an...
DevOpsSummit New York 2018, colocated with CloudEXPO | DXWorldEXPO New York 2018 will be held Novemb...
CloudEXPO New York 2018, colocated with DXWorldEXPO New York 2018 will be held November 11-13, 2018,...
DXWorldEXPO | CloudEXPO are the world's most influential, independent events where Cloud Computing w...
Disruption, Innovation, Artificial Intelligence and Machine Learning, Leadership and Management hear...
Enterprises are striving to become digital businesses for differentiated innovation and customer-cen...
DXWorldEXPO LLC announced today that Telecom Reseller has been named "Media Sponsor" of CloudEXPO | ...
Consumer-driven contracts are an essential part of a mature microservice testing portfolio enabling ...
"Calligo is a cloud service provider with data privacy at the heart of what we do. We are a typical ...
Digital Transformation: Preparing Cloud & IoT Security for the Age of Artificial Intelligence. As au...
@DevOpsSummit at Cloud Expo, taking place November 12-13 in New York City, NY, is co-located with 22...
DXWorldEXPO LLC announced today that "IoT Now" was named media sponsor of CloudEXPO | DXWorldEXPO 20...
Containers and Kubernetes allow for code portability across on-premise VMs, bare metal, or multiple ...
SYS-CON Events announced today that Silicon India has been named “Media Sponsor” of SYS-CON's 21st I...
SYS-CON Events announced today that CrowdReviews.com has been named “Media Sponsor” of SYS-CON's 22n...
In his general session at 19th Cloud Expo, Manish Dixit, VP of Product and Engineering at Dice, disc...