Using the StageWebView class
Modified
10 October 2011
Requirements
Prerequisite knowledge
Familiarity with ActionScript 3.
User level
Intermediate
Required products
- Flash Builder (Download trial)
- Flash Professional CS5 (Download trial)
Sample files
The StageWebView class in Adobe AIR allows you to display HTML content inside mobile Adobe AIR applications. It uses the system web control provided by the mobile phone's operating system. Hence, the available features and rendering appearance may vary from phone to phone. The StageWebView class provides only limited interaction between ActionScript and the HTML content.
In this article, you will learn the following:
- How to a create a
StageWebViewobject - How to manage browsing history
- How to handle
StageWebViewevents
Creating a StageWebView
Use the following code to create a StageWebView object. This code creates an object of the StageWebView class and attaches it directly to the stage using the stage property of the StageWebView object. Note that StageWebView is not a display object that can be attached to a Flash display list. You can control the size of the rectangle in which the HTML content in a StageWebView displayed using the viewPort method.
public var webView:StageWebView = new StageWebView();
webView.stage = this.stage;
webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight);
Assume that you want to display a web page (for example, http://www.Google.com) in the StageWebView object when you click a button. You can add a button outside the StageWebView, add an event listener to it, and then call a function to set the location. For example, the following function, when executed, loads the Google web page in the StageWebView. The loadURL() method is used to load the URL in the WebView class.
public function goGoogle(event:MouseEvent):void
{
webView.loadURL("http://www.google.com");
}
Managing browsing history
After you start browsing the web page, the visited pages are stored in the browsing history. You can use the historyBack() method to move to the previous web page stored in the browsing history, if any. For example, using a mouse event listener associated with a button, you can call the function given below. The isHistoryBackEnabled property returns true if a previous page exists in the browsing history.
public function moveBack(event:MouseEvent):void
{
if(webView.isHistoryBackEnabled)
{
webView.historyBack();
}
else
{
trace("No pages in the browsing history.")
}
}
Similarly, the historyForward method allows you to navigate to the next page in the browsing history. The webView.isHistoryForwardEnabled property returns true if there is a next page in the browsing history.
public function moveForward(event:MouseEvent):void
{
if(webView.isHistoryForwardEnabled)
{
webView.historyBack();
}
else
{
trace("No pages in the browsing history.")
}
}
Handling StageWebView events
When you work with the StageWebView object, you may want to know when a new URL is loaded. Listen for the locationChange events to react to URL changes. The following code adds an event listener to the StageWebView object. The event listener dispatches the LocationChangeEvent.LOCATION_CHANGE event when the URL is loaded.
webView.addEventListener(LocationChangeEvent.LOCATION_CHANGE,getUpdate);
public function getUpdate(event:LocationChangeEvent):void
{
trace("The location changed.");
}
The event, LocationChangeEvent.LOCATION_CHANGING , signals that the StageWebView location is about to change. You can use the preventDefault() method of the dispatched event object to prevent this default behavior. The following code dispatches LocationChangeEvent.LOCATION_CHANGING whenever the location of the StageWebView object is about to change and prevents the loading of the new URL.
webView.addEventListener(LocationChangeEvent.LOCATION_CHANGING,getUpdate);
public function getUpdate(event:LocationChangeEvent):void
{
event.preventDefault();
trace("The new URL is blocked.");
}
Where to go from here
In this article, you learned about StageWebView and the events associated with it. For more information refer to the following resources:
