AIR Mobile StageWebView UIComponent

When you want to use webkit to display HTML in AIR 2.5 mobile projects you want to use StageWebView. Since StageWebView is a subclass of EventDispatcher you cannot add it to the display chain right away. The API works a bit differently and you need to define a Rectangle as the viewPort. However, I thought it would be convenient to have a StageWebView UIComponent so that you can add it to the display chain. It is just a wrapper class which exposes the needed APIs like the text and url setter and the methods show, hide and dispose. Further you can listen for all event listeners which just get cloned and re-dispatched.

Example:

Source:

30 comments to AIR Mobile StageWebView UIComponent

  • Any luck using it on AIR 2.5 for tv?

  • Nathanael

    Hi Sonke –

    Thanks for posting this. I’ve been toying around with it a bit. However, I’ve noticed that when using it and try to navigate back through navigator.pushview on a button, the rectangle stays displayed. How would I resolve that?

    Thanks again!

    Nathanael

  • I did not need this functionality so you might have to add logic to cover this.

  • imtiaz

    hi, I want to launch default browser while clicking links inside stagewebview instead of launching inside stagewebview itself.

  • You want to create a custom HTMLHost with this method:

    public override function createWindow( windowCreateOptions : HTMLWindowCreateOptions ) : HTMLLoader {
    var bounds : Rectangle = new Rectangle( 50, 50, 800, 600 );
    return HTMLLoader.createRootWindow( true, null, true, bounds );
    }

  • [...] what if you want to use the mobile Flex framework? Well… Sönke Rohde actually wrote a wrapper around the StageWebView class so you can use it as a Flex component. By using this wrapper it [...]

  • John

    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!

  • There is any issue with the yOffset, if you leave it at 80 its fine for iPhone 4 but not iPhone 3 any suggestions.

  • [...] Soenke Rhode’s UI Component for the StageWebView [...]

  • boren

    I create and web browser application to view web site: http://www.dap-news.com to run on my android device.
    I test on simulator, he could display correctly, but on my devices does not have khmer uncode font, so he could
    display correctly.

    could have any method, to embedded font with StageWebViewUIComponent?

  • StageWebView is using the native browser so no way to embed fonts.
    The website you are displaying could use embedded fonts though.

  • Mamta

    I am using stageWebView for showing webpage in my mobile app but don’t know how to move back to my app once it gets loaded. In application descriptor file, I had already registered custom uri scheme (myapp://) for IOS devices and from the loaded page inside stageWebView, I was trying to call following URL myapp://webcam. But nothing had happened. It neither called LOCATION_CHANGE event of StageWebView not called INVOKE_EVENT of nativeapplication.

    How can I fix this issue?

    Thanks in advance,
    Mamta

  • I’ve refered http://www.webkitchen.be/2011/05/17/displaying-ads-in-your-mobile-air-application/ this post to implment admob in my app.
    But when I set test argument to false(adview.html),it display blank on my device.But if true,it will show test page on device,so is there other notice need to do?

  • [...] Rohde AIR Mobile StageWebView UIComponent If you have a great tutorials, videos or code sample you want to share, send it along. We’d [...]

  • [...] show and auto hide ads for my mobile project experiments, so I got both, Serge Jespers article and Sönke Rohde wrapper together and added the following features for an AdMob AIR mobile [...]

  • [...] show and auto hide ads for my mobile project experiments, so I got both, Serge Jespers article and Sönke Rohde wrapper together and added the following features for an AdMob AIR mobile [...]

  • Christoph Ketzler

    Hi

    I made some small changes in the addedToStageHandler so that the StageWebView fits into the Spark Layout:

    var localPoint:Point = new Point(0,0);
    var globalPoint:Point = localToGlobal(localPoint);
    _stageWebView.viewPort = new Rectangle(globalPoint.x, globalPoint.y, this.width, this.height);

  • Sönke

    Cool, looks good.

  • This seems the place to ask this, as it seems your all StageWebView Sorcerers. I’ve been banging my head for two weeks on this and cannot seem to figure it out.

    I’m trying to load PDFs inside a StageWebView, and it works in the emulator but when I load the app onto an Android device it shows nothing but a bank window?….. It work s in iOs on an iPad, just not on Android…

    here is the simple snippet:

    stageWebView.stage = this.stage;
    stageWebView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight – 50 );
    stageWebView.loadURL( “http://www.somewebsite.com/PDFs/somepdf.pdf” );

    From what I was reading about this its because I need to add Hardware Acceleration in my app config, but this doesn’t seem to work either? As FlashBuilder 4.6 validates against Android 2.2 sdk, and Hardware Acc didn’t exist until Android 3 so it’s like the setting is being ignored?

    Has anyone else solved this problem?

    HELP DUDES. Thank you ahead of time

  • Jeremy

    @Darkriderdesign

    I had the same issue as you. I found the answer here: http://help.adobe.com/en_US/air/build/WSfffb011ac560372f-5d0f4f25128cc9cd0cb-7ffc.html in the section “Enabling Flash Player and other plug-ins in a StageWebView object”. It tells you how to build against Android 3.

  • Brandon

    Jeremy, i’ve done all of those steps, but had no luck. I still have a white box on all devices over 3.0

    I extracted the .apk and opened the xml, it isn’t leaving the hardware acceleration setting in the xml.

    Can you elaborate on what you did?

  • Raja

    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

  • lukayz

    Hi :)

    i want to create an AIR app for iOS…
    can anyone here help me please? i want to get the content of tags on a page…which is located in div class..how could i perform this action??

    cheers :D

  • lukayz

    sorry i mean i want to get the content of anchor tags “:P

  • Alidena

    I’m using StageWebView to display an html page and I’m finding a very strange error. It works ok when I install the app on my iPad, but if I force to close the app, and then I open it again, the html page is unable to load even if I close and open the app (not forcing this time)

    Can anyone help me please?

    Thanks

  • surferbloggy

    hi! great help this code!! i need to use _stageWebView.loadString(_text); how could i do to load not an url but an html text?? thank you

  • surferbloggy

    hi i’m trying to read html code in the stagewebview adding text attribute with a call to a function that read an xml file this way

    and

    employeeService_resultHandler function return a html code
    but it doesnt read as html it read it as text it shows the name of the funcion instead of its value
    could anyone help me??thank you

  • surferbloggy

    Hi i’ve resolved about loading html code now i have a problem with a back button in the header before the stagewebview component
    how could i do to remove the stagewebview component onclick please could you help me??? thank you

  • Rick

    Could stageWebView be used to access and integrate with Salesforce? Wondering as Flash Builder solution no longer seems to be supported.