Air - HTML Rendern

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

PLAIN TEXT
Actionscript:

  1. import flash.html.*;
  2. import flash.events.*;
  3.  
  4.  
  5. // neuer HTMLLoader
  6. var myWebsite:HTMLLoader = new HTMLLoader();
  7.  
  8.  
  9. /*
  10. * Funktion zum Laden einer URL
  11. */
  12.  
  13. function openURL(target:String) {
  14.  
  15.     // neuer request
  16.     var request:URLRequest = new URLRequest(target);
  17.    
  18.     // laden
  19.     myWebsite.load(request);
  20.    
  21. }
  22.  
  23.  
  24. // Startseite laden
  25. openURL("http://www.video-flash.de");
  26.  
  27. // Größe und Position festlegen
  28. myWebsite.width = 900;
  29. myWebsite.height = 480;
  30. myWebsite.x = 10;
  31. myWebsite.y = 150;
  32.  
  33.  
  34. // event listener
  35. myWebsite.addEventListener(Event.COMPLETE, onComplete);
  36. myWebsite.addEventListener(Event.HTML_RENDER, onRender);
  37.  
  38. /*
  39. * wenn HTMLLoader fertig initialisiert ist
  40. */
  41.  
  42. function onComplete(evt:Event) {
  43.    
  44.     // der Bühne hinzufügen
  45.     this.addChild(myWebsite);
  46.    
  47.     // Preloader ausblenden
  48.     preloader.visible = false;
  49.    
  50. }
  51.  
  52. /*
  53. * wenn HTML-Seite gerendert ist
  54. */
  55.  
  56. function onRender(evt:Event):void {
  57.    
  58.     // Title anzeigen
  59.     myTitle.text = myWebsite.window.document.title;
  60.    
  61.     // URL anzeigen
  62.     myURLInput.text = myWebsite.location;
  63. }
  64.  
  65.  
  66.  
  67.  
  68. /*
  69. * Seite zurückblättern
  70. */
  71.  
  72. historyBackBut.addEventListener(MouseEvent.CLICK, historyBackBut_CLICK);
  73.  
  74. function historyBackBut_CLICK(e:MouseEvent):void {
  75.     myWebsite.historyBack();
  76. }
  77.  
  78. /*
  79. * Seite vorblättern
  80. */
  81.  
  82. historyForwardBut.addEventListener(MouseEvent.CLICK, historyForwardBut_CLICK);
  83.  
  84. function historyForwardBut_CLICK(e:MouseEvent):void {
  85.     myWebsite.historyForward();
  86. }
  87.  
  88. /*
  89. * Home button
  90. */
  91.  
  92. homeButton.addEventListener(MouseEvent.CLICK, homeButton_CLICK);
  93.  
  94. function homeButton_CLICK(e:MouseEvent):void {
  95.     openURL("http://www.video-flash.de");
  96. }
  97.  
  98. /*
  99. * open button
  100. */
  101.  
  102. openButton.addEventListener(MouseEvent.CLICK, openButton_CLICK);
  103.  
  104. function openButton_CLICK(e:MouseEvent):void{
  105.     openURL(myURLInput.text);
  106. }
  107.  
  108.  
  109. /*
  110. * Scroll down button
  111. */
  112.  
  113.  
  114.  
  115. downBut.addEventListener(MouseEvent.CLICK, downBut_CLICK);
  116.  
  117. function downBut_CLICK(e:MouseEvent):void {
  118.     myWebsite.scrollV += 15;
  119. }
  120.  
  121.  
  122. /*
  123. * Scroll up button
  124. */
  125.  
  126.  
  127. upBut.addEventListener(MouseEvent.CLICK, upBut_CLICK);
  128.  
  129. function upBut_CLICK(e:MouseEvent):void {
  130.     myWebsite.scrollV -= 15;
  131. }

Link: Quelldatei (.fla)