Basisbeginselen van native vensters in AIR

Adobe AIR 1.0 of hoger

Lees voor een snelle uitleg en codevoorbeelden van het werken met native vensters in AIR de snelstartartikelen in de Adobe Developer Connection:

AIR biedt een gebruikersvriendelijke API die op meerdere platforms kan worden gebruikt. Met deze API voor vensters kunnen met Flash®-, Flex™- en HTML-programmeertechnieken native vensters worden gemaakt (dit zijn vensters die eigen zijn aan het besturingssysteem).

Met AIR hebt u een grote vrijheid bij het ontwikkelen van het uiterlijk van uw toepassing. De vensters die u maakt kunnen er uitzien als een standaardbureaubladtoepassing die passen bij de Apple-stijl wanneer ze worden uitgevoerd op de Mac, die voldoen aan de Microsoft-conventies wanneer ze worden uitgevoerd op Windows en die zich aanpassen aan het Linux-vensterbeheer op Linux zonder dat u een regel platformspecifieke code hoeft te gebruiken. U kunt echter ook het uitbreidbare chroom met verwisselbare skins (weergaven) gebruiken die door het Flex-framework wordt geboden. Met dit chroom kunt u uw eigen stijl ontwikkelen, ongeacht het besturingssysteem waarin uw toepassing wordt uitgevoerd. U kunt zelfs uw eigen vensterchroom tekenen met vector- en bitmapillustraties met volledige ondersteuning voor transparantie. Ook alfaovervloeiing wordt ondersteund, waarmee u een gedeeltelijk transparant venster kunt laten overvloeien in de bureaubladachtergrond. Hebt u genoeg van die rechthoekige vensters? Teken eens een rond venster.

Vensters in AIR

AIR ondersteunt drie specifieke API's voor het werken met vensters:

  • De ActionScript-georiënteerde NativeWindow-klasse biedt de venster-API van het laagste niveau. Gebruik native vensters in toepassingen die in ActionScript en Flash Professional zijn ontworpen. U kunt de klasse NativeWindow uitbreiden om de vensters te specialiseren die in de toepassing worden gebruikt.

  • In de HTML-omgeving kunt u de klasse JavaScript Window gebruiken, net als in een browsergebaseerde webtoepassing. Aanroepen naar JavaScript Window-methoden worden doorgestuurd naar het onderliggende native Window-object.

  • De Flex-frameworkklassen mx:WindowedApplication en mx:Window bieden een Flex-“wrapper” voor de klasse NativeWindow. De component WindowedApplication vervangt de component Application wanneer u een AIR-toepassing met Flex maakt en moet altijd worden gebruikt als beginvenster in uw Flex-toepassing.

ActionScript-vensters

Wanneer u vensters maakt met de klasse NativeWindow, kunt u rechtstreeks gebruikmaken van het werkgebied en de weergavelijst van Flash Player. Als u visuele objecten aan een NativeWindow wilt toevoegen, voegt u het object toe aan de weergavelijst van werkgebied van het venster of aan een andere weergaveobjectcontainer in het werkgebied.

HTML-vensters

Wanneer u HTML-vensters maakt, gebruikt u HTML, CSS en JavaScript om inhoud weer te geven. Als u een visueel object aan een HTML-venster wilt toevoegen, voegt u die inhoud toe aan het HTML DOM. HTML-vensters vormen een speciale categorie van NativeWindow. De AIR-host definieert in HTML-vensters een nativeWindow -eigenschap die toegang biedt tot de onderliggende NativeWindow-instantie. U kunt deze eigenschap gebruiken om toegang te krijgen tot de NativeWindow-eigenschappen, -methoden en -gebeurtenissen die hier worden beschreven.

Opmerking: Het JavaScript-object Window heeft ook methoden voor het schrijven van scripts voor het venster waarin het object zich bevindt, zoals moveTo() en close() . Als er overlappende methoden beschikbaar zijn, gebruikt u de methode die u zelf geschikt vindt.

Flex-frameworkvensters

Wanneer u vensters maakt met het Flex-framework, gebruikt u gewoonlijk MXML-componenten om het venster te vullen. Als u een Flex-component aan een venster wilt toevoegen, voegt u het componentelement toe aan de MXML-definitie van het venster. U kunt ook ActionScript gebruiken om inhoud dynamisch toe te voegen. De componenten mx:WindowedApplication en mx:Window zijn ontworpen als Flex-containers en kunnen daarom Flex-componenten direct accepteren, terwijl NativeWindow-objecten dat niet kunnen. Indien nodig kunt u met de eigenschap nativeWindow via de objecten WindowedApplication en Window toegang krijgen tot de NativeWindow-eigenschappen en -methoden.

Het beginvenster van de toepassing

Het eerste venster van uw toepassing wordt automatisch voor u gemaakt door AIR. AIR stelt de eigenschappen en inhoud van het venster in met de parameters die zijn opgegeven in het element initialWindow van het descriptorbestand van de toepassing.

Als de inhoud van de hoofdmap een SWF-bestand is, maakt AIR een NativeWindow-instantie, laadt het dit SWF-bestand en voegt het dit bestand toe aan het werkgebied van het venster. Als de inhoud van de hoofdmap een HTML-bestand is, maakt AIR een HTML-venster en laadt het dit HTML-bestand.

Gebeurtenisstromen voor native vensters

Native vensters verzenden gebeurtenissen om belanghebbende componenten te melden dat er een belangrijke wijziging zal worden doorgevoerd of al is doorgevoerd. Veel gebeurtenissen die betrekking hebben op vensters, worden in paren verzonden. De eerste gebeurtenis waarschuwt dat er binnenkort een verandering zal plaatsvinden. De tweede gebeurtenis meldt dat de wijziging heeft plaatsgevonden. U kunt een waarschuwingsgebeurtenis annuleren, maar een meldingsgebeurtenis niet. De volgende reeks gebeurtenissen laat zien hoe de gebeurtenisstroom loopt wanneer een gebruiker op de knop Maximaliseren van een venster klikt:

  1. Het NativeWindow-object verzendt de gebeurtenis displayStateChanging .

  2. Als de gebeurtenis niet door geregistreerde listeners wordt geannuleerd, wordt het venster gemaximaliseerd.

  3. Het NativeWindow-object verzendt de gebeurtenis displayStateChange .

    Daarnaast verzendt het NativeWindow-object ook gebeurtenissen voor gerelateerde wijzigingen in het formaat en de positie van het venster. Het venster verzendt geen waarschuwingsgebeurtenissen voor deze gerelateerde wijzigingen. De gerelateerde wijzigingen zijn:

    1. De gebeurtenis move wordt verzonden als de linkerbovenhoek van het vensters is verplaatst als gevolg van het maximaliseren.

    2. De gebeurtenis resize wordt verzonden als het vensterformaat is gewijzigd als gevolg van het maximaliseren.

    Het NativeWindow-object verzendt een vergelijkbare reeks gebeurtenissen bij het minimaliseren, sluiten en verplaatsen van vensters en bij het wijzigen of herstellen van het formaat van vensters.

    De waarschuwingsgebeurtenissen worden alleen verzonden wanneer een wijziging is geactiveerd via het vensterchroom of andere door het besturingssysteem gecontroleerde mechanismen. Wanneer u een venstermethode aanroept om het formaat, de positie of de weergavestatus te wijzigen, verzendt het venster alleen een gebeurtenis om de wijziging te melden. U kunt desgewenst een waarschuwingsgebeurtenis verzenden met de methode dispatchEvent() van het venster en vervolgens controleren of uw waarschuwingsgebeurtenis is geannuleerd voordat u de wijziging doorvoert.

    Zie de Naslaggids voor ActionScript 3.0 voor het Adobe Flash-platform voor meer informatie over de klassen, methoden, eigenschappen en gebeurtenissen van de venster-API.

Eigenschappen die de stijl en het gedrag van een native venster bepalen

De volgende eigenschappen bepalen het basisuiterlijk en -gedrag van een venster:

  • type

  • systemChrome

  • transparent

  • owner

Wanneer u een venster maakt, stelt u deze eigenschappen in voor het NativeWindowInitOptions-object dat aan de vensterconstructor wordt doorgegeven. AIR leest de eigenschappen voor het beginvenster van de toepassing vanuit de toepassingsdescriptor. (Dit geldt niet voor de eigenschap type , die niet in de toepassingsdescriptor kan worden ingesteld en altijd is ingesteld op normal .) De eigenschappen kunnen niet worden gewijzigd nadat het venster is gemaakt.

Sommige instellingen van deze eigenschappen sluiten elkaar uit: systemChrome kan niet worden ingesteld op standard als transparent is ingesteld op true of als type is ingesteld op lightweight .

Venstertypen

In de venstertypen van AIR zijn de chroom- en zichtbaarheidskenmerken van het oorspronkelijke besturingssysteem gecombineerd. Op die manier zijn er drie functionele typen vensters ontstaan. Gebruik de constanten die in de klasse NativeWindowType zijn gedefinieerd, om in de code te verwijzen naar de naam van de typen. AIR biedt de volgende venstertypen:

Type

Beschrijving

Normaal

Dit is een normaal venster. Normale vensters maken gebruik van het maximale formaat van het chroom en verschijnen op de taakbalk van Windows en in het venstermenu van Mac OS X.

Utiliteit

Dit is een venster met een palet met hulpmiddelen. Utiliteitsvensters maken gebruik van een afgeslankte versie van het systeemchroom en verschijnen niet op de taakbalk van Windows of in het venstermenu van Mac OS X.

Lichtgewicht

Lichtgewichtvensters hebben geen chroom en verschijnen niet op de taakbalk van Windows of in het venstermenu van Mac OS X. Bovendien beschikken lichtgewichtvensters niet over een systeemmenu (Alt+Spatiebalk) in Windows. Lichtgewichtvensters zijn geschikt voor het weergeven van ballonnetjes met mededelingen en voor besturingselementen, zoals keuzelijsten met invoervak die kortstondig een weergavegebied openen. Wanneer het lichtgewichtvenster type wordt gebruikt, moet systemChrome zijn ingesteld op none .

Vensterchroom

Het vensterchroom bestaat uit een set besturingselementen waarmee gebruikers een venster in de bureaubladomgeving kunnen manipuleren. Tot de chroomelementen behoren de titelbalk, titelbalkknoppen, vensterrand en formaatgrepen.

Systeemchroom

U kunt de eigenschap systemChrome instellen op standard of none . Kies standard voor het systeemchroom als u het venster wilt voorzien van de reeks standaardbesturingselementen die worden gemaakt en vormgegeven door het besturingssysteem van de gebruiker. Kies none als u het venster wilt voorzien van uw eigen chroom. Gebruik de constanten die in de klasse NativeWindowSystemChrome zijn gedefinieerd, om in de code te verwijzen naar de instellingen van het systeemchroom.

Het systeemchroom wordt beheerd door het systeem. Uw toepassing heeft niet rechtstreeks toegang tot de besturingselementen zelf, maar kan reageren op de gebeurtenissen die worden verzonden wanneer de besturingselementen worden gebruikt. Wanneer u het standaardchroom gebruikt voor een venster, moet de eigenschap transparent zijn ingesteld op false en moet de eigenschap type zijn ingesteld op normal of utility .

Flex-chroom

Wanneer u de Flex-component WindowedApplication of Window gebruikt, kan het venster gebruikmaken van het systeemchroom of van het chroom dat door het Flex-framework wordt geleverd. Als u het Flex-chroom wilt gebruiken, stelt u de eigenschap systemChrome , die wordt gebruikt om het venster te maken, in op none . Wanneer u Flex 4 spark-componenten gebruikt in plaats van mx-componenten, moet u de skinklasse opgeven. Als u dit niet doet, kunt u Flex-chroom niet gebruiken. U kunt de ingebouwde skins gebruiken of uw eigen skins beschikbaar maken. Het volgende voorbeeld laat zien hoe u de skinklasse WindowedApplication van de ingebouwde spark gebruikt om de vensterchroom beschikbaar te maken: 

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

Zie Using Flex 4: About the AIR window containers: Controlling window chrome voor meer informatie.

Aangepast chroom

Wanneer u een venster maakt zonder systeemchroom, moet u uw eigen chroombesturingselementen toevoegen om de interactie tussen een gebruiker en het venster mogelijk te maken en te sturen. U hebt ook de mogelijkheid om transparante, niet-rechthoekige vensters te maken.

U moet de stijl showFlexChrome instellen op false om het aangepaste chroom met de componenten mx:WindowedApplication of mx:Window te gebruiken. Anders wordt het Flex-chroom zelf aan uw vensters toegevoegd.

Venstertransparantie

Als u alfaovervloeiing wilt toestaan, waarbij het venster deels transparant wordt en overvloeit in de bureaubladachtergrond of in andere vensters, stelt u de eigenschap transparent van het venster in op true . De eigenschap transparent moet worden ingesteld voordat het venster wordt gemaakt en kan niet worden gewijzigd als het venster eenmaal is gemaakt.

Een transparant venster heeft geen standaardachtergrond. Elk venstergebied dat geen object bevat dat door de toepassing is getekend, is onzichtbaar. Als voor een weergegeven object de alfa-instelling kleiner is dan één, is alles wat zich onder het object bevindt, gedeeltelijk zichtbaar door het object heen, inclusief eventuele andere weergaveobjecten, andere vensters en het bureaublad.

Transparante vensters zijn handig wanneer u toepassingen wilt maken met randen die onregelmatig van vorm zijn, geleidelijk vervagen of onzichtbaar lijken. Als u echter grote gebieden met alfaovervloeiing wilt renderen, kan dit traag gaan. Gebruik het effect daarom met mate.

Belangrijk: In Linux kunnen muisgebeurtenissen volledig transparante pixels niet passeren. Vermijd het maken van vensters met grote, volledig transparante gebieden, aangezien u de toegang van de gebruiker tot andere vensters of items op hun bureaublad mogelijk op onzichtbare wijze zou kunnen blokkeren. In Mac OS X en Windows kunnen muisgebeurtenissen volledig transparante pixels niet passeren.

Transparantie kan niet worden gebruikt voor vensters die gebruikmaken van het systeemchroom. Bovendien wordt SWF- en PDF-inhoud in HTML mogelijk niet weergegeven in transparante vensters. Zie Belangrijke opmerkingen voor het laden van SWF- of PDF-inhoud in een HTML-pagina voor meer informatie.

De statische eigenschap NativeWindow.supportsTransparency geeft aan of venstertransparantie beschikbaar is. Als transparantie niet wordt ondersteund, wordt de toepassing tegen een zwarte achtergrond geplaatst. In deze gevallen worden transparante gebieden van de toepassing dekkend zwart weergegeven. Het kan nuttig zijn een functie te maken waarop kan worden teruggevallen als de eigenschap false test. U kunt bijvoorbeeld een waarschuwingsdialoogvenster voor de gebruiker weergeven of een rechthoekige, niet-transparante gebruikersinterface weergeven.

Bedenk dat transparantie altijd wordt ondersteund door Mac- en Windows-besturingssystemen. Voor ondersteuning in Linux-besturingssystemen is een hulpprogramma voor samenstellend vensterbeheer vereist. Zelfs als zo'n hulpprogramma actief is, is transparantie mogelijk niet beschikbaar vanwege de door de gebruiker gekozen weergaveopties of de hardwareconfiguratie.

Transparantie in een MXML-toepassingsvenster

De achtergrond van een MXML-venster is standaard ondoorzichtig, zelfs als u bij het maken van het venster kiest voor transparent . (Let op het transparantie-effect in de hoeken van het venster.) Als u een transparante achtergrond voor het venster wilt weergeven, stelt u in het opmaakmodel of het element <mx:Style> dat zich in het MXML-bestand van uw toepassing bevindt, een achtergrondkleur en een alfawaarde in. Met de volgende stijldefinitie krijgt de achtergrond bijvoorbeeld een enigszins transparante groene tint: 

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

Transparantie in een HTML-toepassingsvenster

De achtergrond van HTML-inhoud die in HTML-vensters en HTMLLoader-objecten wordt weergegeven, is standaard ondoorzichtig, zelfs als het venster waarin de inhoud wordt weergegeven, transparant is. Als u de standaardachtergrond wilt uitschakelen die voor HTML-inhoud wordt weergegeven, stelt u de eigenschap paintsDefaultBackground in op false . In het volgende voorbeeld wordt een HTMLLoader gemaakt en wordt de standaardachtergrond uitgeschakeld: 

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

In dit voorbeeld wordt JavaScript gebruikt om de standaardachtergrond van een HTML-venster uit te schakelen: 

window.htmlLoader.paintsDefaultBackground = false;

Als een element in het HTML-document een achtergrondkleur instelt, is de achtergrond van dat element niet transparant. Het instellen van een waarde voor gedeeltelijke transparantie (of matheid) wordt niet ondersteund. U kunt echter een transparante afbeelding in de PNG-indeling als achtergrond voor een pagina of pagina-element gebruiken om een vergelijkbaar visueel effect te krijgen.

Eigendom van vensters

Een venster kan eigenaar zijn van een of meerdere vensters. Deze eigendomvensters worden altijd vóór het hoofdvenster weergegeven, worden tegelijk met het hoofdvenster tot pictogram verkleind of hersteld en worden gesloten wanneer het hoofdvenster wordt gesloten. Eigendom van vensters kan niet worden overgedragen aan een ander venster en kan niet worden verwijderd. Een venster kan slechts het eigendom zijn van één hoofdvenster, maar kan eigenaar zijn van een onbeperkt aantal andere vensters.

Met venstereigendom kunt u vensters die voor gereedschapspaletten en dialoogvensters worden gebruikt eenvoudiger beheren. Als u bijvoorbeeld een dialoogvenster Opslaan weergeeft in combinatie met een documentvenster en het documentvenster eigenaar maakt van het dialoogvenster, blijft het dialoogvenster automatisch vóór het documentvenster staan.

Een visuele venstercatalogus

De volgende tabel illustreert de visuele effecten van verschillende combinaties van de instellingen van venstereigenschappen in de besturingssystemen Mac OS X, Windows en Linux:

Vensterinstellingen

Mac OS X

Microsoft Windows

Linux *

Type: normal

SystemChrome: standard

Transparent: false

Type: utility

SystemChrome: standard

Transparent: false

Type: alle

SystemChrome: none

Transparent: false

Type: alle

SystemChrome: none

Transparent: true

mxWindowedApplication of mx:Window

Type: alle

SystemChrome: none

Transparent: true

* Ubuntu met Compiz-vensterbeheer

Opmerking: De volgende systeemchroomelementen worden niet ondersteund door AIR: de Mac OS X-werkbalk, het Mac OS X-proxypictogram, pictogrammen op de Windows-titelbalk en het alternatieve systeemchroom.