Buzzword — How’d They Build That? David Coletta Virtual Ubiquity, Inc. [email_address] Blog: http://www.colettas.org
Introduction <ul><li>Developer and co-founder at Virtual Ubiquity </li></ul><ul><li>Career focus on collaboration software...
A little history <ul><li>Jan 2006: Started coding with three developers in an attic </li></ul><ul><li>Oct 2006: First publ...
This talk focuses on <ul><li>Buzzword internals and features </li></ul><ul><ul><li>Not really related to Flex </li></ul></...
Structure of this talk <ul><li>Half a dozen (or so) topics </li></ul><ul><li>For each topic: </li></ul><ul><ul><li>Demo </...
Can I get a volunteer? <ul><li>Can someone please write down (or type) all the questions that are asked during the talk an...
The Five Cent Tour <ul><li>Show of hands: who has never actually used Buzzword? </li></ul><ul><li>Document Organizer </li>...
Topics in detail <ul><li>Getting text on the page </li></ul><ul><li>Testing the app </li></ul><ul><li>Page-segmented scrol...
Possible Q&A topics <ul><li>Client/server communications </li></ul><ul><li>MXML and code-behind </li></ul><ul><li>.NET bac...
Getting text on the page <ul><li>Three major models: </li></ul><ul><ul><li>Document: the persistent user content </li></ul...
Document internals Paragraph Paragraph Run Run Run Containment Inheritance Run FontyRun AnchorRun BreakRun FieldRun Body S...
Getting text on the page <ul><li>Demo: Style inspector </li></ul><ul><ul><li>DocumentStructureTree extends Tree </li></ul>...
Getting text on the page <ul><li>Layout engine </li></ul><ul><li>Demo: Layout inspector </li></ul>
Getting text on the page <ul><li>Demo: Display element debugging </li></ul>
Getting text on the page <ul><li>Code: TextLineDisplay/renderLine(). </li></ul>
Questions?
Testing the app: “LiveTest” <ul><li>Goal of LiveTest: create a test framework that verifies the correctness of  document c...
Questions?
Page-segmented scroll bar <ul><li>Demo: </li></ul><ul><ul><li>small document (Welcome to Buzzword) </li></ul></ul><ul><ul>...
Questions?
Asynchronous completion <ul><li>Demo: Settings and Preferences dialog (modality during network event) </li></ul><ul><li>Sc...
Modularizing <ul><li>Demo: logging in with empty browser cache </li></ul>
Modularizing <ul><li>Advantages </li></ul><ul><li>Improves build times </li></ul><ul><li>Permits background downloading </...
Modularizing <ul><li>Risks </li></ul><ul><li>Can increase overall download </li></ul><ul><li>Can slow overall build times ...
Modularizing <ul><li>Debugging across modules is a common problem </li></ul><ul><li>Since SWF module is loaded at runtime ...
Modularizing <ul><li>UI for progress bars handled by ProgressManager class </li></ul><ul><ul><li>Keeps track of what mode ...
Questions?
Rich Text Clipboard <ul><li>Demo: copying and pasting between Buzzword and MS Word </li></ul>
Rich Text Clipboard <ul><li>Flash does not support rich text at all </li></ul><ul><li>Flash provides limited support for p...
Rich Text Clipboard <ul><li>Browser contains both the Flash plug-in and a hidden editable IFRAME (or DIV for some browsers...
Rich Text Clipboard Flex JavaScript Traps Copy event, synchronously calls into Flex for HTML rendition of selection Render...
Rich Text Clipboard <ul><li>Demo: copying and pasting between Buzzword and MS Word </li></ul><ul><li>This is a giant hack!...
Questions? Reminder of topics we didn’t cover:  Client/server communications MXML and code-behind .NET back end Fonts Logg...
Upcoming SlideShare
Loading in …5
×

Buzzword, How'd They Build That?

1,732 views
1,651 views

Published on

David Coletta's presentation at 360|Flex Seattle, August 14, 2007, about how Buzzword was built in Flex.

Published in: Business, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,732
On SlideShare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Buzzword, How'd They Build That?

    1. 1. Buzzword — How’d They Build That? David Coletta Virtual Ubiquity, Inc. [email_address] Blog: http://www.colettas.org
    2. 2. Introduction <ul><li>Developer and co-founder at Virtual Ubiquity </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 </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. Structure of this talk <ul><li>Half a dozen (or so) topics </li></ul><ul><li>For each topic: </li></ul><ul><ul><li>Demo </li></ul></ul><ul><ul><li>Describe </li></ul></ul><ul><ul><li>Dive into some code </li></ul></ul><ul><li>As interactive as possible </li></ul><ul><ul><li>This is the first time for this talk </li></ul></ul><ul><ul><li>You know better than I do what you want to learn </li></ul></ul>
    6. 6. Can I get a volunteer? <ul><li>Can someone please write down (or type) all the questions that are asked during the talk and send them to me later? </li></ul>
    7. 7. 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><ul><li>If you’re at the Red Lion, you have an invite already, otherwise get one from me after the talk. It’s only good through August 24, so sign up! </li></ul>
    8. 8. 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>Asynchronous completion </li></ul><ul><li>Modularizing </li></ul><ul><li>Rich text clipboard </li></ul>
    9. 9. 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>
    10. 10. 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>
    11. 11. Document internals Paragraph Paragraph Run Run Run Containment Inheritance Run FontyRun AnchorRun BreakRun FieldRun Body Stream Section TextRun
    12. 12. 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>
    13. 13. Getting text on the page <ul><li>Layout engine </li></ul><ul><li>Demo: Layout inspector </li></ul>
    14. 14. Getting text on the page <ul><li>Demo: Display element debugging </li></ul>
    15. 15. Getting text on the page <ul><li>Code: TextLineDisplay/renderLine(). </li></ul>
    16. 16. Questions?
    17. 17. 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>
    18. 18. Questions?
    19. 19. 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 </li></ul><ul><li>Code: PageSegmentedScrollTrackSkin.as </li></ul>
    20. 20. Questions?
    21. 21. Asynchronous completion <ul><li>Demo: Settings and Preferences dialog (modality during network event) </li></ul><ul><li>Script engine must always unwind before drawing or network activity </li></ul><ul><li>Any ActionScript code that does any drawing or networking activity is going to have a lot of completion functions </li></ul><ul><li>Our solution was to build a helper class to manage nesting, app-modality </li></ul><ul><li>Code: AsyncCompletion.as, SettingsAndPrefsDlg.as </li></ul>
    22. 22. Modularizing <ul><li>Demo: logging in with empty browser cache </li></ul>
    23. 23. 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>
    24. 24. 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>
    25. 25. 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>
    26. 26. Modularizing <ul><li>UI for progress bars handled by ProgressManager class </li></ul><ul><ul><li>Keeps track of what mode we're in (notified by app frame) </li></ul></ul><ul><ul><li>Knows what modes are blocked by which downloads </li></ul></ul><ul><ul><li>Keeps track of which downloads are in progress (monitors events from Module loading process) </li></ul></ul><ul><li>Code: ProgressManager.as </li></ul>
    27. 27. Questions?
    28. 28. Rich Text Clipboard <ul><li>Demo: copying and pasting between Buzzword and MS Word </li></ul>
    29. 29. 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>
    30. 30. 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>
    31. 31. 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
    32. 32. 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>
    33. 33. 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

    ×