• Save
Upcoming SlideShare
Loading in...5







Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Test Test Presentation Transcript

  • Building and Architecting Flex Applications
    • FlashForward, Boston
    • September 19, 2007
  • About myself
    • Chafic Kazoun
      • Founder and Chief Software Architect, Atellis
      • Adobe Community Expert
      • Co-author of “Programming Flex 2” by O’Reilly Publishing
      • email [email_address]
      • Atellis ( http://www.atellis.com )
      • Blog ( http://www.rewindlife.com )
  • Why am I doing this session?
    • General need to clear up some miss-conceptions
    • Comments from book readers
    • Help people go beyond just knowing Flex
    • What AIR brings to the table
  • What we will cover
    • The initial phase
    • Architecture
      • Model
      • Controller
      • View
      • Controls
    • Application Components
    • Taskie
  • Initial Phase
  • Design Decisions
    • Most important step in development
    • It is iterative just like development is as well
    • It’s important to think outside of the box and give the designer freedom
    • A good combination is when the designer works with one engineer and they together develop several versions until satisfied.
    • The developer should keep in mind technical implementation during the design phase. Often slight changes to the design can make the development process much smoother
  • Design Decisions
    • Component based development. Just think of mock ups as made up of components. If you can picture it then good.
    • Make sure to step back during each iteration and make sure you didn’t veer away from the initial goals
    • Keep it simple and consistent!
  • Cube
    • URL
    • Show Cube UI running
    • Review iterations
  • AIR Specific Capabilities
      • Tray Application
      • Desktop notifications
      • Multiple Windows
      • SQLite / Offline Caching
      • (show AIR Windowing examples)
  • Architecture
  • Architecture Overview – No cool name for it yet
      • Simple goals, makes for a simple architecture. It is just MVC for Flex
      • Consistent structure, that’s the most important part of an architecture
      • Flex centric, Flex already does a lot for you
      • Helps you learn Flex
      • Not many rules
      • Keeps things spread out in less places
      • Remember, be pragmatic!
      • Still a work in progress
  • Simple Architecture
      • Structure com atellis app controller – Controls and handle data between view and model, handle user interaction, and some layout/state model – data - value object classes (mostly generated) database - table/field name constants, generated, rarely used services - service classes for communicating with back end view controls - application components views - application screens, made up of component and controls
  • Overview MODEL CONTROLLER VIEW M: Databinding of data objects M: events, databinding, responders C: Call methods and properties C: Set dataprovider Call methods/properties Change states Change views V: Dispatch events
  • Model
      • This is where I typically start, and is often the only place I over-engineer
      • ApplicationModel class used as a façade to the model
      • All in ActionScript…
      • Multiple Model classes can exist
      • Data classes for typed data objects
      • Services for communicating with the back-end.
      • Database package not always used. Used for database table/field names which we auto-generate
      • AIR introduces SQLite capabilities. The model should handle caching automatically
      • (example: Prezo ApplicationModel, PresentationModel, Generated code, etc)
  • Overview MODEL CONTROLLER VIEW M: Databinding of data objects M: events, databinding, responders C: Call methods and properties C: Set dataprovider Call methods/properties Change states Change views V: Dispatch events
  • Controller
      • ApplicationController is the main application starter
      • Multiple Controllers can exist. Not required. Mainly depends on how complex an application is.
      • Controllers are the bridge between the view and the model
        • Set dataproviders for views
        • Call to the model
        • Handle events from the view
        • Switch between views
        • Etc
      • Possible that the controller will contain layout for multiple views
      • Controllers are MXML files as well, this is Flex after all
      • (show examples: UserController)
  • Overview MODEL CONTROLLER VIEW M: Databinding of data objects M: events, databinding, responders C: Call methods and properties C: Set dataprovider Call methods/properties Change states Change views V: Dispatch events
  • Views
      • All views are application components
      • Purpose is to handle layout and dispatch events to the Controller
      • Views do not access data directly
        • Events
        • Dataprovider/ public properties (Dataprovider should be typed)
      • Still a grey area if we want to have views vs getting rid of them and having them in the controller
      • (show examples)
  • Controls
      • Also are built like Application Components
      • Used by views
      • Hidden away from the Controllers
  • Application Components
  • What Are Application Components?
  • What Are Application Components?
  • Cheat Sheet
      • Decide on what will be a component and do some minor planning
      • Create the component
      • Add Sub-Components and handle layout
      • Decide and implement the public API
    • Application Components don’t have to be perfect!
  • Setting Up The Component
      • The root mxml tag is the base class (Similar to extends in ActionScript), often it will be a container that you use as the base class
      • Specify a package through a directory structure
      • MXML behaves in the same manner
      • Always need reference the Flex xml namespace
    • MXML
    • AS
    package com.rewindlife.views { import mx.containers.Canvas; public class ContactDetails extends Canvas { } } <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <mx:Canvas xmlns:mx=&quot; http://www.adobe.com/2006/mxml &quot;> </mx:Canvas>
  • Think Of MXML Components Like Full Applications
  • Adding Sub-Components & Handling Layout <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <mx:Canvas xmlns:mx=&quot; http://www.adobe.com/2006/mxml &quot; width=&quot;100%&quot; backgroundColor=&quot;#f8f8f8&quot; height=&quot;100%&quot;> <mx:Label id=&quot;contactName&quot; x=&quot;10&quot; y=&quot;10&quot; text=&quot;John Doe&quot;/> <mx:Label x=&quot;62&quot; y=&quot;42&quot; text=&quot;phone&quot;/> <mx:Label x=&quot;53&quot; y=&quot;94&quot; text=&quot;address&quot;/> <mx:Label x=&quot;66&quot; y=&quot;68&quot; text=&quot;email&quot;/> <mx:TextArea x=&quot;110&quot; y=&quot;93&quot; editable=&quot;false&quot; enabled=&quot;true&quot; width=&quot;160&quot; height=&quot;63&quot; id=&quot;address&quot;/> <mx:TextInput x=&quot;110&quot; y=&quot;40&quot; editable=&quot;false&quot; id=&quot;phone&quot;/> <mx:TextInput x=&quot;110&quot; y=&quot;66&quot; editable=&quot;false&quot; id=&quot;email&quot;/> <mx:Button id=&quot;edit&quot; bottom=&quot;10&quot; left=&quot;10&quot; label=&quot;Edit&quot; width=&quot;41&quot; height=&quot;20&quot; toggle=&quot;true&quot; /> </mx:Canvas>
  • Adding The Component <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <mx:Application xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; layout=&quot;absolute&quot; xmlns:pf2=&quot;com.oreilly.programmingflex.contactmanager.views.*&quot;> <pf2:ContactDetails/> </mx:Application>
  • Think of Components as Black Boxes
  • Adding States
      • Done in the same manner you would in the root MXML file
      • Set currentState of root node to {VIEW_MODE}
    <mx:states> <mx:State name=&quot;{VIEW_MODE}&quot;/> <mx:State name=&quot;{EDIT_MODE}&quot; basedOn=&quot;{VIEW_MODE}&quot;> <mx:SetProperty target=&quot;{address}&quot; name=&quot;editable&quot; value=&quot;true&quot;/> <mx:SetProperty target=&quot;{email}&quot; name=&quot;editable&quot; value=&quot;true&quot;/> <mx:SetProperty target=&quot;{phone}&quot; name=&quot;editable&quot; value=&quot;true&quot;/> </mx:State> </mx:states>
  • Adding Methods & Properties
      • Done within a <mx:Script> tag
      • Declared in the same manner you would within a class
    public static const VIEW_STATE:String = &quot;view&quot; ; public static const EDIT_STATE:String = &quot;edit&quot; ; [ Bindable ] public function get mode():String { return this .currentState; } [Inspectable(enumeration= &quot;{ContactDetails.VIEW_MODE},{ContactDetails.EDIT_STATE}&quot; )] public function set mode(value:String): void { this .currentState = value; }
  • Adding Events
      • All components inherit from EventDispatcher
      • Call dispatchEvent({event object})
      • Need to
        • Create a custom event class
        • Dispatch the event
        • Add the Event metadata
  • Creating a Custom Event Class
      • All components inherit from EventDispatcher
      • all dispatchEvent({event object})
    package com.oreilly.programmingflex.contactmanager.events { import flash.events.Event; public class EditChangeEvent extends Event { public static const EDIT_CHANGE:String = &quot;editChange&quot;; public var edit:Boolean; public function EditChangeEvent(edit:Boolean=false) { super(EDIT_CHANGE); this.edit = edit; } override public function clone():Event { return new EditChangeEvent(this.edit); } } }
  • Adding Events
      • All components inherit from EventDispatcher
      • Call dispatchEvent({event object})
      • Add click=&quot;clickHandler(event)&quot; to button
    import com.oreilly.programmingflex.contactmanager.events.EditChangeEvent; private function clickHandler(e:MouseEvent:void { if(this.currentState == VIEW_MODE) { this.mode = EDIT_MODE; phone.setFocus(); var eventEditing:EditChangeEvent = new EditChangeEvent(true); dispatchEvent(eventEditing); } else if(this.currentState == EDIT_MODE) { this.mode = VIEW_MODE; var eventDoneEditing:EditChangeEvent = new EditChangeEvent(false); dispatchEvent(eventDoneEditing); } }
  • Adding the Event Metadata tag
      • Added within the MXML file
      • Typically you will want to add it up top
    <mx:Metadata> [Event(name=&quot;editChange&quot;, type=&quot;com.oreilly.programmingflex.contactmanager.events.EditChangeEvent&quot;)] </mx:Metadata>
  • Things To Keep In Mind About Application Components
      • Helps you structure an application, this is how views and many controls are built. Some controls are custom components
      • Application Components are for an Application, they will often not be re-used
      • Although you can implement support for styles and other concepts, most of the time you will find Application components don’t need it.
  • Taskie
  • Taskie
      • A really simple application to demonstrate the concepts
      • Show sample
  • Thank You!
    • The Atellis team is hiring!
    • email: [email_address]
    • blog: http://www.rewindlife.com
    • Atellis labs: http://labs.atellis.com