Podstawowe informacje o oknach rodzimych w środowisku AIR

Adobe AIR 1.0 i starsze wersje

Skrócone omówienie i przykłady kodu ilustrujące pracę z oknami rodzimymi w środowisku AIR zawierają następujące artykuły z serii Quick Start w witrynie Adobe Developer Connection:

Środowisko AIR udostępnia łatwy w użyciu międzyplatformowy interfejs API okien do tworzenia rodzimych okien systemu operacyjnego za pomocą środowiska Flash®, Flex™ oraz techniki programowania w języku HTML.

Dzięki środowisku AIR programista ma dużą swobodę w tworzeniu wyglądu aplikacji. Okna tworzone przez użytkownika mogą wyglądać jak standardowa aplikacja lokalna zgodna ze stylem wizualnym produktów Apple — są uruchamiane na komputerze Mac; mogą być równocześnie zgodne z konwencjami firmy Microsoft — gdy są uruchamiane na komputerze z systemem Windows; i jednocześnie zgodne z menedżerem okien systemu Linux. A wszystko to bez konieczności napisania nawet jednego wiersza kodu specyficznego dla konkretnej platformy. Można również użyć rozszerzalnej karnacji systemowej, dostarczanej przez środowisko Flex w celu utworzenia własnego stylu niezależnie od systemu, na którym uruchamiana jest aplikacja. Możliwe jest również rysowanie własnych karnacji okien za pomocą kompozycji wektorowej i bitmapowej w pełni obsługującej przeźroczystość i mieszanie kanału alfa dla pulpitu. Znudzony prostokątnymi oknami? Narysuj okrągłe.

Okna w środowisku AIR

Środowisko AIR obsługuje trzy różne interfejsy API do pracy z oknami:

  • Klasa NativeWindow zorientowana na język ActionScript udostępnia interfejs API najniższego poziomu dla okna. Klasy NativeWindows należy używać w aplikacjach pisanych w języku ActionScript i Flash Professional. Warto rozważyć rozszerzenie klasy NativeWindow w celu wyspecjalizowania okien w aplikacji.

  • W środowisku HTML można używać klasy JavaScript Window, tak jak w aplikacji sieci Web działającej w przeglądarce. Wywołania metod JavaScript Window są przekazywane do podstawowego obiektu rodzimego okna.

  • Klasy mx:WindowedApplication i mx:Window środowiska Flex udostępniają „opakowanie” Flex dla klasy NativeWindow. Składnik WindowedApplication zastępuje składnik Application podczas tworzenia aplikacji AIR za pomocą środowiska Flex i musi być zawsze używany jako okno początkowe aplikacji Flex.

Okna w języku ActionScript

Podczas tworzenia okien za pomocą klasy NativeWindow należy bezpośrednio korzystać ze stołu montażowego i listy wyświetlania programu Flash Player. Aby dodać do NativeWindow obiekt ekranowy, należy dodać obiekt do listy wyświetlania dla stołu montażowego okna lub do innego kontenera obiektu wyświetlanego stołu montażowego.

Okna HTML

Podczas tworzenia okien HTML do wyświetlania treści należy używać języka HTML, CSS i JavaScript. Aby dodać obiekt ekranowy do okna HTML, należy dodać tę treść do modelu DOM HTML. Okna HTML są specjalną kategorią NativeWindow. Host środowiska AIR definiuje właściwość nativeWindow w oknach HTML, która zapewnia dostęp do podstawowej instancji NativeWindow. Można użyć tej właściwości w celu uzyskania dostępu do właściwości, metod i zdarzeń NativeWindow opisanych w tej części.

Uwaga: Obiekt Window języka JavaScript zawiera również metody wywoływania skryptów w oknie, w którym są zawarte, np. moveTo() i close() . W miejscach, w których dostępne są metody przysłaniające, można użyć najdogodniejszej metody.

Okna środowiska Flex

Podczas tworzenia okien za pomocą środowiska Flex do wypełniania okna używane są zazwyczaj składniki MXML. Aby dodać składnik Flex do okna, należy dodać element składnika do definicji MXML okna. Można użyć również kodu ActionScript, aby dodać treść dynamicznie. Składniki mx:WindowedApplication i mx:Window zostały zaprojektowane jako kontenery Flex i dlatego mogą bezpośrednio zaakceptować składniki Flex, podczas gdy obiekty NativeWindow nie mogą. W razie konieczności dostęp do właściwości i metod obiektu NativeWindow można uzyskać przez obiekty WindowedApplication i Window za pośrednictwem właściwości nativeWindow .

Początkowe okno aplikacji

Pierwsze okno aplikacji jest automatycznie tworzone za programistę przez środowisko AIR. Środowisko AIR ustawia właściwości i treść okna za pomocą parametrów określonych w elemencie initialWindow pliku deskryptora aplikacji.

Jeśli główną treścią jest plik SWF, środowisko AIR utworzy instancję NativeWindow, załaduje plik SWF i doda go do stołu montażowego okna. Jeśli główną treścią jest plik HTML, środowisko AIR utworzy okno HTML i załaduje plik HTML.

Przepływ zdarzeń w oknie macierzystym

Rodzime okna wywołują zdarzenia, aby powiadomić powiązane składniki, że wkrótce nastąpi lub już nastąpiła istotna zmiana. Wiele zdarzeń związanych z oknami jest wywoływanych parami. Pierwsze zdarzenie ostrzega o tym, że wkrótce nastąpi zmiana. Drugie zdarzenie informuje o dokonaniu zmiany. Zdarzenie ostrzegawcze można anulować, ale nie można anulować zdarzenia powiadamiającego. Poniższa sekwencja ilustruje strumień zdarzeń, który występuje w momencie kliknięcia przez użytkownika przycisku maksymalizacji okna:

  1. Obiekt NativeWindow wywołuje zdarzenie displayStateChanging .

  2. Jeśli żaden z zarejestrowanych detektorów nie anuluje zdarzenia, okno zostanie zmaksymalizowane.

  3. Obiekt NativeWindow wywołuje zdarzenie displayStateChange .

    Ponadto obiekt NativeWindow wywołuje także zdarzenia związane ze zmianą rozmiaru i położenia okna. Okno nie wywołuje zdarzeń ostrzegawczych dla tych zmian. Powiązane zdarzenia to:

    1. Zdarzenie move jest wywoływane, gdy lewy górny róg okna zostanie przesunięty z powodu operacji maksymalizacji okna.

    2. Zdarzenie resize jest wywoływane, gdy rozmiar okna zostanie zmieniony z powodu operacji maksymalizacji okna.

    Obiekt NativeWindow wywołuje podobną sekwencję zdarzeń podczas minimalizowania, przywracania, zamykania, przesuwania i zmiany rozmiaru okna.

    Zdarzenia ostrzegawcze są wywoływane tylko wtedy, gdy zmiana jest inicjowana przez karnację własną okna lub inny mechanizm sterowany przez system operacyjny. W momencie wywołania metody okna w celu zmiany jego rozmiaru i położenia lub wyświetlenia stanu okno wywoła tylko zdarzenie informujące o zmianie. W razie potrzeby zdarzenie ostrzegawcze można wywołać za pomocą metody dispatchEvent() , a następnie sprawdzić, czy zdarzenie ostrzegawcze zostało anulowane przed wykonaniem zmiany.

    Szczegółowe informacje o klasach, metodach, właściwościach i zdarzeniach interfejsu API okien zawiera Skorowidz języka ActionScript 3.0 dla platformy Adobe Flash .

Właściwości sterujące stylem i zachowaniem okna macierzystego

Poniższe właściwości sterują podstawowym wyglądem i zachowaniem okna:

  • type

  • systemChrome

  • transparent

  • owner

Podczas tworzenia okna należy ustawić te właściwości w obiekcie NativeWindowInitOptions przekazywanym do konstruktora okna. Środowisko AIR odczytuje właściwości dla początkowego okna aplikacji z deskryptora aplikacji. (Poza właściwością type , której nie można ustawić w deskryptorze aplikacji i ma zawsze wartość normal ). Właściwości nie można zmienić po utworzeniu okna.

Niektóre ustawienia tych właściwości wykluczają się: właściwości systemChrome nie można ustawić na standard , jeśli właściwość transparent ma wartość true lub właściwość type ma wartość lightweight .

Typy okien

Typy okien w środowisku AIR łączą atrybuty chrome i visibility rodzimego systemu operacyjnego w celu utworzenia trzech funkcjonalnych typów okien. Aby odwołać się do nazw typów w kodzie, należy użyć stałych zdefiniowanych w klasie NativeWindowType. Środowisko AIR dostarcza następujące typy okien:

Typ

Opis

Normal

Zwykłe okno. Okna typu normal mają pełny rozmiar karnacji systemowej i są wyświetlane na pasku zadań systemu Windows oraz w menu okna systemu Mac OS X.

Utility

Paleta narzędzi. Okna typu utility korzystają z węższej wersji karnacji systemowej i nie są wyświetlane na pasku zadań systemu Windows oraz w menu okna systemu Mac OS X.

Lightweight

Okna typu lightweight nie mają karnacji systemowej i nie są wyświetlane na pasku zadań systemu Windows oraz w menu okna systemu Mac OS X. Ponadto okna typu lightweight nie mają menu systemowego dostępnego w systemie Windows za pośrednictwem klawiszy Alt+spacja. Okna typu lightweight są odpowiednie dla okien powiadomień i elementów sterowania (np. pola listy kombinowanej), które aktywują obszary wyświetlania o krótkim czasie życia. Jeśli używana jest właściwość type o wartości lightweight, właściwość systemChrome należy ustawić na none .

Karnacja okna

Karnacja okna jest zestawem elementów sterowania umożliwiającym użytkownikom manipulowanie oknem na pulpicie. Elementy karnacji to: pasek tytułowy, przyciski paska tytułowego, obwiednia i uchwyty zmiany rozmiaru.

Karnacja systemowa

Właściwość systemChrome można ustawić na wartość standard lub none . Aby przypisać do okna zestaw standardowych elementów sterowania utworzonych przez system operacyjny użytkownika i mających jego styl, należy wybrać dla karnacji systemowej wartość standard . Aby dostarczyć własną karnację dla okna, należy wybrać wartość none . Aby odwołać się do ustawień karnacji systemowej w kodzie, należy użyć stałych zdefiniowanych w klasie NativeWindowSystemChrome.

Karnacją systemową zarządza system. Aplikacja nie ma bezpośredniego dostępu do elementów sterowania, ale może reagować na zdarzenia wywoływane w momencie ich użycia. Podczas korzystania ze standardowej karnacji dla okna właściwość transparent należy ustawić na wartość false , a właściwość type na wartość normal lub utility .

Karnacja środowiska Flex

Podczas korzystania ze składników WindowedApplication lub Window środowiska Flex okno może używać karnacji systemowej lub karnacji dostarczanej przez środowisko Flex. Aby użyć karnacji środowiska Flex, należy ustawić właściwość systemChrome użytą do tworzenia okna na wartość none . W wypadku użycia składników z pakietu spark środowiska Flex 4, a nie składników z pakietu mx, użycie karnacji Flex wymaga określenia klasy karnacji. Można użyć karnacji wbudowanych lub utworzyć własną. Poniższy przykład ilustruje wykorzystanie wbudowanej klasy karnacji Spark WindowedApplication jako karnacji okna: 

<?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>

Więcej informacji zawiera sekcja Korzystanie z programu Flex 4: Informacje o kontenerach okna środowiska AIR: Sterowanie karnacją okna .

Własna karnacja

Jeśli tworzone jest okno bez karnacji systemowej, wówczas należy dodać własne elementy sterowania karnacji, aby obsłużyć interakcję między użytkownikiem a oknem. Programista ma wtedy również możliwość swobodnego tworzenia przezroczystych, nieprostokątnych okien.

Aby użyć niestandardowej karnacji ze składnikami mx:WindowedApplication lub mx:Window, należy ustawić styl showFlexChrome na false . W przeciwnym razie program Flex zastosuje do okien własną karnację.

Przezroczystość okna

Aby umożliwić mieszanie kanału alfa okna z pulpitem lub innymi oknami, należy ustawić właściwość transparent okna na wartość true . Właściwość transparent należy ustawić przed utworzeniem okna i nie można jej zmienić.

Przezroczyste okno nie ma domyślnego tła. Każdy obszar okna, który nie zawiera obiektu narysowanego przez aplikację, jest niewidoczny. Jeśli obiekt ekranowy ma dla kanału alfa ustawioną wartość mniejszą niż jeden, wówczas wszystko, co znajduje się za obiektem, jest widoczne, łącznie z innymi obiektami ekranowymi tego samego okna, innymi oknami i pulpitem.

Przezroczyste okna są użyteczne, gdy zachodzi konieczność utworzenia aplikacji z nieregularnymi krawędziami lub krawędziami, które zanikają albo są niewidoczne. Jednak renderowanie dużych obszarów z mieszaniem kanału alfa może być powolne, dlatego należy tego efektu używać z umiarem.

Ważne: W systemie Linux zdarzenia myszy nie są przekazywane przez piksele o pełnej przezroczystości. Należy unikać tworzenia okien z dużymi obszarami o pełnej przezroczystości, ponieważ można w ten sposób zablokować użytkownikowi dostęp do innych okien lub elementów na jego pulpicie. W systemach Mac OS i Windows zdarzenia myszy są przekazywane przez piksele o pełnej przezroczystości.

Przezroczystości nie można używać w oknach, które mają karnację systemową. Ponadto treść SWF i PDF w kodzie HTML może nie być wyświetlana w przezroczystych oknach. Więcej informacji zawiera sekcja Zagadnienia dotyczące ładowania treści SWF lub PDF na stronie HTML .

Właściwość statyczna NativeWindow.supportsTransparency informuje o tym, czy dostępna jest przezroczystość okna. Jeśli przezroczystość nie jest obsługiwana, kompozycja aplikacji jest tworzona na czarnym tle. W takim przypadku każdy przezroczysty obszar aplikacji zostanie wyświetlony jako nieprzezroczysty czarny obszar. Dobrą praktyką jest zapewnienie mechanizmu awaryjnego na wypadek, gdyby właściwość miała wartość false . Programista może na przykład wyświetlić dla użytkownika okno dialogowe z ostrzeżeniem lub wyświetlić awaryjny, prostokątny i nieprzezroczysty interfejs użytkownika.

Należy zauważyć, że przezroczystość jest zawsze obsługiwana w systemach operacyjnych Mac i Windows. Obsługa w systemach operacyjnych Linux wymaga kompozytowego menedżera okien, ale nawet jeśli kompozytowy menedżer okien jest aktywny, przezroczystość może być niedostępna ze względu na opcje wyświetlania użytkownika lub konfigurację sprzętową.

Przezroczystość w oknie aplikacji MXML

Domyślnie tło okna MXML jest nieprzezroczyste, nawet jeśli okno zostanie utworzone jako przezroczyste . (Należy zauważyć efekt przezroczystości na rogach okna). Aby wyświetlić przezroczyste tło dla okna, należy ustawić kolor tła i wartość kanału alfa w szablonie strony lub elemencie <mx:Style> zawartym w pliku MXML aplikacji. Na przykład: poniższa deklaracja stylu nadaje tłu lekko przezroczysty zielony odcień: 

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

Przezroczystość w oknie aplikacji HTML

Domyślnie tło treści HTML wyświetlanej w oknach HTML i obiektach HTMLLoader jest nieprzezroczyste, nawet jeśli okno je zawierające jest przezroczyste. Aby wyłączyć domyślne tło wyświetlane dla treści HTML, należy ustawić właściwość paintsDefaultBackground na wartość false . Poniższy przykład tworzy obiekt HTMLLoader i wyłącza domyślne tło: 

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

W przykładzie tym kod JavaScript używany jest do wyłączenia domyślnego tła okna HTML: 

window.htmlLoader.paintsDefaultBackground = false;

Jeśli element dokumentu HTML ustawi kolor tła, tło tego elementu nie będzie przezroczyste. Ustawienie wartości częściowej przezroczystości (lub krycia) nie jest obsługiwane. Można jednak użyć przezroczystej grafiki w formacie PNG jako tła dla strony lub elementu strony w celu otrzymania podobnego efektu wizualnego.

Własność okien

Jedno okno może być właścicielem innego okna lub innych okien. Te posiadane okna są zawsze wyświetlane przed oknem głównym, są minimalizowane i przywracane wraz z oknem głównym oraz są zamykane podczas zamykania okna głównego. Nie można przekazać ani usunąć własności okna. Właścicielem okna może być tylko jedno okno główne. Okno może być właścicielem dowolnej liczby innych okien.

Struktura własności okien ułatwia zarządzanie oknami dialogowymi i oknami używanymi w paletach narzędzi. Jeśli na przykład wraz z oknem dokumentu jest wyświetlane okno dialogowe Zapisywanie, to ustawienie okna dialogowego jako własności okna dokumentu pozwoli na automatyczne wyświetlanie okna dialogowego przed oknem dokumentu.

Wizualny katalog okien

Poniższa tabela ilustruje efekty wizualne różnych kombinacji ustawień właściwości okna w systemach operacyjnych Mac OS X, Windows i Linux:

Ustawienia okna

Mac OS X

Microsoft Windows

Linux *

Type: normal

SystemChrome: standard

Transparent: false

Type: utility

SystemChrome: standard

Transparent: false

Type: dowolne

SystemChrome: none

Transparent: false

Type: dowolne

SystemChrome: none

Transparent: true

mxWindowedApplication lub mx:Window

Type: dowolne

SystemChrome: none

Transparent: true

* System Ubuntu z menedżerem okien Compiz

Uwaga: Poniższe elementy karnacji systemowej nie są obsługiwane w środowisku AIR: pasek narzędziowy Mac OS X, ikona proxy Mac OS X, ikony paska tytułowego Windows i alternatywne karnacje systemowe.