MVC PatternIntroducing Cairngorm for Flex 3

Călin Iepure, calin.iepure@gmail.com

Business Applications consists of:

Presentation Layer (PL)

Business Logic (BL)

Data Layer (DL)

When PL, BL & DL are collapsed into one object in Rich User Interface, it can lead to some of the following problems:

Difficult to use data outside that object

Hard to change UI

Hard to use multiple views of the same data

PL, BL, DL…

Model – View – Controller is an architectural model used in Software Engineering

MVC is most commonly used to create interface for software applications and consist in three elements:

Model: application data + logic to manage the state of application

View: present the user interface

Controller: handles the user inputs to change the state on the application

MVC Pattern

Comparison 3-Tier with MVC

Data Layer (DAL)

Presentation Layer (PL)

Business Logic (BL)

View

Model

Controller

Views tell to controller to handle user input Controller changes model stateModel tells view to update itself View reads state information from model and update itself

Cairngorm microarchitecture

Model Locator: stores all your application’s data and shared variables, in one place

View: one or more Flex components (button, panel, tile, etc.) bundled together as a named unit, bound to date in Model Locator, and generating custom CG Events based on user interaction (click, rollover, drag-and-drop, etc)

Front Controller: receives CG Events and maps them to the CG Commands

Command: handles business logic , calls CG Delegates and/or other Commands, and updates the Value Objects and variables stored in Model Locator

Delegate: created by a Command, they instantiate remote procedure calls (HTTP, Web Services, etc.) and hands the result back to that Command

Service: defines the remote procedures calls (HTTP, Web Services, etc.) to connect to remote data stores

Cairngorm Elements

Cairngorm is an approach to organizing and partitioning

code and packages

component functionality and roles

Cairngorm is a “best-practice” methodology for Flex software design and development

Cairngorm encourages developers to identify, organize, and separate code based on its roles/responsibilities.

The purpose of Cairngorm

Mapping Functionality Roles to Cairngorm Layers

Model holds data objects and the state of the data

Controller process business logic

Views render data and announce gestures with events

Views communicate with Controller using events

Views watch Model with data bindings Views are graphical user interfaces or visual portions of

the Flex application.

Views usually are composites of UI controls or other views.

Views can contain child views

Even <mx:Application /> is a view

Separation of concerns

Cairngorm allows designers, component developers, and data-services developers to work in parallel

Cairngorm is best suited for medium to large-size applications

Cairngorm is ideal for team development

Cairngorm provides the following benefits maintenance is easier

debugging is easier

feature additions and/or changes are easier

automated testing of business logic and data access is easier

using mock data-services is easier

Benefits of using Cairngorm

Indentifying roles of code

Mapping code to Cairngorm MVC Layers and Components

Benefits Code Simplicity when using Cairngorm MVC

The Cairngorm MVC pattern provides a clear framework for design. The separation of responsibilities among the Model, View and Controller elements allow easy substitution of elements without disruption to the overall application.

This let us easily expand application based on MVC pattern to meet changing requirements.

Summary

Cairngorm Project

http://opensource.adobe.com/wiki/display/cairngorm/Cairngorm

Introducing Cairngorm

http://www.adobe.com/devnet/flex/articles/introducing_cairngorm.html

Docs

http://www.cairngormdocs.org/

Articles

http://www.adobe.com/devnet/flex/articles/cairngorm_pt1.html

Diagram Explorer

http://www.cairngormdocs.org/tools/CairngormDiagramExplorer.swf

Cairngorm Forum

http://www.adobeforums.com/webx/.59b5b4de/

Samples and Tutorials

http://www.davidtucker.net/category/cairngorm/

MVC and Installing Cairngorm in Flex 3

http://www.youtube.com/watch?v=WxHLwot7GbE

Parleys.comhttp://www.parleys.com/display/PARLEYS/Home#slide=1;talk=17301530;title=Building%20Business%20Critical%20Rich%20Internet%20Applications%20with%20Abobe%20Flex

Web Resources