Skip to main content
Participant
November 10, 2010
Question

StageWebView - HTML Support in AIR for Android

  • November 10, 2010
  • 14 replies
  • 24060 views

  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.
This topic has been closed for replies.

14 replies

March 14, 2012

Hello,

I am trying to use:

var webView:StageWebView = new StageWebView();

      webView.stage = this.stage;

      webView.viewPort = new Rectangle(0, 0, 400, 400);

      webView.loadURL("http://www.google.com");

but the browser needs to show inside a rectangular panel that I have already created which starts offstage and can be dragged by the user to the stage.  What would the code be to put this within an object?  Thanks.

Participating Frequently
December 19, 2011

I'm trying to load a PDF in a StageWebView on Android.  I understand the issue is that StageWebView is looking to the Browser and it's Plug-in set to render the PDF inside the StageWebView.  But my Question is "Which Browser" is it the one Android has selected as "Default" so could we then make Dolphin the Default browser on the system which does have an PDF plugin like safari in iOS?

I tried this but I'm not as savvy on Android as I would like.

Could this be a solution for getting StageWebView working on Android or is the issue deeper than just the "plugin and default web browser"

maybe I'm completely wrong but I've been trolling around the internet for a week trying to figure out a "Cross-platform" way to load "PDF" documents in my Adobe AIR mobile applications in iOS and Android.

This sort of thing DRIVES me nuts - how is it that I'm using an Adobe product, to load another Adobe Product inside it but it doesn't work? GOOD GRIEF.... Why would we have to rely on the WEBKIT to render a PDF, you think we would have full access to the Adobe ACROBAT framework.

var MyFlippinAcrobatDocument : AcrobatDoc = new AcrobatDoc( gimmiesomesugar.pdf );

addChild(MyFlippinAcrobatDocument);

and if it's not this simple then why isn't it?

-

Darkriderdesign

mirelatmAuthor
Participant
January 10, 2012

StageWebView is offering the same functionality as the Android WebView component (http://developer.android.com/reference/android/webkit/WebView.html). If there is a WebView plugin to renderinline pdf, then StageWebView will also render pdf.

Changing the default browser on Android doesn’t solve the issue as StageWebView will still use the WebView component to render html.

Thanks,

Mirela

Known Participant
July 27, 2011

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!

Participating Frequently
July 27, 2011

For the first issue, if the native web control (which is used by StageWebView) doesn't handle the uri scheme, then it should dispatch a locationChanging event. You could listen for that event and launche the URL yourself with navigateToURL().

For the second issue, it could be a bug, but possibly specific to your phone. It doesn't happen on any of the Android devices I've tried it on and I don't see anything similar in our bug base. Are you using the default value for softKeyboardBehavior? (http://help.adobe.com/en_US/air/build/WSfffb011ac560372f2fea1812938a6e463-8000.html#WSfffb011ac560372f1a6f6f1912d7748050e-7fff)

To file a bug, please go to: https://bugbase.adobe.com/

A reproducible test case and the devices on which you are encountering this bug will help us triage and resolve the issue more quickly.

Thanks,

Joe

Known Participant
July 27, 2011

Thanks for your reply Joe!

On the first issue, when I view the web page in the phone's native browser it handles the "tel:" and "mailto:" just fine. But when I view the same web page inside stageWebView that's when it fails. Wouldn't that seem to indicate the native web control is handling the uri scheme just fine? I'm not sure why the links on the page would behave differently when viewed in stageWebView.

For the second issue I'm using a fairly popular Android phone, HTC Evo. Can you point me to any examples that are using stageWebView to display a web page containing a form? That way I could test a working example against my phone. I'll also go ahead and build a simple test case for submission to the bug base.

Thanks again for your help!!!

November 10, 2010

Very nice, i'm actually planning to use this on an app.
The air stagewebview doesn't seem to have as many settings as the android webview though. For example, I would like to disable the abillity to zoom. On android you would have the websettings class to change this.
Am I missing something or are alot of the android webview settings not present in the air webview?

mirelatmAuthor
Participant
November 10, 2010

If you have access to the html content, you can disable zoom by using the viewport meta tag in your html page:

<meta name="viewport" content=" user-scalable=no"/>  (e.g. http://davidbcalhoun.com/2010/viewport-metatag).

In StageWebView, there is no API for enable/disable zoom.  It is always enabled.

Anyway, this is a good feature request for StageWebView and you can fill one here: http://ideas.adobe.com/air

Thanks,

Mirela

November 10, 2010

I was thinking too much in air development, should have thought about something like this, thanks.