Grundlagen von nativen Fenstern in AIRAdobe 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 AIRAIR unterstützt drei spezielle APIs zur Arbeit mit Fenstern:
ActionScript-FensterVerwenden 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-FensterBeim 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-FensterBeim 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 AnwendungsfensterDas 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. Native Fenster-KlassenDie native Fenster-API enthält die folgenden Klassen:
Ereignisfluss bei nativen FensternNative 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:
Eigenschaften zur Steuerung von Stil und Verhalten nativer FensterMithilfe der folgenden Eigenschaften wird das grundlegende Erscheinungsbild und Verhalten eines Fensters gesteuert:
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. FenstertypenIn 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:
FensterdesignBeim 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-FensterdesignSie 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-FensterdesignBei 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 FensterdesignWenn 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. FenstertransparenzUm 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-AnwendungsfensterDer 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-AnwendungsfensterIn 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. FensterbesitzEin 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 FenstereinstellungenDie 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:
*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.
|
|