Hands-On Flash Platform
                             Development using




Thursday, April 29, 2010
About Me
         •      Steven Diomampo, 24

         •      Sr. Multimedia Developer @ JWT

         •      Flash Platfo...
Before We Start

                   •       Any word in bold italics should be in the provided
                           ...
Agenda
                   •       Overview of Frameworks & MVC

                   •       Introduction to PureMVC
       ...
Assumptions

                      • Basic OOP experience, preferably using
                           ActionScript 3
    ...
Overview of Frameworks
                                  and MVC




Thursday, April 29, 2010
Framework Examples

          Cairngorm



                                         FlexUnit




Thursday, April 29, 2010
MVC-based Frameworks

          Cairngorm




Thursday, April 29, 2010
MVC is not a Framework

                      • MVC is an architecture (in Flash it is
                           consider...
General Benefits
                      •    Proven solutions

                      •    Speeds up development

           ...
MVC Frameworks are not the
                      answer to everything!!!

                   •       Additional overhead

...
Checklist

                      • What is the shelf life of the project?
                      • Will I ever make updates...
Questions?



Thursday, April 29, 2010
Real world projects



Thursday, April 29, 2010
Concept     Build Application




          Requirements        Mockup




Thursday, April 29, 2010
Concept             Build Application


                   1       4




          Requirements                Mockup



 ...
Concept     Build Application




          Requirements        Mockup




Thursday, April 29, 2010
Concept                 Build Application
                                    UE SBU
                                     ...
Common Approaches



Thursday, April 29, 2010
The Spaghetti Approach




Thursday, April 29, 2010
Show the code...



Thursday, April 29, 2010
What’s wrong with that?
                      •    Does not adhere to the Single Responsibility
                          ...
The Roll Your Own Approach




Thursday, April 29, 2010
What’s wrong with that?


                      • Don’t reinvent the wheel
                      • Ongoing support is limi...
An Alternative Approach...




Thursday, April 29, 2010
About

                      •    Created by Cliff Hall

                      •    Open source (Creative Commons 3.0 Attr...
Goals

                      • The PureMVC framework has a very
                           narrow main goal: to help you s...
Why I use it?

                      •    It’s free

                      •    Excellent documentation

                 ...
Thursday, April 29, 2010
Framework Actors




Thursday, April 29, 2010
Core Actors and the Facade




Thursday, April 29, 2010
Core Actors and the Facade




Thursday, April 29, 2010
The Developer’s Responsibility




Thursday, April 29, 2010
Reusability


                           • View Components and Value
                             Objects should not conta...
Communication
            •      Use Notifications to communicate among Actors (Publish/
                   Subscribe)

   ...
Questions?



Thursday, April 29, 2010
Let’s get started...



Thursday, April 29, 2010
The Facade
     Overview                                                                Package Structure
           •    ...
Show the code...



Thursday, April 29, 2010
Questions?



Thursday, April 29, 2010
Overview
                                                               Model Tier
           •         Model

           ...
Show the code...



Thursday, April 29, 2010
Questions?



Thursday, April 29, 2010
View Tier
                                                                      Overview
                                 ...
Show the code...



Thursday, April 29, 2010
Questions?



Thursday, April 29, 2010
Controller Tier
    Overview                                                                              Package Structur...
Show the code...



Thursday, April 29, 2010
Questions?



Thursday, April 29, 2010
Quick Tips

                   • Generic object implementation, meaning lots
                           of type casting
  ...
Now What???

                   • SimpleCommand VS. MacroCommand
                   • Modules
                   • Design ...
Mahalo!



Thursday, April 29, 2010
Resources
                      •    http://www.puremvc.org

                      •    http://www.adobe.com/newsletters/e...
Upcoming SlideShare
Loading in …5
×

Hands on puremvc

2,121 views

Published on

Published in: Technology
2 Comments
0 Likes
Statistics
Notes
  • Sorry, I didn't screen grab any of the code and plug into the slides. At the time it was mostly for discussion purposes.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • why the show the code slides were blank?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
2,121
On SlideShare
0
From Embeds
0
Number of Embeds
293
Actions
Shares
0
Downloads
45
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

Hands on puremvc

  1. 1. Hands-On Flash Platform Development using Thursday, April 29, 2010
  2. 2. About Me • Steven Diomampo, 24 • Sr. Multimedia Developer @ JWT • Flash Platform Enthusiast • First community presentation • Twitter: @diomampo • Blog: www.Steven.Diomampo.com Thursday, April 29, 2010
  3. 3. Before We Start • Any word in bold italics should be in the provided handout under Keywords & Definitions • 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. Thursday, April 29, 2010
  4. 4. Agenda • Overview of Frameworks & MVC • Introduction to PureMVC • The Facade • Notifications • Model, Proxies & VO’s • View, Mediators & UI • Controller & Commands • Helpful Tips • Writing our first application Thursday, April 29, 2010
  5. 5. Assumptions • Basic OOP experience, preferably using ActionScript 3 • Basic knowledge or want to learn about Frameworks • Basic knowledge or want to learn about MVC Thursday, April 29, 2010
  6. 6. Overview of Frameworks and MVC Thursday, April 29, 2010
  7. 7. Framework Examples Cairngorm FlexUnit Thursday, April 29, 2010
  8. 8. MVC-based Frameworks Cairngorm Thursday, April 29, 2010
  9. 9. 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 Thursday, April 29, 2010
  10. 10. General Benefits • Proven solutions • Speeds up development • Helps with collaborative code • Formalized approach to something • Community driven knowledge base Thursday, April 29, 2010
  11. 11. 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 Thursday, April 29, 2010
  12. 12. Checklist • What is the shelf life of the project? • Will I ever make updates to it? (Feature requests, bug fixes, etc.) • Will anyone else ever work on this? • Do I like to write documentation? Thursday, April 29, 2010
  13. 13. Questions? Thursday, April 29, 2010
  14. 14. Real world projects Thursday, April 29, 2010
  15. 15. Concept Build Application Requirements Mockup Thursday, April 29, 2010
  16. 16. Concept Build Application 1 4 Requirements Mockup 2 3 Thursday, April 29, 2010
  17. 17. Concept Build Application Requirements Mockup Thursday, April 29, 2010
  18. 18. Concept Build Application 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 Thursday, April 29, 2010
  19. 19. Common Approaches Thursday, April 29, 2010
  20. 20. The Spaghetti Approach Thursday, April 29, 2010
  21. 21. Show the code... Thursday, April 29, 2010
  22. 22. What’s wrong with that? • Does not adhere to the Single Responsibility Principle • Code reusability is little to none • The code can become unmanageable Thursday, April 29, 2010
  23. 23. The Roll Your Own Approach Thursday, April 29, 2010
  24. 24. 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??? Thursday, April 29, 2010
  25. 25. An Alternative Approach... Thursday, April 29, 2010
  26. 26. 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 Thursday, April 29, 2010
  27. 27. 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. Thursday, April 29, 2010
  28. 28. Why I use it? • It’s free • Excellent documentation • Widely accepted and adopted • Team collaboration • Learning curve for a new language is reduced Thursday, April 29, 2010
  29. 29. Thursday, April 29, 2010
  30. 30. Framework Actors Thursday, April 29, 2010
  31. 31. Core Actors and the Facade Thursday, April 29, 2010
  32. 32. Core Actors and the Facade Thursday, April 29, 2010
  33. 33. The Developer’s Responsibility Thursday, April 29, 2010
  34. 34. 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. Thursday, April 29, 2010
  35. 35. 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); Thursday, April 29, 2010
  36. 36. Questions? Thursday, April 29, 2010
  37. 37. Let’s get started... Thursday, April 29, 2010
  38. 38. 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 • Define your Notification names as static constants • Override the initializeController() method and register your Commands • Create a startup() method Thursday, April 29, 2010
  39. 39. Show the code... Thursday, April 29, 2010
  40. 40. Questions? Thursday, April 29, 2010
  41. 41. 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 Notifications, 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 flash.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 Thursday, April 29, 2010
  42. 42. Show the code... Thursday, April 29, 2010
  43. 43. Questions? Thursday, April 29, 2010
  44. 44. 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 Thursday, April 29, 2010
  45. 45. Show the code... Thursday, April 29, 2010
  46. 46. Questions? Thursday, April 29, 2010
  47. 47. 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 Thursday, April 29, 2010
  48. 48. Show the code... Thursday, April 29, 2010
  49. 49. Questions? Thursday, April 29, 2010
  50. 50. Quick Tips • Generic object implementation, meaning lots of type casting • Does not rely on the native Flash event system (ie: Notifications) • Expect a bit of boilerplate code Thursday, April 29, 2010
  51. 51. Now What??? • SimpleCommand VS. MacroCommand • Modules • Design Patterns • Dynamic Mediators and Deferred Instantiation Thursday, April 29, 2010
  52. 52. Mahalo! Thursday, April 29, 2010
  53. 53. 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 Thursday, April 29, 2010

×