Using PlayBook’s QNXStageWebView with Flex Hero Mobile

Posted on December 2, 2010 | 9 comments

UPDATED:People where having issues and I wanted to confirm it works with the latest BlackBerry Tablet OS 0.9.4 SDK/Plugin

The BlackBerry Tablet OS provides a few extra AIR API’s. One of these API’s is the QNXStageWebView. It provide works a lot like the AIR 2.5 mobileDevice profile’s StageWebView, but provides specific hooks into the PlayBook’s webkit. For example the ability to use JavaScript between app and web view. This post is not a deep dive into the QNXStageWebView but more about the information to get this working in the current Flash Builder Burrito preview and BlackBerry Tablet OS 0.9.2 SDK/Plugin.

I created a newer example that is a simple browser with progress bar. It uses my QMXML library and the 0.9.4 SDK. You can find newer example source code on my github here Flash Builder Burrito fxp project located here. Here is the code:

<?xml version="1.0" encoding="utf-8"?>
<r:QApplication
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:r="http://ns.renaun.com/mxml/2010"
    width="1024"
    xmlns:text="qnx.ui.text.*" xmlns:progress="qnx.ui.progress.*" xmlns:buttons="qnx.ui.buttons.*">
   
    <fx:Script>
        <![CDATA[
            import qnx.events.WebViewEvent;
            import qnx.media.QNXStageWebView;
            import qnx.ui.core.ContainerAlign;
            import qnx.ui.core.ContainerFlow;
            import qnx.ui.core.Containment;
            import qnx.ui.core.SizeUnit;
           
            private var webView:qnx.media.QNXStageWebView;

            protected function labelbutton1_clickHandler(event:MouseEvent):void
            {
                if (!webView)
                {
                    webView = new qnx.media.QNXStageWebView();
                    webView.stage = this.stage;
                    webView.viewPort = new Rectangle(0,68,1024,532);
                    webView.addEventListener(WebViewEvent.DOCUMENT_LOAD_FINISHED, loadHandler);
                    webView.addEventListener(WebViewEvent.DOCUMENT_LOAD_FAILED, failHandler);
                    webView.zoomToFitWidthOnLoad = true;
                    webView.blockPopups = true;
                    webView.zOrder = -1;
                }
               
                stage.addEventListener(Event.ENTER_FRAME, progressCheck);
                webView.loadURL("http://" + txtURL.text);
            }
            private function progressCheck(event:Event):void
            {
                event.stopPropagation();
                progressBar.progress = webView.loadProgress/100;
                if (webView.loadProgress == 100)
                    stage.removeEventListener(Event.ENTER_FRAME, progressCheck);
            }
            private function loadHandler(event:WebViewEvent):void
            {
                progressBar.progress = 1;
                webView.zOrder = 0;
                progressBar.destroy();
            }
            private function failHandler(event:WebViewEvent):void
            {
                txtURL.text = "failed to load: " + txtURL.text;
            }

        ]]>
    </fx:Script>
    <text:TextInput id="txtURL" width="960" y="8" containment="{Containment.UNCONTAINED}" />
    <buttons:LabelButton label="GO" x="968" y="8" width="44" height="36" containment="{Containment.UNCONTAINED}"
                         click="labelbutton1_clickHandler(event)"/>
    <progress:PercentageBar id="progressBar" width="1012" y="48" containment="{Containment.UNCONTAINED}" />
   
</r:QApplication>

To get this to work I with the 0.9.2 0.9.4 SDK I included the BlackBerry Tablet OS libraries. In the project I made sure that the Flex Build Packaging -> BlackBerry Tablet OS had the “Include BlackBerry Tablet libraries in build path” checked. I also tested this in Flash Builder 4 and it worked.

Flex Builder Packaging - BlackBerry Tablet

Then package and deploying is simple with the 0.9.4 plugin for Flash Builder Burrito. Running the application on the 0.9.4 simulator then looks like this:

QNXStageWebView Example

  • http://www.coldfusionjedi.com Raymond Camden

    Can you give a practical example of “For example the ability to use JavaScript between app and web view”?

    • http://www.renaun.com Renaun Erickson

      Not yet, still figuring out the use cases as well as the API usage. Any test ideas you want me to explore?

      • Binh An

        one of the practical usages is the porting of PhoneGap to support Playbook.

  • http://flexr.wordpress.com Joseph

    Lovely!!

    Thanks Renaun

  • Shyls

    Thanks Renaun for you insight into this issue. Is it possible to get qnx-air.swc alone from the previous version of sdk 0.9.0? I am not able to find 0.9.0 sdk anywhere.

    • http://www.renaun.com Renaun Erickson

      I don’t have a good way to get the older sdk. I’ll have to look into that.

      • Shyls

        If I read it correctly, you just used 0.9.0 version of qnx-air.swc to compile the project. Is it possible to get that swc atleast?
        Right now I am using StageWebView which doesn’t have all features of QNXStageWebView.

  • brian

    I’m also trying to get this to work with the latest SDK but am getting the “…externally visible definition…” error. Is there any update on this — or a link to the older swc? Many thanks!

    • http://www.renaun.com Renaun Erickson

      I updated the post as the new BlackBerry Tablet OS SDK 0.9.2 released today works with the QNXStageWebView. You will need to comment out some changed API’s on the webView object in the project, or download the new .fxp above.