Grunderna om interna fönster i AIR

Adobe AIR 1.0 och senare

Följande snabbstartartiklar på Adobe Developer Connection innehåller korta förklaringar och kodexempel på hur du arbetar med inbyggda fönster i AIR:

AIR innehåller ett lättanvänt fönster-API för flera plattformar som används för att skapa inbyggda operativsystemsfönster med Flash®-, Flex™- och HTML-programmeringstekniker.

Med AIR får du stor flexibilitet i utvecklingen av programmets utseende. Fönstren som du skapar kan efterlikna ett vanligt skrivbordsprogram, matcha Apple-stilen när programmet körs på en Mac-dator, följa Microsofts konventioner när det körs på en Windows-dator och harmonisera med fönsterhanteraren i Linux – utan en enda rad plattformsspecifik kod. Du kan också använda den utökningsbara fönsterstandarden från Flex Framework med stöd för skal om du vill skapa en egen stil som är oberoende av var programmet körs. Du kan till och med skapa en egen fönsterstandard med vektor- och bitmappsgrafik som har fullständigt stöd för genomskinlighet och alfablandning på skrivbordet. Trött på rektangulära fönster? Rita ett runt fönster.

Fönster i AIR

AIR stöder tre olika API:er för arbete med fönster:

  • Den ActionScript-orienterade NativeWindow-klassen tillhandahåller ett fönster-API på den lägsta nivån. Använd NativeWindow i ActionScript och i program skapade med Flash Professional. Överväg att utöka klassen NativeWindow för att anpassa fönstren som används i ditt program.

  • I HTML-miljön kan du använda JavaScript-klassen Window på samma sätt som i ett webbläsarbaserat webbprogram. Anrop till Window-metoder i JavaScript vidarebefordras till det underliggande inbyggda fönsterobjektet.

  • mx:WindowedApplication- och mx:Window-klasserna i Flex-ramverket inkluderar en Flex-wrapper för NativeWindow-klassen. WindowedApplication-komponenten ersätter Application-komponenten när du skapar ett AIR-program med Flex och måste alltid användas som det första fönstret i Flex-programmet.

ActionScript-fönster

När du skapar fönster med klassen NativeWindow använder du Flash Player-scenen och visningslistan direkt. Om du vill lägga till ett visuellt objekt i en NativeWindow-instans lägger du till objektet i fönsterscenens visningslista eller i en annan behållare för visningsobjekt på scenen.

HTML-fönster

När du skapar HTML-fönster använder du HTML, CSS och JavaScript för att visa innehållet. Om du vill lägga till ett visuellt objekt i ett HTML-fönster lägger du till innehållet i HTML DOM. HTML-fönster är en specialkategori i NativeWindow. AIR-värden definierar en nativeWindow -egenskap i HTML-fönster som ger åtkomst till den underliggande NativeWindow-instansen. Du kan använda den här egenskapen när du vill komma åt de egenskaper, metoder och händelser för NativeWindow som beskrivs här.

Obs! JavaScript-objektet Window innehåller också metoder för skript i innehållsfönstret, till exempel moveTo() och close() . Där det finns överlappande metoder kan du använda den metod som du tycker passar bäst.

Flex Framework-fönster

När du skapar fönster med Flex Framework använder du vanligen MXML-komponenter för att fylla fönstret med innehåll. Om du vill lägga till en Flex-komponent i ett fönster lägger du till komponentelementet i fönstrets MXML-definition. Du kan också använda ActionScript om du vill lägga till innehåll dynamiskt. Komponenterna mx:WindowedApplication och mx:Window har utformats som Flex-behållare och kan därför hantera Flex-komponenter direkt, vilket inte NativeWindow-objekt kan. Vid behov kan du komma åt egenskaper och metoder för NativeWindow via objekten WindowedApplication och Window med hjälp av egenskapen nativeWindow .

Det inledande programfönstret.

Programmets första fönster skapas automatiskt åt dig av AIR. Fönstrets egenskaper och innehåll anges med hjälp av de parametrar som har angetts i elementet initialWindow i programbeskrivningsfilen.

Om rotinnehållet är en SWF-fil skapar AIR en NativeWindow-instans, läser in SWF-filen och lägger till den på fönsterscenen. Om rotinnehållet är en HTML-fil skapar AIR ett HTML-fönster och läser in HTML-innehållet.

Klasser för inbyggda fönster

Händelseflöde för inbyggda fönster

Inbyggda fönster skickar händelser för att meddela berörda komponenter att en viktig ändring kommer att utföras eller redan har utförts. Många fönsterrelaterade händelser skickas i par. Den första händelsen varnar om att en ändring kommer att utföras. Den andra händelsen meddelar att ändringen har utförts. Du kan avbryta en varningshändelse, men inte en meddelandehändelse. I följande sekvens illustreras det händelseflöde som inträffar när en användare klickar på maximeringsknappen i ett fönster:

  1. NativeWindow-objektet skickar en displayStateChanging -händelse.

  2. Om händelsen inte avbryts av några registrerade lyssnare maximeras fönstret.

  3. NativeWindow-objektet skickar en displayStateChange -händelse.

    Dessutom skickar NativeWindow-objektet också händelser för relaterade ändringar av fönstrets storlek och position. Fönstret skickar inga varningshändelser för de här relaterade ändringarna. De relaterade händelserna är:

    1. En move -händelse skickas om fönstrets övre, vänstra hörn flyttas på grund av maximeringsåtgärden.

    2. En resize -händelse skickas om fönstrets storlek ändras på grund av maximeringsåtgärden.

    Ett NativeWindow-objekt skickar en liknande händelsesekvens när ett fönster minimeras, återställs, stängs, flyttas eller storleksändras.

    Varningshändelserna skickas endast när en ändring initieras via fönsterstandardelement eller andra operativsystemsstyrda mekanismer. När du anropar en Window-metod för att ändra fönstrets storlek, position eller visningstillstånd skickar fönstret endast en händelse för att meddela ändringen. Om du vill kan du skicka en varningshändelse med Window-metoden dispatchEvent() och sedan kontrollera om varningshändelsen har avbrutits innan du fortsätter med ändringen.

    Detaljerad information om klasserna, metoderna, egenskaperna och händelserna i fönster-API:t finns i Referenshandbok för ActionScript 3.0 i Adobe Flash-plattformen .

Egenskaper som styr stil och funktion för inbyggda fönster

Följande egenskaper styr grundläggande utseende och funktioner för ett fönster:

  • type

  • systemChrome

  • transparent

  • owner

När du skapar ett fönster anger du de här egenskaperna i NativeWindowInitOptions-objektet som skickas till fönsterkonstruktorn. Egenskaperna för det inledande programfönstret läses från programbeskrivningen. (Förutom egenskapen type , som inte kan anges i programbeskrivningen och därför alltid anges till normal .) Egenskaperna kan inte ändras efter att fönstret har skapats.

En del inställningar för de här egenskaperna utesluter varandra: systemChrome kan inte anges till standard när antingen transparent är true eller type är lightweight .

Fönstertyper

Fönstertyperna i AIR kombinerar attribut för fönsterstandard och synlighet i det underliggande operativsystemet för att skapa tre olika funktionstyper för fönster. Använd de konstanter som finns definierade i klassen NativeWindowType för att referera till typnamnen i koden. AIR innehåller följande fönstertyper:

Typ

Beskrivning

Normal

Ett standardfönster. Normala fönster använder fönsterstandard i fullstorleksstil och visas i Aktivitetsfältet i Windows och på Mac OS X-fönstermenyn.

Verktyg

En verktygspalett. Verktygsfönster använder en tunnare version av systemfönsterstandarden och visas inte i Aktivitetsfältet i Windows eller på Mac OS X-fönstermenyn.

Enkel

Enkla fönster har inga fönsterstandardelement och visas inte i Aktivitetsfältet i Windows eller på Mac OS X-fönstermenyn. Dessutom innehåller enkla fönster inte System-menyn (Alt+Blanksteg) i Windows. Enkla fönster är lämpliga för meddelanderutor och kontroller som kombinationsrutor som öppnas en kort tid i visningsområdet. När type är lightweight måste systemChrome anges till none .

Fönsterstandard

Fönsterstandard är den uppsättning kontroller som gör att användarna kan ändra ett fönster i skrivbordsmiljön. Fönsterstandardelementen inkluderar namnlisten, knapparna i namnlisten, kanten och handtagen för att ändra storlek.

Systemfönsterstandard

Du kan ange egenskapen systemChrome till standard eller none . Välj fönsterstandarden standard om du vill att fönstret ska få en uppsättning standardkontroller som skapas och formges av användarens operativsystem. Välj none om du vill ange en egen fönsterstandard för fönstret. Använd de konstanter som finns definierade i klassen NativeWindowSystemChrome för att referera till inställningarna för systemfönsterstandard i koden.

Systemfönsterstandarden hanteras av systemet. Programmet har ingen direkt åtkomst till själva kontrollerna, men kan reagera på händelser som skickas när kontrollerna används. När du använder fönsterstandarden standard för ett fönster måste egenskapen transparent anges till false och egenskapen type måste vara normal eller utility .

Flex-fönsterstandard

När du använder Flex-komponenterna WindowedApplication eller Window kan fönstret antingen använda systemfönsterstandard eller fönsterstandard från Flex Framework. Om du vill använda Flex-fönsterstandard anger du egenskapen systemChrome som används för att skapa fönstret till none . Om du använder Flex 4 spark-komponenter i stället för mx-komponenter måste du ange skalklass för att kunna använda Flex-fönsterstandard. Du kan använda de inbyggda skalen eller skapa egna skal. I följande exempel visas hur du använder det inbyggda spark-skalklassen WindowedApplication för fönsterstandard: 

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

Mer information finns i Using Flex 4: About the AIR window containers: Controlling window chrome

Anpassad fönsterstandard

När du skapar ett fönster utan systemfönsterstandard måste du lägga till egna fönsterstandardkontroller som hanterar interaktionen mellan användaren och fönstret. Du kan också skapa genomskinliga, icke-rektangulära fönster.

Om du vill använda anpassad fönsterstandard med mx:WindowedApplication eller mx:Window components, måste du ange showFlexChrome -formatet till false . Annars används den inbyggda fönsterstandarden i Flex.

Fönstergenomskinlighet

Om du vill tillåta alfablandning för ett fönster med skrivbordet eller andra fönster anger du egenskapen transparent för fönstret till true . Egenskapen transparent måste anges innan fönstret skapas och kan inte ändras.

Ett genomskinligt fönster har ingen standardbakgrund. Alla fönsterområden som inte innehåller något objekt som har ritats av programmet är osynliga. Om ett visat objekt har en alfainställning som är lägre än ett är objektet genomskinligt och allt under objektet syns, till exempel andra fönster, skrivbordet och andra visningsobjekt i samma fönster.

Genomskinliga fönster är användbara när du vill skapa program med kanter som har oregelbunden form eller som ”tonar ut” eller verkar vara osynliga. Tänk på att det kan ta lång tid att återge stora alfablandade områden och använd effekten med måtta.

Viktigt! I Linux skickas inte mushändelser genom helt genomskinliga pixlar. Undvik att skapa fönster med stora, helt genomskinliga områden eftersom de blockerar användarens åtkomst till andra fönster och objekt på datorn. På Mac OS X och Windows skickas mushändelser genom helt genomskinliga pixlar.

Det går inte att använda genomskinlighet med fönster som använder systemfönsterstandard. Dessutom kan inte SWF- och PDF-innehåll i HTML visas i genomskinliga fönster. Mer information finns i Att tänka på vid inläsning av SWF- eller PDF-innehåll i en HTML-sida .

Den statiska egenskapen NativeWindow.supportsTransparency meddelar huruvida fönstergenomskinlighet är tillgängligt. När genomskinlighet inte stöds visas programmet mot en svart bakgrund. I de fallen visas genomskinliga områden av programmet som ogenomskinliga och svarta. Det är lämpligt att ha en reservlösning om egenskapens test blir false . Du kan till exempel visa en varningsdialogruta för användaren eller visa ett rektangulärt, ogenomskinligt reservgränssnitt.

Observera att genomskinlighet alltid stöds i operativsystemen Mac och Windows. I Linux-operativsystem krävs en compositing-fönsterhanterare, men även om en sådan är aktiv kanske genomskinlighet inte stöds på grund av användardefinierade visningsalternativ eller maskinvarukonfigurationen.

Genomskinlighet i ett MXML-programfönster

Som standard är bakgrunden i ett MXML-fönster ogenomskinlig, även om du skapar fönstret som transparent . (Notera genomskinlighetseffekten i fönstrets hörn.) Om du vill visa en genomskinlig bakgrund för fönstret anger du en bakgrundsfärg och ett alfavärde i formatmallen eller <mx:Style>-elementet i programmets MXML-fil. Exempelvis ger följande formatdeklaration bakgrunden en något genomskinlig grön ton: 

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

Genomskinlighet i ett HTML-programfönster

Som standard är bakgrunden för HTML-innehåll som visas i HTML-fönster och HTMLLoader-objekt ogenomskinlig, även om innehållsfönstret är genomskinligt. Om du vill inaktivera den standardbakgrund som visas för HTML-innehåll anger du egenskapen paintsDefaultBackground till false . I följande exempel skapas ett HTMLLoader-objekt och standardbakgrunden inaktiveras: 

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

I det här exemplet används JavaScript för att inaktivera standardbakgrunden i ett HTML-fönster: 

window.htmlLoader.paintsDefaultBackground = false;

Om ett element i HTML-dokumentet anger en bakgrundsfärg är bakgrunden för det elementet inte genomskinlig. Det går inte att ange ett värde för delvis genomskinlighet (eller ogenomskinlighet). Du kan däremot använda en genomskinlig grafik i PNG-format som bakgrund för en sida eller ett sidelement och uppnå en liknande visuell effekt.

Fönsterägarskap

Ett fönster kan äga ett eller flera andra fönster. Dessa ägda fönster visas alltid framför huvudfönstret, minimeras och återställs tillsammans med huvudfönstret och stängs när huvudfönstret stängs. Fönsterägarskap kan inte överföras till ett annat fönster eller tas bort. Ett fönster kan bara ägas av ett huvudfönster, men kan i sin tur äga flera andra fönster.

Du kan använda fönsterägarskap för att underlätta hanteringen av fönster som används för verktygspaletter och dialogrutor. Om du till exempel visar en Spara-dialogruta som är kopplad till ett dokumentfönster kan du låta dokumentfönstret äga dialogrutan så att dialogrutan automatiskt visas framför dokumentfönstret.

En visuell fönsterkatalog

Följande tabell visar vilka visuella effekter som olika kombinationer av fönsteregenskaper får på operativsystemen Mac OS X, Windows och Linux:

Fönsterinställningar

Mac OS X

Microsoft Windows

Linux *

type: normal

systemChrome: standard

transparent: false

type: utility

systemChrome: standard

transparent: false

type: Valfritt

systemChrome: none

transparent: false

type: Valfritt

systemChrome: none

transparent: true

mxWindowedApplication eller mx:Window

type: Valfritt

systemChrome: none

transparent: true

* Ubuntu med Compiz-fönsterhanteraren

Obs! Följande element från systemfönsterstandarden stöds inte i AIR: verktygsfältet i Mac OS X, proxyikonen i OS X, namnlistikonerna i Windows och alternativ systemfönsterstandard.