360 Flex Atlanta 02 27 2008

Building An ITunes - like Browser (and other filtering controls)

360 Flex Atlanta 02 27 2008

John Wright Software Developer

www.adobe.com

parterning with EUI on Watson

internal bug tracking app at Adobe

www.effectiveui.com

experience innovation

Watson

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 requirementsMillions of bugs, hundreds of projectsExisting 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 usabilityPush 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 quicklyType-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 sluggishReg Expr (14-30 seconds) - Very slow in AS3IndexOf 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 methodSimple Pattern Matching Options ‣ MATCH_CONTAINS‣ MATCH_BEGINS_WITH‣ MATCH_ANY_WORD_BEGINS

Supports case insensitive searchesLet’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 editorsWe 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 entriesNeed 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 problemWe 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 happensAMF3 is fastLightweight object wrapper - contains Array of ArrayCollections of StringsCache the dataSerialize it out in AIRUse a MD5 checksum

Little Gift #2 For You

HierarchyBrowser

The browser componentYou 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

360 Flex Atlanta 02 27 2008

The End(Thank you.)