Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Test

    1. 1. Building and Architecting Flex Applications <ul><li>FlashForward, Boston </li></ul><ul><li>September 19, 2007 </li></ul>
    2. 2. About myself <ul><li>Chafic Kazoun </li></ul><ul><ul><li>Founder and Chief Software Architect, Atellis </li></ul></ul><ul><ul><li>Adobe Community Expert </li></ul></ul><ul><ul><li>Co-author of “Programming Flex 2” by O’Reilly Publishing </li></ul></ul><ul><ul><li>email [email_address] </li></ul></ul><ul><ul><li>Atellis ( http://www.atellis.com ) </li></ul></ul><ul><ul><li>Blog ( http://www.rewindlife.com ) </li></ul></ul>
    3. 3. Why am I doing this session? <ul><li>General need to clear up some miss-conceptions </li></ul><ul><li>Comments from book readers </li></ul><ul><li>Help people go beyond just knowing Flex </li></ul><ul><li>What AIR brings to the table </li></ul>
    4. 4. What we will cover <ul><li>The initial phase </li></ul><ul><li>Architecture </li></ul><ul><ul><li>Model </li></ul></ul><ul><ul><li>Controller </li></ul></ul><ul><ul><li>View </li></ul></ul><ul><ul><li>Controls </li></ul></ul><ul><li>Application Components </li></ul><ul><li>Taskie </li></ul>
    5. 5. Initial Phase
    6. 6. Design Decisions <ul><li>Most important step in development </li></ul><ul><li>It is iterative just like development is as well </li></ul><ul><li>It’s important to think outside of the box and give the designer freedom </li></ul><ul><li>A good combination is when the designer works with one engineer and they together develop several versions until satisfied. </li></ul><ul><li>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 </li></ul>
    7. 7. Design Decisions <ul><li>Component based development. Just think of mock ups as made up of components. If you can picture it then good. </li></ul><ul><li>Make sure to step back during each iteration and make sure you didn’t veer away from the initial goals </li></ul><ul><li>Keep it simple and consistent! </li></ul>
    8. 8. Cube <ul><li>URL </li></ul><ul><li>Show Cube UI running </li></ul><ul><li>Review iterations </li></ul>
    9. 9. AIR Specific Capabilities <ul><ul><li>Tray Application </li></ul></ul><ul><ul><li>Desktop notifications </li></ul></ul><ul><ul><li>Multiple Windows </li></ul></ul><ul><ul><li>SQLite / Offline Caching </li></ul></ul><ul><ul><li>(show AIR Windowing examples) </li></ul></ul>
    10. 10. Architecture
    11. 11. Architecture Overview – No cool name for it yet <ul><ul><li>Simple goals, makes for a simple architecture. It is just MVC for Flex </li></ul></ul><ul><ul><li>Consistent structure, that’s the most important part of an architecture </li></ul></ul><ul><ul><li>Flex centric, Flex already does a lot for you </li></ul></ul><ul><ul><li>Helps you learn Flex </li></ul></ul><ul><ul><li>Not many rules </li></ul></ul><ul><ul><li>Keeps things spread out in less places </li></ul></ul><ul><ul><li>Remember, be pragmatic! </li></ul></ul><ul><ul><li>Still a work in progress </li></ul></ul>
    12. 12. Simple Architecture <ul><ul><li>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 </li></ul></ul>
    13. 13. 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
    14. 14. Model <ul><ul><li>This is where I typically start, and is often the only place I over-engineer </li></ul></ul><ul><ul><li>ApplicationModel class used as a façade to the model </li></ul></ul><ul><ul><li>All in ActionScript… </li></ul></ul><ul><ul><li>Multiple Model classes can exist </li></ul></ul><ul><ul><li>Data classes for typed data objects </li></ul></ul><ul><ul><li>Services for communicating with the back-end. </li></ul></ul><ul><ul><li>Database package not always used. Used for database table/field names which we auto-generate </li></ul></ul><ul><ul><li>AIR introduces SQLite capabilities. The model should handle caching automatically </li></ul></ul><ul><ul><li>(example: Prezo ApplicationModel, PresentationModel, Generated code, etc) </li></ul></ul>
    15. 15. 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
    16. 16. Controller <ul><ul><li>ApplicationController is the main application starter </li></ul></ul><ul><ul><li>Multiple Controllers can exist. Not required. Mainly depends on how complex an application is. </li></ul></ul><ul><ul><li>Controllers are the bridge between the view and the model </li></ul></ul><ul><ul><ul><li>Set dataproviders for views </li></ul></ul></ul><ul><ul><ul><li>Call to the model </li></ul></ul></ul><ul><ul><ul><li>Handle events from the view </li></ul></ul></ul><ul><ul><ul><li>Switch between views </li></ul></ul></ul><ul><ul><ul><li>Etc </li></ul></ul></ul><ul><ul><li>Possible that the controller will contain layout for multiple views </li></ul></ul><ul><ul><li>Controllers are MXML files as well, this is Flex after all </li></ul></ul><ul><ul><li>(show examples: UserController) </li></ul></ul>
    17. 17. 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
    18. 18. Views <ul><ul><li>All views are application components </li></ul></ul><ul><ul><li>Purpose is to handle layout and dispatch events to the Controller </li></ul></ul><ul><ul><li>Views do not access data directly </li></ul></ul><ul><ul><ul><li>Events </li></ul></ul></ul><ul><ul><ul><li>Dataprovider/ public properties (Dataprovider should be typed) </li></ul></ul></ul><ul><ul><li>Still a grey area if we want to have views vs getting rid of them and having them in the controller </li></ul></ul><ul><ul><li>(show examples) </li></ul></ul>
    19. 19. Controls <ul><ul><li>Also are built like Application Components </li></ul></ul><ul><ul><li>Used by views </li></ul></ul><ul><ul><li>Hidden away from the Controllers </li></ul></ul>
    20. 20. Application Components
    21. 21. What Are Application Components?
    22. 22. What Are Application Components?
    23. 23. Cheat Sheet <ul><ul><li>Decide on what will be a component and do some minor planning </li></ul></ul><ul><ul><li>Create the component </li></ul></ul><ul><ul><li>Add Sub-Components and handle layout </li></ul></ul><ul><ul><li>Decide and implement the public API </li></ul></ul><ul><li>Application Components don’t have to be perfect! </li></ul>
    24. 24. Setting Up The Component <ul><ul><li>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 </li></ul></ul><ul><ul><li>Specify a package through a directory structure </li></ul></ul><ul><ul><li>MXML behaves in the same manner </li></ul></ul><ul><ul><li>Always need reference the Flex xml namespace </li></ul></ul><ul><li>MXML </li></ul><ul><li>AS </li></ul>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>
    25. 25. Think Of MXML Components Like Full Applications
    26. 26. 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>
    27. 27. 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>
    28. 28. Think of Components as Black Boxes
    29. 29. Adding States <ul><ul><li>Done in the same manner you would in the root MXML file </li></ul></ul><ul><ul><li>Set currentState of root node to {VIEW_MODE} </li></ul></ul><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>
    30. 30. Adding Methods & Properties <ul><ul><li>Done within a <mx:Script> tag </li></ul></ul><ul><ul><li>Declared in the same manner you would within a class </li></ul></ul>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; }
    31. 31. Adding Events <ul><ul><li>All components inherit from EventDispatcher </li></ul></ul><ul><ul><li>Call dispatchEvent({event object}) </li></ul></ul><ul><ul><li>Need to </li></ul></ul><ul><ul><ul><li>Create a custom event class </li></ul></ul></ul><ul><ul><ul><li>Dispatch the event </li></ul></ul></ul><ul><ul><ul><li>Add the Event metadata </li></ul></ul></ul>
    32. 32. Creating a Custom Event Class <ul><ul><li>All components inherit from EventDispatcher </li></ul></ul><ul><ul><li>all dispatchEvent({event object}) </li></ul></ul>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); } } }
    33. 33. Adding Events <ul><ul><li>All components inherit from EventDispatcher </li></ul></ul><ul><ul><li>Call dispatchEvent({event object}) </li></ul></ul><ul><ul><li>Add click=&quot;clickHandler(event)&quot; to button </li></ul></ul>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); } }
    34. 34. Adding the Event Metadata tag <ul><ul><li>Added within the MXML file </li></ul></ul><ul><ul><li>Typically you will want to add it up top </li></ul></ul><mx:Metadata> [Event(name=&quot;editChange&quot;, type=&quot;com.oreilly.programmingflex.contactmanager.events.EditChangeEvent&quot;)] </mx:Metadata>
    35. 35. Things To Keep In Mind About Application Components <ul><ul><li>Helps you structure an application, this is how views and many controls are built. Some controls are custom components </li></ul></ul><ul><ul><li>Application Components are for an Application, they will often not be re-used </li></ul></ul><ul><ul><li>Although you can implement support for styles and other concepts, most of the time you will find Application components don’t need it. </li></ul></ul>
    36. 36. Taskie
    37. 37. Taskie <ul><ul><li>A really simple application to demonstrate the concepts </li></ul></ul><ul><ul><li>Show sample </li></ul></ul>
    38. 38. Thank You! <ul><li>The Atellis team is hiring! </li></ul><ul><li>email: [email_address] </li></ul><ul><li>blog: http://www.rewindlife.com </li></ul><ul><li>Atellis labs: http://labs.atellis.com </li></ul>