Application Frameworks - The Good, The Bad & The Ugly

Flex London, Feb 2010 Application Frameworks The Good, the Bad & the Ugly Richard Lord Technical Architect BrightTALK www.brighttalk.com

Application Frameworks Cairngorm PureMVC Mate Swiz Parsley RobotLegs

Coming Up Model-View-Controller Managing Dependencies Managing Events Presentation Patterns What is Cairngorm 3? Some measured opinion

Model-View-Controller Model View Controller

Managing Dependencies Model View Model Model View View Controller Controller Controller

Cairngorm uses global singletons Model Singleton View Model Model Model View View Controller Controller Controller

Cairngorm uses a Singleton Model is a Singleton class ModelLocator implements IModelLocator { public static function getInstance():ModelLocator { ... } [Bindable] public var user:User; } View / Controller access that Singleton var user:User = ModelLocator.getInstance().user;

PureMVC uses a registry Model View Model Model View Model Registry View Controller Controller Controller

Accessing the model in Pure MVC Model is a registry of proxies class UserProxy extends Proxy implements IProxy { public function get user():User { ... } Add object to registry } facade.registerProxy( new UserProxy() ); View / Controller fetch proxies from the registry var userProxy:UserProxy = facade.retrieveProxy( "UserProxy" ) as UserProxy; var user:User = userProxy.user; Fetch object from registry

Others use dependency injection Model View Model Model Dependency View Injection Container View Controller Controller Controller

Accessing the model in Mate Injection rules are defined in EventMaps <mx:Script> modelManager = new ModelManager(); modelManager.user = new User(); The Model is one or </mx:Script> more regular objects <Injectors target="{ProfileView}"> <PropertyInjector source="{ModelManager}" sourceKey="user" targetKey="user"/> </Injectors> Define injection rules Properties are injected into the view public class ProfileView { public var user:User; This will be set by //... } the DI container

Accessing the model in Swiz Injection rules are defined in BeanLoaders <BeanLoader> <User id="user"/> </BeanLoader> Regular object defined in MXML BeanLoaders are instatiated in your application <SwizConfig beanLoaders="{[MyBeans]}"> Objects specify their requirements [Autowire] public var user:User; And injected into other objects

Accessing the model in RobotLegs Injection rules are deﬁned in a context class MyAppContext { override public function startup():void { injector.mapSingleton( User ); } Injection rules are } deﬁned in the context Context is instatiated in your application <MyAppContext contextView="{this}"> Objects specify their requirements [Inject] public var user:User; And injected into other objects

Accessing the model in Parsley Injection rules are defined in a configuration object <mx:Object> <User id="user"/> Model objects </mx:Object> are created in a config object Configuration object is instatiated in your application <ContextBuilder config="{MyAppConfig}"> Objects specify their requirements [Inject] public var user:User; And injected into other objects

Managing Dependencies Singleton Registry Dependency Injection

Handling Events Model View Controller

Event Bus View View View Event Bus Controller Controller Controller

Using a single event dispatcher View View View Event Dispatcher Controller Controller Controller

Using a single event dispatcher View var loginEvent:LoginEvent = new LoginEvent(LoginEvent.LOGIN); loginEvent.username = username.text; loginEvent.password = password.text; singleEventDispatcher.dispatchEvent( loginEvent ); Controller singleEventDispatcher.addEventListener( LoginEvent.LOGIN, loginHandler )

View-Controller in Cairngorm extends CairngormEvent View var loginEvent:LoginEvent = new LoginEvent( LoginEvent.LOGIN ); loginEvent.username = username.text; loginEvent.password = password.text; loginEvent.dispatchEvent(); Front Controller addCommand( LoginEvent.LOGIN, LoginCommand ); Command public class LoginCommand extends Command { public function execute( event:Event ):void { var loginEvent:LoginEvent = event as LoginEvent; ... } }

View-Controller in Pure MVC View Notifications are var loginData:LoginData = new LoginData(); like Events loginData.username = username.text; loginData.password = password.text; sendNotification( NotificationNames.LOGIN, loginData ); Controller registerCommand( NotificationNames.LOGIN, LoginCommand ); Command public class LoginCommand extends SimpleCommand { public function execute( note:INotification ):void { var loginData: LoginData = note.getBody() as LoginData; ... } }

View-Controller in RobotLegs View var loginEvent:LoginEvent = new LoginEvent(LoginEvent.LOGIN); loginEvent.username = username.text; loginEvent.password = password.text; Reference to eventDispatcher.dispatchEvent( loginEvent ); central dispatcher is injected Context commandMap.mapEvent( LoginCommand, LoginEvent.LOGIN ); Command public class LoginCommand extends Command { [Inject] public var event:LoginEvent; public function execute():void { ... } }

View-Controller in Parsley Central dispatcher will View redispatch this event [Event(name="login",type="LoginEvent")] [ManagedEvents("login")] var loginEvent:LoginEvent = new LoginEvent(LoginEvent.LOGIN); loginEvent.username = username.text; loginEvent.password = password.text; dispatchEvent( loginEvent ); Conﬁguration <DynamicCommand type="" selector="login"/> Command public class LoginCommand { public function execute( event:LoginEvent ):void { ... } }

View-Controller in Parsley II Central dispatcher will View redispatch this event [Event(name="login",type="LoginEvent")] [ManagedEvents("login")] var loginEvent:LoginEvent = new LoginEvent(LoginEvent.LOGIN); loginEvent.username = username.text; loginEvent.password = password.text; dispatchEvent( loginEvent ); The method Controller handles this event [MessageHandler(selector="login")] public function loginHandler( event:LoginEvent ):void { ... }

Using the display list Add listeners here System Manager Application Pop-up Display Object Display Object Module Display Object Display Object Display Object Display Object Display Object Display Object

View-Controller in Swiz View var loginEvent:LoginEvent = new LoginEvent(LoginEvent.LOGIN, true); loginEvent.username = username.text; loginEvent.password = password.text; dispatchEvent( loginEvent ); Bubbling Event Controller [Mediate(event="LoginEvent.LOGIN")] public function loginHandler( event:LoginEvent ):void { ... }

View-Controller in Mate View var loginEvent:LoginEvent = new LoginEvent(LoginEvent.LOGIN, true); loginEvent.username = username.text; loginEvent.password = password.text; dispatchEvent( loginEvent ); Bubbling Event Event Map <EventHandlers type="{LoginEvent.LOGIN}"> ... </EventHandlers>

Mate has local event maps Main event map System Manager Application Pop-up Display Object Display Object Module Local event map Display Object Display Object Display Object Display Object Display Object Display Object

Event Bus Single Event Dispatcher (may have multiple with access method) Display List (may use localised event handling)

Presentation Patterns View View Model logic display Controller

Code Behind View Display <LoginCanvas> <VBox> <TextInput id="username"/> <TextInput id="password"/> <Button click="sendLogin( username.text, password.text )"/> </VBox> </LoginCanvas> View Logic class LoginCanvas extends Canvas { public function sendLogin( username, password ) { .... } }

Presentation Model View Display <Canvas> <LoginPresentationModel id="pm"/> <VBox> <TextInput id="username"/> <TextInput id="password"/> <Button click="pm.sendLogin( username.text, password.text )"/> </VBox> </Canvas> View Logic class LoginPresentationModel { public function sendLogin( username, password ) { .... } }

Supervising Controller View Display <Canvas> <VBox> <TextInput id="username"/> <TextInput id="password"/> <Button click="dispatchEvent( new LoginEvent( LoginEvent.LOGIN, username.text, password.text ) )"/> </VBox> </Canvas> View Logic class LoginController { public function LoginController( display:LoginDisplay ) { display.addEventListener( LoginEvent.LOGIN, sendLogin ); } private function sendLogin( event:LoginEvent ) { .... } }

Passive View View Display <Canvas> <VBox> <TextInput id="username"/> <TextInput id="password"/> <Button id="loginBtn"/> </VBox> </Canvas> View Logic class LoginController { public function LoginController( display:LoginDisplay ) { display.loginBtn.addEventListener( MouseEvent.click, sendLogin ); } private function sendLogin( event:MouseEvent ) { .... } }

Presentation Patterns Code Behind Presentation Model Supervising Controller Passive View PureMVC & Robotlegs Mediators

Setting up the mediator Pure MVC facade.registerMediator( new LoginMediator( loginView ) ); Logic Display RobotLegs mediatorMap.mapView( LoginView, LoginMediator ); Display Logic

So what is Cairngorm 3? Cairngorm 3 == Parsley 2.2

Summary and Opinion Cairngorm PureMVC Mate Swiz Parsley RobotLegs

Framework or Toolkit MVC Framework Toolkit Cairngorm Swiz PureMVC Parsley Mate RobotLegs

Platforms Flash & Flex Flex only PureMVC Cairngorm Parsley Mate RobotLegs Swiz

Modular features Yes No PureMVC (multicore) Cairngorm Mate PureMVC (standard) Parsley RobotLegs Swiz

Community involvement Corporate Community Cairngorm Robotlegs Parsley Swiz Mate PureMVC

History and evolution Generation 1.0 Cairngorm Out of date PureMVC Generation 1.5 Mature Mate Swiz Generation 2.0 Parsley Cutting edge RobotLegs

This is me www.richardlord.net twitter.com/Richard_Lord

http://www.richardlord.net	1854
http://www.comingx.com	400
http://www.cnblogs.com	381
http://vkostin.com	229
http://www.slideshare.net	95
http://notizen.video-flash.de	43
http://archive.cnblogs.com	10
url_unknown	10
http://cache.baidu.com	9
http://static.slidesharecdn.com	3
http://intern.zumkuckuck.com	2
http://translate.googleusercontent.com	2
http://www.twylah.com	2
http://www.zhuaxia.com	1
http://www.sogou.com	1

Application Frameworks - The Good, The Bad & The Ugly

by Richard Lord on Feb 18, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

15 Embeds 3,042

Statistics

Application Frameworks - The Good, The Bad & The Ugly — Presentation Transcript