The Model-View-Controller Design Pattern in Actionscript 3
Author: Bill Trikojus and Anthony Kolber
“Model-view-controller (MVC) is an architectural pattern used in software engineering. Successful use of the pattern isolates business logic from user interface considerations, resulting in an application where it is easier to modify either the visual appearance of the application or the underlying business rules without affecting the other. In MVC, the model represents the information (the data) of the application and the business rules used to manipulate the data; the view corresponds to elements of the user interface such as text, checkbox items, and so forth; and the controller manages details involving the communication to the model of user actions such as keystrokes and mouse movements.”
http://en.wikipedia.org/wiki/Model_view_controller
The MVC Design Pattern
- Creates a separation of Class roles
- Adds a clear and logical communication structure
- Increases flexibility in larger applications
Model
Handles data storage and retrieval (eg. Store character x position)
View
Handles the display/communication (eg. Position character on stage)
Controller
Handles most the of the application logic (eg. Get current x position)
MVC – basic structure
Each model can have multiple views
Each view has at least one matching controller
Creates a separation between form, content and action
The model becomes the base of the application
Communication Model
MVC planning example - Pacman Game
Here is a simple application to show MVC in action
Application abstract:
A circle which changes colour randomly every time a button is pressed
Designing the simple application
Broken down into the MVC pattern this would look like:
Download a basic Actionscript 3 MVC example that shows how to move an object around the stage using the keyboard.
Download a basic Actionscript 3 MVC example that shows how to load and display text stored in an external text file.
Download the MVC circle example discussed in the tutorial.
For more on the Model View Controller and other Design Patterns in Actionscript 3 check out 'Actionscript 3 Design Patterns
Share
Like this? Click a link below to share it...
Subscribe and Download
Comments
2008-09-10: Ikuy said:hey I think this is great can you provide another simple example of mvc like loading external data and displaying it like text and images
2008-09-10: Bill Trikojus said:
Sure. I've added another download link just above.
Hope that helps
2008-09-17: Mike Oscar said:
Thanks Bill very much for such a clear explanation on the MVC class. This is what I needed to beging my mvc journey. Thanks and keep up the good work.
2008-09-30: James said:
Thanks, I have been looking for a simple MVC implementation. Two examples are enough for me to proceed further with MVC.
Thanks again
2008-10-22: bt said:
This is awesome. Thanks for sharing this useful information.
2008-10-22: bt said:
We would appreciate to hear more design patterns from you. Thank you...
2009-01-22: Sam said:
hey Bill, could you put the circle example here. thx a lot :D
2009-01-22: Bill Trikojus said:
Hi Sam
Added link above
cheers
2009-03-05: Chris said:
Hello Bill,
Thank you very much for these examples!
I have one question about the pacman example. If i create another new pacmanMovie in the library and want to use it in the MVC model, do i have to add a new control? or can i use the existing control and add some extra methods for it? For example i would like an extra pacman that also listen to the keyboard event. But instead of moving 5pixels i want to move it 20 pixels. So that when i press the key up, the first pacman moves 5pixels up and the second 20 pixels.
Thanx
Chris
2009-03-06: Bill Trikojus said:
check out William Sanders's MVC car example here
http://books.google.com.au/books?id=lgk0Q7pMmLYC&pg=PA443&lpg=PA443&dq=sanders+MVC&source=bl&ots=mhWfMYJmMJ&sig=QODnHhnsG6fXuKNevu5jiek6wSE&hl=en&ei=fU2wSayENZz-6QPp17zzAg&sa=X&oi=book_result&resnum=1&ct=result#PPA467,M1
(after the weather map stuff)
Really shows the full power of the MVC pattern and how to use multiple Views etc
cheers
2009-03-07: Chris said:
Thanks, i will buy this book!
2009-10-02: Bill Sanders said:
From one Bill to Another, thanks for recommending our book!
I very much liked your Pacman example and the way you laid it out for your readers—very clear and helpful. It's great to see that Design Patterns are catching on among ActionScript developers.
Kindest regards,
Bill Sanders
2009-10-02: Bill Trikojus said:
Hi Bill,
Thanks for dropping by, and for writing such a great book!
All the best
Bill
2009-12-18: Manmeet S Raina said:
Thank Bill for providing nice, easy to understand examples.
Best Regards
2009-12-27: Aditya said:
Nice example
good work !
2010-02-10: Mahesh said:
A nice beginning to MVC. Good job, looking forward to hear more from you..
2010-03-13: Brian said:
These are great examples, very clear and easy to understand.
This is probably very obvious but all the simple MVC examples I've seen show one Model, View and Controller that controls the entire application -- On a bigger application is it common for different elements to have their own MVC triad?
2010-06-30: HAMED said:
thank you very much
please take many example in this site.
thanks.
i am using this example to exam... engineering software
2010-08-06: Martin Hale said:
Thankyou for this set of tutorials, it is one of the best set of examples I've seen. You've made it very clear and easy to understand!
Thanks! I'm also interested in any response you had to Brian's query above about larger applications - I'd like to see how you integrate multiplpe views/controllers and models.
Well done!
2010-12-15: jan said:
Hi, great example thankyou very much. Ive tried to download the examplefiles, but the links are not working. Any chance for updated links?
Thanks
2010-12-15: Bill Trikojus said:
Links fixed.
2011-03-13: Colin Davies said:
Having used MFC, I like this DocView approach, but how to handle multiple views , is somewhat a stumbling block.
I believe most Flash Apps, can stick with (SDI single Document Interface) but multi views is where the action is at.
Eg in a multiplayer game you want one document on the server, (possibly mirrored on the clients) But All the players views are derived from that document.
Thus, my guess is if this framework can be extended a bit it will rock.
2011-03-13: Colin Davies said:
Having used MFC, I like this DocView approach, but how to handle multiple views , is somewhat a stumbling block.
I believe most Flash Apps, can stick with (SDI single Document Interface) but multi views is where the action is at.
Eg in a multiplayer game you want one document on the server, (possibly mirrored on the clients) But All the players views are derived from that document.
Thus, my guess is if this framework can be extended a bit it will rock.
2011-03-15: Colin Davies said:
Ok; with the pacman example provided, I have found providing a second view quite easy.
Eg a view through pacman's POV looking at a cherry or monster etc.
However I suggest that what might be more appropriate would be to have an OverAllView that can be then used by all the views created.
Similar I wonder is it right to have a princiapl controller to then be derived by "Keyboard", "mouse", and whatever else, eg Accelerometer, GPS etc.
However the Model to be consistent I guess must be unique.
This theory I'm beginning to believe resolves the dilemma of, Should it be in a the view or the model. As if the problem can only be unique then it should be in the model. Thus the connection points to the unique frame of the app would be in the model and not the view. So thanks for posting this!
2011-05-23: Jim East said:
Thanks so much for posting this article this is exactly what I was looking for a basic simple example of MVC in AS3. I learned more in a few minutes here than in several days reading a text which is better suited for someone who already knows MVC.
2011-07-26: siva sankar said:
Thanks you very much I learned from u this patterns along ago. At beginning I'm confused but I'm ok.
2011-09-29: sigman.pl said:
Great tutorial, could you update your image links: http://www2.swinburne.edu.au/design/tutorials/flash/as3-mvc-design-pattern/images/pacman-mvc-overview.jpg to http://www.swinburne.....
2011-10-04: Derlierprossy said:
So informative things are provided here,I really happy to read this post,I was just imagine about it and you provided me the correct information I really bookmark it,for further reading,So thanks for sharing the information.
buy notebook
Post a comment
Garbage posts and SPAM will be deleted.