Posts Tagged PureMVC
Some tricks when switching to Robotlegs from PureMVC
From the past posts and a couple of tweets, you all know I have been playing around with Robotlegs. Also, up until now, my framework of choice has been PureMVC, so what I want to do in this post is inform you of the little road bumps I hit when trying to learn the new framework.
Public dependency injection
The first one is really small. Robotlegs makes use of dependency injection (more on that in a later post) and to do so you have to put a meta tag [Inject] before you variable declaration. That is all good, just remember to make your variable public or else you’ll get an error. I wasn’t accustomed with the error I got so it took me some time to find out why I got it.
[Inject] public var view:Footer; //remember to make public injectable variables
Playing with models
First thing first, when creating my model I was looking to extend the Model class from the Robotlegs framework. Turns out there is no such class; models should extend the Actor class. Services also extends the Actor class.
The next gotcha was a little weird to me at first because it is different from PureMVC mindset. Robotlegs does lazy instantiation, so when you map a model using the injector.mapSingleton method the model will only be created the first time it is injected (that is how I understood it). For some models this is ok, but for others they need to be created before that. In order to do so you use injector.instantiate method and pass it the class you want to create. Here is the code for it and how you would pass data to your newly created model:
injector.mapSingleton(ApplicationModel); var appModel:ApplicationModel = injector.instantiate(ApplicationModel); appModel.init("whatever you want here");
Where do I list and handle framework events?
This is the big plus for Robotlegs, no more handling notifications but not listing them and then not figuring out why it doesn’t work. Robotlegs uses the same mechanism, in a mediator, to listen to view events than to listen to framework events which makes it easier to deal with.
So to listen to a view event I would do this:
eventMap.mapListener(view, StringEvent.HIT_ZONE_ROLL_OUT, _onRollOut, StringEvent);
and to listen to a framework event I would do this:
eventMap.mapListener(eventDispatcher, StringEvent.RESIZE, _onResize, Event);
Robotlegs basically wraps around the traditional addEventListener method and what does this give us as an additional bonus? We don’t ever have to set these listeners to weak reference because that is the way they are set by default. Oh, the joy!
Learning a new framework isn’t an easy task (at least when you don’t know any), but I found that learning Robotlegs from a PureMVC background was pretty easy. I hope you will take the time to check it out.
A real portfolio and the sources to go with it
Well ya it’s kinda was crazy that I am a Flash dude and that I had an html portfolio. Well that time is over!
Go see my new portfolio here : http://www.zedia.net/portfolio2010/
Now I am not a designer, so I did my best in that domain and I think I managed pretty well but you know, a designer would still have done better. There are still some tweaks I want to do: add sounds, individual urls for projects, analytics, loading indicators, add dates to projects, etc. I will continue to work on it but I thought it was good enough to show.
I built it using FlashDevelop and compiled using the Flex compiler version 4. I used Flash to make the visuals and exported those as swc to import them in my ActionScript project. I used PureMVC as my framework.
Since this is my project I can do what I always wanted to do and share the sources for it. I tried to comment it a bit and I am not saying that this is how one should code, but I have found that you can learn a great deal by looking at someone else’s code. That is what I am offering to you. You can reuse my code for whatever you want I don’t care, just don’t reuse my logo.
Here are the files:
Robotlegs templates for FlashDevelop
I just finished my first project using Robotlegs and I can say I really like it. Way less code to write. The only thing that bothers me is that you have to create new Events when you want to pass around complex data but I think AS3Signals might fix that so I will look into that later on.
Since I have all my templates for PureMVC done in FlashDevelop, I thought I would do the same for Robotlegs. So I have built a template for a Command, a Context, a Mediator, an Actor and I also put in a ResizeModel (I know some people do this in a mediator but if you want to change this go ahead). Now, I don’t think these will be perfect, but it is a good starting point.
I am also working on a AS3 Project – Robotlegs template, but I want to try it out before I give it out. When I am pleased with it, I’ll post it along with an update of the other templates.
Here is the files with the templates:
To add them in FlashDevelop, in the Tools menu click in Application Files. This will open the folder where the applications files for FlashDevelop are. In there open the Templates folder, then the ProjectFiles folder, then the AS3Project folder. Now copy the Robotlegs folder you downloaded there. To use them, in the project view in FlashDevelop, right click on a folder, click “Add” and then Robotlegs. At that point you will see the five templates you just added.
My verdict on FDT
Posted by zedia.net in FlashDevelop on December 10th, 2009
I said I would try FDT for a month and I am sad to say that I did not find it superior to FlashDevelop. FDT has some good sides and even stuff that it does better than FlashDevelop, here are some:
- compile errors while editing
- debugger
- ant support
But it has two major problems, first it is built on Eclipse which makes it much more complicated than it should be. Secondly it is very expensive (well I had more problems with it than just that, but these are the game changers). I don’t even understand why it cost so much… It even cost more than Flash Builder. Anyway that seems weird to me, but maybe it’s just me. Anyway in comparison to FlashDevelop which is free, it doesn’t stand a chance.
While venturing in the FDT world we came across templates, snippets and short keys. Those are very useful things when you use them. Templates are also time savers when you are using PureMVC because when you want to create a Mediator, all you have to provide it is the mediator name, and it’s view name and type and it will generate the rest; no more copy paste from other mediator. Also project template are very cool. Snippets are mini templates, for example to generate getters and setters. Short cuts are combination of keys you press to do an action instead of going trough a menu to do the same action. Well, it just happens that FlashDevelop has all those things, but I just wasn’t using them… So out of all this I came out with increased efficiency.
FDT might still be a very good tool, mostly if you are already familiar with Eclipse, but for me FlashDevelop is still the way to go. If FlashDevelop gets a Debugger than I won’t even ask myself the question.
2 new tools for The Home Depot: considering carpet and treat your windows
Posted by zedia.net in Twist Image on July 31st, 2009
I haven’t written in the last month or so and I wanted to put an end to this. Two new Twist Image productions were just put live for The Home Depot : considering carpet and treat your windows. They are basically tools to help you choose carpets and window coverings. While I can’t say that I was as much involved with those project that the 3 before (think in colour, redefining floors and transition to tile), these projects have been really great at introducing the PureMVC framework to new developers. Since they didn’t have to build them from scratch because they are based a lot on the previous tools, these projects gave PureMVC a better learning curve and really showed them the advantages of using the framework. I didn’t have to do any convincing after that to get them to use PureMVC on every project we do.
The technologies used were about the same as the previous ones. This raises the number of tools we did for The Home Depot to 5 and our toolbox is nearly completed but stay tuned for something new in a near future.
Here are the links again:
PureMVC Skeleton for ActionScript projects
I had previously done a PureMVC skeleton for Flash websites and applications, meaning that you would use the Flash IDE compiler to compile your project. Lately I have been doing more and more ActionScript projects (compiled using the Flex compiler but not using the Flex framework) because it permits the separation of big FLAs into smaller ones thus facilitating working in team. But I had no template/skeleton to start with until now.
So here it is:
PureMVC ActionScript Project Skeleton
It still uses an external preloader and I added a local Boolean so that the application knows your are testing locally and not on the sever (useful when making server call). One of the major change is the inclusion of the SharedAssetLibrary. Basically this emulate having one FLA with all graphics and MovieClip, but you actually can have multiple FLAs. When you want to add something to the SharedAssetLibrary you first add it to a FLA, set it to Export for ActionScript and then compile it to the swf folder. Then you can add it in the SharedAssetLibrary using the embed statment:
//BackgroundAsset being the name you gave it in the library [Embed(source="../../../swf/Background.swf", symbol="BackgroundAssets")] public var BackgroundAssets:Class;
Now if you want to use this in any of your views, first import SharedAssetLibrary and than you can use it like this:
var BackgroundAssets:Class = SharedAssetsLibrary.getInstance().getAsset("BackgroundAssets"); var assets:* = new BackgroundAssets(); addChild(Sprite(assets));
I included a FlashDevelop project file in there, but you can just delete it if you use Flash Builder.
Using a skeleton greatly reduce the setup time of a project, so I hope this will help you. I want to look into doing a skeleton for Flex Application, because I don’t like the skeleton that is available on the PureMVC website.
Transition to tile: third RIA for Home Depot
Posted by zedia.net in Twist Image, Uncategorized on April 22nd, 2009
Yes this is the third installment of tools we did for the Home Depot and I can say that working on this one was just simple and easy, mostly because we used PureMVC on the previous one. As you can see, Transition to tile reuse a lot of components from Redefining floors, but the middle part is really different. Making the changes and adjusting what was already there really was a breeze and that is were you see the advantages of using a framework. The technologies we used were mostly the same as the one before but I am going to list them here again:
- TweenLite
- PureMVC
- SWFAddress
- SWFObject
- Alcon (for tracing SWFAddress stuff)
- Google Analytics for Flash
I hope you like the tools we are building for Home Depot because there is more in the pipeline.
Show Your Pride: Just Moo
Posted by zedia.net in Twist Image on March 27th, 2009
I’m happy to announce that we just lanched today a campaign for the Dairy Farmers of Canada. My part in this was to do develop the microsite, but their was an entire team working on the facebook application, the banners, the widget. We worked really hard on this and I think this is going to be a sucessfull campaign. I went on again using PureMVC even if this was more a website than an application and I can say that I really don’t regret it. Even if we kept adding features, the project grew correctly and I could go back in the code in a month and I would still be a happy developper and understand where everything is. Here is a list of the features / libraries used in the project:
- PureMVC
- SWFObject from Google hosted libraries API
- TubeLoc (I had a few problems using it at first, but I could do it way faster now)
- The microsite resizes to fit smaller resolutions
- TweenMax (I am going to use the colorMatrixFilters everywhere now)
One of the goal of the campaign is to get the most people clicking on a button on June 3rd to make a world record. You can click on the button from facebook, banners, the microsite and a widget like this one:
Congrats to the entire team at Twist Image who worked on this. So check it out: The Great Canadian Moo.
And I forgot on June 3rd, go back to the microsite and go beserk on the moo button!
How to handle Stage resizes with PureMVC
I am starting to like the Proxies a lot in PureMVC because I am always creating new ones (Google Analytics Proxy, SWFAddress Proxy, etc) and they are reusable from project to project.
The latest one is a Proxy that keeps track of the resizing of the stage. I found it was a nice way to handle the problem where you set the stage to NOSCALE and you want to handle the resizing yourself. In those situation you would have multiple views/elements reacting differently + you would have to manage adding and removing listener to the stage. Now with one Proxy setting one listener to the stage and sending notifications whenever it resizes, I found it was simpler. Here is the code for my Proxy:
package com.zedia.model{ import com.zedia.ApplicationFacade; import flash.display.Stage; import flash.events.Event; import flash.events.MouseEvent; import org.puremvc.as3.interfaces.IProxy; import org.puremvc.as3.patterns.proxy.Proxy; /** * Model for the everything that is related to Resizing. * */ public class ResizeProxy extends Proxy implements IProxy{ public static const NAME:String = "ResizeProxy"; private var _stage:Stage; public function ResizeProxy(newStage:Stage){ super(NAME); _stage = newStage; _stage.addEventListener(Event.RESIZE, _onStageResize, false, 0, true); } public function get stageWidth():Number { return _stage.stageWidth; } public function get stageHeight():Number { return _stage.stageHeight; } private function _onStageResize(event:Event):void { facade.sendNotification(ApplicationFacade.STAGE_RESIZE); } } }
Now in the StartupCommand of your application you register the Proxy and pass it an instance of the stage. It is easy to do so because you already have to pass one instance of the stage to the ApplicationMediator. Once that is done, your Proxy is running and sending the notifications. All that is left is to listen and to handle the notifications in the Mediators of the views that needs to react to the resizing; as simple as that.
PureMVC Skeleton for Flash Applications / Websites
I have done a couple of site using PureMVC and Flash and it seems that at the beginning of a project I’m always doing the same things, creating the ApplicationFacade, the folder structure, the main fla, etc. I thought it might be useful to slap together a generic skeleton for a PureMVC Flash application or website. You can download it here:
All you have to do is in the src/com folder, rename the folder PROJECT_NAME to your project, and do a find and replace in files for PROJECT_NAME to replace it with what you changed the forlder name to. I didn’t include the PureMVC library in there because I suggest fetching the files from the official PureMVC website so that you always get the latest version. Once you get them, put them in the lib folder and you should be able to compile.
The rar file contains the following:
- Main.fla, Preload.fla
- Main.as
- ApplicationFacade.as
- StartupCommand.as
- ApplicationDataProxy.as
- ApplicationMediator.as
- IMain.as (Interface so that the preloader can use the init function of Main.as)
- the folder structure
This should help save half an hour every new PureMVC project.




