Definiera webbläsarliknande användargränssnitt för HTML-innehåll

Adobe AIR 1.0 och senare

JavaScript innehåller flera API:er för att kontrollera det fönster som visar HTML-innehållet. I AIR kan dessa API:er skrivas över genom att implementera en anpassad HTMLHost-klass.

Om att utöka klassen HTMLHost

Om ditt program till exempel visar flera HTMLLoader-objekt i ett flikgränssnitt, kan du önska att titeländringar som görs av de inlästa HTML-sidorna ska ändra flikens titel, och inte huvudfönstrets titel. På samma sätt skulle koden kunna svara på ett window.moveTo()-anrop genom att placera om HTMLLoader-objektet i dess överordnade visningsobjektbehållare, genom att flytta fönstret som innehåller HTMLLoader-objektet, genom att inte göra något eller genom att göra något helt annat.

Klassen HTMLHost i AIR används för att kontrollera följande JavaScript-egenskaper och -metoder:

  • window.status

  • window.document.title

  • window.location

  • window.blur()

  • window.close()

  • window.focus()

  • window.moveBy()

  • window.moveTo()

  • window.open()

  • window.resizeBy()

  • window.resizeTo()

När du skapar ett HTMLLoader-objekt med new HTMLLoader(), aktiveras inte de listade JavaScript-egenskaperna och -modellerna. Klassen HTMLHost innehåller en webbläsarliknande standardimplementering av dessa JavaScript API:er. Du kan också utöka klassen HTMLHost för att anpassa beteendet. Skapa ett HTMLHost-objekt som stöder standardbeteendet genom att ställa parametern defaultBehaviors till true i HTMLHost-konstruktorn.

var defaultHost:HTMLHost = new HTMLHost(true);

När du skapar ett HTML-fönster i AIR med metoden createRootWindow() från klassen HTMLLoader, tilldelas automatiskt en HTMLHost-instans som stöder standardbeteendena. Du kan ändra host-objektets beteende genom att tilldela en annan HTMLHost-implementering till egenskapen htmlHost i HTMLLoader, eller tilldela null för att inaktivera funktionerna helt.

Obs! I AIR tilldelas ett standard-HTMLHost-objekt till det ursprungliga fönstret som skapades för ett HTML-baserat AIR-program, samt till alla fönster som skapas av standardimplementeringen av JavaScript-metoden window.open().

Exempel: Utöka klassen HTMLHost

Följande exempel visar hur du ska anpassa det sätt som ett HTMLLoader-objekt påverkar användargränssnittet genom att utöka klassen HTMLHost:

Flex-exempel:

  1. Skapa en klass som utökar klassen HTMLHost (en underklass).

  2. Åsidosättningsmetoder i den nya klassen för att hantera ändringar i de användargränssnittsrelaterade inställningarna. Till exempel definierar följande klass, CustomHost, beteenden för anrop av window.open() och ändringar av window.document.title. Anrop av window.open() öppnar HTML-sidan i ett nytt fönster. Ändringar av window.document.title (inklusive inställning av elementet <title> i en HTML-sida) ställer in titeln för det fönstret.

    package 
{ 
    import flash.html.*; 
    import flash.display.StageScaleMode; 
    import flash.display.NativeWindow; 
    import flash.display.NativeWindowInitOptions; 
 
    public class CustomHost extends HTMLHost 
    { 
        import flash.html.*; 
        override public function 
            createWindow(windowCreateOptions:HTMLWindowCreateOptions):HTMLLoader 
        { 
            var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions(); 
            var bounds:Rectangle = new Rectangle(windowCreateOptions.x, 
                                            windowCreateOptions.y, 
                                            windowCreateOptions.width, 
                                            windowCreateOptions.height); 
            var htmlControl:HTMLLoader = HTMLLoader.createRootWindow(true, initOptions, 
                                        windowCreateOptions.scrollBarsVisible, bounds); 
            htmlControl.htmlHost = new HTMLHostImplementation(); 
            if(windowCreateOptions.fullscreen){ 
                htmlControl.stage.displayState = 
                    StageDisplayState.FULL_SCREEN_INTERACTIVE; 
            } 
            return htmlControl; 
        } 
        override public function updateTitle(title:String):void 
        { 
            htmlLoader.stage.nativeWindow.title = title; 
        } 
    } 
}

  3. Skapa ett objekt av den nya klassen i koden som innehåller HTMLLoader-objektet (inte koden för den nya underklassen till HTMLHost). Tilldela det nya objektet till egenskapen htmlHost för HTMLLoader-objektet. Följande Flex-kod använder klassen CustomHost som definierades i det föregående steget:

    <?xml version="1.0" encoding="utf-8"?> 
<mx:WindowedApplication 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical" 
    applicationComplete="init()"> 
    <mx:Script> 
        <![CDATA[ 
            import flash.html.HTMLLoader; 
            import CustomHost; 
            private function init():void 
            { 
                var html:HTMLLoader = new HTMLLoader(); 
                html.width = container.width; 
                html.height = container.height; 
                var urlReq:URLRequest = new URLRequest("Test.html"); 
                html.htmlHost = new CustomHost(); 
                html.load(urlReq); 
                container.addChild(html); 
            } 
        ]]> 
    </mx:Script> 
    <mx:UIComponent id="container" width="100%" height="100%"/> 
</mx:WindowedApplication>

Testa den kod som beskrivs här genom att inkludera en HTML-fil med följande innehåll i programkatalogen:

<html> 
    <head> 
        <title>Test</title> 
    </head> 
    <script> 
        function openWindow() 
        { 
            window.runtime.trace("in"); 
            document.title = "foo" 
            window.open('Test.html'); 
            window.runtime.trace("out"); 
        } 
    </script> 
    <body> 
        <a href="#" onclick="openWindow()">window.open('Test.html')</a> 
    </body> 
</html>

Flash Professional-exempel:

  1. Skapa en Flash-fil för AIR. Ställ in dess dokumentklass till CustomHostExample och spara filen som CustomHostExample.fla.

  2. Skapa en ActionScript-fil med namnet CustomHost.as, som innehåller en klass som utökar klassen HTMLHost (en underklass). Klassen åsidosätter vissa metoder i den nya klassen för att hantera ändringar i de användargränssnittsrelaterade inställningarna. Till exempel definierar följande klass, CustomHost, beteenden för anrop av window.open() och ändringar av window.document.title. Anrop av metoden window.open() öppnar HTML-sidan i ett nytt fönster. Ändringar av egenskapen window.document.title (inklusive intställning av elementet <title> i en HTML-sida) ställer in titeln för det fönstret.

    package 
{ 
    import flash.display.StageScaleMode; 
    import flash.display.NativeWindow; 
    import flash.display.NativeWindowInitOptions; 
    import flash.events.Event; 
    import flash.events.NativeWindowBoundsEvent; 
    import flash.geom.Rectangle; 
    import flash.html.HTMLLoader; 
    import flash.html.HTMLHost; 
    import flash.html.HTMLWindowCreateOptions; 
    import flash.text.TextField; 
 
    public class CustomHost extends HTMLHost 
    { 
        public var statusField:TextField; 
         
        public function CustomHost(defaultBehaviors:Boolean=true) 
        { 
            super(defaultBehaviors); 
        } 
        override public function windowClose():void 
        { 
            htmlLoader.stage.nativeWindow.close(); 
        } 
        override public function createWindow( 
                                windowCreateOptions:HTMLWindowCreateOptions ):HTMLLoader 
        { 
            var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions(); 
            var bounds:Rectangle = new Rectangle(windowCreateOptions.x, 
                                            windowCreateOptions.y, 
                                            windowCreateOptions.width, 
                                            windowCreateOptions.height); 
            var htmlControl:HTMLLoader = HTMLLoader.createRootWindow(true, initOptions, 
                                        windowCreateOptions.scrollBarsVisible, bounds); 
            htmlControl.htmlHost = new HTMLHostImplementation(); 
            if(windowCreateOptions.fullscreen){ 
                htmlControl.stage.displayState = 
                    StageDisplayState.FULL_SCREEN_INTERACTIVE; 
            } 
            return htmlControl; 
        } 
        override public function updateLocation(locationURL:String):void 
        { 
            trace(locationURL); 
        } 
        override public function set windowRect(value:Rectangle):void 
        { 
            htmlLoader.stage.nativeWindow.bounds = value; 
        } 
        override public function updateStatus(status:String):void 
        { 
            statusField.text = status; 
            trace(status); 
        } 
        override public function updateTitle(title:String):void 
        { 
            htmlLoader.stage.nativeWindow.title = title + "- Example Application"; 
        } 
        override public function windowBlur():void 
        { 
            htmlLoader.alpha = 0.5; 
        } 
        override public function windowFocus():void 
        { 
            htmlLoader.alpha = 1; 
        } 
    } 
}

  3. Skapa en annan ActionScript-fil med namnet CustomHostExample.as, som innehåller dokumentklassen för programmet. Denna klass skapar ett HTMLLoader-objekt och ställer in dess host-egenskap till en instans av klassen CustomHost som definierades i det föregående steget:

    package 
{ 
    import flash.display.Sprite; 
    import flash.html.HTMLLoader; 
    import flash.net.URLRequest; 
    import flash.text.TextField; 
 
    public class CustomHostExample extends Sprite 
    { 
        function CustomHostExample():void 
        { 
            var html:HTMLLoader = new HTMLLoader(); 
            html.width = 550; 
            html.height = 380; 
            var host:CustomHost = new CustomHost(); 
            html.htmlHost = host; 
             
            var urlReq:URLRequest = new URLRequest("Test.html"); 
            html.load(urlReq); 
             
            addChild(html); 
             
            var statusTxt:TextField = new TextField(); 
            statusTxt.y = 380; 
            statusTxt.height = 20; 
            statusTxt.width = 550; 
            statusTxt.background = true; 
            statusTxt.backgroundColor = 0xEEEEEEEE; 
            addChild(statusTxt); 
             
            host.statusField = statusTxt; 
        } 
    } 
}

    Testa den kod som beskrivs här genom att inkludera en HTML-fil med följande innehåll i programkatalogen:

    <html> 
     <head> 
     <title>Test</title> 
     <script> 
     function openWindow() 
     { 
     document.title = "Test" 
     window.open('Test.html'); 
     } 
     </script> 
     </head> 
     <body bgColor="#EEEEEE"> 
     <a href="#" onclick="window.open('Test.html')">window.open('Test.html')</a> 
     <br/><a href="#" onclick="window.document.location='http://www.adobe.com'"> 
     window.document.location = 'http://www.adobe.com'</a> 
     <br/><a href="#" onclick="window.moveBy(6, 12)">moveBy(6, 12)</a> 
     <br/><a href="#" onclick="window.close()">window.close()</a> 
     <br/><a href="#" onclick="window.blur()">window.blur()</a> 
     <br/><a href="#" onclick="window.focus()">window.focus()</a> 
     <br/><a href="#" onclick="window.status = new Date().toString()">window.status=new Date().toString()</a> 
     </body> 
</html>

Hantera ändringar av egenskapen window.location

Åsidosätt metoden locationChange() för att hantera ändringar av HTML-sidans URL. Metoden locationChange() anropas när JavaScript på en sida ändrar värdet för window.location. Följande exempel läser in den begärda URL:en:

override public function updateLocation(locationURL:String):void 
{ 
    htmlLoader.load(new URLRequest(locationURL)); 
}
Obs! Du kan använda egenskapen htmlLoader i HTMLHost-objektet för att referera det aktuella HTMLLoader-objektet.

Hantera JavaScript-anrop till window.moveBy(), window.moveTo(), window.resizeTo(), window.resizeBy()

Åsidosätt metoden set windowRect() för att hantera ändringar av HTML-innehållets gränser. Metoden set windowRect() anropas när JavaScript på en sida anropar window.moveBy(), window.moveTo(), window.resizeTo() eller window.resizeBy(). Följande exempel uppdaterar gränserna för skrivbordsfönstret:

override public function set windowRect(value:Rectangle):void 
{ 
    htmlLoader.stage.nativeWindow.bounds = value; 
}

Hantera JavaScript-anrop till window.open()

Åsidosätt metoden createWindow() för att hantera JavaScript-anrop till window.open(). Implementeringar av metoden createWindow() används för att skapa och returnera ett nytt HTMLLoader-objekt. Vanligtvis visar du HTMLLoader i ett nytt fönster, men det är inte ett krav att skapa ett fönster.

Följande exempel visar hur du ska implementera funktionen createWindow() med HTMLLoader.createRootWindow() för att skapa både fönstret och HTMLLoader-objektet. Du kan också skapa ett NativeWindow-objekt separat, och lägga till HTMLLoader till fönsterscenen.

override public function createWindow(windowCreateOptions:HTMLWindowCreateOptions):HTMLLoader{ 
    var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions(); 
    var bounds:Rectangle = new Rectangle(windowCreateOptions.x, windowCreateOptions.y,  
                                windowCreateOptions.width, windowCreateOptions.height); 
    var htmlControl:HTMLLoader = HTMLLoader.createRootWindow(true, initOptions, 
                                    windowCreateOptions.scrollBarsVisible, bounds); 
    htmlControl.htmlHost = new HTMLHostImplementation(); 
    if(windowCreateOptions.fullscreen){ 
        htmlControl.stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE; 
    } 
    return htmlControl; 
}
Obs! Detta exempel tilldelar den anpassade implementeringen av HTMLHost till alla nya fönster som skapas med window.open(). Du kan också använda en annan implementering eller ställa in egenskapen htmlHost till null för nya fönster, om du så önskar.

Objektet som skickas som en parameter till createWindow()-metoden är ett HTMLWindowCreateOptions-objekt. Klassen HTMLWindowCreateOptions innehåller egenskaper som rapporterar de värden som ställs in i parametersträngen features i anropet till window.open():

Egenskapen HTMLWindowCreateOptions

Motsvarande inställning i egenskapssträngen i JavaScript-anropet till window.open()

fullscreen

fullscreen

height

height

locationBarVisible

location

menuBarVisible

menubar

resizeable

resizable

scrollBarsVisible

scrollbars

statusBarVisible

status

toolBarVisible

toolbar

width

width

x

left eller screenX

y

top eller screenY

Klassen HTMLLoader implementerar inte alla funktioner som kan specificeras i funktionssträngen. Ditt program måste tillhandahålla rullningslister, platsfält, menyfält, statusfält och verktygsfält när det är lämpligt.

Övriga argument till JavaScript-metoden window.open() hanteras av systemet. En implementering av createWindow() ska inte läsa in innehåll i HTMLLoader-objektet, eller ställa in fönstertiteln.

Hantera JavaScript-anrop till window.close()

Åsidosätt windowClose() för att hantera JavaScript-anrop till metoden window.close(). Följande exempel stänger skrivbordsfönstret när metoden window.close() anropas:

override public function windowClose():void 
{ 
    htmlLoader.stage.nativeWindow.close(); 
}

JavaScript-anrop till window.close() måste inte stänga det innehållande fönstret. Du kan till exempel ta bort HTMLLoader från visningslistan och lämna fönstret (som kan ha annat innehåll) öppet, som i följande kod:

override public function windowClose():void 
{ 
    htmlLoader.parent.removeChild(htmlLoader); 
}

Hantera ändringar av egenskapen window.property

Åsidosätt metoden updateStatus() för att hantera JavaScript-ändringar av värdet för window.status. I följande exempel skrivs statusvärdet ut:

override public function updateStatus(status:String):void 
{ 
    trace(status); 
}

Begärd status skickas som en sträng till metoden updateStatus().

HTMLLoader-objektet innehåller inte ett statusfält.

Hantera ändringar av egenskapen window.document.title

Åsidosätt metoden updateTitle() för att hantera JavaScript-ändringar av värdet för window.document.title. Följande exempel ändrar fönstertiteln och lägger till strängen ”Prov” till titeln:

override public function updateTitle(title:String):void 
{ 
    htmlLoader.stage.nativeWindow.title = title + " - Sample"; 
}

När document.title är inställt för en HTML-sida, skickas begärd titel som en sträng till metoden updateTitle().

Ändringar av document.title måste inte ändra titeln på det fönster som innehåller HTMLLoader-objektet. Du kan exempelvis ändra ett annat gränssnittselement, som till exempel ett textfält.

Hantera JavaScript-anrop av window.blur() och window.focus()

Åsidosätt metoderna windowBlur() och windowFocus() för att hantera JavaScript-anrop till metoderna window.blur() och window.focus(), som det visas i följande exempel:

override public function windowBlur():void 
{ 
    htmlLoader.alpha = 0.5; 
} 
override public function windowFocus():void 
{ 
    htmlLoader.alpha = 1.0; 
    NativeApplication.nativeApplication.activate(htmlLoader.stage.nativeWindow); 
}
Obs! AIR innehåller inte något API för att inaktivera ett fönster eller program.

Skapa fönster med rullande HTML-innehåll

Klassen HTMLLoader innehåller en statisk metod, HTMLLoader.createRootWindow(), med vilken du kan öppna ett nytt fönster (som representeras av ett NativeWindow-objekt) som innehåller ett HTMLLoader-objekt och definierar några inställningar av användargränssnitt för det fönstret. Metoden tar fyra parametrar, med vilka du kan definiera användargränssnittet:

Parameter

Beskrivning

visible

Ett booleskt värde som anger om fönstret från början är synligt (true) eller inte (false).

windowInitOptions

Ett NativeWindowInitOptions-objekt. Klassen NativeWindowInitOptions definierar initieringsalternativ för ett NativeWindow-objekt, inklusive följande: Huruvida fönstret är minimerbart, maxmimerbart eller om det går att ändra storleken, huruvida systemet har systemfärg eller anpassad färg, huruvida fönstret är genomskinligt eller ej (för fönster som inte använder systemfärg), samt typen av fönster.

scrollBarsVisible

Om det finns rullningslister (true) eller ej (false).

bounds

Ett Rectangle-objekt som definierar placering och storlek på det nya fönstret.

Följande kod använder till exempel metoden HTMLLoader.createRootWindow() för att skapa ett fönster med HTMLLoader-innehåll som använder rullningslister:

var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions(); 
var bounds:Rectangle = new Rectangle(10, 10, 600, 400); 
var html2:HTMLLoader = HTMLLoader.createRootWindow(true, initOptions, true, bounds); 
var urlReq2:URLRequest = new URLRequest("http://www.example.com"); 
html2.load(urlReq2); 
html2.stage.nativeWindow.activate();
Obs! Fönster som skapas genom att anropa createRootWindow() direkt i JavaScript, förblir oberoende av det öppnande HTML-fönstret. JavaScript-fönsteregenskaperna opener och parent är till exempel null. Om du däremot anropar createRootWindow() indirekt genom att åsidosätta HTMLHost-metoden createWindow() för att anropa createRootWindow(), refererar opener och parent till det öppnande HTML-fönstret.