Building Buzzword (Flex Camp Boston 2007)

Building Buzzword David Coletta Adobe Systems, Inc. [email_address] Blog: TheJoyOfFlex.com

Introduction
Was developer and co-founder at Virtual Ubiquity
Now Sr. Computer Scientist at Adobe
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, Adobe acquisition

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

The Five Cent Tour
Show of hands: who has never actually used Buzzword?
Document Organizer
Toolbar
Lists
Graphics
Tables
Comments
Sharing

Topics in detail
Getting text on the page
Testing the app
Page-segmented scroll bar
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

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

Demo: Style inspector
DocumentStructureTree extends Tree
DocumentTreeDescriptor implements ITreeDataDescriptor

Layout engine
Demo: Layout inspector

Demo: Display element debugging

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 (got easier in Flex 3)

Questions?

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)

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

http://www.colettas.org	452
http://www.netvibes.com	6
http://www.slideshare.net	3
http://lila.io	1
http://64.233.179.104	1

Building Buzzword (Flex Camp Boston 2007)

by dcoletta

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 463

Statistics