HTML Web View in Air for Android
One thing that is a really big help in AIR is the ability to display HTML content in your applications using Webkit. Within Android and mobile devices you can also take advantage of the build in web browser by using a new class provided in AIR 2.5: StageWebView.
If you are starting with this post I recommend actually starting with a previous post introducing AIR for Android Development. There is a ANT file there that you will want to have.
The StageWebView class creates an instance of the native HTML browser right in your application. From this view you can browse the web, handle authentications, or anything else you may need to do in HTML. There are even events that you can get from this StageWebView to respond to location changes and other events.
The StageWebView is a bit odd that it isn’t a normal display object that you can just drop onto the stage and be done with it. Instead you need to create a Rectangle and set the rectangle’s position on the stage. The StageWebView will be rendered in the rectangle and you can attach your listeners to the StageWebView instance.
What this looks like in code...
package
{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.LocationChangeEvent;
import flash.geom.Rectangle;
import flash.media.StageWebView;
/**
* StageWebView testing application.
*
* @author jonbcampos
*
*/
public class WebView extends Sprite
{
//---------------------------------------------------------------------
//
// Constructor
//
//---------------------------------------------------------------------
public function WebView()
{
//setup stage
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
//add handlers
addEventListener(Event.ADDED_TO_STAGE, _onAddedToStage);
}
//---------------------------------------------------------------------
//
// Private Properties
//
//---------------------------------------------------------------------
private var _stageWebView:StageWebView;
//---------------------------------------------------------------------
//
// Protected Methods
//
//---------------------------------------------------------------------
protected function createChildren():void
{
if(!_stageWebView)
{
_stageWebView = new StageWebView();
_stageWebView.viewPort = new Rectangle(12.5, 12.5, width-25, height-50);
_stageWebView.stage = stage;
_stageWebView.addEventListener(LocationChangeEvent.LOCATION_CHANGE, _onLocationChange);
_stageWebView.loadURL("http://unitedmindset.com/jonbcampos");
}
}
//---------------------------------------------------------------------
//
// Handler Methods
//
//---------------------------------------------------------------------
private function _onAddedToStage(event:Event):void
{
//removes listener
removeEventListener(Event.ADDED_TO_STAGE, _onAddedToStage);
//draws background
_draw();
//creates children
createChildren();
}
private function _onLocationChange(event:LocationChangeEvent):void
{
}
//---------------------------------------------------------------------
//
// Private Methods
//
//---------------------------------------------------------------------
private function _draw():void
{
graphics.clear();
graphics.beginFill(0x0000FF,1);
graphics.drawRect(0, 0, 480, 762);
graphics.endFill();
}
}
}
{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.LocationChangeEvent;
import flash.geom.Rectangle;
import flash.media.StageWebView;
/**
* StageWebView testing application.
*
* @author jonbcampos
*
*/
public class WebView extends Sprite
{
//---------------------------------------------------------------------
//
// Constructor
//
//---------------------------------------------------------------------
public function WebView()
{
//setup stage
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
//add handlers
addEventListener(Event.ADDED_TO_STAGE, _onAddedToStage);
}
//---------------------------------------------------------------------
//
// Private Properties
//
//---------------------------------------------------------------------
private var _stageWebView:StageWebView;
//---------------------------------------------------------------------
//
// Protected Methods
//
//---------------------------------------------------------------------
protected function createChildren():void
{
if(!_stageWebView)
{
_stageWebView = new StageWebView();
_stageWebView.viewPort = new Rectangle(12.5, 12.5, width-25, height-50);
_stageWebView.stage = stage;
_stageWebView.addEventListener(LocationChangeEvent.LOCATION_CHANGE, _onLocationChange);
_stageWebView.loadURL("http://unitedmindset.com/jonbcampos");
}
}
//---------------------------------------------------------------------
//
// Handler Methods
//
//---------------------------------------------------------------------
private function _onAddedToStage(event:Event):void
{
//removes listener
removeEventListener(Event.ADDED_TO_STAGE, _onAddedToStage);
//draws background
_draw();
//creates children
createChildren();
}
private function _onLocationChange(event:LocationChangeEvent):void
{
}
//---------------------------------------------------------------------
//
// Private Methods
//
//---------------------------------------------------------------------
private function _draw():void
{
graphics.clear();
graphics.beginFill(0x0000FF,1);
graphics.drawRect(0, 0, 480, 762);
graphics.endFill();
}
}
}
The Application Descriptor
To get access to the internet you must include the manifest permission line for internet. This looks like:
<!-- Added for Internet and debugging support -->
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.INTERNET"/>
The entire Application Descriptor
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<application xmlns="http://ns.adobe.com/air/application/2.5">
<!-- Adobe AIR Application Descriptor File Template.
Specifies parameters for identifying, installing, and launching AIR applications.
xmlns - The Adobe AIR namespace: http://ns.adobe.com/air/application/2.5
The last segment of the namespace specifies the version
of the AIR runtime required for this application to run.
minimumPatchLevel - The minimum patch level of the AIR runtime required to run
the application. Optional.
-->
<!-- A universally unique application identifier. Must be unique across all AIR applications.
Using a reverse DNS-style name as the id is recommended. (Eg. com.example.ExampleApplication.) Required. -->
<id>com.unitedmindset.WebView</id>
<!-- Used as the filename for the application. Required. -->
<filename>WebView</filename>
<!-- The name that is displayed in the AIR application installer.
May have multiple values for each language. See samples or xsd schema file. Optional. -->
<name>WebView</name>
<!-- A string value of the format <0-999>.<0-999>.<0-999> that represents application version which can be used to check for application upgrade.
Values can also be 1-part or 2-part. It is not necessary to have a 3-part value.
An updated version of application must have a versionNumber value higher than the previous version. Required for namespace >= 2.5 . -->
<versionNumber>1.0.0</versionNumber>
<!-- A string value (such as "v1", "2.5", or "Alpha 1") that represents the version of the application, as it should be shown to users. Optional. -->
<!-- <versionLabel></versionLabel> -->
<!-- Description, displayed in the AIR application installer.
May have multiple values for each language. See samples or xsd schema file. Optional. -->
<!-- <description></description> -->
<!-- Copyright information. Optional -->
<!-- <copyright></copyright> -->
<!-- Publisher ID. Used if you're updating an application created prior to 1.5.3 -->
<!-- <publisherID></publisherID> -->
<!-- Settings for the application's initial window. Required. -->
<initialWindow>
<!-- The main SWF or HTML file of the application. Required. -->
<!-- Note: In Flash Builder, the SWF reference is set automatically. -->
<content>[This value will be overwritten by Flash Builder in the output app.xml]</content>
<!-- The title of the main window. Optional. -->
<!-- <title></title> -->
<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
<!-- <systemChrome></systemChrome> -->
<!-- Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. -->
<!-- <transparent></transparent> -->
<!-- Whether the window is initially visible. Optional. Default false. -->
<visible>true</visible>
<!-- Whether the user can minimize the window. Optional. Default true. -->
<!-- <minimizable></minimizable> -->
<!-- Whether the user can maximize the window. Optional. Default true. -->
<!-- <maximizable></maximizable> -->
<!-- Whether the user can resize the window. Optional. Default true. -->
<!-- <resizable></resizable> -->
<!-- The window's initial width in pixels. Optional. -->
<width>480</width>
<!-- The window's initial height in pixels. Optional. -->
<height>762</height>
<!-- The window's initial x position. Optional. -->
<!-- <x></x> -->
<!-- The window's initial y position. Optional. -->
<!-- <y></y> -->
<!-- The window's minimum size, specified as a width/height pair in pixels, such as "400 200". Optional. -->
<!-- <minSize></minSize> -->
<!-- The window's initial maximum size, specified as a width/height pair in pixels, such as "1600 1200". Optional. -->
<!-- <maxSize></maxSize> -->
</initialWindow>
<!-- We recommend omitting the supportedProfiles element, -->
<!-- which in turn permits your application to be deployed to all -->
<!-- devices supported by AIR. If you wish to restrict deployment -->
<!-- (i.e., to only mobile devices) then add this element and list -->
<!-- only the profiles which your application does support. -->
<!-- <supportedProfiles>desktop extendedDesktop mobileDevice extendedMobileDevice</supportedProfiles> -->
<!-- The subpath of the standard default installation location to use. Optional. -->
<!-- <installFolder></installFolder> -->
<!-- The subpath of the Programs menu to use. (Ignored on operating systems without a Programs menu.) Optional. -->
<!-- <programMenuFolder></programMenuFolder> -->
<!-- The icon the system uses for the application. For at least one resolution,
specify the path to a PNG file included in the AIR package. Optional. -->
<!-- <icon>
<image16x16></image16x16>
<image32x32></image32x32>
<image36x36></image36x36>
<image48x48></image48x48>
<image72x72></image72x72>
<image128x128></image128x128>
</icon> -->
<!-- Whether the application handles the update when a user double-clicks an update version
of the AIR file (true), or the default AIR application installer handles the update (false).
Optional. Default false. -->
<!-- <customUpdateUI></customUpdateUI> -->
<!-- Whether the application can be launched when the user clicks a link in a web browser.
Optional. Default false. -->
<!-- <allowBrowserInvocation></allowBrowserInvocation> -->
<!-- Listing of file types for which the application can register. Optional. -->
<!-- <fileTypes> -->
<!-- Defines one file type. Optional. -->
<!-- <fileType> -->
<!-- The name that the system displays for the registered file type. Required. -->
<!-- <name></name> -->
<!-- The extension to register. Required. -->
<!-- <extension></extension> -->
<!-- The description of the file type. Optional. -->
<!-- <description></description> -->
<!-- The MIME content type. -->
<!-- <contentType></contentType> -->
<!-- The icon to display for the file type. Optional. -->
<!-- <icon>
<image16x16></image16x16>
<image32x32></image32x32>
<image48x48></image48x48>
<image128x128></image128x128>
</icon> -->
<!-- </fileType> -->
<!-- </fileTypes> -->
<!-- Specify Android specific tags that get passed to AndroidManifest.xml file. -->
<android>
<manifestAdditions>
<![CDATA[
<manifest android:installLocation="auto">
<!-- Added for Internet and debugging support -->
<uses-permission android:name="android.permission.INTERNET"/>
<!-- Added for Geolocation support -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<!-- Added for NetworkInfo Support -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<!-- Added for Camera Support -->
<uses-permission android:name="android.permission.CAMERA" />
<!-- Added for Microphone Support -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<!-- Added to keep Android Device Awake -->
<uses-permission android:name="android.permission.WAKE_LOCK" />
<!-- Added to keep Android Device from Locking -->
<uses-permission android:name="android.permission.DISABLE_KEYGUARD" />
<!-- -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-configuration android:reqFiveWayNav="true"/>
<supports-screens android:normalScreens="true"/>
<uses-feature android:required="true" android:name="android.hardware.touchscreen.multitouch"/>
<application android:enabled="true">
<activity android:excludeFromRecents="false">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
</manifest>
]]>
</manifestAdditions>
</android>
<!-- End of the schema for adding the android specific tags in AndroidManifest.xml file -->
</application>
<application xmlns="http://ns.adobe.com/air/application/2.5">
<!-- Adobe AIR Application Descriptor File Template.
Specifies parameters for identifying, installing, and launching AIR applications.
xmlns - The Adobe AIR namespace: http://ns.adobe.com/air/application/2.5
The last segment of the namespace specifies the version
of the AIR runtime required for this application to run.
minimumPatchLevel - The minimum patch level of the AIR runtime required to run
the application. Optional.
-->
<!-- A universally unique application identifier. Must be unique across all AIR applications.
Using a reverse DNS-style name as the id is recommended. (Eg. com.example.ExampleApplication.) Required. -->
<id>com.unitedmindset.WebView</id>
<!-- Used as the filename for the application. Required. -->
<filename>WebView</filename>
<!-- The name that is displayed in the AIR application installer.
May have multiple values for each language. See samples or xsd schema file. Optional. -->
<name>WebView</name>
<!-- A string value of the format <0-999>.<0-999>.<0-999> that represents application version which can be used to check for application upgrade.
Values can also be 1-part or 2-part. It is not necessary to have a 3-part value.
An updated version of application must have a versionNumber value higher than the previous version. Required for namespace >= 2.5 . -->
<versionNumber>1.0.0</versionNumber>
<!-- A string value (such as "v1", "2.5", or "Alpha 1") that represents the version of the application, as it should be shown to users. Optional. -->
<!-- <versionLabel></versionLabel> -->
<!-- Description, displayed in the AIR application installer.
May have multiple values for each language. See samples or xsd schema file. Optional. -->
<!-- <description></description> -->
<!-- Copyright information. Optional -->
<!-- <copyright></copyright> -->
<!-- Publisher ID. Used if you're updating an application created prior to 1.5.3 -->
<!-- <publisherID></publisherID> -->
<!-- Settings for the application's initial window. Required. -->
<initialWindow>
<!-- The main SWF or HTML file of the application. Required. -->
<!-- Note: In Flash Builder, the SWF reference is set automatically. -->
<content>[This value will be overwritten by Flash Builder in the output app.xml]</content>
<!-- The title of the main window. Optional. -->
<!-- <title></title> -->
<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
<!-- <systemChrome></systemChrome> -->
<!-- Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. -->
<!-- <transparent></transparent> -->
<!-- Whether the window is initially visible. Optional. Default false. -->
<visible>true</visible>
<!-- Whether the user can minimize the window. Optional. Default true. -->
<!-- <minimizable></minimizable> -->
<!-- Whether the user can maximize the window. Optional. Default true. -->
<!-- <maximizable></maximizable> -->
<!-- Whether the user can resize the window. Optional. Default true. -->
<!-- <resizable></resizable> -->
<!-- The window's initial width in pixels. Optional. -->
<width>480</width>
<!-- The window's initial height in pixels. Optional. -->
<height>762</height>
<!-- The window's initial x position. Optional. -->
<!-- <x></x> -->
<!-- The window's initial y position. Optional. -->
<!-- <y></y> -->
<!-- The window's minimum size, specified as a width/height pair in pixels, such as "400 200". Optional. -->
<!-- <minSize></minSize> -->
<!-- The window's initial maximum size, specified as a width/height pair in pixels, such as "1600 1200". Optional. -->
<!-- <maxSize></maxSize> -->
</initialWindow>
<!-- We recommend omitting the supportedProfiles element, -->
<!-- which in turn permits your application to be deployed to all -->
<!-- devices supported by AIR. If you wish to restrict deployment -->
<!-- (i.e., to only mobile devices) then add this element and list -->
<!-- only the profiles which your application does support. -->
<!-- <supportedProfiles>desktop extendedDesktop mobileDevice extendedMobileDevice</supportedProfiles> -->
<!-- The subpath of the standard default installation location to use. Optional. -->
<!-- <installFolder></installFolder> -->
<!-- The subpath of the Programs menu to use. (Ignored on operating systems without a Programs menu.) Optional. -->
<!-- <programMenuFolder></programMenuFolder> -->
<!-- The icon the system uses for the application. For at least one resolution,
specify the path to a PNG file included in the AIR package. Optional. -->
<!-- <icon>
<image16x16></image16x16>
<image32x32></image32x32>
<image36x36></image36x36>
<image48x48></image48x48>
<image72x72></image72x72>
<image128x128></image128x128>
</icon> -->
<!-- Whether the application handles the update when a user double-clicks an update version
of the AIR file (true), or the default AIR application installer handles the update (false).
Optional. Default false. -->
<!-- <customUpdateUI></customUpdateUI> -->
<!-- Whether the application can be launched when the user clicks a link in a web browser.
Optional. Default false. -->
<!-- <allowBrowserInvocation></allowBrowserInvocation> -->
<!-- Listing of file types for which the application can register. Optional. -->
<!-- <fileTypes> -->
<!-- Defines one file type. Optional. -->
<!-- <fileType> -->
<!-- The name that the system displays for the registered file type. Required. -->
<!-- <name></name> -->
<!-- The extension to register. Required. -->
<!-- <extension></extension> -->
<!-- The description of the file type. Optional. -->
<!-- <description></description> -->
<!-- The MIME content type. -->
<!-- <contentType></contentType> -->
<!-- The icon to display for the file type. Optional. -->
<!-- <icon>
<image16x16></image16x16>
<image32x32></image32x32>
<image48x48></image48x48>
<image128x128></image128x128>
</icon> -->
<!-- </fileType> -->
<!-- </fileTypes> -->
<!-- Specify Android specific tags that get passed to AndroidManifest.xml file. -->
<android>
<manifestAdditions>
<![CDATA[
<manifest android:installLocation="auto">
<!-- Added for Internet and debugging support -->
<uses-permission android:name="android.permission.INTERNET"/>
<!-- Added for Geolocation support -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<!-- Added for NetworkInfo Support -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<!-- Added for Camera Support -->
<uses-permission android:name="android.permission.CAMERA" />
<!-- Added for Microphone Support -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<!-- Added to keep Android Device Awake -->
<uses-permission android:name="android.permission.WAKE_LOCK" />
<!-- Added to keep Android Device from Locking -->
<uses-permission android:name="android.permission.DISABLE_KEYGUARD" />
<!-- -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-configuration android:reqFiveWayNav="true"/>
<supports-screens android:normalScreens="true"/>
<uses-feature android:required="true" android:name="android.hardware.touchscreen.multitouch"/>
<application android:enabled="true">
<activity android:excludeFromRecents="false">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
</manifest>
]]>
</manifestAdditions>
</android>
<!-- End of the schema for adding the android specific tags in AndroidManifest.xml file -->
</application>
[...] This post was mentioned on Twitter by karannnnnnnnnnn3, Ultra Red. Ultra Red said: HTML Web View in Air for Android: One thing that is a really big help in AIR is the ability to display HTML conten… http://bit.ly/bmQcCA [...]
Thanks for the info! Earlier this year, when I had asked an Adobe employee about AIR for Android (still a private beta then), the capability to display web content wasn’t possible. The work around he suggested was to launch the browser from the AIR app. Glad to hear that Adobe have managed to work in that functionality.
@Matthew I completely agree! I’m so happy they put this in.
I posted a StageWebView that is wrapped in a UIComponent so it follows the display list. You can get it here, http://www.judahfrangipane.com/blog/2011/01/16/stagewebview-uicomponent/
[...] This post was mentioned on Twitter by Shane Korin, junichi_y. junichi_y said: HTML Web View in Air for Android | UnitedMindset: http://bit.ly/dKBoJl [...]
Hi,
I’m HTML/JS Air developer I do not know Flash and don’t have developements tools for it.
Is it possible to use StageWebView as a bridge to bring HTML/JS Air app on Android or iPhone market ? Do you have a compiled swf version ?
Do you know if Adobe have plan in next Air version to do it ? I really like to build my WikiDrop application on Android/iPhone (http://wikidrop.encausse.net)
Regards,
Jp
@Jean-Philippe
You could use the StageWebView to just call to the webpage, I’ve known some people to do this. However, I don’t have a version that is premade for this as I don’t have your url and the url would be automatically packaged in the app. The example I have in this post would basically be all that you need.
Great example – but it doesn’t appear to load embedded SWF files that are common with banners. Is there a way around this without changing the HTML page.
I am using stageWebView in my mobile app but running into two problems. Hoping someone can help!
1) I want to load a simple web page with a link for a phone number and a link for email. If I view that page in the browser of my smartphone (Android/HTC/Evo), a click on the phone link launches the native dialer with the number already entered. and a click on the email link launches the default email client with the email address already populated.
BUT, when I access that very same web page inside my Adobe Air app (using stageWebView), clicking on either link causes a page not found message!!! How do I get stageWebView to properly handle these links as the default browser does?
2) Whenever my app triggers the soft keyboard to enter data into a text field on a form, after I finish and dismiss the soft keyboard my stageWebView remains resized as it was (automatically) to view the soft keyboard. So it is approx 1/2 of the screen when it should be on the whole screen. And the space where the soft keyboard was displayed is blank. No matter what page I navigate to this situation remains until I force close the app and restart.
How would I fix this?
Thanks in advance for any assistance!
@John
1) you could listen to the location change and then initiate the email/phone number url and prevent the default location change.
2) You could listen to the Resize change event and relayout the stagewebview to the appropriate size.
Let me know how these work for you.
[...] Jonathan Campos HTML Web View in AIR for Android [...]
Can Someone post and example of this exact same version but running locally off the Android Device. For the life of me I cannot get “ANYTHING” to run locally once actually on the device. all my android example run great from the desktop emulator but once compiled and running off the actual Android device I get nothing but Blanks showing up inside the StageWebView.
- PDF inside stagewebview (running on locally from the device that actually works)
- HTML inside stagewebview (running on locally from the device that actually works)
@Darkriderdesign I don’t believe that PDFs will work for you right out of the box. I haven’t put a ton of effort into it but I haven’t made it work. You could also “loadString()” and load your html text in that way. I haven’t tried a lot of local loads, just wasn’t a necessity.
@jonbcampos
From what I’ve researched it’s not AIR that doesn’t load the PDF its the limitation of Android’s browser. where as the PDF work in iOS because pdfs run natively in mobile Safari?
But aside from that I’m having trouble loading anything on demand locally on Android Devices: local HTML, jpgs, etc. but the example will work in the Emulator?
Are there any good examples out there you have found working with local file on Android Tablet/Phones?
@Darkriderdesign I remember someone working with that and there being an issue with the path to the local files. You may want to check that out.
Hi,
Im using StageWebView to display a webpage on my Android Application…..Can any one please help me , how to change the Default WHITE Background color of the StageWebView….
Thanks,
Rajkumar
@Raja, the background is white by default and any color of the html content that you set. Just give the StageWebView some html content and a background color and your issue will be fixed.