MVC Pattern Flex implementation of MVC Anton Krasnoshchok

Please t urn o ff your c ell p hones or set them to vibrate Thank y ou f or y our c ooperation

UI, business logic and data Business 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.

Business 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 pattern Model - 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.

Model - 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.

3 -Tier architecture

MVC architecture

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.

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. Benefits Highly decoupled Your classes do not extend from Mate Business logic is independent of framework Can be tested & reused Business logic decoupled from events Business logic decoupled from services Events 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.

Summary The 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 ?

Any questions ?