This example will create a component that is on stage at application startup.
To start, create a new flex project and call it PMVC_Example, then add PureMVC.swc to project->properties->build path->library path of flex project.
(you can check out the PMVC_Example source through SVN for more details and to follow along).
you will need to create the following files but do not worry about populating them yet:
- application mxml file will be created by default (PMVC_Example.mxml)
- create ApplicationFacade class that extends Facade and implements IFacade
- create a StartupCommand class that extends SimpleCommand and implements ICommand, you will be specifying this to run at startup
- create classes specific to the view component:
- create mxml view component with visual layout (put a button or something simple in it) - MyView.mxml
- create proxy class that extends Proxy and implements IProxy if component needs data (optional)- MyProxy.as
- create mediator class that extends Mediator and implements IMediator (pre-generated methods in mediator other than the constructor and proxy can be removed.) - MyMediator.as
add the following to the already created classes:
ApplicationFacade
- define a notification string to be the name of a startup notification
View CodeACTIONSCRIPT
public static const STARTUP:String = "STARTUP";
- also override public function initializeController() and register your first command so that it will execute when a startup notification is sent
- be sure to remember to call super().initializeController() here!
- (can remove all pre-generated functions from this class that were added by IFacade)
View CodeACTIONSCRIPT | |
registerCommand(STARTUP, StartupCommand); | |
Application.mxml
- add view component to stage and give it an id called testComponent
- this will be used in the command to register the view components mediator and proxy
- create public var facade:ApplicationFacade
- add a listener for creationComplete and have it call an init method
- in init method instantiate facade
View CodeACTIONSCRIPT
facade = ApplicationFacade.getInstance()
- and send startup notification
View CodeACTIONSCRIPT
facade.notifyObservers(new Notification(ApplicationFacade.STARTUP, this))
- first argument is notification name, second is notification body. we will use body to access view components on stage when we register mediators and proxies
- this notification will trigger StartupCommand to execute
StartupCommand
register mediator and proxy with references to the view component they pertain to (proxy first)
- execute() will receive reference to INotification, we are interested in the body of the notification
View CodeACTIONSCRIPT | |
var app:PMVC_Example = notification.getBody() as PMVC_Example; facade.registerProxy(new MyProxy()); facade.registerMediator(new MyMediator(app.testComponent)); | |
How to Add Interactivity to Your Basic PureMVC Component
Currently you should have on screen one basic view component, which has a registered mediator and proxy. There is nothing happening beyond this. How do I make cool shit happen?
Let's go for this: Put a Button and a Text component into your mxml view component. Clicking the button will change the text field.
- in the view, create and dispatch an event that happens when you click the button
- in the mediator listen to the view for this event, when it fires it will call a method on the mediator
- from the mediator, change the text of the text field
Yes I realize this is not cool. But it demonstrates where you should be doing things that alter your view. All logic goes in the mediator, not the view itself!
Coming Soon: how to add interactivity between multiple components.
14 Comments
>All logic goes in the mediator, not the view itself!
Hi, thanks for the great article,
I would just like to raise the question as I’m not sure about the statement “ALL LOGIC” goes in the mediator, the job of the mediator is to mediate between proxy and view and through this and notifications creates the loose coupling, but this also means if a view does not require outside data, its logic can be internal to the view.
Thanks
C
Yes. Views can certainly have their own logic, so taken out of context that statement might not make sense. But the trick is drawing the line on the responsibility of view components vs. the framework. Interaction logic, if possible should definitely be kept out of views. For example, pushing that button might not only make text appear in the text field, but kick off a notification that saves the text to a database as well.
Im not sure of a final way to word the phrase, but something like, “all interaction and application level logic should be kept out of views where possible”.
Great post! Thanks, it helps me to get started with pureMVC
Hi, thanks for this great article,it seems a simple example.
I use FlexBuilder3,and I did the same things as the article,but when i want to compile the project,It says the project has errors,just can not compile,but not errors in the files.
any idea?thank you!
Jack,
You’ll have to be a little more specific…
If you’re referring to the dreaded:
“An internal build error has occurred. Please check the Error Log.”
…then that’s an error from FlexBuilder that means something is wrong with your project setup, not the code itself.
If you google it you should find lots of pages with all kinds of different errors.
May or may not help, sometimes I find it’s easier to start a clean project from scratch and build along the way, not at the very end.
thank you,lauren!
I have solved it,Thanks again!
Hi.
I’m a newbie to Flex and to PureMVC and I’m trying to get your tutorial to work.
I’ve created all the relevant as files and mxml file, but I get an error in Flex Builder:
1118: Implicit coercion of a value with static type Object to a possibly unrelated type String.
PMVC_Example/src/mediator MyMediator.as line 27
The line it points to is:
super(viewComponent);
I’m using this as an AIR application, do I need to do anything different?
Cheers,
Neil
Neil,
Since this tutorial came out there have been some small changes to the PureMVC framework (you can find news about the updates here). If you are using the code from our repository, the swc that is included will work fine.
However, if you are using the PureMVC AS3 Version 2.0 framework files there will be a small change:
The Mediator class now takes a string as its first parameter for the mediator name, then the viewComponent object as its second. Meaning that this code is trying to pass the viewComponent without a name for the mediator. You can fix this by passing a name string when you instantiate your mediator, like this:
facade.registerMediator(new MyMediator(“mediatorName”, app.testComponent));
Thanks for your quick reply Lauren!
I am using the PureMVC AS3 Version 2.0 files, so that explains it. I’ll give what you say a try and see how it goes.
Do you know of any other good tutorials for Flex 3 PureMVC?
I’ve got a lot to learn in a small amount of time, so any other stuff I can get my hands on will help. It’s a very steep learning curve for a newbie and I found that your tutorial has helped enormously for getting my head around the framework.
Cheers,
Neil
Neil,
The PureMVC forums are the best place to look for help.
There is a lot of documentation over there, not to mention a great community in the forums. Good luck!
hey, thanks for this. It is great start for Puremvc.