Building An ITunes - like Browser

(and other filtering controls)

360 Flex Atlanta 02 27 2008

 John Wright Software Developer

experience innovation
www.effectiveui.com

parterning with EUI on Watson

www.adobe.com

internal bug tracking app at Adobe

Watson

360 Flex Atlanta 02 27 2008

Who/What is Watson

An internal bug tracking application for Adobe

Adobe has partnered with EffectiveUI to build a new UI for an
internal bug tracking system
‣ John Wright - EUI developer/designer
‣ Andy Mcintosh - EUI developer/designer
‣ Todd Cotton - Program Manager
‣ Bruce Wong - Adobe developer
‣ A number of other Adobe internal team members
Building Both a Flex and AIR version of the app
Project Goal
Significantly improve user experience and productivity for Adobe’s
legacy bug tracking system
Serious usability requirements
Millions of bugs, hundreds of projects
Existing web based solution not clean, lots of page refreshes to
do basic tasks.
Lots of functionality to duplicate from existing system
Need a few key custom controls for usability
Push the boundaries of Flex and AIR for usable applications
Let’s Look at Filtering

Make your application “anxious to please”

The computer can find things faster than the combination of a
user’s eye, scrolling and clicking.
Filtering results grids - long lists of bugs across which a user
wants to narrow focus quickly
Type-ahead filtering - while choosing search params. E.g. type
ahead on user names when forming a bug query like “find bugs
from dev Bruce Wong”.
Usually a few chars is enough to narrow the results.
What Cupertino thinks is important is important.
How many records can you filter?

A lot because of AS3, and AMF/Remoting

James Ward has shown how fast AMF3 can be compared to
other methods

Source - http://www.jamesward.org/wordpress/2007/12/12/blazebench-why-
you-want-amf-and-blazeds/
Search Broad, Filter Narrow
How To Best Filter?

Compare the time per letter typed on 30,000 collection items:

AS3 collection filtering (200-300 ms) - built-in filters too slow
for filter as you type on this large of set.
E4X expression filtering (200 ms) - Powerful expressions across
XML but sluggish
Reg Expr (14-30 seconds) - Very slow in AS3
IndexOf Key Search (10-70ms) - Build a custom string and build
a new collection from the keys found.
var indexOf:String = “property1property2property3<[0]>...”

Source - http://www.craftymind.com/2007/02/11/find-as-you-type-sorting-on-large-
record-sets
The Code
public static function applyFilter(list:ArrayCollection, term:String,
fullIndexString:String):ArrayCollection
{
var output:ArrayCollection = new ArrayCollection();
var i:Number = 0;
var pos:Number = 0;
var index:int = 0;
var count:int = 0;
while(i > -1)
{
pos = fullIndexString.indexOf(term, i);
if(pos > -1){

index = int( fullIndexString.substring(fullIndexString.indexOf(startDelimiter,

pos)+2, fullIndexString.indexOf(endDelimeter, pos)) );
output.addItem(list[index]);
count++;
i = fullIndexString.indexOf(endDelimeter, pos) + 1;
}else{
i = pos;
}
}
return output;
}
Little Gift #1 For You

FilteredCollectionView (courtesy Andy Mcintosh)

Super fast filtering (maybe not the best but the best we know
of)
Clone method
Simple Pattern Matching Options
‣ MATCH_CONTAINS
‣ MATCH_BEGINS_WITH
‣ MATCH_ANY_WORD_BEGINS
Supports case insensitive searches
Let’s see it in action.
360 Flex Atlanta 02 27 2008
Ugly Search Forms

How to get rid of them?

Adobe has dozens of fields to form queries.
Existing solution confronts users with dozens of daunting
options.
Existing form doesn’t enforce any workflow at all really.
Once again, problem solved by Cupertino.
360 Flex Atlanta 02 27 2008
360 Flex Atlanta 02 27 2008
But What About Hierarchical Fields?

A lot of bug search fields are related and nested

Adobe family, product, version, area, subarea

Not handled well by smart rule editors

We need to combine these fields somehow:
‣ Nested menus?
‣ Trees?
What if in the rule editor we could pop up this?
360 Flex Atlanta 02 27 2008
How to build a hierarchy browser?
3 Main Challenges
No Flex browser control (unlike Cocoa).
Performance of over 50,000 entries
Need to bring all the data over at once, over 10 megs worth
Challenge #1

Flex has no browser control

But we have Andy Mcintosh.
360 Flex Atlanta 02 27 2008
Challenge #2

How to achieve Itunes like performance over such a large dataset:

We tried:
‣ mx.collections.HierarchicalData - too slow
‣ e4x - too slow
This looks a lot like our filtering problem
We adapted the filter. Each hierarchy entry in the index looks
like:
<level1[0],level2[1], level3[3], level4[4]>...
Now when we filter we rebuild multiple data providers instead
of one.
This took a while to figure out!
Challenge #3

How to bring all the data over?

Just do it and see what happens
AMF3 is fast
Lightweight object wrapper - contains Array of
ArrayCollections of Strings
Cache the data
Serialize it out in AIR
Use a MD5 checksum
Little Gift #2 For You

HierarchyBrowser
The browser component
You supply the HierarchicalDataVO object:
public class HierarchicalDataVO
{
public var entries:Array; // <ArrayCollection>
public var labels:Array; //Strings with the labels for each
public var indexStringUpperCase:String; // <String>
public var indexStringLowerCase:String;
public var md5Hash:String;
}
Components supplies filtering and single selection, no multiple
selection yet.
Fastest browsing method we could come up with
Lessons learned from Watson

Pair developers of complimentary talents.

‣ The combo of jack-of-all-trades Flex developer with a Flex
component developer works well
‣ Andy Mcintosh - component developer/inventor, prefers detail
oriented work
‣ John Wright - lots of broad experience, finds optimizations, works
fast and general.
Study the great applications
‣ Aperture - stunning UI design everywhere
‣ Mac Mail, ITunes - great filters, smart editors, panels
‣ Facebook - incredibly clean, just works, complete system
‣ Gmail - light feel, everything inline, lots of keyboard features
Be Passionate, Humble, and Smart
‣ EUI core principles
 The End
(Thank you.)

360 Flex Atlanta 02 27 2008