MVC PatternFlex implementation of MVC

Anton Krasnoshchok

Please turn off your cell phones or set them to vibrate

Thank you for your cooperation

UI, business logic and dataBusiness applications consist of user interface (UI), business logic, and data models.

When UI, business logic and data are collapsed into one object in rich users interface, it can lead to some of the following problems:

• Difficult to use the data outside that object• Hard to change the UI, when UI and data are locked in

the same object.• Hard to use multiple views of the same data.• Difficult to synchronize multiple view of the same data.

MVC patternModel - View - Controller (MVC) is an architectural pattern

used in software engineering.

The MVC pattern is most commonly used to create interfaces for software applications, and, as the name implies, consists of three elements:

• Model: contains the application data and logic to manage the state of the application.

• View: present the user interface.• Controller: Handles user inputs to change the state on

the application.

Comparison 3-Tier with MVC

3-Tier architecture MVC architecture

PL

BL

DAL

Model

View Controller

•View tells to controller handle user inputs•Controller changes model state•Model tells view to update itself•View reads state information from model and updates itself.

Cairngorm Framework

Cairngorm elements• Model Locator: Stores all of your application’s Value Objects (data) and shared variables, in one place• View: One or more Flex components (button, panel, combo box, Tile, etc) bundled together as a named unit, bound to data in the Model Locator, and generating custom Cairngorm Events based on user interaction (clicks, rollovers, drag-n-drop etc.)• Front Controller: Receives Cairngorm Events and maps them to Cairngorm Commands.• Command: Handles business logic, calls Cairngorm Delegates and/or other Commands, and updates the Value Objects and variables stored in the Model Locator• Delegate: Created by a Command, they instantiate remote procedure calls (HTTP, Web Services, etc) and hand the results back to that Command.• Service: Defines the remote procedure calls (HTTP, Web Services, etc) to connect to remote data stores.

Mate Framework

Mate framework it is a tag-based, event-driven Flex framework.

BenefitsHighly decoupledYour classes do not extend from MateBusiness logic is independent of framework Can be tested & reused

Business logic decoupled from eventsBusiness logic decoupled from servicesEvents are normal Flash events Can be reused

Basic steps

Typically, the basic steps to create a Mate project are:

1. Add the compiled framework code to your project (Mate.swc).2. Create a file that will be the EventMap .3. Include the event map in your main Application file.4. Create a custom event.5. Somewhere, dispatch that event.6. Add EventHandlers in your event map that listen for the event type you dispatched.7. Execute some actions inside the EventHandlers block (ie: call the server, store data, etc).8. Repeat 4-7 for every event you need.

SummaryThe MVC pattern provides a clear framework for design. The separation of responsibilities among the model, view and controller elements allows easy substitution of elements without disruptions to the overall application. This lets us easily expand applications based on the MVC pattern to meet changing requirements.

Last page

Any questions?