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:
-
Maak een klasse die de klasse HTMLHost uitbreidt (een subklasse).
-
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;
}
}
}
-
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:
-
Maak een Flash-bestand voor AIR. Stel de documentklasse in op CustomHostExample en sla het bestand op als CustomHostExample.fla.
-
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;
}
}
}
-
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.
|
|
|