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
Identity is in everything and customers are looking to their providers to ensure the security of their identities, transactions and data. With the increased reliance on cloud-based services, service providers must build security and trust into their offerings, adding value to customers and improving the user experience. Making identity, security and privacy easy for customers provides a unique advantage over the competition.
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...
Smart Cities are here to stay, but for their promise to be delivered, the data they produce must not be put in new siloes. In his session at @ThingsExpo, Mathias Herberts, Co-founder and CTO of Cityzen Data, will deep dive into best practices that will ensure a successful smart city journey.
SYS-CON Events announced today that 910Telecom will exhibit 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. Housed in the classic Denver Gas & Electric Building, 910 15th St., 910Telecom is a carrier-neutral telecom hotel located in the heart of Denver. Adjacent to CenturyLink, AT&T, and Denver Main, 910Telecom offers connectivity to all major carriers, Internet service providers, Internet backbones and ...
There is growing need for data-driven applications and the need for digital platforms to build these apps. In his session at 19th Cloud Expo, Muddu Sudhakar, VP and GM of Security & IoT at Splunk, will cover different PaaS solutions and Big Data platforms that are available to build applications. In addition, AI and machine learning are creating new requirements that developers need in the building of next-gen apps. The next-generation digital platforms have some of the past platform needs a...
SYS-CON Events announced today Telecom Reseller has been named “Media Sponsor” of SYS-CON's 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. Telecom Reseller reports on Unified Communications, UCaaS, BPaaS for enterprise and SMBs. They report extensively on both customer premises based solutions such as IP-PBX as well as cloud based and hosted platforms.
I wanted to gather all of my Internet of Things (IOT) blogs into a single blog (that I could later use with my University of San Francisco (USF) Big Data “MBA” course). However as I started to pull these blogs together, I realized that my IOT discussion lacked a vision; it lacked an end point towards which an organization could drive their IOT envisioning, proof of value, app dev, data engineering and data science efforts. And I think that the IOT end point is really quite simple…
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...
DevOps at Cloud Expo, taking place Nov 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 widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time to wait for long dev...
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...
Data is the fuel that drives the machine learning algorithmic engines and ultimately provides the business value. In his session at Cloud Expo, Ed Featherston, a director and senior enterprise architect at Collaborative Consulting, will discuss the key considerations around quality, volume, timeliness, and pedigree that must be dealt with in order to properly fuel that engine.
Pulzze Systems was happy to participate in such a premier event and thankful to be receiving the winning investment and global network support from G-Startup Worldwide. It is an exciting time for Pulzze to showcase the effectiveness of innovative technologies and enable them to make the world smarter and better. The reputable contest is held to identify promising startups around the globe that are assured to change the world through their innovative products and disruptive technologies. There w...
Today we can collect lots and lots of performance data. We build beautiful dashboards and even have fancy query languages to access and transform the data. Still performance data is a secret language only a couple of people understand. The more business becomes digital the more stakeholders are interested in this data including how it relates to business. Some of these people have never used a monitoring tool before. They have a question on their mind like “How is my application doing” but no id...
Personalization has long been the holy grail of marketing. Simply stated, communicate the most relevant offer to the right person and you will increase sales. To achieve this, you must understand the individual. Consequently, digital marketers developed many ways to gather and leverage customer information to deliver targeted experiences. In his session at @ThingsExpo, Lou Casal, Founder and Principal Consultant at Practicala, discussed how the Internet of Things (IoT) has accelerated our abil...
With so much going on in this space you could be forgiven for thinking you were always working with yesterday’s technologies. So much change, so quickly. What do you do if you have to build a solution from the ground up that is expected to live in the field for at least 5-10 years? This is the challenge we faced when we looked to refresh our existing 10-year-old custom hardware stack to measure the fullness of trash cans and compactors.
The emerging Internet of Everything creates tremendous new opportunities for customer engagement and business model innovation. However, enterprises must overcome a number of critical challenges to bring these new solutions to market. In his session at @ThingsExpo, Michael Martin, CTO/CIO at nfrastructure, outlined these key challenges and recommended approaches for overcoming them to achieve speed and agility in the design, development and implementation of Internet of Everything solutions wi...
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....
Is the ongoing quest for agility in the data center forcing you to evaluate how to be a part of infrastructure automation efforts? As organizations evolve toward bimodal IT operations, they are embracing new service delivery models and leveraging virtualization to increase infrastructure agility. Therefore, the network must evolve in parallel to become equally agile. Read this essential piece of Gartner research for recommendations on achieving greater agility.
SYS-CON Events announced today that Venafi, the Immune System for the Internet™ and the leading provider of Next Generation Trust Protection, will exhibit at @DevOpsSummit at 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. Venafi is the Immune System for the Internet™ that protects the foundation of all cybersecurity – cryptographic keys and digital certificates – so they can’t be misused by bad guys in attacks...
For basic one-to-one voice or video calling solutions, WebRTC has proven to be a very powerful technology. Although WebRTC’s core functionality is to provide secure, real-time p2p media streaming, leveraging native platform features and server-side components brings up new communication capabilities for web and native mobile applications, allowing for advanced multi-user use cases such as video broadcasting, conferencing, and media recording.