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 !
Post a comment
Garbage posts and SPAM will be deleted.