as3viewnavigator – ViewNavigator for as3/flash projects
I’m currently working on an application for the BlackBerry PlayBook tablet. The API that comes with the PlayBook SDK is based on pure AS3. Of course I could use Flex Hero for the job but I wanted to try out the “native” stuff that it comes with. My impression so far is really positive and the only thing that I’ve found missing so far was the concept of Views and ViewNavigator that comes with Flex Hero for mobile devices.
That is why I took a bit of time today to create library heavily inspired by ViewNavigator from Flex Hero that I could use for my pure as3/flash projects. The library is available for download here. Also checkout the video below for the details on how to use it.
Just for the reference, to tween the view transitions I used Tweener library that is also used internally by PlayBook API.
Below is the snippet of code that implements the example from the video above, you can also download the project source from here.
package { import com.riaspace.as3viewnavigator.ViewNavigator; import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.MouseEvent; import flash.text.TextFormat; import flash.text.TextFormatAlign; import qnx.ui.buttons.LabelButton; import qnx.ui.core.Container; import qnx.ui.core.ContainerAlign; import qnx.ui.core.ContainerFlow; import qnx.ui.core.SizeMode; import qnx.ui.core.Spacer; import qnx.ui.text.Label; [SWF(width="600", height="1024", backgroundColor="#FFFFFF", frameRate="30")] public class Main extends Sprite { private var navigator:ViewNavigator; private var viewNumber:int = 0; public function Main() { initializeUI(); } private function initializeUI():void { stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; // Creating instance of ViewNavigator navigator = new ViewNavigator(this); // Pushing first view to the navigator navigator.pushView(createView()); } private function createView():Container { var view:Container = new Container; view.flow = ContainerFlow.VERTICAL; view.align = ContainerAlign.MID; // Incrementing view number viewNumber++; // 20% spacer from the top view.addChild(new Spacer(20)); // Adding label with view number var numLabel:Label = new Label; numLabel.text = viewNumber.toString(); var format:TextFormat = new TextFormat; format.size = 70; format.bold = true; format.align = TextFormatAlign.CENTER; numLabel.format = format; numLabel.size = 100; numLabel.sizeMode = SizeMode.BOTH; view.addChild(numLabel); // 15% spacer between label above and buttons view.addChild(new Spacer(15)); // Adding "push view" button var btn:LabelButton = new LabelButton; btn.label = "push view"; btn.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void { navigator.pushView(createView()); }); view.addChild(btn); // Adding "pop view" button btn = new LabelButton; btn.label = "pop view"; btn.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void { navigator.popView(); }); view.addChild(btn); // Adding "pop all" button btn = new LabelButton; btn.label = "pop all"; btn.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void { navigator.popAll(); }); view.addChild(btn); // Adding "pop to first button" button btn = new LabelButton; btn.label = "pop to first"; btn.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void { navigator.popToFirstView(); }); view.addChild(btn); // Adding "replace" button btn = new LabelButton; btn.label = "replace"; btn.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void { navigator.replaceView(createView()); }); view.addChild(btn); return view; } } }
[...] This post was mentioned on Twitter by Paul Robertson, killerspaz, John Olson, FMC Washington DC, Ultra Red and others. Ultra Red said: as3viewnavigator – ViewNavigator for as3/flash projects: I’m currently working on an application for B… http://bit.ly/h2TORj #ultrared [...]
Tweets that mention as3viewnavigator – ViewNavigator for as3/flash projects at Space of Flex/AIR technologies -- Topsy.com
2 Feb 11 at 10:27 pm
Can you give a download link of qnx.ui classes in order to compile your sample code?
Thanks
Flesher
3 Feb 11 at 11:13 pm
[...] 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 [...]
@renaun posts: QMXML and as3viewnavigator for the PlayBook
3 Feb 11 at 11:26 pm
Piotr, I went ahead extended you classes to allow view based navigation with QMXML (QNX with MXML).
http://renaun.com/blog/2011/02/qmxml-and-as3viewnavigator-for-the-playbook/
Renaun Erickson
3 Feb 11 at 11:26 pm
@Flesher you can get it together with BlackBerry Tablet OS SDK for Adobe AIR, which you can download from here: http://us.blackberry.com/developers/tablet/adobe.jsp
p.
Piotr Walczyszyn
4 Feb 11 at 9:07 am
@Renaun this is really cool!
p.
Piotr Walczyszyn
4 Feb 11 at 9:08 am
Hi mate,
I was just about to start doing something like this.
I don’t know if I should be mad at you or happy because I can take your work and reuse it in my project!
Great work, Piotr!
Mihai, a fellow evangelist
Mihai Corlan
4 Feb 11 at 1:32 pm
Hey Mihai, I’m sorry
I just checked-in updated version that allows you to push also views based on view Class not only instance.
p.
Piotr Walczyszyn
4 Feb 11 at 2:40 pm
[...] they’re incredibly helpful when it comes to building mobile apps. Piotr, another evangelist, implemented a version for AS3 and Renaun took it and turned them into QMXML [...]
Some Great BlackBerry PlayBook Blog Posts : Ryan Stewart – Mountaineer Coding
4 Feb 11 at 11:23 pm
[...] they’re incredibly helpful when it comes to building mobile apps. Piotr, another evangelist, implemented a version for AS3 and Renaun took it and turned them into QMXML [...]
Some Great BlackBerry PlayBook Blog Posts (Adobe Flash Platform Blog)
5 Feb 11 at 5:40 am
Piotr I’m curious – why did you GPL this code?
bartholemew
5 Feb 11 at 4:27 pm
@bartholemew why not?
p.
Piotr Walczyszyn
5 Feb 11 at 4:29 pm
My understanding is anyone using your code has to make their source code available on demand – but probably not all PlayBook developers want to do that. I guess it comes down to a matter of opinion – for me GPL is great for platform software like operating systems but for application code – not so much. Lots of folks who use unencumbered open source will freely choose to contribute back to open source under MIT/BSD, without being forced into an all-or-nothing kind of “freedom” by GPL.
bartholemew
5 Feb 11 at 4:46 pm
But it is on LGPL license so only modifications to the library need to be contributed back to the project. So it can be used for closed projects as well.
p.
Piotr Walczyszyn
5 Feb 11 at 4:48 pm
But I may consider to change it to Apache 2.0, it is even less restrictive.
p.
Piotr Walczyszyn
5 Feb 11 at 5:03 pm
In https://github.com/pwalczyszyn/as3viewnavigator/blob/master/src/com/riaspace/as3viewnavigator/ViewNavigator.as
it seems to be calling out the GPL and not LGPL:
// as3viewnavigator is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
was this a copy/paste error?
bartholemew
5 Feb 11 at 5:04 pm
I just fixed it and the source is in github.
From the start it was LGPL because it also included COPYING.LESSER file in the source folder. But now it states explicitly in the header.
p.
Piotr Walczyszyn
5 Feb 11 at 5:22 pm
Thanks for clarification – I had gone straight to the source code w/out looking at everything else.
bartholemew
5 Feb 11 at 5:40 pm
This looks like a great option for iOS development in CS5 until Burrito ads true .ipa support. Thanks!
RJ Forbes
13 Feb 11 at 9:34 pm
[...] itoz RT #Flex Hero のViewNavigator機能をAS3で実装したよ記事 http://www.riaspace.com/2011/02/as3viewnavigator-viewnavigator-for-as3flash-projects/ [...]
Weekly favorite tweets in 2011.02.07 – 2011.02.13 | jp.ikekou.blog.Main
14 Feb 11 at 10:04 am
Piotr,
Very cool to have a AS3 version of the View Navigator. Good work. I’m curious about why in the View Navigator you are automatically sizing the new view to 100% of the stage. That works fine for frameworks that use container views like qnx, but really messes up Sprite-based views unless they are already sized correctly. I created a BaseSpriteView class to deal w/ some of this by overriding width and drawing in a transparent background, but was wondering if you had any thoughts on this.
John
16 Feb 11 at 4:48 pm
@John I actually removed the resizing feature from my local branch, I hope to commit it by the end of the week. You are right this first release is perfect for container type of DisplayObject’s like the one from QNX but not necessarily for Sprite’s.
Thanks for your comments!
p.
Piotr Walczyszyn
16 Feb 11 at 8:06 pm
@John you motivated me to commit the updates now. So now your view class can implement IResizable interface and react to stage size changes.
ViewNavigator will not do any modifications to width or height anymore.
p.
Piotr Walczyszyn
16 Feb 11 at 8:59 pm
Cool. Thanks Piotr. I’ve enjoyed the library so far.
John
17 Feb 11 at 12:02 am
[...] to start from scratch because my fellow evangelist, Piotr Walczyszyn, has already created a small library that does the nice tweening between two screens and implements the methods for adding a screen or [...]
Support for screen navigation and application session caching for QNX PlayBook apps : Mihai Corlan
22 Feb 11 at 1:05 pm
Hello,
Just a little question, I see that it’s actually possible to use your viewnavigator pushView() with a class definition why do you ‘store’ the entire view Object of all the previous views and not only their class ? Could it be better in a mobile context ?
Lionel
lionel
22 Feb 11 at 3:07 pm
Thanks for taking the time to create the library. It’s been quite useful in my prototypes. Please consider releasing it under Apache 2.0 license as we are not allowed to release software with any code under GPL or LGPL licenses.
Regards,
Rajesh
Rajesh
23 Feb 11 at 2:55 am
@Rajesh I’m wondering why not LGPL?
Also I have no problem in changing the license to Apache 2.0 which as I understand is less restrictive.
Piotr Walczyszyn
23 Feb 11 at 12:32 pm
@lionel the library is still evolving and I was thinking to add a feature where you could control that. Something like destructionPolicy in Flex Hero.
p.
Piotr Walczyszyn
23 Feb 11 at 1:31 pm
@Rajesh I updated the source code in github it is now Apache 2.0
p.
Piotr Walczyszyn
23 Feb 11 at 1:32 pm
Thanks for the quick turnaround on the licensing. I’ll be showing my boss the changes today and hopefully will be releasing the software on the playbook before March.
Rajesh
23 Feb 11 at 5:04 pm
The primary reason for not LGPL is that to verify we are not violating the terms of the license is that it requires a case by case evaluation with a lawyer, which unfortunately is an expense we can’t afford.
Rajesh
23 Feb 11 at 5:06 pm
Thank you for this library, it is really great. I ran into this gap of missing code when I started coding my playbook application using Native QNX components also. I wanted to use pure AS3 and not the Flex 4.5 components, which still seems a work in progress.
Paul Bradley
2 Mar 11 at 6:55 pm
How do you use the new updates to your library? Or is it ready to use?
Thanks,
Paul
Paul Bradley
3 Mar 11 at 4:12 pm
@Paul in few minutes I will publish a blog post about
p.
Piotr Walczyszyn
3 Mar 11 at 4:33 pm
Thanks! Sorry I was a little too eager, using your code before it was a release candidate. I will thoroughly test it.
Paul Bradley
3 Mar 11 at 7:23 pm
[...] After managing views within mobile Flex, I’ve seen more than one person wish for an implementation of the ViewNavigator for standard Flex development. Well, Adobe evangelist Piotr Walczyszyn thought the same thing and created as3viewnavigator, a ViewNavigator for AS3/Flash projects. [...]
Cool Stuff with the Flash Platform – 2/10/11 | Finding Out About
6 Mar 11 at 9:04 pm
Hi, Piort!
First and foremost, thank you for your work!
Second, I was wondering:
I know you create as3viewnavigator with the BlackBerry PlayBook in mind, but can/does this also work with building mobile apps for Android & iOS?
I’m trying to stay away from the bulkiness of MXML as much as possilble, and your library helps with that goal!
Thanks you in advanced!
ACJ
31 Mar 11 at 5:20 pm
@ACJ checkout this http://www.riaspace.com/2011/03/as3viewnavigator-2-0-0-rc1-released/
You can actually use it for about any Flash/Flex project no matter what platform mobile/desktop etc.
p.
Piotr Walczyszyn
1 Apr 11 at 9:15 am
Your viewNavigator works great, but can you maybe specify what happens behind the scenes?
I believe view based instances that get pushed to the viewNavigator are recreated when the next view is popped?
i’ve put a trace in the constructor and that got executed so. But the rest of the code seems to not get executed, what the hell is happening there?
Michael
18 Jun 11 at 8:01 pm
Okay, still need an explanation but i’ve found a workaround for my problem.
apparently, you need to push an instance of a View
viewNavigator.push(viewInstance).
What happens when you push a new view, then pop it with popView(); ?
The original viewInstance gets disposed, and a new one is made. however, the reference is lost!!
So to make things clear, the view you are now viewing
could be called viewInstance576 or whatever. so if you have code that attaches on for example signals in your views, then be aware: your original reference is lost.
I’ve solved it like this (which i find butt ugly but ok.):
registerMainMenuViews(MainView(viewNavigator.currentView));
Notice how i get my reference back: i typecast to the type of View i pushed to the view Navigator before, so i can re-listen to signals in that view…
maybe i should not have my views contain signals. but then, how would i manage interaction with a view?
anyone got any thoughts on this?
Michael
18 Jun 11 at 8:31 pm
I am working on a magazine app for playbook and I was looking for that exact transition. But when I used it, it displayed nothing. So I tried to add “addChild(view)” to the createView function but is still not working. Can you help me on this?
Dana
28 Jul 11 at 2:26 am
Hi, i’ve tried your code in Flash Builder 4.5, i’ve importer your library that i’ve downloaded, but in the simulator when app runs the screen it’s always white, i don’t see anything. There’s no errors, i don’t know what could be…
I hope you can help me..
blackstar26
20 Oct 11 at 12:47 pm