Grundlagen von nativen Fenstern in AIR

Adobe AIR 1.0 und höher

Kurzbeschreibungen und Codebeispiele für die Arbeit mit nativen Fenstern in AIR finden Sie in den folgenden Kurzanleitungen in der Adobe Developer Connection:

AIR bietet eine benutzerfreundliche, plattformübergreifende Fenster-API, die mithilfe von Flash®-, Flex™- und HTML-Programmiertechniken das Erstellen von nativen Betriebssystemfenstern ermöglicht.

AIR gewährt Ihnen viel Spielraum bei der Entwicklung des Erscheinungsbilds einer Anwendung. Die von Ihnen erstellten Fenster können wie bei einer standardmäßigen Desktopanwendung aussehen, bei der Ausführung auf einem Mac dem Apple-Stil und bei der Ausführung unter Windows den Microsoft-Konventionen bzw. unter Linux dem Fenstermanager entsprechen, ohne dass Sie eine einzige Zeile mit plattformspezifischen Code einfügen müssen. Oder entwickeln Sie Ihren eigenen Stil unabhängig von der Plattform mithilfe des vom Flex-Framework gebotenen erweiterbaren Fensterdesigns, dem Sie Skins zuweisen können. Sie können sogar Ihre eigenen Fensterdesigns mit Vektor- und Bitmapgrafiken zeichnen, und zwar mit voller Unterstützung für Transparenz und Alpha-Mischung in Bezug zum Desktop. Haben Sie genug von rechteckigen Fenstern? Zeichnen Sie ein rundes.

Fenster in AIR

AIR unterstützt drei spezielle APIs zur Arbeit mit Fenstern:

  • Die an ActionScript ausgerichtete NativeWindow-Klasse bietet die Fenster-API auf der untersten Ebene. Verwenden Sie NativeWindows in Anwendungen, die mit ActionScript und Flash Professional erstellt werden. Sie können die NativeWindow-Klasse erweitern, um die in Ihrer Anwendung verwendeten Fenster zu spezialisieren.

  • In der HTML-Umgebung können Sie die JavaScript Window-Klasse verwenden, wie Sie dies in einer browserbasierten Webanwendung tun würden. Aufrufe von JavaScript Window-Methoden werden an das zugrundeliegende native Fensterobjekt weitergeleitet.

  • Das Flex-Framework mx:WindowedApplication und mx:Window-Klassen bieten einen Flex-„Wrapper“ für die NativeWindow-Klasse. Die WindowedApplication-Komponente ersetzt die Application-Komponenten, wenn Sie eine AIR-Anwendung mit Flex erstellen. Sie muss immer als Startfenster in Ihrer Flex-Anwendung verwendet werden.

ActionScript-Fenster

Verwenden Sie bei der Erstellung von Fenstern mit der NativeWindow-Klasse direkt die Bühne und Anzeigeliste in Flash Player. Um einem NativeWindow ein visuelles Objekt hinzuzufügen, fügen Sie das Objekt zur Anzeigeliste der Fensterbühne oder zu einem anderen Anzeigeobjektcontainer auf der Bühne hinzu.

HTML-Fenster

Beim Erstellen von HTML-Fenstern wird Inhalt mithilfe von HTML, CSS und JavaScript angezeigt. Um einem HTML-Fenster ein visuelles Objekt hinzuzufügen, fügen Sie den Inhalt zum HTML DOM hinzu. HTML-Fenster sind eine spezielle Kategorie von „NativeWindow“. Der AIR-Host definiert eine nativeWindow -Eigenschaft in den HTML-Fenstern, die den Zugriff auf die zugrunde liegende NativeWindow-Instanz ermöglicht. Mithilfe dieser Eigenschaft können Sie auf die hier beschriebenen NativeWindow-Eigenschaften, -Methoden und -Ereignisse zugreifen.

Hinweis: Das Window-Objekt von JavaScript bietet ebenfalls Methoden zur Skripterstellung der enthaltenden Fenster, wie z. B. moveTo() und close() . Wenn überlappende Methoden verfügbar sind, können Sie die praktischere auswählen.

Flex Framework-Fenster

Beim Erstellen von Fenstern mit dem Flex-Framework werden die Fenster in der Regel mit MXML-Komponenten gefüllt. Um einem Fenster eine Flex-Komponente hinzuzufügen, fügen Sie das Komponentenelement der MXML-Definition des Fensters zu. Außerdem können Sie Inhalt dynamisch mit ActionScript hinzufügen. Die mx:WindowedApplication- und mx:Window-Komponenten dienen als Flex-Behälter. Daher können sie im Gegensatz zu NativeWindow-Objekten Flex-Komponenten direkt akzeptieren. Bei Bedarf können Sie auf die NativeWindow-Eigenschaften und -Methoden über die WindowedApplication- und Window-Objekte mithilfe der nativeWindow -Eigenschaft zugreifen.

Das ursprüngliche Anwendungsfenster

Das erste Fenster der Anwendung wird automatisch von AIR erstellt. AIR legt die Eigenschaften und den Inhalt des Fensters anhand der im initialWindow -Element der Anwendungsdeskriptordatei angegebenen Parameter fest.

Wenn es sich beim Stamminhalt um eine SWF-Datei handelt, erstellt AIR eine NativeWindow-Instanz, lädt die SWF-Datei und fügt sie zur Fensterbühne hinzu. Wenn es sich beim Stamminhalt um eine HTML-Datei handelt, erstellt AIR ein HTML-Fenster und lädt die HTML-Datei.

Ereignisfluss bei nativen Fenstern

Native Fenster lösen Ereignisse aus, um interessierte Komponenten über bevorstehende oder bereits eingetretene wichtige Änderungen zu informieren. Viele auf Fenster bezogene Ereignisse werden paarweise ausgelöst. Mit dem ersten Ereignis wird vor einer bevorstehenden Änderung gewarnt. Das zweite Ereignis teilt mit, dass die Änderung vorgenommen wurde. Ein Warnereignis kann abgebrochen werden, ein Benachrichtigungsereignis jedoch nicht. Im Folgenden wird der Ereignisablauf dargestellt, der auftritt, wenn ein Benutzer auf die Schaltfläche zum Maximieren eines Fensters klickt:

  1. Das NativeWindow-Objekt löst ein displayStateChanging -Ereignis aus.

  2. Wenn das Ereignis nicht von einem registrierten Listener abgebrochen wird, wird das Fenster maximiert.

  3. Das NativeWindow-Objekt löst ein displayStateChange -Ereignis aus.

    Außerdem löst das NativeWindow-Objekt Ereignisse zu damit im Zusammenhang stehenden Änderungen an der Fenstergröße und -position aus. Zu diesen im Zusammenhang stehenden Änderungen löst das Fenster keine Warnereignisse aus. Die im Zusammenhang stehenden Ereignisse sind:

    1. Ein move -Ereignis wird ausgelöst, wenn die obere linke Ecke des Fensters aufgrund der Maximierung verschoben wird.

    2. Ein resize -Ereignis wird ausgelöst, wenn sich die Fenstergröße aufgrund der Maximierung geändert hat.

    Ein NativeWindow-Objekt löst eine ähnliche Abfolge von Ereignissen aus, wenn ein Fenster minimiert, wiederhergestellt, geschlossen, verschoben und skaliert wird.

    Die Warnereignisse werden nur ausgelöst, wenn eine Änderung durch das Fensterdesign oder einen anderen vom Betriebssystem gesteuerten Mechanismus eingeleitet wird. Wenn Sie eine Fenstermethode aufrufen, um die Größe, die Position oder den Anzeigestatus des Fensters zu ändern, wird nur ein Ereignis ausgelöst, um die Änderung anzukündigen. Auf Wunsch können Sie mithilfe der dispatchEvent() -Fenstermethode ein Warnereignis auslösen. Anschließend können Sie prüfen, ob das Warnereignis abgebrochen wurde, bevor die Änderung ausgeführt wird.

    Ausführliche Informationen über die Klassen, Methoden, Eigenschaften und Ereignisse der Fenster-API finden Sie im ActionScript 3.0-Referenzhandbuch für die Adobe Flash-Plattform .

Eigenschaften zur Steuerung von Stil und Verhalten nativer Fenster

Mithilfe der folgenden Eigenschaften wird das grundlegende Erscheinungsbild und Verhalten eines Fensters gesteuert:

  • type

  • systemChrome

  • transparent

  • owner

Diese Eigenschaften legen Sie beim Erstellen eines Fensters im NativeWindowInitOptions-Objekt fest, das an den Fensterkonstruktor übergeben wird. AIR entnimmt der Anwendungsdeskriptordatei die Eigenschaften für das ursprüngliche Anwendungsfenster. (Eine Ausnahme bildet die type -Eigenschaft, die in der Anwendungsdeskriptordatei nicht eingestellt werden kann und immer auf normal eingestellt ist.) Die Eigenschaften können nach der Fenstererstellung nicht mehr geändert werden.

Einige Einstellungen dieser Eigenschaften schließlich sich gegenseitig aus: Sie können systemChrome nicht auf standard einstellen, wenn transparent den Wert true oder type den Wert lightweight aufweist.

Fenstertypen

In den AIR-Fenstertypen werden Fensterdesign- und Sichtbarkeitsattribute des nativen Betriebssystems kombiniert, um drei Fensterfunktionstypen zu erstellen. Verwenden Sie die in der NativeWindowType-Klasse definierten Konstanten, um die Typennamen im Code anzugeben. AIR stellt die folgenden Fenstertypen bereit:

Typ

Beschreibung

Normal

Ein typisches Fenster. Normale Fenster verwenden das Fensterdesign in voller Größe und werden in der Windows-Taskleiste und im Fenster-Menü von Mac OS X angezeigt.

Utility

Eine Werkzeugpalette. Dienstprogrammfenster verwenden eine schmalere Version des System-Fensterdesigns und werden nicht in der Windows-Taskleiste und im Fenster-Menü von Mac OS X angezeigt.

Lightweight

Lightweight-Fenster weisen kein Fensterdesign auf und werden nicht in der Windows-Taskleiste und im Fenster-Menü von Mac OS X angezeigt. Zudem verfügen Lightweight-Fenster unter Windows nicht über das System-Menü (Alt+Leertaste). Lightweight-Fenster eignen sich für Benachrichtigungen und Steuerungen wie Kombinationsfelder, die einen Anzeigebereich öffnen, der nur für einen kurzen Zeitraum eingeblendet wird. Bei Verwendung des lightweight -Typs muss systemChrome auf none eingestellt werden.

Fensterdesign

Beim Fensterdesign handelt es sich um die Steuerelemente, die es Benutzern ermöglichen, ein Fenster in der Desktopumgebung zu bearbeiten. Zu den Fensterdesignelementen gehören die Titelleiste, die Schaltflächen der Titelleiste, der Rahmen und Haltegriffe zur Größenänderung.

System-Fensterdesign

Sie können die systemChrome -Eigenschaft auf standard oder none einstellen. Wählen Sie standard , wenn Sie dem Fenster die vom Betriebssystem des Benutzers stammenden Standardsteuerelemente zuweisen möchten. Wählen Sie none , wenn Sie dem Fenster Ihre eigenen Steuerelemente zuweisen möchten. Verwenden Sie die in der NativeWindowSystemChrome-Klasse definierten Konstanten, um die Einstellungen für das System-Fensterdesign im Code anzugeben.

Das System-Fensterdesign wird vom System verwaltet. Ihre Anwendung hat keinen direkten Zugriff auf die Steuerelemente selbst, kann aber auf die Ereignisse reagieren, die bei der Verwendung der Steuerelemente ausgelöst werden. Wenn Sie einem Fenster das Standard-Fensterdesign zuweisen, müssen Sie die transparent -Eigenschaft auf den Wert false und die type -Eigenschaft auf den Wert normal oder utility einstellen.

Flex-Fensterdesign

Bei Verwendung der Flex-Komponenten „WindowedApplication“ oder „Window“ können Sie dem Fenster entweder das System-Fensterdesign oder das Fensterdesign des Flex-Frameworks zuweisen. Um das Flex-Fensterdesign zuzuweisen, müssen Sie die bei der Fenstererstellung verwendete systemChrome -Eigenschaft auf none einstellen. Bei Verwendung der Spark-Komponenten von Flex 4 anstelle der mx-Komponenten müssen Sie die Skin-Klasse angeben, damit das Flex-Fensterdesign verwendet werden kann. Sie können die integrierten oder eigene Skins verwenden. Im folgenden Beispiel wird gezeigt, wie die integrierte Spark-Skin-Klasse „WindowedApplication“ verwendet wird, um das Fensterdesign anzugeben: 

<?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"> 
<fx:Style> 
@namespace "library://ns.adobe.com/flex/spark"; 
WindowedApplication 
{ 
    skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
} 
</fx:Style> 
</s:WindowedApplication>

Weitere Informationen finden Sie in der folgenden Dokumentation: Using Flex 4: About the AIR window containers: Controlling window chrome .

Benutzerdefiniertes Fensterdesign

Wenn Sie ein Fenster erstellen und ihm nicht das System-Fensterdesign zuweisen, dann müssen Sie Ihr eigenes Fensterdesign hinzufügen, um die Interaktionen zwischen Benutzer und Fenster verarbeiten zu können. Sie haben außerdem die Möglichkeit, transparente, nicht rechteckige Fenster zu erstellen.

Um ein benutzerdefiniertes Fensterdesign mit der mx:WindowedApplication- oder mx:Window-Komponente zu verwenden, müssen Sie den showFlexChrome -Stil auf false einstellen. Andernfalls fügt Flex Ihren Fenstern sein eigenes Fensterdesign hinzu.

Fenstertransparenz

Um eine Alpha-Mischung eines Fensters mit dem Desktop oder anderen Fenstern zu ermöglichen, müssen Sie die transparent -Eigenschaft des Fensters auf true setzen. Die transparent -Eigenschaft muss vor dem Erstellen des Fensters eingestellt werden und kann nicht geändert werden.

Ein transparentes Fenster weist keinen Standardhintergrund auf. Jeder Fensterbereich, der kein von der Anwendung gezeichnetes Objekt enthält, ist unsichtbar. Weist ein angezeigtes Objekt eine Alpha-Einstellung von weniger als Eins auf, ist alles, was sich darunter befindet, sichtbar, auch andere Anzeigeobjekte im selben Fenster, andere Fenster und der Desktop.

Transparente Fenster eignen sich, wenn Sie Anwendungen erstellen möchten, deren Rahmen unregelmäßig geformt sind, die „ausgeblendet“ werden oder unsichtbar zu sein scheinen. Die Wiedergabe großer Bereiche mit Alpha-Mischung kann jedoch viel Zeit beanspruchen, daher empfiehlt sich ein sparsamer Einsatz dieses Effekts.

Wichtig: Unter Linux werden Mausereignisse nicht durch vollständig transparente Pixel weitergegeben. Sie sollten keine Fenster mit großen, vollständig transparenten Bereichen erstellen, da so möglicherweise der Benutzerzugriff auf andere Fenster oder Elemente auf dem Desktop verhindert wird. Unter Mac OS X und Windows werden Mausereignisse durch vollständig transparente Pixel weitergegeben.

Transparenz kann nicht mit Fenstern verwendet werden, denen das System-Fensterdesign zugewiesen wurde. Außerdem wird SWF- und PDF-Inhalt in HTML möglicherweise nicht in transparenten Fenstern angezeigt. Weitere Informationen finden Sie unter Erwägungen beim Laden von SWF- oder PDF-Inhalt in eine HTML-Seite .

Die statische NativeWindow.supportsTransparency -Eigenschaft meldet, ob Fenstertransparenz verfügbar ist. Wenn Transparenz nicht unterstützt wird, wird die Anwendung vor einem schwarzen Hintergrund zusammengesetzt. In solchen Fällen werden transparente Bereiche der Anwendung in opakem Schwarz angezeigt. Für den Fall, dass diese Eigenschaft mit false getestet wird, empfiehlt es sich, für eine Ausweichlösung zu sorgen. Sie könnten beispielsweise eine Warnung für den Benutzer oder eine rechteckige, nicht transparente Benutzeroberfläche anzeigen.

Beachten Sie, dass Transparenz von den Betriebssystemen Mac und Windows immer unterstützt wird. Für die Unterstützung von Linux-Betriebssystemen ist ein Compositing-Fenstermanager erforderlich, aber selbst mit aktivem Compositing-Fenstermanager ist Transparenz aufgrund von Benutzeranzeigeoptionen oder der Hardwarekonfiguration möglicherweise nicht verfügbar.

Transparenz in einem MXML-Anwendungsfenster

Der Hintergrund eines MXML-Fensters ist in der Standardeinstellung opak, selbst wenn es als transparent erstellt wurde. (Beachten Sie den Transparenzeffekt an den Ecken des Fensters.) Um das Fenster mit einem transparenten Hintergrund anzuzeigen, müssen Sie eine Hintergrundfarbe und einen Alpha-Wert im Stylesheet oder in dem in der MXML-Anwendungsdatei enthaltenen <mx:Style>-Element einstellen. Mit dem folgenden Stylesheet erhält der Hintergrund eine leicht transparente grüne Farbe: 

WindowedApplication 
{ 
    background-alpha:".8"; 
    background-color:"0x448234"; 
}

Transparenz in einem HTML-Anwendungsfenster

In der Standardeinstellung wird bei HTML-Inhalt, der in HTML-Fenstern und HTMLLoader-Objekten angezeigt wird, ein opaker Hintergrund angezeigt, selbst wenn das enthaltende Fenster transparent ist. Um diesen standardmäßig bei HTML-Inhalt angezeigten Hintergrund zu deaktivieren, müssen Sie die paintsDefaultBackground -Eigenschaft auf false einstellen. Im folgenden Beispiel wird ein „HTMLLoader“ erstellt und der Standardhintergrund wird deaktiviert: 

var htmlView:HTMLLoader = new HTMLLoader(); 
htmlView.paintsDefaultBackground = false;

In diesem Beispiel wird der Standardhintergrund eines HTML-Fensters mithilfe von JavaScript deaktiviert: 

window.htmlLoader.paintsDefaultBackground = false;

Wenn durch ein Element im HTML-Dokument eine Hintergrundfarbe eingestellt wird, ist der Hintergrund des Elements nicht transparent. Die Einstellung eines teilweisen Transparenzwerts (oder Deckkraftwerts) wird nicht unterstützt. Indem Sie eine transparente Grafik im PNG-Format als Hintergrund für eine Seite oder ein Seitenelement festlegen, können Sie einen ähnlichen optischen Effekt erzielen.

Fensterbesitz

Ein Fenster kann ein oder mehrere andere Fenster besitzen . Fenster, die sich im Besitz eines anderen Fensters befinden, werden immer vor dem übergeordneten Fenster angezeigt. Außerdem werden sie mit dem übergeordneten Fenster minimiert, wiederhergestellt und geschlossen. Der Besitz an einem Fenster kann nicht an ein anderes Fenster übertragen oder aufgehoben werden. Ein Fenster kann sich nur im Besitz eines übergeordneten Fensters befinden; es kann jedoch eine beliebige Anzahl anderer Fenster besitzen.

Mithilfe des Fensterbesitzes lassen sich Fenster, die für Werkzeugpaletten und Dialogfelder verwendet werden, einfacher verwalten. Wenn Sie beispielsweise ein Dialogfeld „Speichern“ zusammen mit einem Dokumentfenster anzeigen möchten, können Sie festlegen, dass das Dokumentfenster das Dialogfeld besitzt, damit das Dialogfeld immer automatisch vor dem Dokumentfenster angezeigt wird.

Übersicht über Fenstereinstellungen

Die folgende Tabelle zeigt die optischen Effekte, die mit den verschiedenen Kombinationen von Eigenschaftseinstellungen für Fenster unter den Betriebssystemen Mac OS X, Windows und Linux erzielt werden:

Fenstereinstellungen

Mac OS X

Microsoft Windows

Linux *

Type: normal

SystemChrome: standard

Transparent: false

Type: utility

SystemChrome: standard

Transparent: false

Type: Beliebig

SystemChrome: none

Transparent: false

Type: Beliebig

SystemChrome: none

Transparent: true

mxWindowedApplication oder mx:Window

Type: Beliebig

SystemChrome: none

Transparent: true

* Ubuntu mit Compiz-Fenstermanager

Hinweis: Die folgenden Elemente des System-Fensterdesigns werden von AIR nicht unterstützt: die Mac OS X-Symbolleiste, das Mac OS X-Proxy-Symbol, Windows-Titelleistensymbole und alternative System-Fensterdesigns.