• Choose a category
• All
• Classic-Fiction

By Root 2524 0

the web control as provided by the native system that may vary slightly from one device to another. There is currently very little interaction between AIR and the HTML content.

StageWebView is not a display object, and is therefore not adding to the displayList. Create a StageWebView object and set its stage property to attach it directly to the stage. It always lies on top of your content, so if you want other objects to occupy the same view area, you must remove it first:

import flash.media.StageWebView;

var webView:StageWebView = new StageWebView();

webView.stage = this.stage;

The size of the area dedicated to web content is defined in the viewPort property as a rectangle. Here it covers the stage width and 75% of the stage height:

import flash.geom.Rectangle;

var verticalBounds:int = stage.stageHeight*0.75;

webView.viewPort = new Rectangle(0, 0, stage.stageWidth, verticalBounds);

To load content, call the loadURL method and pass the URL of the site. Add a listener so that in case an error occurs you can notify your user. Location is the event property for the site to load:

import flash.events.ErrorEvent;

webView.addEventListener(ErrorEvent.ERROR, onError);

webView.loadURL("http://www.npr.org");

function onError(event:ErrorEvent):void {

trace("not able to reach location: ", event.location);

}

Once the website is loaded, you should see it inside your application. It displays and responds as expected.

WARNING

At the time of this writing, there is a bug when displaying websites with Flash content. Although the content renders and behaves as expected, it is not positioned within the dimensions of the viewport. It bleeds out of the rectangle.

There are several events you can register to monitor activity and collect information.

You can register for the LocationChangeEvent.LOCATION_CHANGE event that is fired after a location has been reached:

import flash.events.LocationChangeEvent;

var webView:StageWebView = new StageWebView();

webView.stage = this.stage;

webView.addEventListener(LocationChangeEvent.LOCATION_CHANGE, onChange);

webView.loadURL("http://www.npr.org");

function onChange(event:LocationChangeEvent):void {

trace("you are now at: ", event.location);

var verticalBounds:int = stage.stageHeight*0.75;

webView.viewPort = new Rectangle(0, 0, stage.stageWidth, verticalBounds);

}

To avoid displaying an empty screen while loading, only display the view when its content is fully loaded and complete by listening to Event.COMPLETE.

You can register for the LocationChangeEvent.LOCATION_CHANGING event that is fired just before a new web location is requested. You can use this event in three different scenarios. You can prevent navigating to the new location by calling the preventDefault function. Most importantly, you need to catch the event to prevent it from opening the native browser and leaving your application. Force the new location to load into StageWebView and its viewPort area:

webView.addEventListener(LocationChanged.LOCATION_CHANGING, onChanging);

// prevent going to a new location

function onChanging(event:LocationChanged):void {

event.preventDefault();

trace("sorry, you cannot go to: ", event.location);

}

// load new location in the StageWebView

function onChanging(event:LocationChanged):void {

event.preventDefault();

webView.load(event.location);

}

If your application needs to know when StageWebView is in focus, register for the FOCUS_IN and FOCUS_OUT events. These events get dispatched when clicking inside or outside the rectangle area:

import flash.events.FocusEvent;

webView.addEventListener(FocusEvent.FOCUS_IN, inFocus);

webView.addEventListener(FocusEvent.FOCUS_OUT, outFocus);

function inFocus(event:FocusEvent):void {

trace("on webview now");

}

function outFocus(event:FocusEvent):void {

trace("off webview now");

}

You can force focus when first launching your application:

webView.assignFocus();

StageWebView has methods that mirror the functionality of a traditional browser toolbar. In fact, you could re-create a navigation user interface