QMXML and as3viewnavigator for the PlayBook
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
<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
<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)