Most developers who are relatively new to Patterns immediately think “MVC” when they here the term “Design Patterns”, and this makes perfect sense considering most of developers have either been using MVC for a long time or have construed their own variations of it’s implementation. What ever the case it is important to understand the basic concepts and implementation of Model-View-Controller, especially as it pertains to Rich Internet Applications, or more specifically, Flex Applications.

Model-View-Controller falls under the category of what is known as a compound pattern, that is, a combination of several different Design Patterns to create a named solution. The patterns that make up MVC are typically the Observer Pattern (Model), Strategy Pattern (View and Controller) and the Composite Pattern (View). MVC originated in the Smalltalk-80 language back in the 80’s and it has since been implemented by just about every programming language that requires a user interface, so it is a perfect solution for building Flex Applications.

Implement MVC in Flex Applications is very simple as Event dispatching and data binding can be utilized to simplify invocation between members of the MVC triad. This allows developers to remove the somewhat awkward Observer pattern which is dependent on passing references of each member throughout the MVC triad.

The MVC paradigm is a way of breaking an application, or more commonly, just a piece of an application’s interface, into three parts: the model, the view, and the controller. Each member is intentionally segregated and represented by an object that is responsible for handling a specific task within the application.

Model: The model is used to manage information and notify observers when that information changes (typically via data binding).

View: The view is responsible for rendering the model to the user. This is usually rendered as a visual display but a view may also be a sound, a controller vibrating or anything that needs to be conveyed to the user.

Controller: The controller accepts input from the user (via Event Dispatching) and instructs the model and view to perform actions based on that input. In effect, the controller is responsible for mapping end-user action to application response. For example, if the user clicks the mouse button, the controller is responsible for determining how the application should respond.

To view a simple example which demonstrates implementing MVC in Flex 2 / ActionScript 3.0 click here.