QMXML and as3viewnavigator for the PlayBook

Posted on February 3, 2011 | 7 comments

I continue to play with different ideas around using QNX (ActionScript 3 only classes) with MXML (non-Flex MXML) in a project called QMXML. My co-worker, Piotr Walczyszyn, at Adobe posted some classes to that provide view based navigation in ActionScript 3. I decided to extend his classes and make them work with QMXML. The source code for the examples below is on https://github.com/renaun/QNXUIExamples/ViewNavigator.

View based navigation allows you to push new views on to a stack and then navigate the views by popping or pushing views on or off. Also allows for navigating directly back to the first view. Its a lot like breadcrumbs. In the case of QMXML I create 2 new classes, QView that extends QContainer but implements IView. I decided on another class so if you don’t want to do view based navigation you can just use QContainer as is. The IView interface provides QView with the navigator property that you can use inside that view to pop or push views. The QViewNavigator extends Piotr’s original ViewNavigator but provides some extra properties to easily set the application (DisplayObject that will have a reference to stage) and the firstView in MXML. Continue below to see it in action in the video and some of the code.

Extending as3viewnavigator with QMXML classes to use in MXML from Renaun Erickson on Vimeo.

Here is the what source code looks like in the ViewNavigator example project.

Main ViewNavigator.mxml

<?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"
    size="100" >
    <fx:Script>
        <![CDATA[
            import views.FirstView;
        ]]>
    </fx:Script>
    <fx:Declarations>
        <r:QViewNavigator application="{this}" firstView="{FirstView}" />
    </fx:Declarations>
</r:QApplication>

View class FirstView.mxml

<?xml version="1.0" encoding="utf-8"?>
<r:QView xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:r="http://ns.renaun.com/mxml/2010"
          xmlns:text="qnx.ui.text.*"
          xmlns:buttons="qnx.ui.buttons.*"
          flow="{ContainerFlow.VERTICAL}" >
    <fx:Script>
        <![CDATA[
            import qnx.ui.core.ContainerFlow;

            protected var nextView:QView;
           
            protected function addView():void
            {
                if (!nextView)
                    nextView = new SecondView();
                navigator.pushView(nextView);
            }

        ]]>
    </fx:Script>
    <text:Label text="View 1" />
    <buttons:LabelButton label="Goto New View" click="addView()" />
</r:QView>


NOTE: The QMXML github is using a git submodule to link in the as3viewnavigator github repo. So if you are pulling down the QMXML git repo beware of the submodule.

  • Pingback: Tweets that mention @renaun posts: QMXML and as3viewnavigator for the PlayBook -- Topsy.com

  • Pingback: Some Great BlackBerry PlayBook Blog Posts : Ryan Stewart – Mountaineer Coding

  • Pingback: Some Great BlackBerry PlayBook Blog Posts (Adobe Flash Platform Blog)

  • Paul Bradley

    Hi Renaun,

    Someone said that there is a disclaimer some where saying we cannot use Flex 4.5 for production/commercial releases? If this is true, we shouldn’t build production apps with Flex 4.5 yet?

    Thanks.

    • http://www.renaun.com Renaun Erickson

      The Flex SDK is open source and can be used for commercial products. Flex Hero (4.5) along with Flash Builder preview are just that previews, so support from a tooling standpoint is limited but there is no limit on using in production/commerical releases. Any beta/preview is more of use at your own risk.

      • Paul Bradley

        Thanks Renaun that answers my question perfectly. Good work on the view navigation with QNX. :)

  • Angela Han Victorio

    thanks a lot. it works great!

  • Angela Han Victorio

    Hi Renaun,

    How can I show splash screen image when using QApplication and the viewnavigator?

    thanks,

    Angela

    • Angela Han Victorio

      Hmm.. it actually works the same as spark mobile application. For some reason, the splashScreenImage code completion didn’t come up when I type it for QApplication. But it actually works. that’s great.

      • http://www.renaun.com Renaun Erickson

        The projects sometimes take a clean and refresh to recognize the new SWC’s, glad it worked.