Creating PlayBook apps with Flex and QNX UI Components

I got some requests about how to use both Flex and QNX UI components for building PlayBook apps. In this post I will show you how to do it.

Here are the basic steps.

1. Create a Flex mobile project. Make sure that you enable the project for BlackBerry Tablet OS development.

2. Edit project properties to include the QNX libraries in the project build path (right-click on the project name > Properties). Select BlackBerry Tablet OS section and then select the Include BlackBerry Tablet OS Libraries in Build Path option.

Once you apply these changes your project should be ready for QNX components. Of course you have to add QNX components using ActionScript code; you can’t use QNX components as MXML tags.

You have to remember that the QNX UI components don’t inherit or extend the Flex base UI components. And because of this you can’t add them, for example, directly to a View Flex class using view.addElement(QNX-UI-component); instead you can use an instance of Flex UIComponent as a wrapper. Here is a code snippet that illustrates this technique:

Code snippet – PlayBook development: Flex and QNX UI component example on Snipplr

Here is screencast that walks you through the setup and shows a sample app:

Download

You can download the project code from here.

March 28, 2011 | Filed Under AIR, Flex, PlayBook | 4 Comments

Conqu – one of the coolest Android apps outhere

Yesterday, fellow evangelist, Terry Ryan, showed me a tablet app for Android called Conqu. After I installed and played with it for about 5 minutes, I said: “Wow! Mate, this is the coolest app for Android tablets ever!”.

The application helps you to “Get the things done” – by managing tasks. Here is a video and screenshots:

And by the way, this application is built using Flex 4.5 (“Hero”) and uses Adobe AIR for Android as a runtime. Now this is something pretty cool. Well done guys!!!

Because they use the Flash Plaform, it isn’t that hard to target other Flash supported devices such as: PlayBook, desktops, or iOS. In fact if you take a look at their roadmap, this is exactly what they are up to.

I really like the fact that they work on a feature that allows synchronization between devices over the cloud. This will facilitate team work and make this app an interesting and appealing choice for small/medium business.

Getting the App

You can install the application from here (for now there is only the tablet version) and here you can check the roadmap and features.

Congratulations to the people behind this project. I’m looking forward to testing their desktop/PlayBook/iPad versions and hope to meet them in person. I’m really curious to talk about their experience building this app.

March 25, 2011 | Filed Under AIR, Android, PlayBook | 4 Comments

Animating QNX components in PlayBook apps

In this post I want to show you how you can use animations/transitions for QNX components to create a better user experience. User experience designers use transitions when they want to highlight or focus user attention to a specific part of the application.

For example, when you add a new component to the screen as a result of user interaction you can do it in two ways:

just add the new component to the display
create a transition or animation that gradually introduces the new component to the display

I think it is easiest to understand the subtle difference between the two approaches by seeing this screencast:

In my application I used the tweener library for animating the container that holds the list. This ActionScript library is one of the most used libraries out there for this task. You can grab it from here.

LATER EDIT: QNX is using Tweener internally. So you don’t have to add this library, is already part of the SDK (qnx-screen.swc). Thanks to Julian Dolce of RIM for pointing this out.

Once you get the SWC file, you have to add it to your ActionScript mobile project. The easiest way, especially if you plan to use more libraries, is to add a folder to the ActionScript build path and configure Flash Builder so that every SWC file you drop in this folder will be added to the project.

The steps are:

Create a folder in your project. I created a folder called libs for my project.
Copy the tweener.swc file into this folder
Open the project properties page (right-click the project name and select Properties) and select the ActionScript build path. Then click the Add SWC Folder button and select the folder you created earlier. Click the OK button and you are good to go.

How do you use this library? Actually it is pretty simple. There is a static method on the Tweener class called addTween(). You use this method to specify the display object you want to animate, the properties you want to animate (could be the x, y, size, etc), and the animation duration. You can also specify a number of functions to be called for example when the animation is completed or for each step of the animation.

Here is the code for animating the list in the screen:

// rightDock is the container that holds the list
// it is docked to the right-side of the screen
Tweener.addTween(rightDock, {size : 200, time : 1, onUpdate: onUpdateTween});

private function onUpdateTween():void {
    myMain.layout();
}

And this is the code for removing the list from the screen:

Tweener.addTween(rightDock, {size : 1, time : 1, onUpdate: onUpdateTween,
    onComplete: onCompleteTween});

private function onCompleteTween():void {
    myMain.removeChild(rightDock);
}

Why do I call myMain.layout() for each step of the animation? This method is executed in order to reposition and redraw the components on the screen so they account for the width change of the rightDock container.

You can download the project source code from here.

March 23, 2011 | Filed Under AIR, PlayBook | 4 Comments

Upcoming webinar: Meet the PlayBook

If you want to find more about the PlayBook, make sure you don’t miss this free webinar: Meet the PlayBook. RIM will host a 60-minute presentation (15 minutes for Q&A). Here is the agenda:

Overview
APIs to build great apps
Skinning with QNX UI Components
BlackBerry App World (submitting apps & revenue generation)
Q&A

Depending on what works better for you, you can choose the 10AM CET or 4PM CET event, both on March 23rd.

March 18, 2011 | Filed Under PlayBook | Leave a Comment

New BlackBerry Tablet OS SDK for Adobe AIR is out

RIM just released a new beta version of their BlackBerry Tablet OS SDK for Adobe AIR (0.9.4). Here are some of the new features:

Application signing support – when you want to distribute your apps through the BlackBerry App World you have to sign them; now you can do this directly from the comfort of your own copy of Flash Builder :)
Added support for accessing the microphone and camera roll
Export release build – you use the export release feature of Flash Builder to create the .bar file for your app
Application permissions documented in the API reference doc

By now, you should know the drill: go to the RIM page and download the PlayBook Simulator and BlackBerry Tablet OS SDK.

March 15, 2011 | Filed Under PlayBook | 1 Comment

Two cool community projects: RIAForge.org and Jenkins – CI for AS projects

In case you haven’t heard of RIAForge.org I urge you to take a look. This project is maintained by Raymon Camdem and you will find open source projects built on top of Adobe technologies. Among the usual suspects, like AIR projects (about 95 for now), Flex (153 projects), or Flash (94 projects) you’ll find projects that build upon ColdFusion, Flash Builder, Dreamweaver, Photoshop just to name a few.

The second project I wanted to tell you about is a continuous integration system for Flex and ActionScript projects that uses Jerkins (formerly known as Hudson). This project was launched by the Slovakia Adobe User Group and it is maintained by Michal Gron. Bravo guys!

If you have open source ActionScript or Flex projects you can have them added to this service. So far you’ll find there AS3 Signals, AS3Corelib, Flixel, Mate framework, Parsley, PicasaFlash API, PushButton Engine, Robotlegs, and Swiz.

PS. Thanks to Juraj Michálek for pointing out these goodies :)

March 10, 2011 | Filed Under Others | 1 Comment

Are you building apps for the PlayBook tablet?

I know there are a lot of people from the Flash community who are working on applications for the PlayBook tablet. I’m one of them too :D. And there are many others who are curious about what we are building.

So here I go with a request:

if you are in the process of building a PlayBook application, drop a comment saying this and maybe an update once you’ve published the app in the store
if your application was already accepted in the store, drop a comment with a link to the app page and maybe some other comments/feedback

Thanks in advance!

March 9, 2011 | Filed Under Others | 20 Comments

Flash Player 10.3 beta available on Adobe Labs

Last night, we released the beta version of Flash Player 10.3 on Adobe Labs for Windows, Mac, and Linux. You can grab the bits from here and yes, both debug and non-debug players versions are available.

So what’s new in this release? Well, actually, there’s a lot to talk about:

Acoustic Echo Cancellation – this is one of the coolest features, because, you can create now high quality collaborative or chat apps that deliver excellent sound quality without a headset. Now, Flash Player 10.3 supports acoustic echo cancellation, noise suppression, voice activity detection, and automatic compensation for various mic input levels.
Integration with browser privacy controls for managing local storage – Flash Player 10.3 integrates the controls for local storage with the browser’s privacy settings in Firefox 4, IE 8 or higher, and future release of Safari and Chrome.
Native Control Panel – you can access the Flash Player privacy, security, and storage settings right from the Control Panel/System Preferences of your computer (Windows, Mac, and Linux).
Media Measurement – this feature enables companies to understand how their videos are distributed and consumed and to collect this data in real-time. There is a new set of open APIs that can be used to implement video analytics.
Auto-Update Notifications for Mac OS – support for automatic notifications of Flash Player updates on Mac OS.

So go to the Adobe Labs page, download the installer, give it a try, and talk back – you can discuss the features on the forum and you can report bugs here.

March 8, 2011 | Filed Under Others | 2 Comments

Wallaby: converting Flash files into HTML

I’m happy to tell you that the technology code named “Wallaby”, which was previewed at Adobe MAX last year for the first time, is now available on Adobe Labs. If you want to try it just go here and download it.

So what does “Wallaby” do? It takes a Flash FLA file as an input and converts it to HTML. And once you have the HTML files, you can edit and tweak them in an HTML editor. Here are some details about its inner workings: