Using PlayBook’s QNXStageWebView with Flex Hero Mobile
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:
<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