Samuel Asher Rivello - PureMVC Hands On Part 1

2007 Adobe Systems Incorporated. All Rights Reserved.

1

PureMVC Hands-On Creating “Your First Project”

Samuel Asher Rivello Principal, RivelloMultimediaConsulting.com (RMC) Certified Designer & Developer (Adobe Flash)

2009 Rivello Multimedia Consulting. All Rights Reserved.

2 PureMVC: Introduction Speaker Samuel Asher Rivello is the principal of RivelloMultimediaConsulting.com (RMC), a Los Angeles area multimedia consulting company. RMC services include software architecture, consulting, development, and training. Sam has designed, developed and/or managed development of 400+ Flash and Shockwave games and applications for Fortune 1000 companies.

Sam has a decade of experience with the Flash Platform. He is an Adobe Certi!ed Designer and Developer for Flash, an Adobe Flex Champion, an international public speaker, and a university professor. His writing and programming have appeared in leading publications including Adobe’s EDGE Magazine and Adobe’s Developer Center (ADC) . In recent years his focus has shifted from Flash game development to Flex application development.

Agenda A Microarchitecturs is a group of design patterns prepared to work together in concert. PureMVC represents a leading alternative to the well-known Cairngorm framework. PureMVC is a light framework for creating applications based on the class Model-View-Controller meta designpattern. It has a very narrow goal, to provide design patterns AND development patterns to help you separate your programming into three distinct areas; data, user interface, and the application logic. It is approachable and powerful with minimal tedium and repetition in development.

In this beginner session we’ll see how to setup your !rst PureMVC based on a proven project template.

Audience Intermediate to advanced Adobe Flash CS4 and Adobe Flex 3 developers with equivalent ActionScript 3.0 knowledge

Take-Away All source code and documentation will be available to attendees.

2 v15

2007 Adobe Systems Incorporated. All Rights Reserved.

3 PureMVC: Frameworks - What & Why

What is a framework?

• A framework is a collaborating set of ‘design patterns’ (proven solutions to common problems) which assists application development

• Utilizes ‘development patterns’ (easy to follow steps for completing a programming task)

Why use a framework? • Provides conventions that, once learned, enable you to build complex applications faster • Promotes maintainability and extensibility • Helps team development • Promotes code reuse • Speeds up ramp-up time for experienced Object-Oriented developer to join project


4 PureMVC: Overview

Section 1: What is PureMVC? • Overview

• Implementation

Section 2: PureMVC Applied • Adding PureMVC to your project

• Using my PureMVCTemplate

• Building “Your First Project”

Section 3: Next Steps, QA, & Conclusion • 10 Tips for PureMVC

• Comparison to other frameworks

• References & Links

4 v15


5 PureMVC

PureMVC is based on MVC

• What: The separation of application coding interests into 3 tiers: Model, View and Controller

• Why: Eliminates the most harmful responsibility misplacement issues that hamper scalability and maintainability

5 v15


6 PureMVC: Goals

• Simple but appropriate framework scope

• Reduce confusion over application layers as well as class roles, responsibilities, and collaborations

• Balance speedy implementation with scalability and maintainability

• Avoid dependencies – entirely language-based; no Flex, Flash, or AIR packages used

• Hide complexities from the developer

6 v15


7 PureMVC: Benefits 1/2

• Loosely-Coupled Architecture • Publish/Subscribe observer noti!cation

• Promotes portability and reuse of boundary components (Model/View)

• Programmed to Interfaces • Supports extensibility via sub-classing or interface implementation

• Useful Base Implementation Classes • Out-of-box functionality requires very little sub-classing, or even direct interaction with core framework actors

7 v15


8 PureMVC: Benefits 2/2

• Built on Proven Design Patterns • All Patterns described in the classic ‘Gang of Four’ book, Design Patterns – Elements of Reusable Object Oriented Software

• Major patterns used;

• Command Pattern – Encapsulate functionality in a class for later use/reuse

• Façade Pattern – Centralize and simplify interface to more complex code

• Mediator Pattern – Create a go-between class to assist communication of two or more other classes

• Observer Pattern – Decouple class communication by using publish/subscribe setup

• Proxy Pattern – Wrapping a protected class with a proxy class to shepherd API

8 v15


9 PureMVC: Diagram

9 v15


10 PureMVC: Diagram – ‘Inside’ of PureMVC

10 v15


11 PureMVC: Diagram – ‘Outside’ of PureMVC

11 v15


12 PureMVC: The ‘Actors’

12 v15



Façade • Any Proxy, Mediator, or Command can access it

• Has most commonly used Model, View, and Controller methods

• Hides Model, View, and Controller classes; no need to import or work directly with the actors 13

v15



14 v15



Mediators and View Components • View Components are any UI components; such as DataGrids, Buttons, or Custom Components

• Mediators steward View Components, listening for their Events, inspecting and setting their properties

• Mediators interact with system on behalf of the View Component

15 v15



16 v15



Proxies & Data Objects • Data Objects can be simple data holders, such as the common VO (Value Object)

• Proxies control access to Data Objects

• Proxies may interact with remote services

• … or Delegate pattern may be used with Proxies

17 v15



18 v15



Controller • Commands house the business logic of the application

• Coordinate complex activities 19 v15


20 PureMVC: ‘Actors’

20 v15


21 PureMVC: Notifications

• Work in conjunction with, no in place of Events

• Proxies • May broadcast, but do not listen for Noti!cations

• Mediators

• Listen for and may broadcast Noti!cations

• Commands

• Triggered by and may broadcast Noti!cations

21 v15


22 PureMVC: Implementation

• Extend Façade, creating a Concrete Façade • Typically called ApplicationFacade, can be called anything

• Initialize Controller with Noti!cation names, since all actors communicate via your concrete Façade

22 v15



• Write Data Objects (any data-holding object) • Enums, Collections, Value, or Transfer Objects, XML, etc…

• Should not have any ‘knowledge’ of PureMVC or Proxy

• Write Proxies • Holds reference to a Data Object

• Exposes an API for accessing the Data Object

• May communicate with remote services to save or retrieve data

• If more than one Proxy uses same service, refactor service logic into Delegate pattern

• Sends Noti!cations to communicate with the application when data is received

• Handles Domain Logic, keeping Model data valid 23 v15



• Write Commands • Handle Business Logic, ensuring that use-cases of the system are executed properly

• May create and register Proxies and Mediators

• May retrieve and act upon Proxies

• May send Noti!cations to be responded to by Mediators

• May trigger or execute other Commands

• Will be executed by Controller when mapped Noti!cation is broadcast

24 v15



• Simple but intuitive package structure for application; separation of MVC

• ApplicationFacade is sibling to model, view, and controller folders

• Within model, view, or controller folders, you may add more folders

• model folder may have folders;

• Enum

• vo

• delegate or service

• mediator folder typically has folder;

• components



• Class Naming Conventions (Not Requirements) • Model

• Sample1Proxy • Sample1VO • Sample1Delegate • Sample3NVO

• View • Sample2UI • Sample2UIMediator

• Controller • SAMPLE_3 (Noti!cation) • Sample3Command

• Misc… • Follow your own standards or… • RMC’s AS3/MXML Standards Available


27 PureMVC: Sample Application

Hello Google Sample App • Silly, but simple & complete example using PureMVC

• The user clicks a Button which populates a TextField with text from Google’s homepage

TextField

Button

27 v15


28 PureMVC: Recap

Hello Google Sample App • Entire Interaction from UI Button click to server call/response to update UI TextField summarized in these two diagrams

• Looks complex, right?

3

4

5,7

6

7

89

1 2


29 PureMVC: Sample Application

Hello Google Sample App • Let’s View the Demo!

29 v15

Samuel Asher Rivello - PureMVC Hands On Part 1

Technology

Transcript of Samuel Asher Rivello - PureMVC Hands On Part 1