Building Buzzword (Flex Camp Boston 2007)


Published on

Published in: Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Building Buzzword (Flex Camp Boston 2007)

    1. 1. Building Buzzword David Coletta Adobe Systems, Inc. [email_address] Blog:
    2. 2. Introduction <ul><li>Was developer and co-founder at Virtual Ubiquity </li></ul><ul><li>Now Sr. Computer Scientist at Adobe </li></ul><ul><li>Career focus on collaboration software </li></ul><ul><li>Background in C++ and web applications </li></ul><ul><li>Started using Flex 2.0 alpha in January 2006 </li></ul>
    3. 3. A little history <ul><li>Jan 2006: Started coding with three developers in an attic </li></ul><ul><li>Oct 2006: First public demo by Kevin Lynch at MAX; Funded by Adobe </li></ul><ul><li>Nov 2006: Hired designer and three more developers, moved into real offices </li></ul><ul><li>May, June, July, August 2007: monthly preview releases </li></ul><ul><li>Fall 2007: Opening up for real use, Adobe acquisition </li></ul>
    4. 4. This talk focuses on <ul><li>Buzzword internals and features </li></ul><ul><ul><li>Not really related to Flex </li></ul></ul><ul><ul><li>Worth understanding because of what it demonstrates about the capabilities of the platform </li></ul></ul><ul><li>Building a real-world app inside the browser in Flex </li></ul><ul><ul><li>Getting the most out of the platform </li></ul></ul><ul><ul><li>Dealing with limitations </li></ul></ul>
    5. 5. The Five Cent Tour <ul><li>Show of hands: who has never actually used Buzzword? </li></ul><ul><li>Document Organizer </li></ul><ul><li>Toolbar </li></ul><ul><li>Lists </li></ul><ul><li>Graphics </li></ul><ul><li>Tables </li></ul><ul><li>Comments </li></ul><ul><li>Sharing </li></ul>
    6. 6. Topics in detail <ul><li>Getting text on the page </li></ul><ul><li>Testing the app </li></ul><ul><li>Page-segmented scroll bar </li></ul><ul><li>Modularizing </li></ul><ul><li>Rich text clipboard </li></ul>
    7. 7. Possible Q&A topics <ul><li>Client/server communications </li></ul><ul><li>MXML and code-behind </li></ul><ul><li>.NET back end </li></ul><ul><li>Fonts </li></ul><ul><li>Logging and Tracing  </li></ul><ul><li>Performance </li></ul><ul><li>Choreography </li></ul><ul><li>AIR </li></ul>
    8. 8. Getting text on the page <ul><li>Three major models: </li></ul><ul><ul><li>Document: the persistent user content </li></ul></ul><ul><ul><li>Layout: the transient positioning of the content </li></ul></ul><ul><ul><li>Display: the Flex/Flash objects on the display list </li></ul></ul><ul><li>Flow is always document to layout to display </li></ul><ul><ul><li>Everything the user does modifies the document </li></ul></ul><ul><ul><li>Fine-grained events are dispatched by document and consumed by layout (and others) </li></ul></ul><ul><ul><li>One high-level document change event for everyone else </li></ul></ul>
    9. 9. Document internals Paragraph Paragraph Run Run Run Containment Inheritance Run FontyRun AnchorRun BreakRun FieldRun Body Stream Section TextRun
    10. 10. Getting text on the page <ul><li>Demo: Style inspector </li></ul><ul><ul><li>DocumentStructureTree extends Tree </li></ul></ul><ul><ul><li>DocumentTreeDescriptor implements ITreeDataDescriptor </li></ul></ul>
    11. 11. Getting text on the page <ul><li>Layout engine </li></ul><ul><li>Demo: Layout inspector </li></ul>
    12. 12. Getting text on the page <ul><li>Demo: Display element debugging </li></ul>
    13. 13. Questions?
    14. 14. Testing the app: “LiveTest” <ul><li>Goal of LiveTest: create a test framework that verifies the correctness of document commands </li></ul><ul><li>Non-goal: not intended to test the whole UI (can't replace something like QTP) </li></ul><ul><li>Command pattern: each command knows how to emit ActionScript code to execute itself </li></ul><ul><li>Demo: recording, debugging, training, and executing a test </li></ul>
    15. 15. Questions?
    16. 16. Page-segmented scroll bar <ul><li>Demo: </li></ul><ul><ul><li>small document (Welcome to Buzzword) </li></ul></ul><ul><ul><li>large document (Name that Movie) </li></ul></ul><ul><li>Not a component but actually two skins: thumb skin and track skin </li></ul><ul><li>Most of the work is in track skin </li></ul><ul><li>Pushing a skin pretty far: hard to get skins to draw text (got easier in Flex 3) </li></ul>
    17. 17. Questions?
    18. 18. Modularizing <ul><li>Demo: logging in with empty browser cache </li></ul>
    19. 19. Modularizing <ul><li>Advantages </li></ul><ul><li>Improves build times </li></ul><ul><li>Permits background downloading </li></ul><ul><li>Imposes information hiding discipline </li></ul>
    20. 20. Modularizing <ul><li>Risks </li></ul><ul><li>Can increase overall download </li></ul><ul><li>Can slow overall build times </li></ul><ul><li>Increased complexity </li></ul>
    21. 21. Modularizing <ul><li>Debugging across modules is a common problem </li></ul><ul><li>Since SWF module is loaded at runtime by path, if your production version is a release built, you won’t be able to debug it </li></ul><ul><li>We solved by building ModulePathLoader subclass of ModuleLoader that tries to load the debug path as well as the release path </li></ul>
    22. 22. Modularizing <ul><li>UI for progress bars handled by ProgressManager class </li></ul><ul><li>Keeps track of what mode we're in (notified by app frame) </li></ul><ul><li>Knows what modes are blocked by which downloads </li></ul><ul><li>Keeps track of which downloads are in progress (monitors events from Module loading process) </li></ul>
    23. 23. Questions?
    24. 24. Rich Text Clipboard <ul><li>Demo: copying and pasting between Buzzword and MS Word </li></ul>
    25. 25. Rich Text Clipboard <ul><li>Flash does not support rich text at all </li></ul><ul><li>Flash provides limited support for putting plain text only on system clipboard </li></ul><ul><li>Flash provides no support for getting contents of system clipboard </li></ul><ul><li>Clearly a hack is required </li></ul>
    26. 26. Rich Text Clipboard <ul><li>Browser contains both the Flash plug-in and a hidden editable IFRAME (or DIV for some browsers) </li></ul><ul><li>All keystrokes go into the editable IFRAME and are passed into Flex via ExternalInterface </li></ul><ul><li>Clipboard actions are detected via either clipboard events (in IE) or keyDown/keyPress/keyUp events (other browsers) </li></ul>
    27. 27. Rich Text Clipboard Flex JavaScript Traps Copy event, synchronously calls into Flex for HTML rendition of selection Renders contents of selection as HTML Replaces IFRAME contents with HTML from selection, allows operation to complete, unwinds, then calls back into Flex Finishes command How a Copy command works
    28. 28. Rich Text Clipboard <ul><li>Demo: copying and pasting between Buzzword and MS Word </li></ul><ul><li>This is a giant hack! And it requires a separate instance of the hack for each browser! </li></ul><ul><li>Unavoidable due to limitations of Flash </li></ul><ul><li>AIR will make this better, but we'll still need the hack for the browser version </li></ul>
    29. 29. Questions? Reminder of topics we didn’t cover: Client/server communications MXML and code-behind .NET back end Fonts Logging and Tracing  Performance Choreography AIR