Post navigation

Support for screen navigation and application session caching for QNX PlayBook apps

If you’ve ever worked with Flex “Hero” mobile components you probably love the way Flex “Hero” handles the screen metaphor. It provides a neat way to encapsulate the UI and business logic for each screen in a class.

On a mobile device, you need to keep in mind that an application can be closed anytime by the operating system. This could be because the OS is trying to free some resources or maybe the battery just died. In either case when the user reopens the app, he expects to see the last screen he was working on as well as any data that was entered. Again, with Flex “Hero” mobile applications all you have to do is to set the sessionCachingEnabled to true and assign the information you want to be persisted to the data property of your views.

This is great; however if you develop applications for PlayBook using the QNX libraries (the native Tablet OS SDK for Adobe AIR) you can’t use Flex “Hero” and, as a result, you don’t have support for the screen metaphor. I wanted this kind of support for an application I plan to build for PlayBook.

Lucky for me, I didn’t have to start from scratch because my fellow evangelist, Piotr Walczyszyn, has already created a small library that does nice tweening between two screens and implements the methods for adding a screen or popping one. So, I took his library and I modified it a little bit. Why did I modify the library? First, I wanted to have session caching capabilities and to be able to push data from one screen to another in the same manner as a Flex “Hero” mobile application. And second, I wanted to make it easier to work with QNX UI components (the original library supported generic ActionScript mobile projects).

Basic usage

To use this library you have to add the library code to your project and create classes that extends org.corlan.asviews.BaseView for each view/screen you need for your application.

In the main application file you create an instance of the org.corlan.asviews.ViewNavigator class. You use its pushView() method to define the first view/screen and to move to new screens. You use the popView() method to move back to the previous screen/view or popToFirstView() to jump directly to the first view/screen.

If you need session caching for your app there are two things you have to do. First, when you create the ViewNavigator instance, you set the second argument to true. Second, you register the ViewNavigator.prepareForClosing() method as an event listener for the application Close event:

Downloading and using the library

You can download the sample project from here and the library from here.

It is quite simple to use it once you set up the library project and add it as a dependency to your ActionScript mobile project. Here are the steps:

Download the as3viewnavigator library from here and import it in Flash Builder Burrito. Then open the project properties dialig box, select Flex Library Build Path, and make sure that qnx-screen.swc file is added to the build path (you can find this swc in the sdks/blackberry-tablet-sdk-0.9.2/frameworks/libs/qnx-screen/ folder inside the Flash Builder Burrito installation folder).

Create a new ActionScript Mobile Project for PlayBook development. Then open the project properties dialog box, select ActionScript Build Path, click the Add Project, and choose the as3viewnavigator project.

Now you are ready to use it. The basic steps are:

For each screen you want, create a class that extends the org.corlan.asviews.BaseView (this class extends the QNX Container class and implements the org.corlan.asviews.IView interface). When you create the screen classes you have to keep in mind that you need to override two methods from the BaseView class:

createUI() – this is where you create the UI for the screen using the components from the QNX libraries or your own components.

applyData() – you use this method to populate the UI with the data saved in the previous session. This method is called automatically once your screen class is added to the stage.

Store whatever data you want to be persisted in the data property of your screen classes

In the main application file, you instantiate the org.corlan.asviews.ViewNavigator class and push the first screen. Also, you need to register the ViewNavigator.prepareForClosing method to listen for application Close events.

In any screen that you need to push a new screen (or move back) you just call the navigator.pushView(View-Class-Name, data), navigator.popView(), or navigator.popToFirstView() methods

Now let’s see some snippets of code to better understand the workflow. First here is the code for the main application file:

[SWF(height="600", width="1024", frameRate="30", backgroundColor="#FFFFFF")]
public class ASViews extends Sprite
{
private var navigator:ViewNavigator;
public function ASViews()
{
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
// Creating an instance of ViewNavigator
// if second argument is set to true then the history
// is persisted between sessions
navigator = new ViewNavigator(this, true);
// Pushing first view to the navigator
navigator.pushView(HomeScreen);
//listening for application closing event
//in order to save the history
NativeApplication.nativeApplication.addEventListener(Event.EXITING,
navigator.prepareForClosing, false, 0, true)
}
}

And here is the code for the first screen, HomeScreen (in the onItemSelected() method I push the second screen passing along the current selected item from the list to be used in the second screen):

In case you’re wondering how do I save the data, I’m using SharedObject and I persist an array representing the current screen stack (the screen class name and the data object for each instance).

Conclusions

Although I intend to use this library in my projects, I haven’t tested it extensively ywt. This means you may find bugs. If so, please let me know. Furthermore, there is a big difference in how this library manages the views compared to how Flex does: Flex’s ViewNavigator destroys by default a view when removing it. This library doesn’t. So, if you have lots of views with lots of components you might end up using a lot of memory. For such a use case it should be modified to mimic the Flex approach.

If you’ve started to create apps for PlayBook I’m eager to learn how you manage the screens. So, please talk back :D!

Great stuff!!! am i the only one with the new playbook vm on windows, i have a mega pc, and i worked with the previous version , but cant get the emulator running on windows,it hangs at the boot screen, not even with a static 30 gig hd and 2 gig mem. so i tried going back to the previous iso and it worked like a charm, only i patched/merged flashbuilder and hero with the new sdk and now i cant get it to work, it is driving me nuts.. it goes wrong with the signing, i create an p12 , i create an developper CSK , but i cant get it signed, it asks to refer to the location of the CSJ file , i point that one to my App/local/research in motion.. dir , but nothing works, think that it just doesnt work , could you confirm that, would i be able to use the new sdk on the old playbook and sign my bar file…i dont have the old sdk anymore so i am kind of stuck been playing with pioter’s stuff and ur kewl extensions would love to see it on the playbook.
I am guessing u are using Mac ?
thanks again!!

Hi, i want to implement view navigator logic on a popup. I have a button called settings and clicking on that I’m creating a popup with different items in it. Clicking on each item inside the popup the present view should be pushed and clicked view should come up.
Im using this is in Qnx container.Can any one please help me how can we implement push and pop with out using view navigator application
Thanks

Hi Mihai Many thanks for quick response…my collegue said the license says if you use AS3 view navigator its like some thing we need to make our code available to public….

i want to implement view navigator logic on a popup. I have a button called settings and clicking on that I’m creating a popup with different items in it. Clicking on each item inside the popup has to push another container inside the popup..

Im using this is in Qnx container.Can you please help me how can we implement push and pop logic with out using view navigator.

Im working on the magazine application, and my manager is more worried about CONSEQUENCES on using the AS3 View navigator as it is in GPL. (My understanding is anyone using your code has to make their source code available on demand ) So can you please help me out how to move further…

Is there any other way to implement push and pop logic with out using view navigator??