RichWebView II ANE gives you access to the native webview APIs in Android and iOS. Everything that a Native programmer can do with the native webview, you can also do in your AdobeAIR projects.
Main Features:
- Use multiple Webview instances
- Call JS funcs from AIR and vice versa
- Control the Scroll position and style
- Change the view port size and position at runtime
- Play video files inside the webview including embedded iFrame videos
- Take full screenshots from your webview object
- Get GPS location information in to your JS
- Enable file picker dialog on your HTML input fields
- Control background color with AARRGGBB format. (supports transparent)
- TouchEvent to know when the WebView is touched
- Optionally prevent URL loads and let AIR handle them
- Load HTML Strings directly into the WebView instance
- Support Android custom-tabs
- Supports iOS SafariViewController
- Supports iOS WKWebView API
find the latest asdoc for this ANE here. Android package, iOS package
For detailed AS3 code usage, see the Android and iOS demo projects. below is a basic example showing how to open html string in webview.
Android Side
import com.myflashlab.air.extensions.richWebView.*;
import com.myflashlab.air.extensions.richWebView.android.*;
import com.myflashlab.air.extensions.dependency.OverrideAir;
// initialize the ANE when the flash.display.Stage is available
RichWebView.init(stage);
// create a new WebView instance
var webview = RichWebView.android.getInstance(0, 0, stage.stageWidth, stage.stageHeight);
// Add the Native window on top of your AIR app (NOTICE: ALL Native windows will always stay on TOP of AIR content. This is a general rule with any ANE)
webview.addView();
// properties
webview.setBackgroundColor("#fff7fd"); // color format is: AARRGGBB or RRGGBB
var dataSettings:HtmlDataSettings = new HtmlDataSettings();
dataSettings.baseUrl = null;
dataSettings.encoding = "UTF-8";
dataSettings.mimeType = "text/html";
dataSettings.data = "<html xmlns=\"http://www.w3.org/1999/xhtml\"><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\"><title>RichWebView ANE</title></head><body><p>This is a String which is shown on the RichWebView ANE as an HTML content.<br><br>Enjoy Building AIR apps<br><a href=\"https://www.myflashlabs.com/\">myflashlabs Team</a></p></body></html>";
// load content
webview.loadData(dataSettings);iOS Side
import com.myflashlab.air.extensions.richWebView.*;
import com.myflashlab.air.extensions.richWebView.ios.*;
import com.myflashlab.air.extensions.dependency.OverrideAir;
// initialize the ANE when the flash.display.Stage is available
RichWebView.init(stage);
// create a new WebView instance
webview = RichWebView.ios.getInstance(0, 0, stage.stageWidth, stage.stageHeight);
// set ios configuration BEFORE [addView] method. Nothing will happen if you set them or modify them after [addView] is called
webview.settings.allowsAirPlayForMediaPlayback = true;
// Add the Native window on top of your AIR app (NOTICE: ALL Native windows will always stay on TOP of AIR content. This is a general rule with any ANE)
webview.addView(onWebViewDateAddedToStage);
function onWebViewDateAddedToStage():void
{
// properties
webview.setBackgroundColor("#fff7fd"); // color format is: AARRGGBB or RRGGBB
// Scroller properties
webview.scrollView.keyboardDismissMode(ScrollViewKeyboardDismissMode.INTERACTIVE);
var dataSettings:HtmlDataSettings = new HtmlDataSettings();
dataSettings.baseUrl = null;
dataSettings.encoding = "UTF-8";
dataSettings.mimeType = "text/html";
dataSettings.data = "<html xmlns=\"http://www.w3.org/1999/xhtml\"><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\"><title>RichWebView ANE</title></head><body><p>This is a String which is shown on the RichWebView ANE as an HTML content.<br><br>Enjoy Building AIR apps<br><a href=\"https://www.myflashlabs.com/\">myflashlabs Team</a></p></body></html>";
// load content
webview.loadData(dataSettings);
}<!--
FOR ANDROID:
-->
<manifest android:installLocation="auto">
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-sdk android:targetSdkVersion="28"/>
<application android:hardwareAccelerated="true" android:allowBackup="true">
<!-- required for html file select buttons -->
<activity android:name="com.myflashlabs.richwebview.Pick" android:theme="@style/Theme.Transparent" />
<!-- required for customtabs support on Android -->
<receiver android:name="com.myflashlabs.richwebview.ChromeTabActionBroadcastReceiver" />
</application>
</manifest>
<!--
FOR iOS:
-->
<key>MinimumOSVersion</key>
<string>10.0</string>
<!-- Not recommanded but add this in case you want to open nonsecure http urls -->
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key><true/>
</dict>
<!--required for webview GPS access-->
<key>NSLocationWhenInUseUsageDescription</key>
<string>I need location when in use</string>
<!--
Embedding the ANE:
-->
<extensions>
<extensionID>com.myflashlab.air.extensions.richWebView</extensionID>
<extensionID>com.myflashlab.air.extensions.permissionCheck</extensionID>
<extensionID>com.myflashlab.air.extensions.dependency.overrideAir</extensionID>
<extensionID>com.myflashlab.air.extensions.dependency.androidx.browser</extensionID>
<extensionID>com.myflashlab.air.extensions.dependency.androidx.core</extensionID>
<extensionID>com.myflashlab.air.extensions.dependency.androidx.lifecycle</extensionID>
</extensions>Before being able to communicate with JavaScript, you must first make sure JS is enabled for your webview instance and also the AirBridge JS code is injected into your html content.
IMPORTANT: AIR/JS communication will be possible only AFTER your content is fully loaded. When WebViewEvents.PAGE_FINISHED happens.
On Android:
// first initialize a new instance of webview
var _webview:WebView = RichWebView.android.getInstance(0, 0, 500, 500);
// add listeners and other settings... but make sure you have added:
_webview.settings.javaScriptEnabled = true;
// then you should add the webview to the stage:
_webview.addView();
// after adding it to the stage, you must inject the AirBridge script:
_webview.addJavascriptInterface();On iOS:
// first initialize a new instance of webview
var _webview:WebView = RichWebView.ios.getInstance(0, 0, 500, 500);
// add listeners and other settings... but make sure you have added:
_webview.settings.preferences.javaScriptEnabled = true;
// inject the AirBridge script
_webview.settings.addJavascriptInterface();
// then you should add the webview to the stage:
_webview.addView(onWebViewAddedToStage);
function onWebViewAddedToStage():void
{
// all _webview.settings properties/methods MUST happen before addView
}So, when yoursetup is ready, You are able to easily call JS functions from AIR like this:
_webview.callJS("diplayAlert('This is a message from AdobeAir!')");and on JS side, you can send String messages to AIR like this:
AirBridge.evoke("toVibrate");- Android SDK 19+
- iOS 10.0+
- AIR 33+
Below are the list of Permissions this ANE might require. Check out the demo project available at this repository to see how we have used the PermissionCheck ANE to ask for the permissions.
| Necessary | Optional |
|---|---|
| . | SOURCE_LOCATION (Android) |
| . | SOURCE_STORAGE (Android) |
| . | SOURCE_LOCATION_WHEN_IN_USE (iOS) |
| . | SOURCE_LOCATION_ALWAYS (iOS) |
https://www.myflashlabs.com/product/richwebview-2-ane-adobe-air-native-extension/
How to embed ANEs into FlashBuilder, FlashCC and FlashDevelop
