|
Die
StageWebView
-Klasse zeigt HTML-Inhalt mit dem Systembrowser-Steuerelement auf Mobilgeräten und mit dem standardmäßigen Adobe® AIR® HTMLLoader-Steuerelement auf Desktopcomputern an. Überprüfen Sie anhand der
StageWebView.isSupported
-Eigenschaft, ob die Klasse auf dem jeweiligen Gerät unterstützt wird. Unterstützung ist nicht für alle Geräte im Mobilprofil garantiert.
In allen Profilen unterstützt die StageWebView-Klasse nur eingeschränkte Interaktion zwischen dem HTML-Inhalt und dem Rest der Anwendung. Sie können zwar die Navigation steuern, doch weder das Cross-Scripting noch der direkte Datenaustausch sind zulässig. Sie können Inhalt von einer lokalen URL oder einer Remote-URL laden oder einen HTML-String übergeben.
StageWebView-Objekte
Ein StageWebView-Objekt ist kein Anzeigeobjekt und kann der Anzeigeliste nicht hinzugefügt werden. Stattdessen funktioniert es als direkt an die Bühne angefügter Viewport. StageWebView-Inhalt wird über jedem Inhalt der Anzeigeliste dargestellt. Es gibt keine Möglichkeit, die Darstellungsordnung mehrerer StageWebView-Objekte zu steuern.
Zum Anzeigen eines StageWebView-Objekts weisen Sie die Bühne, auf der das Objekt angezeigt werden soll, der
stage
-Eigenschaft des StageWebView-Objekts zu. Legen Sie die Größe der Anzeige über die
viewPort
-Eigenschaft fest.
Stellen Sie die x- und y-Koordinaten der
viewPort
-Eigenschaft auf einen Wert zwischen -8192 und 8191 ein. Der maximale Wert für die Breite und Höhe der Bühne beträgt 8191. Wenn die Größe diese Höchstwerte überschreitet, wird eine Ausnahme ausgelöst.
Das folgende Beispiel erstellt ein StageWebView-Objekt, stellt die
stage
- und
viewPort
-Eigenschaften ein und zeigt einen HTML-String an:
var webView:StageWebView = new StageWebView();
webView.viewPort = new Rectangle( 0, 0, this.stage.stageWidth, this .stage.stageHeight);
webView.stage = this.stage;
var htmlString:String = "<!DOCTYPE HTML>" +
"<html><body>" +
"<p>King Philip could order five good steaks.</p>" +
"</body></html>";
webView.loadString( htmlString );
Um ein StageWebView-Objekt auszublenden, setzen Sie seine
stage
-Eigenschaft auf
null
. Um das Objekt vollständig zu entfernen, rufen Sie die
dispose()
-Methode auf. Der Aufruf von
dispose()
ist optional, doch wenn die Methode aufgerufen wird, kann die Speicherbereinigung den vom Objekt belegten Arbeitsspeicher schneller freigeben.
Inhalt
Inhalt kann mit zwei Methoden in ein StageWebView-Objekt geladen werden:
loadURL()
und
loadString()
.
Die
loadURL()
-Methode lädt eine Ressource, die sich an der angegebenen URL befindet. Sie können jedes URI-Schema verwenden, das vom Steuerelement für den Webbrowser des Systems unterstützt wird, wie beispielsweise data:, file:, http:, https: und javascript:. Die Schemas app: und app-storage: werden nicht unterstützt. Der URL-String wird von AIR nicht überprüft.
Die
loadString()
-Methode lädt einen Literalstring mit HTML-Inhalt. Der Speicherort einer mit dieser Methode geladenen Seite wird folgendermaßen ausgedrückt:
Das URI-Schema bestimmt die Regeln zum Laden von eingebetteten Inhalten oder Daten.
|
URI-Schema
|
Lokale Ressource laden
|
Remote-Ressource laden
|
XMLHttpRequest lokal
|
XMLHttpRequest remote
|
|
data:
|
Nein
|
Ja
|
Nein
|
Nein
|
|
file:
|
Ja
|
Ja
|
Ja
|
Ja
|
|
http:, https:
|
Nein
|
Ja
|
Nein
|
Selbe Domäne
|
|
about: (loadString()-Methode)
|
Nein
|
Ja
|
Nein
|
Nein
|
Hinweis:
Wenn die
displayState
-Eigenschaft der Bühne auf
FULL_SCREEN
eingestellt ist, können Sie auf einem Desktop keine Eingabe in einem Textfeld vornehmen, das im StageWebView-Objekt angezeigt wird. Dagegen können Sie unter iOS und Android auch dann Text in ein Textfeld in einem StageWebView-Objekt eingeben, wenn die
displayState
-Eigenschaft der Bühne auf
FULL_SCREEN
eingestellt ist.
Im folgenden Beispiel wird ein StageWebView-Objekt verwendet, um die Adobe-Website anzuzeigen:
package {
import flash.display.MovieClip;
import flash.media.StageWebView;
import flash.geom.Rectangle;
public class StageWebViewExample extends MovieClip{
var webView:StageWebView = new StageWebView();
public function StageWebViewExample() {
webView.stage = this.stage;
webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
webView.loadURL( "http://www.adobe.com" );
}
}
}
Auf Android-Geräten müssen Sie die INTERNET-Berechtigung für Android angeben, damit die Anwendung Remote-Ressourcen erfolgreich laden kann.
Unter Android 3.0+ müssen Anwendungen die Hardwarebeschleunigung im manifestAdditions-Element von Android des AIR-Anwendungsdeskriptors aktivieren, damit Plugin-Inhalt in einem StageWebView-Objekt angezeigt werden kann. Einzelheiten finden Sie im Abschnitt zum
Aktivieren von Flash Player und anderen Plugins in einem StageWebView-Objekt
.
JavaScript-URI
Sie können eine JavaScript-URI zum Aufrufen einer Funktion verwenden, die in der HTML-Seite definiert ist, die von einem StageWebView-Objekt geladen wird. Die Funktion, die über die JavaScript-URI aufgerufen wird, wird im Kontext der geladenen Webseite ausgeführt. Im folgenden Beispiel wird ein StageWebView-Objekt zum Aufrufen einer JavaScript-Funktion verwendet:
package {
import flash.display.*;
import flash.geom.Rectangle;
import flash.media.StageWebView;
public class WebView extends Sprite
{
public var webView:StageWebView = new StageWebView();
public function WebView()
{
var htmlString:String = "<!DOCTYPE HTML>" +
"<html><script type=text/javascript>" +
"function callURI(){" +
"alert(\"You clicked me!!\");"+
"}</script><body>" +
"<p><a href=javascript:callURI()>Click Me</a></p>" +
"</body></html>";
webView.stage = this.stage;
webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
webView.loadString( htmlString );
}
}
}
Navigationsereignisse
Wenn der Benutzer auf einen Hyperlink in der HTML-Seite klickt, löst das StageWebView-Objekt ein
locationChanging
-Ereignis aus. Sie können die
preventDefault()
-Methode des Ereignisobjekts aufrufen, um die Navigation zu stoppen. Andernfalls navigiert das StageWebView-Objekt zu der neuen Seite und löst ein
locationChange
-Ereignis aus. Nachdem die Seite vollständig geladen wurde, löst das StageWebView-Objekt ein
complete
-Ereignis aus.
Ein
locationChanging
-Ereignis wird bei jeder HTML-Umleitung ausgelöst. Die
locationChange
- und
complete
-Ereignisse werden zum entsprechenden Zeitpunkt ausgelöst.
Unter iOS wird ein
locationChanging
-Ereignis vor einem
locationChange
-Ereignis ausgelöst, mit Ausnahme der ersten
loadURL()
- oder
loadString()
-Methode. Ein
locationChange
-Ereignis wird auch für Navigationsänderungen über Frames und Inlineframes ausgelöst.
Im folgenden Beispiel wird gezeigt, wie Sie eine Positionsänderung verhindern und die neue Seite stattdessen im Systembrowser öffnen können.
package {
import flash.display.MovieClip;
import flash.media.StageWebView;
import flash.events.LocationChangeEvent;
import flash.geom.Rectangle;
import flash.net.navigateToURL;
import flash.net.URLRequest;
public class StageWebViewNavEvents extends MovieClip{
var webView:StageWebView = new StageWebView();
public function StageWebViewNavEvents() {
webView.stage = this.stage;
webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
webView.addEventListener( LocationChangeEvent.LOCATION_CHANGING, onLocationChanging );
webView.loadURL( "http://www.adobe.com" );
}
private function onLocationChanging( event:LocationChangeEvent ):void
{
event.preventDefault();
navigateToURL( new URLRequest( event.location ) );
}
}
}
Verlauf
Wenn der Benutzer auf Hyperlinks klickt, die im Inhalt eines StageWebView-Objekts angezeigt werden, speichert das Steuerelement den vorwärts und rückwärts gerichteten Verlaufsstapel. Das folgende Beispiel veranschaulicht die Navigation durch die beiden Verlaufsstapel. Im Beispiel werden die Softkeys für „Zurück“ und „Suchen“ verwendet.
package {
import flash.display.MovieClip;
import flash.media.StageWebView;
import flash.geom.Rectangle;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
public class StageWebViewExample extends MovieClip{
var webView:StageWebView = new StageWebView();
public function StageWebViewExample()
{
webView.stage = this.stage;
webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
webView.loadURL( "http://www.adobe.com" );
stage.addEventListener( KeyboardEvent.KEY_DOWN, onKey );
}
private function onKey( event:KeyboardEvent ):void
{
if( event.keyCode == Keyboard.BACK && webView.isHistoryBackEnabled )
{
trace("back");
webView.historyBack();
event.preventDefault();
}
if( event.keyCode == Keyboard.SEARCH && webView.isHistoryForwardEnabled )
{
trace("forward");
webView.historyForward();
}
}
}
}
Fokus
Die StageWebView-Klasse ist zwar kein Anzeigeobjekt, sie enthält jedoch Mitglieder, die es Ihnen ermöglichen, die Fokusübergänge in das Steuerelement und aus dem Steuerelement zu verwalten.
Wenn das StageWebView-Objekt den Fokus erhält, löst es ein
focusIn
-Ereignis aus. Mit diesem Ereignis verwalten Sie bei Bedarf die Fokuselemente in Ihrer Anwendung.
Wenn das StageWebView-Objekt den Fokus wieder abgibt, löst es ein
focusOut
-Ereignis aus. Eine StageWebView-Instanz kann den Fokus abgeben, wenn ein Benutzer mit einem Trackball oder mit Pfeiltasten vor das erste oder hinter das letzte Steuerelement auf der Webseite navigiert. Über die
direction
-Eigenschaft des Ereignisobjekts können Sie feststellen, ob der Fokusablauf nach oben über den Anfang der Seite oder nach unten über das Ende der Seite hinaus geht. Anhand dieser Informationen weisen Sie den Fokus dem entsprechenden Anzeigeobjekt oberhalb oder unterhalb des StageWebView-Objekts zu.
Unter iOS kann der Fokus nicht programmgesteuert festgelegt werden. StageWebView löst
focusIn
- und
focusOut
-Ereignisse aus, wobei die direction-Eigenschaft von
FocusEvent
auf
none
eingestellt ist. Wenn der Benutzer den Bildschirm innerhalb des StageWebView-Objekts berührt, wird das
focusIn
-Ereignis ausgelöst. Berührt der Benutzer den Bildschirm außerhalb des StageWebView-Objekts, wird das
focusOut
-Ereignis ausgelöst.
Das folgende Beispiel veranschaulicht, wie der Fokus vom StageWebView-Objekt zu Flash-Anzeigeobjekten übergeht:
package {
import flash.display.MovieClip;
import flash.media.StageWebView;
import flash.geom.Rectangle;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
import flash.text.TextField;
import flash.text.TextFieldType;
import flash.events.FocusEvent;
import flash.display.FocusDirection;
import flash.events.LocationChangeEvent;
public class StageWebViewFocusEvents extends MovieClip{
var webView:StageWebView = new StageWebView();
var topControl:TextField = new TextField();
var bottomControl:TextField = new TextField();
public function StageWebViewFocusEvents()
{
trace("Starting");
topControl.type = TextFieldType.INPUT;
addChild( topControl );
topControl.height = 60;
topControl.width = stage.stageWidth;
topControl.background = true;
topControl.text = "One control on top.";
topControl.addEventListener( FocusEvent.FOCUS_IN, flashFocusIn );
topControl.addEventListener( FocusEvent.FOCUS_OUT, flashFocusOut );
webView.stage = this.stage;
webView.viewPort = new Rectangle( 0, 60, stage.stageWidth, stage.stageHeight
- 120 );
webView.addEventListener( FocusEvent.FOCUS_IN, webFocusIn );
webView.addEventListener(FocusEvent.FOCUS_OUT, webFocusOut );
webView.addEventListener(LocationChangeEvent.LOCATION_CHANGING,
function( event:LocationChangeEvent ):void
{
event.preventDefault();
} );
webView.loadString("<form action='#'><input/><input/><input/></form>");
webView.assignFocus();
bottomControl.type = TextFieldType.INPUT;
addChild( bottomControl );
bottomControl.y = stage.stageHeight - 60;
bottomControl.height = 60;
bottomControl.width = stage.stageWidth;
bottomControl.background = true;
bottomControl.text = "One control on the bottom.";
bottomControl.addEventListener( FocusEvent.FOCUS_IN, flashFocusIn );
bottomControl.addEventListener( FocusEvent.FOCUS_OUT, flashFocusOut ); }
private function webFocusIn( event:FocusEvent ):void
{
trace("Web focus in");
}
private function webFocusOut( event:FocusEvent ):void
{
trace("Web focus out: " + event.direction);
if( event.direction == FocusDirection.TOP )
{
stage.focus = topControl;
}
else
{
stage.focus = bottomControl;
}
}
private function flashFocusIn( event:FocusEvent ):void
{
trace("Flash focus in");
var textfield:TextField = event.target as TextField;
textfield.backgroundColor = 0xff5566;
}
private function flashFocusOut( event:FocusEvent ):void
{
trace("Flash focus out");
var textfield:TextField = event.target as TextField;
textfield.backgroundColor = 0xffffff;
}
}
}
Bitmaperfassung
Ein StageWebView-Objekt wird über dem gesamten Inhalt der Anzeigeliste gerendert. Es ist nicht möglich, oberhalb eines StageWebView-Objekts weiteren Inhalt hinzuzufügen. Beispielsweise kann über dem StageWebView-Inhalt kein Dropdownmenü eingeblendet werden. Um dieses Problem zu beheben, erfassen Sie einen Schnappschuss des StageWebView-Objekts. Dann blenden Sie das StageWebView-Objekt aus und fügen stattdessen den Bitmap-Schnappschuss hinzu.
Das folgende Beispiel zeigt, wie Sie einen Schnappschuss eines StageWebView-Objekts mithilfe der
drawViewPortToBitmapData
-Methode erfassen. Das StageWebView-Objekt wird ausgeblendet, indem die Bühne auf „null“ gesetzt wird. Nachdem die Webseite vollständig geladen wurde, wird eine Funktion aufgerufen, die die Bitmap erfasst und anzeigt. Bei der Ausführung zeigt der Code zwei Beschriftungen an: Google und Facebook. Durch Klicken auf eine Beschriftung wird die entsprechende Webseite erfasst und als Schnappschuss auf der Bühne angezeigt.
package
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.events.*;
import flash.geom.Rectangle;
import flash.media.StageWebView;
import flash.net.*;
import flash.text.TextField;
public class stagewebview extends Sprite
{
public var webView:StageWebView=new StageWebView();
public var textGoogle:TextField=new TextField();
public var textFacebook:TextField=new TextField();
public function stagewebview()
{
textGoogle.htmlText="<b>Google</b>";
textGoogle.x=300;
textGoogle.y=-80;
addChild(textGoogle);
textFacebook.htmlText="<b>Facebook</b>";
textFacebook.x=0;
textFacebook.y=-80;
addChild(textFacebook);
textGoogle.addEventListener(MouseEvent.CLICK,goGoogle);
textFacebook.addEventListener(MouseEvent.CLICK,goFaceBook);
webView.stage = this.stage;
webView.viewPort = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
}
public function goGoogle(e:Event):void
{
webView.loadURL("http://www.google.com");
webView.stage = null;
webView.addEventListener(Event.COMPLETE,handleLoad);
}
public function goFaceBook(e:Event):void
{
webView.loadURL("http://www.facebook.com");
webView.stage = null;
webView.addEventListener(Event.COMPLETE,handleLoad);
}
public function handleLoad(e:Event):void
{
var bitmapData:BitmapData = new BitmapData(webView.viewPort.width, webView.viewPort.height);
webView.drawViewPortToBitmapData(bitmapData);
var webViewBitmap:Bitmap=new Bitmap(bitmapData);
addChild(webViewBitmap);
}
}
}
|
|
|
