AIR: HTML-Seiten in AIR anzeigen

Im siebten Teil zum Thema „Flash CS3 + Adobe AIR 1.0“ geht es um das Rendern und Darstellen von HTML-Seiten. Adobe AIR erlaubt es, mit der HTMLLoader-Klasse komplexe HTML-Websites innerhalb einer SWF-Datei anzuzeigen. Möglich wird dies durch die Integration des Webkits, das auch in Apples Safari Verwendung findet.

Unterstützt werden alle gängigen HTML-Tags, JavaScript (AJAX), Bilder und CSS-Dateien. Die HTML-Seiten können wiederum auch Flash enthalten. Die HTMLLoader-Klasse ist ausschließlich über AIR nutzbar, nicht mit dem Flash Player.

Das Beispiel zeigt einen kleinen „Webbrowser“. Bei Aufrufen wird die Website www.video-flash.de geöffnet. Man kann beliebig in der Website herumklicken. Über die Buttons „vor“ und „zurück“ kann entsprechend navigiert werden, was mit den beiden Methoden HTMLLoader.historyBack() und HTMLLoader.historyForward() erledigt wird (zur History gibt es zahlreiche weitere Funktionen).

Außerdem wird der Titel der HTML-Seite über einen Zugriff auf die DOM-Struktur angezeigt (HTMLLoader.window.document.title).

Die aktuelle URL ist ein HTMLLoader.location abgelegt.

Der Einfachheit wegen kann man in diesem Beispiel nur vertikal scrollen, horizontal ist natürlich ebenfalls möglich (HTMLLoader.scrollV und HTMLLoader.scrollH).

[as]
import flash.html.*;
import flash.events.*;

// neuer HTMLLoader
var myWebsite:HTMLLoader = new HTMLLoader();

/*
* Funktion zum Laden einer URL
*/

function openURL(target:String) {

// neuer request
var request:URLRequest = new URLRequest(target);

// laden
myWebsite.load(request);

}

// Startseite laden
openURL(„http://www.video-flash.de“);

// Größe und Position festlegen
myWebsite.width = 900;
myWebsite.height = 480;
myWebsite.x = 10;
myWebsite.y = 150;

// event listener
myWebsite.addEventListener(Event.COMPLETE, onComplete);
myWebsite.addEventListener(Event.HTML_RENDER, onRender);

/*
* wenn HTMLLoader fertig initialisiert ist
*/

function onComplete(evt:Event) {

// der Bühne hinzufügen
this.addChild(myWebsite);

// Preloader ausblenden
preloader.visible = false;

}

/*
* wenn HTML-Seite gerendert ist
*/

function onRender(evt:Event):void {

// Title anzeigen
myTitle.text = myWebsite.window.document.title;

// URL anzeigen
myURLInput.text = myWebsite.location;
}

/*
* Seite zurückblättern
*/

historyBackBut.addEventListener(MouseEvent.CLICK, historyBackBut_CLICK);

function historyBackBut_CLICK(e:MouseEvent):void {
myWebsite.historyBack();
}

/*
* Seite vorblättern
*/

historyForwardBut.addEventListener(MouseEvent.CLICK, historyForwardBut_CLICK);

function historyForwardBut_CLICK(e:MouseEvent):void {
myWebsite.historyForward();
}

/*
* Home button
*/

homeButton.addEventListener(MouseEvent.CLICK, homeButton_CLICK);

function homeButton_CLICK(e:MouseEvent):void {
openURL(„http://www.video-flash.de“);
}

/*
* open button
*/

openButton.addEventListener(MouseEvent.CLICK, openButton_CLICK);

function openButton_CLICK(e:MouseEvent):void{
openURL(myURLInput.text);
}

/*
* Scroll down button
*/

downBut.addEventListener(MouseEvent.CLICK, downBut_CLICK);

function downBut_CLICK(e:MouseEvent):void {
myWebsite.scrollV += 15;
}

/*
* Scroll up button
*/

upBut.addEventListener(MouseEvent.CLICK, upBut_CLICK);

function upBut_CLICK(e:MouseEvent):void {
myWebsite.scrollV -= 15;
}
[/as]

Link: Quelldatei (.fla)

[ad]