• Save
Buzzword, How'd They Build That?
Upcoming SlideShare
Loading in...5

Buzzword, How'd They Build That?



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

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



Total Views
Views on SlideShare
Embed Views



4 Embeds 62

http://www.colettas.org 56
http://www.slideshare.net 4
http://www.linkedin.com 1
https://www.linkedin.com 1



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

Buzzword, How'd They Build That? Buzzword, How'd They Build That? Presentation Transcript

  • Buzzword — How’d They Build That? David Coletta Virtual Ubiquity, Inc. [email_address] Blog: http://www.colettas.org
  • Introduction
    • Developer and co-founder at Virtual Ubiquity
    • Career focus on collaboration software
    • Background in C++ and web applications
    • Started using Flex 2.0 alpha in January 2006
  • A little history
    • Jan 2006: Started coding with three developers in an attic
    • Oct 2006: First public demo by Kevin Lynch at MAX; Funded by Adobe
    • Nov 2006: Hired designer and three more developers, moved into real offices
    • May, June, July, August 2007: monthly preview releases
    • Fall 2007: Opening up for real use
    View slide
  • This talk focuses on
    • Buzzword internals and features
      • Not really related to Flex
      • Worth understanding because of what it demonstrates about the capabilities of the platform
    • Building a real-world app inside the browser in Flex
      • Getting the most out of the platform
      • Dealing with limitations
    View slide
  • Structure of this talk
    • Half a dozen (or so) topics
    • For each topic:
      • Demo
      • Describe
      • Dive into some code
    • As interactive as possible
      • This is the first time for this talk
      • You know better than I do what you want to learn
  • Can I get a volunteer?
    • Can someone please write down (or type) all the questions that are asked during the talk and send them to me later?
  • The Five Cent Tour
    • Show of hands: who has never actually used Buzzword?
    • Document Organizer
    • Toolbar
    • Lists
    • Graphics
    • Tables
    • Comments
    • Sharing
    • 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!
  • Topics in detail
    • Getting text on the page
    • Testing the app
    • Page-segmented scroll bar
    • Asynchronous completion
    • Modularizing
    • Rich text clipboard
  • Possible Q&A topics
    • Client/server communications
    • MXML and code-behind
    • .NET back end
    • Fonts
    • Logging and Tracing 
    • Performance
    • Choreography
    • AIR
  • Getting text on the page
    • Three major models:
      • Document: the persistent user content
      • Layout: the transient positioning of the content
      • Display: the Flex/Flash objects on the display list
    • Flow is always document to layout to display
      • Everything the user does modifies the document
      • Fine-grained events are dispatched by document and consumed by layout (and others)
      • One high-level document change event for everyone else
  • Document internals Paragraph Paragraph Run Run Run Containment Inheritance Run FontyRun AnchorRun BreakRun FieldRun Body Stream Section TextRun
  • Getting text on the page
    • Demo: Style inspector
      • DocumentStructureTree extends Tree
      • DocumentTreeDescriptor implements ITreeDataDescriptor
  • Getting text on the page
    • Layout engine
    • Demo: Layout inspector
  • Getting text on the page
    • Demo: Display element debugging
  • Getting text on the page
    • Code: TextLineDisplay/renderLine().
  • Questions?
  • Testing the app: “LiveTest”
    • Goal of LiveTest: create a test framework that verifies the correctness of document commands
    • Non-goal: not intended to test the whole UI (can't replace something like QTP)
    • Command pattern: each command knows how to emit ActionScript code to execute itself
    • Demo: recording, debugging, training, and executing a test
  • Questions?
  • Page-segmented scroll bar
    • Demo:
      • small document (Welcome to Buzzword)
      • large document (Name that Movie)
    • Not a component but actually two skins: thumb skin and track skin
    • Most of the work is in track skin
    • Pushing a skin pretty far: hard to get skins to draw text
    • Code: PageSegmentedScrollTrackSkin.as
  • Questions?
  • Asynchronous completion
    • Demo: Settings and Preferences dialog (modality during network event)
    • Script engine must always unwind before drawing or network activity
    • Any ActionScript code that does any drawing or networking activity is going to have a lot of completion functions
    • Our solution was to build a helper class to manage nesting, app-modality
    • Code: AsyncCompletion.as, SettingsAndPrefsDlg.as
  • Modularizing
    • Demo: logging in with empty browser cache
  • Modularizing
    • Advantages
    • Improves build times
    • Permits background downloading
    • Imposes information hiding discipline
  • Modularizing
    • Risks
    • Can increase overall download
    • Can slow overall build times
    • Increased complexity
  • Modularizing
    • Debugging across modules is a common problem
    • 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
    • We solved by building ModulePathLoader subclass of ModuleLoader that tries to load the debug path as well as the release path
  • Modularizing
    • UI for progress bars handled by ProgressManager class
      • Keeps track of what mode we're in (notified by app frame)
      • Knows what modes are blocked by which downloads
      • Keeps track of which downloads are in progress (monitors events from Module loading process)
    • Code: ProgressManager.as
  • Questions?
  • Rich Text Clipboard
    • Demo: copying and pasting between Buzzword and MS Word
  • Rich Text Clipboard
    • Flash does not support rich text at all
    • Flash provides limited support for putting plain text only on system clipboard
    • Flash provides no support for getting contents of system clipboard
    • Clearly a hack is required
  • Rich Text Clipboard
    • Browser contains both the Flash plug-in and a hidden editable IFRAME (or DIV for some browsers)
    • All keystrokes go into the editable IFRAME and are passed into Flex via ExternalInterface
    • Clipboard actions are detected via either clipboard events (in IE) or keyDown/keyPress/keyUp events (other browsers)
  • 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
  • Rich Text Clipboard
    • Demo: copying and pasting between Buzzword and MS Word
    • This is a giant hack! And it requires a separate instance of the hack for each browser!
    • Unavoidable due to limitations of Flash
    • AIR will make this better, but we'll still need the hack for the browser version
  • 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