The PlayBook has a few different Keyboard types depending on what type of input the user is asked to provide. The BlackBerry Tablet OS SDK for Adobe AIR allows the developer to assign what type of keyboard should be shown for a specific input box.
For the video and images below I used an example project called KeyboardTypes, all the source for this and other projects is located at here.
First lets take a look at a picture containing all the current (as of 2011.01.19) keyboard types together.
Different PlayBook KeyboardTypes
To see how this all works on the Simulator both in landscape and portrait modes check out the video below:
Using the PlayBook QNX TextInput KeyboardType and ReturnKeyType from Renaun Erickson on Vimeo.
I created this game called PickQuick for demoing and testing applications across screens. I have previously demo’d this working across various devices, but recently at the #jivhack (hackathon in Chicago this last weekend) I decided to code in the support for TV remotes and get it running on the TV with AIR for TV. Here is a video of the outcome:
PickQuick running on AIR for TV, Android, and iOS from Renaun Erickson on Vimeo.
The full source code of PickQuick is available on my github site.
Part of BlackBerry’s AppWorld services is the ability to have your users purchase goods inside your application. This service provides an API to use inside your AIR for PlayBook applications. Read on to check out the basics of using this new API, new as of Beta 3 or Tablet OS SDK for Adobe AIR 0.9.2.
I will show you how to use the API in local mode to test the different responses your application can get during a purchase sequence. To test the API for real you will have to register your goods with BlackBerry as a vendor. I am not familiar with that process at the moment, I’ll leave that for another blog post. Here is a link for more information on the Payment Services.
View the whole post »
In this blog I’ll show how to create a custom cell renderer skin for the QNX UI component List class. The custom cell renderer will display an image, text, and box beneath the text for affect. The List class implements virtualization of the cell renderers and reuses instances of the objects that are displayed as you scroll up and down. This allows for memory optimization and speed gains by not creating and destroying a bunch of cell renderer instances. In the process of displaying images in virtualizated instances you end up changing the source each time the data is assigned to the cell renderer instance.
This causes a problem of performance and visual quirks. For example if updating the image url takes longer then the time it takes to have the data value changed with a new value (try flicking a long list really fast, the instances of the cell renderer will be set a bunch of times before it slows down). This situation might cause a flicker of the old image before the new image loads. Luckily QNX classes probably a mechanism to help with this situation.
View the whole post »
Check out the latest development beta bits for developing applications for the PlayBook. Video covering the new Beta3 or BlackBerry Tablet OS SDK/Simulator 0.9.2 for Adobe AIR:
Run Through of PlayBook Beta3 AIR SDK Updates from Renaun Erickson on Vimeo.
Highlights:
- Differences of old simulator and new simulator
- New simulator portrait mode simulation
- Sample HelloWorld application showing off
blackberry-tablet.xml for custom splash screen and icon.
Here is the source Flex Hero application code for the application I used in the video:
XML:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
width="100%" height="100%"
resize="application1_resizeHandler(event)"
applicationComplete="application1_applicationCompleteHandler(event)">
<s:layout>
<s:VerticalLayout />
</s:layout>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.events.ResizeEvent;
protected function application1_applicationCompleteHandler(event:FlexEvent):void
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
lblOrientation.text += "init: " + stage.orientation + " w/h: " + stage.stageWidth + "/" + stage.stageHeight + " s: " + stage.scaleX + "\n";
stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, stageOrientationChange);
}
private function stageOrientationChange(event:StageOrientationEvent):void
{
lblOrientation.text += "stageOrientationChange: " + stage.orientation + " w/h: " + stage.stageWidth + "/" + stage.stageHeight + " s: " + stage.scaleX +
"\n>>event.beforeOrientation: " + event.beforeOrientation +
"\n>>event.afterOrientation: " + event.afterOrientation;
}
protected function application1_resizeHandler(event:ResizeEvent):void
{
if (stage)
lblOrientation.text += "resize: " + stage.orientation + " w/h: " + stage.stageWidth + "/" + stage.stageHeight + " s: " + stage.scaleX + "\n";
}
]]>
</fx:Script>
<s:Button label="Some Button" />
<s:TextArea id="lblOrientation" width="100%" height="100%" />
</s:Application>
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 :)
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.
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
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.
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.
