09.012013

Flex Programm als Tray Anwendung starten

Wenn man viel mit dem Flex Builder und Adobe Air zu tun hat, kommt man häufiger zu der Aufgabe, dass das Programm im Tray gestartet werden soll, bzw im Tray angezeigt werden soll. Hierzu muss man ein paar Sachen beachten, die ich euch hier nun erläutern möchte.

Ich benutze für die Erklärung den Flex Builder 3.0, aber man kann dieses Beispiel auch ohne Probleme bei neueren Flex Builder / Flash Builder Versionen benutzen. Zuerst muss in der NAME-app.xml folgende Werte eingestellt werden:

<systemChrome>none</systemChrome>
<transparent>true</transparent>
<visible>false</visible>

Damit das Programm beim starten gar nicht erst sichtbar ist. Dies ist nicht zwingend notwendig, um das Programm im Tray anzeigen zu lassen. Wenn man aber das Programm nur über den Tray aufrufen / abrufen möchte, muss man diese Werte wie oben beschrieben einstellen.

Man muss hierbei zwischen Windows und Mac unterscheiden und dies auch direkt berücksichtigen. In der Haupt.mxml Datei muss dann folgender Script code umgesetzt werden. Zuerst muss das Menü erstellt werden:

private var myMenu:NativeMenu = new NativeMenu();
private var menuItem_closeProgram:NativeMenuItem = new NativeMenuItem("Beenden");
private var menuItem_openDialog:NativeMenuItem = new NativeMenuItem("Öffnen");
myMenu.addItem(menuItem_closeProgram);
myMenu.addItem(new NativeMenuItem("", true)); //Dies ist zum einfügen
//einer Horizontalen Linie im Menü
myMenu.addItem(menuItem_openDialog);

Hier wird das Trayicon geladen und gesetzt. Dies ist direkt spezifiziert, für Windows und für Macintosh:

private var trayIcon:BitmapData;
private var systray:SystemTrayIcon;
private var dock:DockIcon;

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, readyToTray);
if (NativeApplication.supportsDockIcon) {
    loader.load(new URLRequest("appicons/icon_desktopmsngr_128.png"));
    // für Apple Rechner Trayicon laden 128x128 Pixel
} else if(NativeApplication.supportsSystemTrayIcon) {  
    loader.load(new URLRequest("appicons/icon_desktopmsngr_16.png"));
    // für Windows Rechner Trayicon laden 16x16 Pixel
} else {
    //Hier kann Code implementiert werden, der aufgerufen wird,
    //sofern der Rechner weder das eine, noch das andere benutzen kann
}

protected function readyToTray(event:Event):void {
    // Trayicon setzen
    trayIcon = event.target.content.bitmapData;
    NativeApplication.nativeApplication.icon.bitmaps = [trayIcon];
    if (NativeApplication.supportsSystemTrayIcon) { // Windows
        systray = NativeApplication.nativeApplication.icon as SystemTrayIcon;
        systray.addEventListener(MouseEvent.CLICK, trayClick);
        systray.menu = myMenu;
    }
    if (NativeApplication.supportsDockIcon) { // Mac
        dock = NativeApplication.nativeApplication.icon as DockIcon;
        dock.addEventListener(MouseEvent.CLICK, trayClick);
        dock.menu = myMenu;
    }

Zu diesem Zeitpunkt haben wir das Trayicon in der Taskbar / im Dock und wir können das Menü über rechtsklick aufrufen. Außerdem wenn der User auf das Icon mit der linken Mousetaste klickt, wird die Funktion trayClick aufgerufen, die man nach eigenem ermessen füllen kann (Funktioniert leider nur unter Windows, Mac gibt das Event nicht bei Linksklick). Nun müssen für die Menüeinträge noch die Listener registriert werden und dann sind wir auch schon fertig:

menuItem_closeProgram.addEventListener(Event.SELECT, closeProgram);
menuItem_openDialog.addEventListener(Event.SELECT, openDialog)

Nun müssen nur noch die beiden Funktionen closeProgram und openDialog erstellt werden und mit Leben gefüllt werden. Wenn ihr alles nun richtig gemacht habt, habt ihr nun ein Programm, das sich automatisch in den Tray startet und so keinen Unötigen Platz auf der Taskbar verschwendet.

Ich hoffe, ich konnte hier einigen Leuten behilflich sein und ihr könnt damit was anfangen. Bis zum nächsten mal, euer Mark!