Basic Model View Controller (MVC) Example for Flash (AS3)
Easy to understand MVC Example
Hello folks,
I was searching the web for an example you could call MVC for dummies... What I found were mostly complex examples decorating the basic MVC relevant code with a lot of other stuff, which makes it difficult to focus on and understand the pure MVC thing.
Therefore I decided to code a very basic and minimalistic MVC example for Flash/AS3 to share it with you. The result is a tiny Flash slideshow application that allows you to navigate through a group of pictures. Very easy thing nobody would ever use a MVC pattern for..., but I hope this simple MVC will be a good starting point for someone trying to understand the Model View Controller Design Pattern.
Here you can watch a online demo (you can switch to View Source Mode via right-click). View Source Mode gives you the possibility to download the source files.
By exploring the Actionscript Classes of the slideshow application you can easily understand the distribution of tasks within the the MVC pattern:
Model: holds the data of the slideshow (e.g. the array of image filepaths or the current Image Url). The Model contains functions to manipulate models Data and dispatches update-events as soon as its data changes.
View: holds references of both Model and Contoller. The View connects to the data of the Model as soon as it receives notification by the Model (in this case by listening for the Model´s update-events). The View accepts user interactions (here of the back and next buttons) and can call the corresponding functions of the Controller.
Controller: Controller contains functions which are called directly by the View or are triggered by Model´s update-events. The controller contains the main logic of the application. Sounds not too difficult... and with this easy MVC example you get the quintessence of MVC on a plate.