I was speaking with some of our developers last night about a mobile web options like jQTouch, jQuery Mobile, Sencha Touch. And then we started talking about Backbone.js. I first heard about Backbone last week from a prospective client who mentioned they use it with PhoneGap to create their apps. I guess I’m late to the table on this one, but in case you haven’t seen Backbone.js either, check out these great examples from their site:

ToDo List

Jérôme Gravel-Niquet has contributed a Todo List application that is bundled in the repository as Backbone example.

DocumentCloud

The DocumentCloud workspace is built on Backbone.js, with Documents, Projects,Notes, and Accounts all as Backbone models and collections.

LinkedIn Mobile

LinkedIn used Backbone.js to create its next-generation HTML5 mobile web app.

Flow

MetaLab used Backbone.js to create Flow, a task management app for teams.

AudioVroom

AudioVroom is a free music streaming app that allows you to listen to your Facebook friends like radio stations.

Foursquare

Foursquare is a fun little startup that helps you meet up with friends, discover new places, and save money.

Do

Do is a social productivity app that makes it easy to work on tasks, track projects, and take notes with your team.

Groupon Now!

Groupon Now! helps you find local deals that you can buy and use right now.

Basecamp Mobile

37Signals used Backbone.js to create Basecamp Mobile, the mobile version of their popular project management software.

Slavery Footprint

Slavery Footprint allows consumers to visualize how their consumption habits are connected to modern-day slavery and provides them with an opportunity
to have a deeper conversation with the companies that manufacture the goods they purchased.

Trajectory

Trajectory is an agile software planning tool used to discuss wireframes, record decisions made, relate user stories and bugs to discussions, and track your progress and plan the future.

SoundCloud Mobile

SoundCloud is the leading sound sharing platform on the internet.

Pandora

When Pandora redesigned their site in HTML5, they chose Backbone.js to help manage the user interface and interactions.

CloudApp

CloudApp is simple file and link sharing for the Mac.

SeatGeek

SeatGeek’s stadium ticket maps were originally developed with Prototype.js. Moving to Backbone.js and jQuery helped organize
a lot of the UI code, and the increased structure has made adding features a lot easier. SeatGeek is also in the process of building a mobile
interface that will be Backbone.js from top to bottom.

Talking Points Memo: Baroque

Baroque is the editor currently powering the homepage of Talking Points Memo.

Grove.io

Grove.io provides hosted IRC for teams.

Kicksend

Kicksend is a real-time file sharing platform that helps everyday people send and receive files of any size
with their friends and family.

Shortmail

410 Labs uses Backbone.js at Shortmail.com to build a fast and responsive inbox, driven by the Router.

Battlefield Play4Free

Battlefield Play4Free is the latest free-to-play first person shooter from the same team that
created Battlefield Heroes.

Salon.io

Salon.io provides a space where photographers, artists and designers freely arrange their visual art on virtual walls.

Quote Roller

Coding Staff used Backbone.js to create Quote Roller, an application that helps to create, send, organize and track business proposals with ease.

TileMill

Our fellow Knight Foundation News Challenge winners, MapBox, created an open-source map design studio with Backbone.js: TileMill.

rround.me

rround.me uses the HTML Geolocation API to discover tweets, YouTube videos, Instagram photos, Foursquare spots, and other happenings
posted by people close to you.

Blossom

Blossom is a lightweight project management tool for lean teams.

Insta-great!

Elliott Kember and Hector Simpson built Insta-great! – a fun way to explore popular photos and interact with Instagram on the web.

Decide

Decide.com helps people decide when to buy consumer electronics.

Trello

Trello is a collaboration tool that organizes your projects into boards.

BitTorrent

BitTorrent used Backbone to completely rework an existing Win32 UI.

Fluxiom

Fluxiom uses Backbone.js and HTML5 to deliver a seamless upload experience from the desktop to the cloud, including drag and drop, live previews, partial uploads, and one-click sharing.

Chop

Chop is a little app from ZURB that lets people slice up bad code and share their feedback to help put it back together.

Blackcomb

Opzi used Backbone.js to create Blackcomb, a web-based platform for collaboration applications.

QuietWrite

James Yu used Backbone.js to create QuietWrite, an app that gives writers a clean and quiet interface to concentrate on the text itself.

Tzigla

Cristi Balan and Irina Dumitrascu created Tzigla, a collaborative drawing application where artists make tiles that connect to each other to
create surreal drawings.

Harvest, the time tracking and invoicing tool we use, just added a new filter mechanism to their report generator. While I appreciate the additional functionality, I was most impressed with their multi-select combobox. It looks like a normal text field, but once the field has focus you can select any option and it will be added into the field, click again and you can select another option, building up any number of options. The field just gets larger (more rows are added) when you add more options than can be displayed in a single row.

It is equally easy to remove items from the field by clicking the little ‘x’ next to each option.

Does anyone know if there is a JQuery control for this? That would be awesome. A Flex control like this would be nice too, just in case there are any motivated developers reading this (wink, wink)…

By Theresa Neil

Since the book focuses on rich interactions, I want to spend some time on Adobe Flex/AIR.

These tips are based on the best Flex resources I have found, and how you can use them to craft a great user experience. This is part 4 of 6:

• Play With It: 10 Explorers & Galleries
• Learn From the Best: 10 Great Flex Apps
• Learn From the Rest: 10 Great RIAs
• Stock Your Toolbox: 40+ Custom Flex Controls
• Review Best Practices for Designing a RIA
• Avoid Common Mistakes: 10 Anti-Patterns

Stock your Toolbox: 40+ Custom Flex Controls

Flex 3 includes a wide range of controls. Unfortunately, it doesn’t have all of the Essential Controls I use for RIA design. But fortunately, talented and industrious Flex developers have created numerous custom controls for Flex.

I pulled together a visual repository of custom Flex controls. Most of these controls were created to showcase certain functionality- not usability best practices. So some may need further refinement to comply with the usability principles discussed in the previous posts. Click on the picture for the demo.

01. Accordions

Complex Headers

Horizontal Accordion


Apple Style
More under ‘Collapsible Panels’

02. Auto Complete

More Examples

03. Bar Code Generator

04. Build a List

05. Calendar/Scheduler

ILog Elixir

Ely Greenfield’s early Scheduler

Adobe’s Scheduler on flexlib see flexlib.scheduling package

06. Captcha

07. Charts & Graphs

3D charts by iLog Elixir

Chart Drill Down with Animation

Dashed Line Series

Chart Offest

Advanced Legend

Scroll and Zoom

08. Collapsible Panels

Window Shade- panels roll up and down

Arc90’s Collapsible Panel

Early Stacked Panels

09. Cover Flow

Doug McCune’s updated Cover Flow

10. Data Visualization

Kap IT Lab
ILog Elixir
BirdEye

11. Docking

12. Drop Down Menu with Scrolling

13. Find and Highlight Text

In flexlib as Highlighter

14. Fisheye Menu (like Mac Dock)

15. Flip Card

16. Floating

17. Gantt Chart

ILOG Elixir Gantt

Doug McCune’s Early Gantt Chart

18. Inline Edit (Fields)

Early example by Ely Greenfield

Modal editing variation by Ryan Swanson
* The hover invitation to edit on a field by field basis (like Flickr) works best for infrequent edits

19. Icon Loader

On flexlib under Icon Loader

20. List/Tree Converter

On flexlib under Convertible Tree List

21. Mask (text input and validation)

On Adobe Flex Exchange

22. Multiple Document Interface (MDI)

On flexlib under flexlib.mdi

23. Magnify

24. Map Callouts

23. Pan and Zoom

24. Page Turn

Peek Panel by Bill White (nice blog)
Ely Greenfield’s early FlexBook

Didier Braun’s PageFlip

25. Pivot Table

Satish’s Pivot Table

Flex Monster product

26. Resize

Resizeable and moveable window

Resize Objects with ResizeManagerFX

27. Scrolling-Internal

In flexlib as Drag Scrolling Canvas

28. Side Tabs/Vertical Tabs

Degrafa ToggleButtonBar vertical tabs


Vertical Tab Navigator

29. Sliders

30. Sliding Panel

Early example
Slide out menu with effects instead of states

31. Sparklines

More examples:
Fusion Charts
Sherlock Informatics
Birdeye
19nates

32. Spell Check

There is also a Spell Check component on Flex Exchange

33. Tabs (configurable)

34. Text Prompt/ Watermark Fields

At flexlib under prompting TextInput

35. Tree Table

Early Tree Grid

36. Time Picker

Alternate one on Flex Exchange as Time Chooser

37. Toolbars

38. Trees

Open branches by clicking on the row
Adding leaf notes
Showing XML
Rearranging nodes with drag and drop
Drag from a Grid to a Tree

39. Upload Files

40. Vertical Browse

Comment with your custom Flex controls

Please comment with a link to your favorite custom Flex controls.

By Theresa Neil

As Bill mentioned in an earlier post, we don’t want to limit this blog to just the principles and patterns found in the book. For that you can check out our Explore the Book section.

This is the second article in a three part series on patterns and principles for RIA design.

Standard Screen Patterns: 12 patterns w/100 examples
Essential Controls: 30 controls for RIA design and development
Components for Commonly Requested Features: 15 patterns and examples

Every designer has a set of controls they rely on to communicate an effective UI. This is my library of essential controls.

Unfortunately, no single RIA framework offers all 30 of these. So I included a checklist of which frameworks provide each control. If you have an addition or correction, please e-mail me, and I will post an updated framework/control matrix.

The frameworks reviewed include: Flex, Laszlo, Silverlight and 12 Ajax frameworks and toolkits: ExtJS, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, SproutCore, LivePipeUI,IT Mill, Backbase.

01. Auto Suggest

Google’s Auto-Complete

Supported by: Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, IT Mill, Backbase, Silverlight.

02. Carousel (variation as Coverflow)

Carousel Prototype carousel widget

Supported by: YUI, Prototype/script.aculo.us, JQuery, ITMill, Backbase, iCarousel

Coverflow MediaEvent Service’s Slideflow

Supported by: Flex, Prototype/script.aculo.us, JQuery, MooTools, RadControls for Silverlight

03. Charts & Graphs

Charts Advanced charting features like hover details, drill down, rolling windows, toggle views…

Supported by: Flex, Laszlo, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery (SWF/Chart), MooTools, MochaUI, Backbase, SilverLight, AnyChart, Dundas, JPowered, JFreeChart, OpenFlashCharts, Flot, Plotr, PlotKit, WebFX, AjaxMcGraph, Measure Map.

04. Collapsible Panels (accordion, disclosure triangles, slide drawer)

Accordion Mutually exclusive collapsible panels showing status

Disclosure arrows Mint.com uses disclosure arrows for summarizing and displaying accounts

Sliding panel Fluxiom uses a sliding panel instead of a dialog to show the selected photo’s details

Supported by: Flex, Laszlo, ExtJs (called panels), Dojo, Google Web Toolkit (disclosure panel), Prototype/script.aculo.us (accordion), JQuery, MooTools (accordion), MochaUI (split pane), SproutCore (split pane), IT Mill, Backbase (accordion), RadControls for Silverlight (PanelBar and Sliding Panel).

05. Combobox (select multiple, alternate list box UI, editable)

Select multiple LivePipe UI’s control takes less space and is easier to scan than an ocean of checkboxes

Alternate listbox UI Best alternative for multi select in small spaces, clearly displays all selections, and provides an easy way to edit

Supported by: Alternate Listbox UI, LivePipeUI

Editable combobox Editable combobox allows for lookup and/or text entry

Supported by: Flex, Laszlo, ExtJs, Prototype/script.aculo.us, JQuery, MooTools (MUI.ComboBox), IT Mill, Backbase, RadControls for Silverlight.

06. Date Picker/Calendar (select range, date/time combination)

Advanced calendar Select a range, discontinuous dates, or exclude a certain day

Date/time picker Select a date and time in a single control

Supported by: Flex, Laszlo, ExtJS, Dojo, YUI, JQuery, Scal built on Prototype, MooTools, MochUI, IT Mill, Backbase, Silverlight, dhtmlxCalendar, keyboard accessible calendar, more examples on Woork

07. Dialogs (modal, light weight, lightbox)

Modal dialog Mint offers a modal for adding an account

Modeless dialog Google Maps provides a modeless dialog for getting directions

Lightbox JQuery provides a lightbox plugin, a modal dialog that blacks out the parent screen

Supported by: Flex(modal), Laszlo (modal and modeless), ExtJs (modal), Dojo (modal and lightbox), YUI( listed under Containers: Modal and Overlay), Prototype/script.aculo.us, JQuery (modal, modeless, lightbox) , SproutCore (has a really nice example of each under ‘panes’), MooTools, MochaUI, LivePipe UI, IT Mill, Backbase (modal and modeless window), Silverlight (modal and lightbox).

08. Docking

Dockable menu Campaign Manager by eyeblaster offers a pinned/unpinned menu for navigating between campaigns

Supported by: Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, LivePipe UI, Backbase, Silverlight.

09. Drag & Drop Manager

Drag and drop ExtJS photo organizer demo

Supported by: Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, LivePipe UI, Backbase, Silverlight.

10. Dynamic Filter

Dynamic table filtering Flex offers a filter feature that dynamically filters the results while the user types, demo

Dynamic column filtering Dynamic filtering can be implemented at the column level providing advanced filtering capabilities Supported by: Flex, Laszlo, ExtJs, Dojo, YUI, JQuery, IT Mill, Backbase, Silverlight, Open Rico

11. Feedback/ Status

Feedback Gmail status message

Supported by: Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, LivePipe UI, IT Mill, Backbase, Silverlight

12. Fisheye/ Spotlight

Fisheye Apslab Fish-eye Lense

Apply this concept to a dense chart or map for a truly useful feature.

Supported by: Flex, ExtJs (spotlight), Dojo , Prototype/script.aculo.us, JQuery, MooTools, MochaUI, Silverlight

13. Gauges (and other visual progress or status indicators)

Gauge Thermometer gauge in RadControls for Silverlight

Gauges provide a concise visual summary in heads-up-display or other goal directed designs

Supported by: Flex (various plug-ins and Flex Charting), ExtJs (combined with GWT), Dojo, Google Web Toolkit, Prototype/script.aculo.us, JQuery (SWF/Gauge), MooTools, MochaUI, Silverlight, AnyChart, Dundas

14. Help Tip/ Quick Tip

Quick Tip Picnik engages new users with some helpful advice

More than just a tooltip, these are fully formatted messages typically presented in a modeless dialog.

Supported by: Flex, Laszlo, ExtJs, Dojo, YUI (use overlay container), Google Web Toolkit (use popup panel), Prototype/script.aculo.us, JQuery, MooTools, MochaUI, LivePipe UI (use window control), IT Mill, Backbase, Silverlight

15. Hot Keys

Hot keys Balsamiq Mockups has hot keys for frequent actions

Supported by: Flex, Laszlo, Mochui, LivePipe UI, IT Mill, Backbase, Silverlight

16. Hover Action

Hover action Instead of cluttering the screen with redundant actions, Basecamp reveals the edit and delete actions onHover

Supported by: Flex, Laszlo, ExtJs, YUI, JQuery, MooTools, MochaUI, Backbase, Silverlight, good post by Bill on hover actions and missed moments

17. Hover Detail

Hover detail Netflix hover details

Supported by: Flex, Laszlo, ExtJs, Dojo, YUI (overlay), Prototype/script.aculo.us, JQuery, MooTools (smart hover box), IT Mill, Silverlight

18. Inline Edit

Inline edit Instead of showing form fields in pages that are usually read (not edited), Flickr provides inline editing

Supported by: Flex (only in the grid), Laszlo (only in the grid), ExtJs, Dojo, YUI, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, IT Mill, Backbase (only in the grid), Silverlight (only in the grid)

19. Progress Indicator/ Loading

Progress indicator Picnik loading indicator

Supported by: Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, LivePipe UI, IT Mill, Backbase, Silverlight

20. Rating

Star rating Graffletopia offers one-click star ratings for shared stencils

Supported by: ExtJs extension, Dojo widget, Starbox for Prototype/script.aculo.us, JQuery, MooTools , MochaUI

21. Record Locator/ Paginator

Record locator Like the control in PDF Viewer, the record locator lets you navigate through records in a dataset or skip to a specific record by name

Paginator Typically used for paging through tables, screens, or other result sets

Supported by: Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, LivePipe UI, Backbase, Silverlight

22. Slider

Slider Innography provides sliders in their quick filter for refining results displayed on a chart

Supported by: Flex, Laszlo, ExtJs, Dojo, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, IT Mill, Backbase, RadControls for Silverlight

23. Scoped Search

Scoped search Like iTunes, allows for the optional selection of a category before entering free form search text, example from Vimeo’s help page

Supported by: custom css and js code, example at Janko at warp speed, RadControls for Silverlight

24. Sparklines

Sparklines Great way to show the “shape” or trend of data is a small space, examples from RetailMeNot.com and Google Analytics. Created by Edward Tufte.

Supported by: Nuby on Rails, Any Chart, JQuery plugin, Flex , and two more ones for Flex at Microcharts and Birdeye, Google API, Visifire for Silverlight

25. Table/ Data Grid ( scrolling, editable, grouped)

Scrolling table Endless scrolling, no paging, just like a desktop app, example from ExtJS

Editable table Blist offers inline cell editing in their products. Best practice, highlight the selected row, and only display an editor in the selected cell. Don’t forget to accomodate keyboard navigation.

Tree table Grouping by row, displays as a tree table, example from ExtJS

Supported by: Flex, Laszlo, ExtJs, Dojo, YUI, Backbase, Silverlight

26. Toolbar

Toolbar Provide actions in proximity to the object, examples from SugarSync and Flickr

Supported by: Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, Backbase, RadControls for Silverlight

27. Vertical Browser

Vertical browser Apple’s vertical browser for exploring Dashboard widgets

Supported by: custom code of multiple list boxes

28. View Toggle (buttons, button bar)

Toggle buttons Separate buttons for switching between graph and grid views Campaign Manager by eyeblaster

Toggle button bar Single button bar for capturing binary choices

Supported by: Flex, Laszlo, Dojo, YUI, JQuery, MooTools, MochaUI, Backbase, Silverlight

29. WYSIWYG Editor/ Rich Text Editor

Rich text editor WordPress offers a a WYSIWYG editor for blogging

Supported by: Flex, Laszlo, Dojo, YUI, Google Web Toolkit, JQuery, MooTools, MochaUI, IT Mill, Backbase, Silverlight

30. Zoom

Zoom Zoom in on a certain spot, example from jQZoom

Supported by: Flex, Laszlo, ExtJs (spotlight), Prototype/script.aculo.us (zOOm), JQuery, MooTools (Joomla), MochaUI, Silverlight (silverZoom)

Bonus- Desktop Style Container

Desktop style app OtherInbox built with SproutCore

A desktop style container isn’t actually a control, but frequently required when developing enterprise software and productivity web applications. Many of the frameworks that offer this feature include built in windows management, split panels, and fluid layout.

Supported by: Flex, Laszlo, ExtJs, YUI, JQuery, MochaUI, Backbase, SproutCore, Silverlight

Send me any corrections and/or additions, and I will upload an updated control/framework matrix.

Thanks to Joonas Lehtinen of IT Mill, Ryan Johnson of LivePipe, and Peter Svensson who is a Dojo expert, and Darren James, co-author of Ajax in Action.

Update* Cody Lindley at jQuery provided a comprehensive list with links to code for jQuery support for all 30 controls.