Welcome!

You will be redirected in 30 seconds or close now.

ColdFusion Authors: Yakov Fain, Jeremy Geelan, Maureen O'Gara, Nancy Y. Nee, Tad Anderson

Related Topics: Adobe Flex, ColdFusion, IoT User Interface

Adobe Flex: Tutorial

Adobe AIR: Creating Dock and System Tray Icon Menus

The AIR runtime allows you to manage and interact with the system tray and dock bar icons of your application

Many applications offer context menus associated with the application’s icon. On Windows systems, these menus are located in the system tray. If you’re working on a Mac OS X system, you’ll find these menus in the dock bar. Generally, these menus have shortcuts for the most common functions of the application you’re using. These menus might also contain commands that must be accessible even when the application is minimized or hidden by the desktop.

The AIR runtime allows you to manage and interact with the system tray and dock bar icons of your application. You can define context menus for them. On Microsoft Windows systems, the icons in the system tray don’t have any default context menus, so unless you have a specially prepared menu to display, it won’t provide a context menu. Mac OS X systems, on the other hand, have a default menu for dock bar icons. The menus you create will be added to the default menu provided by the operating system. You can’t modify or remove the default menus provided by the system for dock bar icons.

The application you will create in the next section will run on both Windows and Mac OS X.

Assigning a menu to an application icon
Start by opening the ch06p04.fla file in Flash CS4. The project, like the previous ones, only has an output TextArea. This TextArea will display the messages regarding the status of your application.

The project, as shown in Figure 6-13, displays an icon in the system tray or dock bar of the local system, which is why a symbol has been prepared in the library. The symbol is a movie clip: Application Icon, which represents the way you want to show the application icon. In the Symbol Properties panel, shown in Figure 6-14, the class name of the symbol has been specified: ApplicationIcon . This class name allows you to instantiate the symbol in the library via ActionScript.

0000f1306  
Figure 6-13. The stage and Library panel of the ch06p04.fla project

0000f1406 
Figure 6-14. The Symbol Properties panel

You access the document class of the Flash project by clicking the Edit class definition icon on the Document Properties panel. Like for the other projects in this chapter, the Flash project has been set up to not declare the variables automatically  for the elements on the stage. You’ll have to specify them yourself in the class associated with the project.

The class starts by declaring the namespace and the dependence on external classes, as shown here:

package com.comtaste.foed.essentialair.chapter6
{
import fl.controls.TextArea;
import flash.desktop.DockIcon;
import flash.desktop.NativeApplication;
import flash.desktop.SystemTrayIcon;
import flash.display.BitmapData;
import flash.display.MovieClip;
import flash.display.NativeMenu;
import flash.display.NativeMenuItem;
import flash.display.NativeWindow;
import flash.events.Event;
import flash.filesystem.File;
public class Ch06p04 extends MovieClip
{

Then you declare two class properties: one that refers to the component of the TextArea class on the stage of the project, and one to contain the native menu that the application will use:

// onstage components
public var output:TextArea;
// class properties
private var menuRoot:NativeMenu;

Next, the constructor method of the class will call the initialization of the native menu. It will check which options are supported by the local operating system. This method will also assign the menu to the menu bar of the application or window. Finally, it will assign the menu to the icon in the system tray or to the icon in the dock bar, depending on which one is available.

public function Ch06p04()
{
super();

You call the createNativeMenu() function to instantiate and populate the menu that will be used for the application as well as the application’s icon. Here’s the code:

// generate native menu to use
createNativeMenu();

Next, you check if the operating system supports application-level or window- level menus. After that, you assign the menu to the correct property on the basis of the functions of the operating system. This code accomplishes these tasks:

// assign to application menu if we are on Mac OS X
if ( NativeApplication.supportsMenu )
{
NativeApplication.nativeApplication.menu = menuRoot;
}
// assign to window menu if we are on Microsoft Windows
if ( NativeWindow.supportsMenu )
{
stage.nativeWindow.menu = menuRoot; }

Finally, you call the initIcon() method , which instantiates the ApplicationIcon symbol and uses its graphical representation as the application icon:

initIcon();
}

To instantiate and populate the native menu, you use the createNativeMenu() method , which assigns an instance of the NativeMenu class to the menuRoot class property. Then you add a submenu to the menu using the addItem() function of the NativeMenu class:

// create a complete native menu
private function createNativeMenu():void
{
// instantiate main menu object
menuRoot = new NativeMenu();
// append subMenus to menu root
menuRoot.addItem( createFirstSubMenu() );
}

The submenu is created and returned by the createFirstSubMenu() function , as shown here:

private function createFirstSubMenu():NativeMenuItem
{

Next, you create an instance of the NativeMenuItem class with a label of App settings. This object will be the element of the menu returned by the function. Then you assign an instance of the NativeMenu class to the submenu property of the element, so as to populate its list of items.

// create submenu
var subMenu:NativeMenuItem = new NativeMenuItem( "App settings" );
// initialize child container
subMenu.submenu = new NativeMenu();

You’ll add three methods to the menu, which will allow you to do the following:

Access the description of the application
Minimize the active window
Close the application

Each menu item is registered to an event listener method for the selection event, as shown here:

// create first child, register event listener for
// selection event and assign to submenu
var aboutCommand:NativeMenuItem = new NativeMenuItem( "About.." );
aboutCommand.addEventListener( Event.SELECT, getInformation );
subMenu.submenu.addItem( aboutCommand );
// create second child, register event listener for
// selection event and assign to submenu
var minimizeCommand:NativeMenuItem =
new NativeMenuItem( "Minimize" );
minimizeCommand.addEventListener( Event.SELECT,
minimizeApplication );
subMenu.submenu.addItem( minimizeCommand );
// create third child, register event listener for
// selection event and assign to submenu
var closeCommand:NativeMenuItem = new NativeMenuItem( "Close" );
closeCommand.addEventListener( Event.SELECT, closeApplication );
subMenu.submenu.addItem( closeCommand );
return subMenu;
}

The event listener functions for the three items on the native menu are the following, and have already been explained in detail in the previous exercise regarding application menus:

// get application description
private function getInformation( evt : Event ):void
{
// access to application XML descriptor
var appDescriptor:XML =
NativeApplication.nativeApplication.applicationDescriptor;
// retrieve XML descriptor namespace
var nsDeclaration:Namespace = appDescriptor.namespace();
// read description node from XML
var informationText:String = String( appDescriptor.nsDeclaration::description[ 0 ] );

// write into textarea 'output' description contents
output.appendText( "Adobe Air, test application for "
+ "menus functionalities." + File.lineEnding );
output.appendText( informationText + File.lineEnding );
}

// close application
private function closeApplication( e : Event ):void
{
NativeApplication.nativeApplication.exit();
}

// minimize application
private function minimizeApplication( e : Event ):void
{
stage.nativeWindow.minimize();
}

Preparing the application icon

Now all you have to do is correctly prepare the application icon. This is the task of the following initIcon() method , which is called at the end of the class constructor method:

// set up application icons
private function initIcon():void
{

First, you have to obtain an object of the BitmapData class to use as a graphical representation of the application icon. To do so, you have to instantiate the ApplicationIcon symbol in the ch06p04.fla project library .

Then create a local icon property, to which you assign an instance of the ApplicationIcon symbol. The local icon property is declared as a MovieClip, not an ApplicationIcon. This is possible because the ApplicationIcon symbol extends the MovieClip class , so it’s correct to say it’s a MovieClip. Inheritance is a fundamental concept for object- oriented programming languages like ActionScript 3.

// instanstiate icon symbol available in proj library
var icon:MovieClip = new ApplicationIcon();

Creating an object for raster representation
Now that you’ve instantiated the ApplicationIcon symbol, you have to create an object to be its raster representation. Begin by creating a BitmapData object . You specify the dimensions of its canvas as the dimensions of the icon instance you’ve just created. Then you draw the instance of the icon in the raster object using the draw() function of the BitmapData class. The draw() function allows you to draw any object that implements the IbitmapDrawable interface on the canvas of a BitmapData object. You can use this function to draw any object that implements the interface on the canvas of an object.
In ActionScript, this interface is implemented by the DisplayObject class and the Bitmap class . The following code accomplishes these tasks:

// access and save bitmapdata of icon
var iconImg:BitmapData = new BitmapData( icon.width, icon.height );
iconImg.draw( icon );

Next, you assign the raster representation of the icon for the application to the bitmaps property of the icon object of your AIR application. The bitmaps property is an array of raster representations of icons provided by an AIR application.

The runtime will use a representation with dimensions as similar as possible to the ones you’ve chosen (but exactly how similar depends on the local operating system and its graphical settings). The definition of the list of available icons for the application doesn’t depend on the local system, and you
always proceed as follows:

// define application icon
NativeApplication.nativeApplication.icon.bitmaps = [ iconImg ];

Using the correct class type for an application icon
According to the local operating system, the icon property of the nativeApplication object of the NativeApplication class can refer to instances of various classes. On Microsoft Windows systems, the icon represents an instance of the SystemTrayIcon class .
On Mac OS X systems, the icon represents an instance of the DockIcon class . You can check which type of icon is supported by checking the Boolean  supportsDockIcon and supportsSystemTrayIcon properties of the NativeApplication class , which let’s you know if the system supports dock icons or system tray icons, respectively.

Here’s an example of the NativeApplication class :

if ( NativeApplication.supportsDockIcon )
{

If the system supports DockIcon icons , you simply assign the native menu to the menu property of the icon object. The menu will be added on the one that is natively provided by the operating system. Here’s an example of the DockIcon icons:

// assign dock icon custom menu
DockIcon( NativeApplication.nativeApplication.icon ).menu = menuRoot;
}else if ( NativeApplication.supportsSystemTrayIcon )
{

If, on the other hand, the system supports SystemTrayIcon icons , you also define a string of text to be used as the icon’s tooltip. SystemTrayIcon icons don’t have a menu from the operating system—just the one you provided them. DockIcon icons don’t support tooltips.
Here’s an example of a SystemTrayIcon icon:

SystemTrayIcon( NativeApplication.nativeApplication.icon ).menu
= menuRoot;
// tooltip for tray icon, available only on Windows
SystemTrayIcon( NativeApplication.nativeApplication.icon ).tooltip = "Application settings";
}
}

Go back to the Flash ch06p04.fla project to execute the application and see the results of your work (Control > Test Movie). You can see the application icon with its activated context menu in Figures 6- 15 and 6- 16. The application will work both on operating systems that support SystemTrayIcon icons (Microsoft Windows) and systems that support DockIcon icons (Mac OS X).

0000f1506  
Figure 6-15. Application icon on Microsoft Windows systems

More Stories By 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.

@ThingsExpo Stories
Internet of @ThingsExpo, taking place November 1-3, 2016, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with the 19th International Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world and ThingsExpo Silicon Valley Call for Papers is now open.
Machine Learning helps make complex systems more efficient. By applying advanced Machine Learning techniques such as Cognitive Fingerprinting, wind project operators can utilize these tools to learn from collected data, detect regular patterns, and optimize their own operations. In his session at 18th Cloud Expo, Stuart Gillen, Director of Business Development at SparkCognition, discussed how research has demonstrated the value of Machine Learning in delivering next generation analytics to imp...
SYS-CON Events announced today that ReadyTalk, a leading provider of online conferencing and webinar services, has been named Vendor Presentation Sponsor at the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. ReadyTalk delivers audio and web conferencing services that inspire collaboration and enable the Future of Work for today’s increasingly digital and mobile workforce. By combining intuitive, innovative tec...
Amazon has gradually rolled out parts of its IoT offerings, but these are just the tip of the iceberg. In addition to optimizing their backend AWS offerings, Amazon is laying the ground work to be a major force in IoT - especially in the connected home and office. In his session at @ThingsExpo, Chris Kocher, founder and managing director of Grey Heron, explained how Amazon is extending its reach to become a major force in IoT by building on its dominant cloud IoT platform, its Dash Button strat...
Connected devices and the industrial internet are growing exponentially every year with Cisco expecting 50 billion devices to be in operation by 2020. In this period of growth, location-based insights are becoming invaluable to many businesses as they adopt new connected technologies. Knowing when and where these devices connect from is critical for a number of scenarios in supply chain management, disaster management, emergency response, M2M, location marketing and more. In his session at @Th...
The cloud market growth today is largely in public clouds. While there is a lot of spend in IT departments in virtualization, these aren’t yet translating into a true “cloud” experience within the enterprise. What is stopping the growth of the “private cloud” market? In his general session at 18th Cloud Expo, Nara Rajagopalan, CEO of Accelerite, explored the challenges in deploying, managing, and getting adoption for a private cloud within an enterprise. What are the key differences between wh...
It is one thing to build single industrial IoT applications, but what will it take to build the Smart Cities and truly society changing applications of the future? The technology won’t be the problem, it will be the number of parties that need to work together and be aligned in their motivation to succeed. In his Day 2 Keynote at @ThingsExpo, Henrik Kenani Dahlgren, Portfolio Marketing Manager at Ericsson, discussed how to plan to cooperate, partner, and form lasting all-star teams to change t...
In his keynote at 18th Cloud Expo, Andrew Keys, Co-Founder of ConsenSys Enterprise, provided an overview of the evolution of the Internet and the Database and the future of their combination – the Blockchain. Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life sett...
19th Cloud Expo, taking place November 1-3, 2016, at the Santa Clara Convention Center in Santa Clara, CA, will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced by a majority of enterprises of all sizes. Yesterday's debate about public vs. private has transformed into the reality of hybrid cloud: a recent survey shows that 74% of enterprises have a hybrid cloud strategy. Meanwhile, 94% of enterpri...
SYS-CON Events announced today that Bsquare has been named “Silver Sponsor” of SYS-CON's @ThingsExpo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. For more than two decades, Bsquare has helped its customers extract business value from a broad array of physical assets by making them intelligent, connecting them, and using the data they generate to optimize business processes.
There are several IoTs: the Industrial Internet, Consumer Wearables, Wearables and Healthcare, Supply Chains, and the movement toward Smart Grids, Cities, Regions, and Nations. There are competing communications standards every step of the way, a bewildering array of sensors and devices, and an entire world of competing data analytics platforms. To some this appears to be chaos. In this power panel at @ThingsExpo, moderated by Conference Chair Roger Strukhoff, Bradley Holt, Developer Advocate a...
There is little doubt that Big Data solutions will have an increasing role in the Enterprise IT mainstream over time. Big Data at Cloud Expo - to be held November 1-3, 2016, at the Santa Clara Convention Center in Santa Clara, CA - has announced its Call for Papers is open. Cloud computing is being adopted in one form or another by 94% of enterprises today. Tens of billions of new devices are being connected to The Internet of Things. And Big Data is driving this bus. An exponential increase is...
Internet of @ThingsExpo, taking place November 1-3, 2016, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 19th Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The Internet of Things (IoT) is the most profound change in personal and enterprise IT since the creation of the Worldwide Web more than 20 years ago. All major researchers estimate there will be tens of billions devices - comp...
A strange thing is happening along the way to the Internet of Things, namely far too many devices to work with and manage. It has become clear that we'll need much higher efficiency user experiences that can allow us to more easily and scalably work with the thousands of devices that will soon be in each of our lives. Enter the conversational interface revolution, combining bots we can literally talk with, gesture to, and even direct with our thoughts, with embedded artificial intelligence, wh...
Cloud computing is being adopted in one form or another by 94% of enterprises today. Tens of billions of new devices are being connected to The Internet of Things. And Big Data is driving this bus. An exponential increase is expected in the amount of information being processed, managed, analyzed, and acted upon by enterprise IT. This amazing is not part of some distant future - it is happening today. One report shows a 650% increase in enterprise data by 2020. Other estimates are even higher....
Cognitive Computing is becoming the foundation for a new generation of solutions that have the potential to transform business. Unlike traditional approaches to building solutions, a cognitive computing approach allows the data to help determine the way applications are designed. This contrasts with conventional software development that begins with defining logic based on the current way a business operates. In her session at 18th Cloud Expo, Judith S. Hurwitz, President and CEO of Hurwitz & ...
In his general session at 18th Cloud Expo, Lee Atchison, Principal Cloud Architect and Advocate at New Relic, discussed cloud as a ‘better data center’ and how it adds new capacity (faster) and improves application availability (redundancy). The cloud is a ‘Dynamic Tool for Dynamic Apps’ and resource allocation is an integral part of your application architecture, so use only the resources you need and allocate /de-allocate resources on the fly.
The 19th International Cloud Expo has announced that its Call for Papers is open. Cloud Expo, to be held November 1-3, 2016, at the Santa Clara Convention Center in Santa Clara, CA, brings together Cloud Computing, Big Data, Internet of Things, DevOps, Digital Transformation, Microservices and WebRTC to one location. With cloud computing driving a higher percentage of enterprise IT budgets every year, it becomes increasingly important to plant your flag in this fast-expanding business opportuni...
industrial company for a multi-year contract initially valued at over $4.0 million. In addition to DataV software, Bsquare will also provide comprehensive systems integration, support and maintenance services. DataV leverages advanced data analytics, predictive reasoning, data-driven diagnostics, and automated orchestration of remediation actions in order to improve asset uptime while reducing service and warranty costs.
Vidyo, Inc., has joined the Alliance for Open Media. The Alliance for Open Media is a non-profit organization working to define and develop media technologies that address the need for an open standard for video compression and delivery over the web. As a member of the Alliance, Vidyo will collaborate with industry leaders in pursuit of an open and royalty-free AOMedia Video codec, AV1. Vidyo’s contributions to the organization will bring to bear its long history of expertise in codec technolo...