Tutorial: Verwendung von Windows Style in Adobe AIR

Artikel: Window Style , Adobe AIR | 28.04.2008

Da Adobe AIR als eine Art eigenes Programm arbeitet, kann das Aussehen des Fenster beeinflusst werden.
Wie das geht und welche Möglichkeiten es gibt, wird in diesem Artikel genauer erklärt.

Inhalt

Window Style Übersicht

Es gibt insgesammt 3 verschiedene Windows Styles für AIR, man kann sogar sein eigenen Windows Style entwickeln, jedoch basiert dieser dann auch auf einen der 3 Windows Styles.

Die Einstellungen für AIR findet man unter Commands -> AIR Application and Installer Settings.
Diese Einstellungen können jedoch erst bearbeitet werden wenn die FLA Datei abgespeichert worden ist.
Jedoch erhält man auch eine entsprechende Fehlermeldung falls man die FLA Datei noch nicht abgespeicht hat.

Systeme Chrome

Das ist die Standart Einstellung, es wird ein Fenster erstellt wie bei dem Flashplayer auch, nur sind hier die zusätzlichen Menüs nicht sichbar wie die Player Version und das Adobe Flash Player Menü.

Custom Chrome (opague)

Bei dieser Einstellung wird der Rahmen nicht dargestellt, hiermit kann man also ohne weiteres eigene Windows Styles entwickeln und diese verwenden.
Wie das geht wird später genauer beschrieben.

Damit man auf den Screenshot mehr erkennt sind hier noch Teile meines Desktop abgebildet, welcher schwarz und blau ist.

Custom Chroma (transparent)

Hier wird die das Fenster transparent dargestellt, man kann also hiermit Applicationen machen die keinen Rahmen oder Hintergrund besitzten.
Dies ist ideal wenn man Widgthes bauen möchte die nur bestimmte Informationen anzeigen oder sonst nichts, auch kann man hiermit einen Windows Sitter erstellen.

Hier habe ich noch einen Smile hinzugefügt und wie man sieht ist der Hintergrund transparent und man sieht meinen Dekstop Hintergrund durchscheinen.

Weitere Einstellungs Möglichkeiten

Wird System Chrome verwendet, so ist es möglich noch weitere Einstellungen vorzunehmen.
So kann man genauer festlegen welche Elemente angezeigt werden sollen und wie das entsprechende Icon aussehen soll.

Ändern der verfügbaren Knöpfe

Möchte man verhindert das der Benutzer das Fenster vergrößeren, maximieren oder minimieren so kann dies in den erweiterten Einstellungen festgelegt werden.
Auserdem kann hier auch noch festgelegt werden wo das Fenster beim Start angezeigt wird.
Das Programm geht dabei immer von der linken oberen Bildschirmecke aus.

Ändern der Icons für das Fenster und des Programms

Standartmässig wird das Adobe AIR Logo in den Fenster angezeigt, dies kann aber sehr einfach geändert werden über das Icon Menü.
Hier kann man dann die verschiedenen Icons festlegen für die verschiedenen Größen.

Eigene Fenster Styles

´

Um eigene Fenster Styles zu verwenden, muss man natürlich auch einen Schließbutton und andere Knöpfe berücksichtigen.

Fenster schließen

Der Schließen Knopf ist der wichtigste Knopf für AIR, es sei den man will den User ärgern, das dieser nur ein Fenster über ALT+F4 schließen kann.

ActionScript CS3:
btn_close.addEventListener(MouseEvent.MOUSE_UP, function (event: MouseEvent): void { stage.nativeWindow.close() });

Fenter verschieben

Meist will man den User auch die Freiheit lassen, das dieser das Fenster verschieben kann.
Hier muss auch ein entsprechendes Event definiert werden wie beim Schließen.

ActionScript CS3:
btn_move.addEventListener(MouseEvent.MOUSE_DOWN , function (event: MouseEvent): void { stage.nativeWindow.startMove() });

Man kann dieses Event natürlich auch dem das ganze Fenter zuweisen, jedoch kann es sein das sich dann 2 Events überschreiben.

Fenster Minimieren, Maximieren und Orginal Größe

In bestimmten Fällen ist auch auch nötig das Fester zu vergößeren oder zu verkleiner, dies wird auch wieder durch einfache Events realisiert.

ActionScript CS3:
btn_min.addEventListener(MouseEvent.MOUSE_UP, function (event: MouseEvent): void { stage.nativeWindow.minimize(); }); btn_max.addEventListener(MouseEvent.MOUSE_UP, function (event: MouseEvent): void { stage.nativeWindow.maximize(); }); btn_restore.addEventListener(MouseEvent.MOUSE_UP, function (event: MouseEvent): void { stage.nativeWindow.restore(); });

.minimize lässt das Fenster in der Taskleister verschwinden, von dort kann es natürlich jederzeit wieder geöffnet werden.
.maximize vergrößert das Fenster auf Bildschirmgröße.
.restore ändert die Größe zurück auf die ursprüngliche Größe zurück.

Fenster vergrößern und verkleinern

Die meisten Fenster benötigen außerdem noch die Möglichkeit das der User die Größe ändern kann ein sogenanntes resizing.

ActionScript CS3:
btn_resize.addEventListener(MouseEvent.MOUSE_DOWN, function (event: MouseEvent): void { stage.nativeWindow.startResize(); });

Beispiel

Anbei ein Beispiel welches alle vorherigen Optionen vereint, das Beispiel ist sehr simple gemacht.
Die Knöpfe und das Aussehen sollten sich eigentlich immer der Bühne anpassen damit kein unsichtbares riesiges Fenster entsteht.

ActionScript CS3:
btn_close.addEventListener(MouseEvent.MOUSE_UP, function (event: MouseEvent): void { stage.nativeWindow.close() }); btn_move.addEventListener(MouseEvent.MOUSE_DOWN , function (event: MouseEvent): void { stage.nativeWindow.startMove() }); btn_min.addEventListener(MouseEvent.MOUSE_UP, function (event: MouseEvent): void { stage.nativeWindow.minimize(); }); btn_max.addEventListener(MouseEvent.MOUSE_UP, function (event: MouseEvent): void { stage.nativeWindow.maximize(); }); btn_restore.addEventListener(MouseEvent.MOUSE_UP, function (event: MouseEvent): void { stage.nativeWindow.restore(); }); btn_resize.addEventListener(MouseEvent.MOUSE_DOWN, function (event: MouseEvent): void { stage.nativeWindow.startResize(); }); btn_link.addEventListener(MouseEvent.MOUSE_UP, function(event: MouseEvent): void { navigateToURL(new URLRequest('http://flash.area-network.de'), "_blank"); });

Das Beispiel kann als .AIR oder auch als .FLA runtergeladen werden.