Hands on puremvc

Hands-On Flash Platform
Development using

Thursday, April 29, 2010

About Me
• Steven Diomampo, 24

• Sr. Multimedia Developer @ JWT

• Flash Platform Enthusiast

• First community presentation

• Twitter: @diomampo

• Blog: www.Steven.Diomampo.com


Before We Start

• Any word in bold italics should be in the provided
handout under Keywords & Deﬁnitions

• Don’t worry about reading the code snippets
contained in the slides, I will jump to the IDE for a
detailed view of it.

• After each section I will pause for any questions, but
feel free to chime in at anytime.


Agenda
• Overview of Frameworks & MVC

• Introduction to PureMVC
• The Facade

• Notiﬁcations

• Model, Proxies & VO’s

• View, Mediators & UI

• Controller & Commands

• Helpful Tips

• Writing our ﬁrst application


Assumptions

• Basic OOP experience, preferably using
ActionScript 3
• Basic knowledge or want to learn about
Frameworks

• Basic knowledge or want to learn about
MVC


Overview of Frameworks
and MVC


Framework Examples

Cairngorm

FlexUnit


MVC-based Frameworks

Cairngorm


MVC is not a Framework

• MVC is an architecture (in Flash it is
considered a micro-architecture)
• A Framework is a general foundation for
which you can easily extend.
• Although many Frameworks are based
on MVC, Frameworks are not MVC


General Beneﬁts
• Proven solutions

• Speeds up development

• Helps with collaborative code

• Formalized approach to something

• Community driven knowledge base


MVC Frameworks are not the
answer to everything!!!

• Additional overhead

• Might be overkill for a small project, but the
principles of separation can still be applied

• Your code does not magically become clean by using
a Framework


Checklist

• What is the shelf life of the project?
• Will I ever make updates to it? (Feature
requests, bug ﬁxes, etc.)
• Will anyone else ever work on this?
• Do I like to write documentation?


Questions?


Real world projects


Concept Build Application

Requirements Mockup



1 4

Requirements Mockup

2
3


UE SBU
T
ER F IX EQ G
C HA NG
BU UE ST
G FQ
RE
ANGE IX
CH
UE
Mockup ST
B
Requirements
UG ER EQ
FIX C HA NG


Common Approaches


The Spaghetti Approach


Show the code...


What’s wrong with that?
• Does not adhere to the Single Responsibility
Principle

• Code reusability is little to none

• The code can become unmanageable


The Roll Your Own Approach


What’s wrong with that?

• Don’t reinvent the wheel
• Ongoing support is limited
• Heavier workload (Documentation and
Testing)
• But doesn’t it offer job security???


An Alternative Approach...


About

• Created by Cliff Hall

• Open source (Creative Commons 3.0 Attribution
US License)

• Language agnostic (support for over 10
programming languages)

• Two Versions Standard and MultiCore


Goals

• The PureMVC framework has a very
narrow main goal: to help you separate
your application’s coding concerns into
three discrete tiers; Model,View and
Controller.


Why I use it?

• It’s free

• Excellent documentation

• Widely accepted and adopted

• Team collaboration

• Learning curve for a new language is reduced


Framework Actors


Core Actors and the Facade


The Developer’s Responsibility


Reusability

• View Components and Value
Objects should not contain
any references to the
Framework.

• This offers the ability to reuse
these objects in other
projects.


Communication
• Use Notifications to communicate among Actors (Publish/
Subscribe)

• Dispatch Events from a View Component

• Mediators send/recieve Notifications, and listen for Events to
be dispatch from a View Component

• Proxies send BUT CANNOT receive Notifications

• Commands send/receive Notifications

To publish a Notification, you will do this:
sendNotification(notificationName:String, body:Object=null, type:String=null);


Let’s get started...


The Facade
Overview Package Structure
• Singleton representative for the Model,View, and
Controller

• Gatekeeper to PureMVC that initializes the Framework

• Offers methods for registering, retrieving and removing
Actors

• Accessible by all Framework Actors
Usage
• Create a single subclass of Facade, usually named ApplicationFacade.as which extends Facade and implements IFacade

• Create a getInstance() method to use this class as a Singleton

• Deﬁne your Notiﬁcation names as static constants

• Override the initializeController() method and register your Commands

• Create a startup() method


Overview
Model Tier
• Model

• Singleton that holds references to Proxies.

• You will never interact directly with this

• Proxies

• Data storage, retrieval and manipulation.

• Exposes an API for other Actors to use.

• Can send Notiﬁcations, but cannot receive

• Value Object

• Dumb object that holds simple properties

Package Structure

Usage
• Create subclasses of Proxy (extend Proxy and implement IProxy)
[Note: Do not extend ﬂash.utils.Proxy]

• Create your own VO’s to be used throughout the application

• Register your Proxies using the registerProxy() method in the
ApplicationFacade

• Set or load the data (VO’s, Array, etc.) for the Proxy

View Tier
Overview
• View

• Singleton that holds references to Mediators

• You will never interact directly with this

• Mediators

• Send and receive Notifications

• Holds a reference to a Component which allows listeners to be
added, and methods to be called

• Components

• Should remain outside the scope of the Framework

• Provide a well-defined API for a Mediator to act upon

Package Structure

Usage
• Create subclasses of Mediator (extend Mediator and implement IMediator)

• Pass in a reference to the Component you would like to Mediate and addEventListeners to
it

• Override listNotificationInterests() to define which Notifications your Mediator will
receive.

• Override handleNotification() to perform actions based on each Notification

Controller Tier
Overview Package Structure
• Controller

• Singleton that holds references to
Commands via Notification names.

• You will never interact directly
with this

• Commands

• Stateless classes to be triggered by
a Notification

• Handle business logic or complex
system actions

Usage
• Create subclasses of Command (extend SimpleCommand or MacroCommand and implement ICommand)

• Override execute() within your Commands to perform logic, such as bootstrapping or manipulating a Proxy

• Register your Commands using the registerCommand() method within the Facade

• Trigger your Commands via a Notification


Quick Tips

• Generic object implementation, meaning lots
of type casting
• Does not rely on the native Flash event
system (ie: Notiﬁcations)
• Expect a bit of boilerplate code


Now What???

• SimpleCommand VS. MacroCommand
• Modules
• Design Patterns
• Dynamic Mediators and Deferred
Instantiation


Mahalo!


Resources
• http://www.puremvc.org

• http://www.adobe.com/newsletters/edge/december2008/articles/article6/
index.html?trackingid=EFBLD

• http://www.slideshare.net/jwilker/samuel-asher-rivello-puremvc-hands-on-
part-1

• http://www.asserttrue.com/articles/2007/10/17/silvafug-application-
frameworks-presentation

• http://www.codeproject.com/KB/architecture/WhatIsAFramework.aspx


Hands on puremvc

More Related Content

Similar to Hands on puremvc

Recently uploaded

Hands on puremvc