BlackBerry Tablet OS SDK for Adobe AIR Updates (0.9.2)

BlackBerry released some new beta bits for the PlayBook device and Tablet OS recently. As part of the latest beta release for the PlayBook, the WebWorks SDK for Tablet OS was introduced (that’s for another post). Along with the introduction of WebWorks SDK for Tablet OS the update to the Tablet OS SDK for Adobe AIR, the simulator was updated.

First the simulator update details. The main change was the added ability to simulate the rotation events. In your AIR application you will need to include the <autoOrients>true</autoOrients> to the application descriptor file. And then to simulate the rotation event, start in the bottom right corner and swipe up.

In the Beta3 drop for BlackBerry Tablet OS SDK for Adobe AIR was updated to 0.9.2. Which includes a bunch of interesting changes (full release notes here).

  • Application control permissions – For example, to access the camera, add <permission>use_camera</permission>
  • Changed & New APIs – Device.bsn is interesting
  • Simulator and SDK available for Linux
  • You can ssh into the simulator, used to be just telnet
  • Splash Screen – Use the “splashscreen” attribute in the application descriptor file.
  • Support for the Payment Service – You can now use the Payment Service APIs that are provided in the BlackBerry Tablet OS SDK for Adobe AIR to permit tablet users to make purchases without leaving your application. (I found some initial APIs and whipped an example application)
  • Reports of Video/Sound working in Simulator

Also with the release are some bug fixes and known issues. The main known issue that I should point out is possible issues with application descriptor files with the <android> manifest values.

Along with these changes the free PlayBook offer has been extended to March 15th. Happy PlayBook application development :)

AIR Capabilities.screenDPI on Devices

NOTE: Some of the values have changed in AIR 2.6 see the latest post here.

The relationship between the screen resolution and physical size of the device is very important to know when building multi-screen applications. The AIR and Flash Player runtimes provide information about the hardware capabilities through a set of APIs. The sad news is the current state of this information is somewhat dependent on the OS providing correct information, or at least it is not consistent across devices. I have confirmed that even with native Java applications on Android the screen DPI (or PPI) is not correctly provided. This seems to be a bug starting at the different OS implementations, but I wanted to give a current snapshot of the situation and gather more information. The data below will show the inconsistencies and hopefully enough information to still make decent decisions about physical screen size.

I am going to provide real world data from devices and am looking for more people to provide device information comparing two specific values from the Capabilities class. What I have done is compared the Capabilities.screenDPI and Capabilities.serverString‘s DP value across a half dozen devices that I have.

Device Capabilities.screenDPI Capabilities.serverString’s &DP Actual PPI
Android Nexus 1 254 254 254
Droid Incredible 254 254 254
Droid X 240 144 228
Droid 2 240 144 265
Samsung Galaxy Tab 240 168 168
iPhone 3GS 163 72 163
iPad 132 72 132

NOTE: For iOS devices the latest Packager for iPhone available on labs.adobe.com was used. The rest use the latest AIR 2.5 release.

From the data above the only devices where it will be hard to get any valuable information from is the Droid 2 and X devices. For some reason they both provide 240 and 144 values but are clearly different actual PPI’s on those two devices.

If you have other devices not in my list with AIR installed on the device and you please post the values for Capabilities.screenDPI and Capabilities.serverString in the comments.

Finding the AIR for Android Emulator Runtime

If you want to use the latest AIR 2.5 Runtime on the Android emulator you will need to look for it in two locations.

Location #1 is Flex 4.5+ SDK (example below is Burrito but its relative to 4.5 SDK install):
Adobe Flash Builder Burrito/sdks/4.5.0/runtimes/air/android/emulator/Runtime.apk

Location #2 is in Flash Professional CS5 with the AIR extenstion:
Adobe Flash CS5/AIK2.5/runtimes/air/android/emulator/Runtime.apk

To get the runtime on the emulator first you will need to create a Android 2.2 emulator instance. Get it up and running. Then use the following commands to install the Runtime.apk from above:

(MacOS X): ./adb -e install -r Runtime.apk
(Windows) adb -e install -r Runtime.apk

What Font does QNX UI Components on the PlayBook Use?

The default font that Flash Player and AIR assigns to TextField is: Times New Roman (or Times on Mac OS X). If you set the TextFormat's font name of a TextField to a invalid font name it will then revert to the OS's default font, not the Flash Player and AIR default of Times New Roman. I wanted to find out how this works on the BlackBerry Tablet OS, which is the PlayBook's OS.

I went ahead and whipped up some code with a bunch of TextFields and various TextFormat font values. I also added the QNX Label component see what font the QNX components are using. Here what the app looks like running on the PlayBook simulator:

TextField and QNX Label Fonts

Here is the code for the font test:

ACTIONSCRIPT:
package
{
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.text.TextField;
    import flash.text.TextFormat;
   
    import qnx.ui.text.Label;
   
    public class RIMMobileAIR extends Sprite
    {
        public function RIMMobileAIR()
        {
            super();
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;
           
            var input:Label = new Label();
            input.width = 400;
            input.x = 20;
            input.y = 70;
            input.text = "QNX Label FONT 12345 *** " + input.format.font;
            addChild(input);
           
            createTextField(10, "Times New Roman22");
            createTextField(20, "Verdana");
            createTextField(30, "BBAlpha Sans");
            createTextField(40);
            createTextField(50, "Times New Roman");
            createTextField(60, "BBAlpha Sans");
        }
       
        private function createTextField(y:int, font:String = ""):void
        {
            var lbl:TextField = new TextField();
            lbl.text = "TextField FONT 12345 *** " + font;
            lbl.width = 400;
            lbl.x = 20;
            lbl.y = y;
            if (font != "")
            {
                var format:TextFormat = new TextFormat();
                format.font = font;
                lbl.setTextFormat(format);
            }
            addChild(lbl);
        }
    }
}

As you can see the default PlayBook font used in the QNX UI components and with invalid font names is BBAlpha Sans. There are a few device fonts available on the device and you can look at those by writing code that enumerates over Font.enumerateFonts(true).

Why is this post useful? If you are developing your PlayBook application and using adl on the desktop to test and develop the application your Fonts will not look the same as on the device with out the BBAlpha Sans installed on your machine.

PickQuick Source Code

I have been demoing a game called PickQuick across devices at conferences like MAX and user group meetings. I like to use the RTMFP local multicast feature to make it easy for devices to find each other and communicate. Here is a video of the game in action running across 5 devices (both Android and iOS):

Game Preview for my game and AIR related MAX Session from Renaun Erickson on Vimeo.

For a explanation of what the underlying Flash Player API's that are used you can check out James Ward's post here.

I also showed this same code and application running on a PlayBook device at the recent Meet the PlayBook event in NYC (I hopefully will be showing it off at Toronto and SF next week as well).

Last but not least the source code for the PickQuick game is available for you to explore on github. I might post later about the code I have in the game that checks for 5 inch devices with a low PPI and how it scales those devices differently, you can find me talking about this type of scaling in my MAX session here.

Using MXML with QNX UI Components for the PlayBook

One of the less known facts about the Flex SDK and all its various parts is that MXML != Flex. MXML is a markup language that gets turned into ActionScript by mxmlc. With a little bit of knowledge of some metadata and willingness to build a bit of plumbing into a container class you can use MXML and Binding without Flex.

So what I am trying to do here?

I am trying to take a ActionScript 3 UI library and use MXML to describe its layout. More specifically I wanted to use the PlayBook's native OS UI component library from the BlackBerry Tablet OS SDK, called the QNX UI components. Lets take a look at some code to show you what I am talking about.

View the whole post »

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:

XML:
<?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

Flash Player 10.2 Native Cursor Example

The beta release of Flash Player 10.2 on Adobe labs is really code. It provides early access to some really cool features. One of those features is the ability to us bitmaps on native cursors. Not just fake hide the mouse cursor and display your own bitmap, but actually providing the OS the bitmap to use for the cursor. This means there is some OS limitations of 32x32px bitmaps and some early animation capability (as you'll see in my example).

Props needs to go out to Tony for making my Christmas Tree cursor look better with blinking lights.

Source files on github.

You will need the latest Flex SDK 4.5.0.18623 to build the sample code and add a compiler argument of -swf-version=11 (noted below).

NOTE: You have to add -swf-version=11 when using any of the new features with the current Flex SDK. This step will be built into the build configuration files by release time.

I also have a live example of the example working if you just want to test it out, first make sure you have Flash Player 10.2 installed.

Browse Files on PlayBook

My fellow Adobe Evangelist Daune wrote a nice application using Flash Builder Burrito and Flex Hero that browsers a devices file system and lets you see the details of the files. I wanted to see what this application looked like on the PlayBook.

View the whole post »

Update to PlayBook SDK provides Flash Builder Burrito Plugin

If you get the latest PlayBook SDK download and run the installer you can now install the PlayBook plugin into Flash Builder Burrito. Here are some quick steps/tips to see if its up and running.
NOTE: If the pictures seem blurry just click on them to get a larger view

View the whole post »