Gebruikersinterfaces van het type browser definiëren voor HTML-inhoud

Adobe AIR 1.0 of hoger

JavaScript biedt meerdere API's waarmee u bepaalt in welk venster de HTML-inhoud wordt weergegeven. In AIR kunnen deze API's worden overschreven door de implementatie van een aangapaste HTMLHost-klasse.

Informatie over het uitbreiden van de klasse HTMLHost

Als uw toepassing bijvoorbeeld meerdere HTMLLoader-objecten in een venster met tabbladen weergeeft, kunt u zorgen dat titelwijzigingen door de geladen HTML-pagina's worden doorgevoerd in het label van het tabblad, en niet in de titel van het hoofdvenster. Zo kan uw code bijvoorbeeld op een oproep window.moveTo() reageren door het HTMLLoader-object in de hoofdweergaveobjectcontainer opnieuw te positioneren door het venster met het HTMLLoader-object te verplaatsen, door niets te doen of door iets helemaal anders te doen.

De AIR-klasse HTMLHost regelt de volgende JavaScript-eigenschappen en -methoden:

  • window.status

  • window.document.title

  • window.location

  • window.blur()

  • window.close()

  • window.focus()

  • window.moveBy()

  • window.moveTo()

  • window.open()

  • window.resizeBy()

  • window.resizeTo()

Wanneer u een HTMLLoader-object met behulp van new HTMLLoader() maakt, zijn de weergegeven JavaScript-eigenschappen of -methoden niet ingeschakeld. De klasse HTMLHost biedt een standaardimplementatie van deze JavaScript-API's in de vorm van een browser. U kunt ook de klasse HTMLHost uitbreiden om het gedrag aan te passen. Als u een HTMLHost-object wilt maken dat het standaardgedrag ondersteunt, stelt u de parameter defaultBehaviors in op 'true' in de HTMLHost-constructor:

var defaultHost:HTMLHost = new HTMLHost(true);

Als u in AIR een HTML-venster maakt via de methode createRootWindow() van de klasse HTMLLoader, wordt automatisch een HTMLHost-instantie toegewezen die de standaardgedragingen ondersteunt. U kunt het gedrag van het hostobject wijzigen door een andere HTMLHost-implementatie toe te wijzen aan de eigenschap htmlHost van de HTMLLoader, of u kunt null instellen om de voorzieningen volledig uit te schakelen.

Opmerking: AIR wijst een standaard HTMLHost-object toe aan het beginvenster dat voor een op HTML gebaseerde AIR-toepassing is gemaakt, evenals aan alle vensters die zijn gemaakt via de standaardimplementatie van de JavaScript-methode window.open().

Voorbeeld: de klasse HTMLHost uitbreiden

In het volgende voorbeeld ziet u hoe u door het uitbreiden van de klasse HTMLHost de manier wijzigt waarop een HTMLLoader-object de gebruikersinterface beïnvloedt:

Flex-voorbeeld:

  1. Maak een klasse die de klasse HTMLHost uitbreidt (een subklasse).

  2. Hef methoden van de nieuwe klasse op om wijzigingen in de instellingen van de gebruikersinterface te verwerken. De volgende klasse, CustomHost, definieert bijvoorbeeld gedragingen voor oproepen van window.open() en wijzigingen in window.document.title. Oproepen van window.open() openen de HTML-pagina in een nieuw venster en wijzigingen in window.document.title (zoals de instelling van het element <title> van een HTML-pagina) stellen de titel van het desbetreffende venster in.

    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. Maak in de code die de HTMLLoader bevat (niet de code van de nieuwe subklasse van HTMLHost), een object uit de nieuwe klasse. Wijs het nieuwe object toe aan de eigenschap htmlHost van het HTMLLoader-object. De volgende Flex-code gebruikt de klasse CustomHost die u in de vorige stap hebt gedefinieerd:

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

Voor het testen van deze code neemt u een HTML-bestand met de volgende inhoud op in de toepassingsmap:

<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-voorbeeld:

  1. Maak een Flash-bestand voor AIR. Stel de documentklasse in op CustomHostExample en sla het bestand op als CustomHostExample.fla.

  2. Maak een ActionScript-bestand met de naam CustomHost.as en zorg dat het een klasse bevat die de klasse HTMLHost uitbreidt (een subklasse). Deze klasse negeert bepaalde methoden van de nieuwe klasse om wijzigingen in de instellingen van de gebruikersinterface te verwerken. De volgende klasse, CustomHost, definieert bijvoorbeeld gedragingen voor oproepen van window.open() en wijzigingen in window.document.title. Oproepen van de methode window.open() openen de HTML-pagina in een nieuw venster en wijzigingen in de eigenschap window.document.title (zoals de instelling van het element <title> van een HTML-pagina) stellen de titel van het desbetreffende venster in.

    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. Maak een ander ActionScript-bestand met de naam CustomHostExample.as en zorg dat het de documentklasse voor de toepassing bevat. Deze klasse maakt een HTMLLoader-object en stelt de hosteigenschap van het object in op een instantie van de klasse CustomHost die u in de vorige stap hebt gedefinieerd:

    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; 
        } 
    } 
}

    Voor het testen van deze code neemt u een HTML-bestand met de volgende inhoud op in de toepassingsmap:

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

Wijzigingen in de eigenschap window.location verwerken

Hef de methode locationChange() op om wijzigingen in de URL van de HTML-pagina te verwerken. De methode locationChange() wordt opgeroepen wanneer JavaScript in een pagina de waarde van window.location wijzigt. In het volgende voorbeeld wordt gewoon de gevraagde URL geladen:

override public function updateLocation(locationURL:String):void 
{ 
    htmlLoader.load(new URLRequest(locationURL)); 
}
Opmerking: U kunt de eigenschap htmlLoader van het HTMLHost-object gebruiken om naar het huidige HTMLLoader-object te verwijzen.

JavaScript-oproepen van window.moveBy(), window.moveTo(), window.resizeTo() of window.resizeBy() afhandelen

Hef de methode set windowRect() op om wijzigingen in de grenzen van de HTML-inhoud af te handelen. De methode set windowRect() wordt opgeroepen wanneer JavaScript in een pagina window.moveBy(), window.moveTo(), window.resizeTo() of window.resizeBy() oproept. In het volgende voorbeeld worden gewoon de grenzen van het bureaubladvenster bijgewerkt:

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

JavaScript-oproepen van window.open() afhandelen

Hef de methode createWindow() op om JavaScript-oproepen van window.open() af te handelen. Implementaties van de methode createWindow() zijn verantwoordelijk voor het maken en retourneren van een nieuw HTMLLoader-object. U geeft de HTMLLoader doorgaans in een nieuw venster weer maar het is niet nodig om een venster te maken.

In het volgende voorbeeld ziet u hoe u de functie createWindow() implementeert met behulp van HTMLLoader.createRootWindow() om zowel het venster als het HTMLLoader-object te maken. U kunt ook afzonderlijk een NativeWindow-object maken en het HTMLLoader-object toevoegen aan de vensterfase.

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; 
}
Opmerking: In dit voorbeeld wordt de aangepaste HTMLHost-implementatie toegewezen aan eventuele nieuwe vensters die met window.open() zijn gemaakt. U kunt desgewenst ook een andere implementatie gebruiken of de eigenschap htmlHost op 'null' instellen voor nieuwe vensters.

Het object dat als parameter wordt doorgegeven aan de methode createWindow() is een HTMLWindowCreateOptions-object. De klasse HTMLWindowCreateOptions bevat eigenschappen die de waarden rapporteren die zijn ingesteld in de parametertekenreeks features voor het oproepen van window.open():

HTMLWindowCreateOptions-eigenschap

Overeenkomstige instelling in de functietekenreeks in de JavaScript-oproep van window.open()

fullscreen

fullscreen

height

height

locationBarVisible

location

menuBarVisible

menubar

resizeable

resizable

scrollBarsVisible

scrollbars

statusBarVisible

status

toolBarVisible

toolbar

width

width

x

left of screenX

y

top of screenY

De klasse HTMLLoader implementeert niet alle functies die in de functietekenreeks kunnen worden opgegeven. Uw toepassing moet wanneer nodig schuif-, locatie-, menu-, status- en werkbalken definiëren.

De overige argumenten voor de methode JavaScript window.open() worden door het systeem verwerkt. Een implementatie van createWindow() laadt normaliter geen inhoud in het HTMLLoader-object en stelt de venstertitel niet in.

JavaScript-oproepen van window.close() afhandelen

Hef windowClose() op om JavaScript-oproepen van de methode window.close() af te handelen. In het volgende voorbeeld wordt het bureaubladvenster gesloten wanneer de methode window.close() wordt opgeroepen:

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

JavaScript-oproepen van window.close() hoeven het inhoudsvenster niet te sluiten. U kunt bijvoorbeeld het HTMLLoader-object uit de weergavelijst verwijderen zonder het venster (dat nog andere inhoud kan bevatten) te sluiten. Dit wordt geïllustreerd door de volgende code:

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

Wijzigingen in de eigenschap window.status verwerken

Hef de methode updateStatus() op om JavaScript-wijzigingen in de waarde van window.status te verwerken. In het volgende voorbeeld wordt de statuswaarde getraceerd:

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

De gevraagde status wordt als een tekenreeks verzonden naar de methode updateStatus().

Het HTMLLoader-object zorgt niet voor een statusbalk.

Wijzigingen in de eigenschap window.document.title verwerken

Hef de methode updateTitle() op om JavaScript-wijzigingen in de waarde van window.document.title te verwerken. In het volgende voorbeeld wordt de venstertitel gewijzigd en de tekenreeks "Sample," toegevoegd aan de titel:

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

Als document.title is ingesteld op een HTML-pagina, wordt de gevraagde titel als een tekenreeks verzonden naar de methode updateTitle().

Wijzigingen in document.title hoeven de titel van het venster met het HTMLLoader-object niet te wijzigen. U kunt bijvoorbeeld een ander interface-element wijzigen, zoals een tekstveld.

JavaScript-oproepen van window.blur() en window.focus() afhandelen

Hef de methoden windowBlur() en windowFocus() op om JavaScript-oproepen van window.blur() en window.focus() af te handelen, zoals in het volgende voorbeeld wordt geïllustreerd:

override public function windowBlur():void 
{ 
    htmlLoader.alpha = 0.5; 
} 
override public function windowFocus():void 
{ 
    htmlLoader.alpha = 1.0; 
    NativeApplication.nativeApplication.activate(htmlLoader.stage.nativeWindow); 
}
Opmerking: AIR biedt geen API voor het uitschakelen van een venster of toepassing.

Vensters met schuivende HTML-inhoud maken

De klasse HTMLLoader bevat de statische methode HTMLLoader.createRootWindow(), waarmee u een nieuw venster (vertegenwoordigd door een NativeWindow-object) kunt openen dat een HTMLLoader-object bevat en waarmee u bepaalde gebruikersinterface-instellingen voor het desbetreffende venster kunt definiëren. De methode vereist het instellen van vier parameters, waarmee u de gebruikersinterface kunt definiëren:

Parameter

Beschrijving

visible

Een Booleaanse waarde die bepaalt of het venster in eerste instantie zichtbaar is (true) of niet (false).

windowInitOptions

Een NativeWindowInitOptions-object. De klasse NativeWindowInitOptions definieert initialisatieopties voor een NativeWindow-object, zoals de volgende opties: of het venster kan worden geminimaliseerd/gemaximaliseerd of vergroot/verkleind, of het venster de systeeminterface of een aangepaste interface gebruikt, of het venster transparant is (bij vensters die niet de systeeminterface gebruiken), en het type van het venster.

scrollBarsVisible

Bepaalt of er schuifbalken zijn (true) of niet (false).

bounds

Een Rectangle-object dat de positie en afmetingen van het nieuwe venster definieert.

In de volgende code wordt bijvoorbeeld de methode HTMLLoader.createRootWindow() gebruikt om een venster te maken dat schuifbalken gebruikt en HTMLLoader-inhoud bevat:

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();
Opmerking: Vensters die zijn gemaakt door het rechtstreeks in JavaScript oproepen van createRootWindow(), blijven onafhankelijk van het HTML-venster dat wordt geopend. De JavaScript-venstereigenschappen opener en parent bijvoorbeeld staan op null. Als u createRootWindow() echter onrechtstreeks oproept door de HTMLHost-methode createWindow() op te heffen om createRootWindow() op te roepen, verwijzen opener en parent naar het HTML-venster dat wordt geopend.