System tray and close to system tray application in flex

Flex is a highly productive and light weight framework to develop web applications, mobile applications and Window based applications.

To create a system tray application or close to system tray do the following steps.

• If you are using adobe Flash builder then select File –> New –> Flex Project.

  

• In the Project creation window enter the project Name and select Application type as Desktop as shown in the below image.

  

• If you want to make any database application then select the server technology from the server settings.

  

• In build path section just clik finish and the project will be created. Open the .mxml file and paste the following code.

<?xml version=”1.0″ encoding=”utf-8″?>
<s:WindowedApplication xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx” visible=”false”
creationComplete=”init();”>
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>

</fx:Declarations>
<fx:Script>
<![CDATA[
import flash.net.navigateToURL;
import mx.events.CloseEvent;
import mx.controls.Alert;
import mx.controls.Menu;

[Embed(source=”../assets/quest48.png”)]
[Bindable]
private var iconQuest:Class;

public function init():void
{
var icon:Loader = new Loader();
icon.contentLoaderInfo.addEventListener(Event.COMPLETE, iconLoad);
icon.load(new URLRequest(“a4a.png”));
var systray:SystemTrayIcon = NativeApplication.nativeApplication.icon as SystemTrayIcon;
if (NativeApplication.supportsSystemTrayIcon)
{
systray.tooltip = “seevablog.com”;
}
this.addEventListener(Event.CLOSING, closingApplication);
sysTrayApp();
}
private function closingApplication(evt:Event):void {

evt.preventDefault();

Alert.buttonWidth = 110;

Alert.yesLabel = “Close”;
Alert.noLabel = “Minimize”;
Alert.show(“Do you want to Close the Application or Minimize to System Tray ?”, “Close ?”, 3, this, alertCloseHandler,iconQuest);
}
private function alertCloseHandler(event:CloseEvent):void {
if (event.detail==Alert.YES) {
closeApp(event);
} else {
this.nativeWindow.visible=false;
}
}
private function iconLoad(event:Event):void
{
NativeApplication.nativeApplication.icon.bitmaps = [event.target.content.bitmapData];
}

private function sysTrayApp():void
{
var trayMenu:NativeMenu = new NativeMenu();
var maxim:NativeMenuItem = trayMenu.addItem(new NativeMenuItem(“Restore”));
maxim.addEventListener(Event.SELECT,MaximizeWindow);

var opensite:NativeMenuItem = trayMenu.addItem(new NativeMenuItem(“Open seevablog.com”));
opensite.addEventListener(Event.SELECT,openWeb);
trayMenu.addItem(new NativeMenuItem(“”,true));
var exitCommand:NativeMenuItem = trayMenu.addItem(new NativeMenuItem(“Exit”));
exitCommand.addEventListener(Event.SELECT, closeApp);
if (NativeApplication.supportsSystemTrayIcon)
{
var systray:SystemTrayIcon = NativeApplication.nativeApplication.icon as SystemTrayIcon;
systray.menu = trayMenu;
}

}

private function closeApp(evt:Event):void
{
stage.nativeWindow.close();
}
private function MaximizeWindow(evt:Event):void
{
this.nativeWindow.visible=true;
}
private function openWeb(evt:Event):void
{
navigateToURL(new URLRequest(“http://www.seevablog.com”));
}
]]>
</fx:Script>
<mx:Label id=”mlabel” />

</s:WindowedApplication>

Download Complete source code :

seevaTrayApp

Have a nice day and happy coding.

“Improve your knowledge while sharing with others !”