Many of today’s application blend offline and web content. Using HTMLLoader allows HTML content to be rendered in AIR desktop applications. StageWebView addresses an often required use-case, that of displaying rich HTML content in mobile AIR applications.
StageWebView is a new API that allows AIR developers to embed HTML content in their mobile applications, and to render it using the platform’s native HTML rendering engine.
To do so, you simply create a StageWebView object, set its stage property, assign a Rectangle to the viewPort property, and call the loadURL() method to load the HTML content. This can be used, for instance, to extract an OAUTH token and use it in the Flash portion of your application.
To use StageWebView you will need:
• An AIR 2.5 build with StageWebView
• To add the android.permission.INTERNET permission in the application.xml as below:
<android>
<manifestAdditions>
<![CDATA[
<manifest>
<uses-permission android:name="android.permission.INTERNET" />
</manifest>]]>
</manifestAdditions>
</android>
StageWebView is a part of the flash.media package and is currently implemented on desktop and mobile profiles. StageWebView is rendered inside a viewport, in a layer above Flash content. It can only be used by SWF content loaded in the application sandbox.
You can also use the API to:
- move back and forward in the webpage’s history
- request the title of the HTML content and display it within the Flash portion of your application
- reload the webpage
- get the URL of the current document
Feature workflow:
1. HTMLLoader as a web-browser to display web links inside the application
var webView:StageWebView = new StageWebView();
webView.stage = this.stage;
webView.viewPort = new Rectangle(0, 0, 100, 100);
webView.loadURL("http://www.google.com");
2. HTMLLoader as a simple HTML renderer: about pages, license viewer...
webView.loadURL(„path to license.html”);
3. Use authentication methods based on HTML web pages without making the user switch to the system browser: eg. Facebook
// creating fullscreen stage web view
var webView:StageWebView = new StageWebView();
webView.stage = this.stage;
webView.viewPort = new Rectangle(0, 0, stage.clientWidth, stage.clientHeight);
var openLinksInDefaultBrowser = false;
webView.addEventListener(LocationChangeEvent.LOCATION_CHANGING, function (ev:LocationChangeEvent):void
{
if(openLinksInDefaultBrowser == false) // prevent the default behavior, so that we can load the new page in the same webview
{
ev.preventDefault();
webView.loadURL(ev.location); //"ev.url" changed to "ev.location"started with prerelease build - [07/20/10]
}else
{
trace(„page loaded in default browser”);
}
});
webView.addEventListener(LocationChangeEvent.LOCATION_CHANGE, function (ev:LocationChangeEvent):void
{
if (webView.location.indexOf("authentication_complete") != -1)
{
trace("auth token is: " + webView.location.substr(webView.location.indexOf("token=") + 6));
}
trace("the new location is: " + webView.location);
});
webView.addEventListener("complete", function(ev:Event):void
{
trace("complete event”);
});
webView.addEventListener("error", function(ev:ErrorEvent):void
{
trace("error loading page: " + ev.text);
});
webView.loadURL("http://myservice.com/authenticate?token=myservicegeneratedtoken");
StageWebView enables new workflows that rely on displaying rich HTML content, such as authentication methods based on HTML web pages, display of static or dynamic HTML content, licenses or help files.