Using qnx.ui.picker.Picker in mobile Flex Hero pro

Question

there is a Picker example for usage in an ActionScript project. It works well in simulator.

But how do you use that component in a Mobile Flex Project (with Burrito Flash Builder)?

How do you add a qnx.ui.picker.Picker to a spark.components.View?

The latter seems to expect a mx.core.UIComponent, but the former is a qnx.ui.core.UIComponent.

The ActionScript project I've mentioned above works ok, because the Picker is added to the Sprite. But adding it to a View in a Mobile Flex project fails for me.

Thank you! Alex

UPDATE:

I've found this page today: http://corlan.org/2011/03/28/creating-playbook-apps-with-flex-and-qnx-ui-components/

And also I've found out that the QNX AIR components work on Android as well, wonder if it is legal to use them there? Nothing is mentioned in Playbook SDK Legal Notice.

Answer 1

As I understand, right now we can't use UI components in Flex Mobile project. You can go to: Project - Properties - Flex Build Packaging - BlackBerry Tablet OS and check Include BlackBerry tablet OS libraries in build path, but, you'll get an error:

"Design mode could not load qnx-air.swc. It may be incompatible with this SDK, or invalid. (DesignAssetLoader.CompleteTimeout)"

BlackBerry guys says that it'll be fixed in future release. So right now you can use QNX components only in ActionScript.

Answer 2

First you need to add the swc from the SDK into your Flex Project:

Right click the Project and select Properties, under Flex Build Path, add a SWC and browse to the SDK. ...\Adobe Flash Builder Burrito\sdks\blackberry-tablet-sdk-0.9.3\frameworks\libs\qnx-screen\qnx-screen.swc

Once you have the swc in the project you can create instances programmatically in the script tag, eg:

import qnx.ui.picker.Picker;
var pick:Picker = new Picker();
var arr:Array = [{label: "day", data:0}, {label: "week", data:1}, {label: "month", data:2}];
pick.dataProvider = new DataProvider([new DataProvider(arr)]);
pick.selectedIndices = [0];
addChild(pick);

You may need to add a container to your view first, eg add a mx:UIComponent element and then add the picker to that, eg

<mx:UIComponent id="pickerContainer"/>

pickerContainer.addChild(pick);