This is the collection of all the current widget mockups for reference. We have looked through all popular libraries and now feel that this is fairly comprehensive set of all commonly seen UI widgets.

The next step would be to prioritize these widgets by filling out the table on the main page. Note: this single large image is just temporary. We can cut individual images and drop them into every widget definition page.

All UI widgets (click to view full size)

Change log

Last updated Oct. 31 by Todd Parker. Key changes include:

Star rating system added (F10)

Form validation system added (F11)

Revamped & expanded progress indicators (O1-7)

Image crop tool added (Q4)

Spark lines added to charting (S1)

Rich text editor added (T1)

Updated Oct. 24 by Todd Parker.  Key changes include:

Menus with check and radio items (D2)

Menus with images (D5)

Toolbar divider and re-sizable divider (E1)

Custom checkboxes - image based but tied to checkbox form element (F8)

Custom radiobuttons - image based but tied to radiobutton form element (F9)

Slider with image background that can bet dimmed for unselected range (G8)

Date agenda view (H3)

Alternate color pickers (I4)

Tree with +/- toggles and icons (J3)

Indeterminate prigress bar (O2)

Pagination - text link, buttons, input, dot styles (R1-4)

Charting = All standard 2D graphs with interactivity (S1)

Layout manager - added simple splitter panel example (Z1)

Background research: Other JS libraries

Dojo Digit widgets and themes

http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/theme...

- In general, they have a pretty basic but workable set of widgets - Look for the "Alternate themes" tab to see the 3 pre-built themes. Each is pretty basic, few or no rounded corners, much like ThemeRoller but not customizable - The TimeTextBox is a good example of how NOT to design a time picker. - Widgets work well with image turned off

Widgets they have that aren't in our collection, and should be considered: - basic re-sizable splitter panels - custom radiobuttons and checkboxes - disabled styles for each widget - design & test widgets to work without images

...........................................................................................................

Yahoo UI!

http://developer.yahoo.com/yui/

http://developer.yahoo.com/ypatterns/

- Huge number of widgets, lots of config options

Widgets they have that aren't in our collection, and should be considered: - charting (think Scott is working on this now) - container (panel/dialog/overlay/tooltip all rolled into one uber widget) - image cropper - image loader (for caching) - layout manager - rich text editor - Indeterminate progress bar (in place of a spinner)

...........................................................................................................

Ext JS

http://extjs.com/products/extjs/

- This is a good example of a way to browse all widgets, they even have a view switcher to pick the level of detail. The long scrolling box with side tabs is interesting too. - Everything is very consistent in their design system, demos are clear

Widgets they have that aren't in our collection, and should be considered: - Grid grouping - Grid table header menu to choose sorting/grouping/columns to show - Tabs with "x" to remove each, re-order tabs - Form validation utilities - Column tree (table with hierarchical +/- nodes to expand and collapse rows)

...........................................................................................................

Prototype UI

http://www.prototype-ui.com/

- The drop shadow on the dialog is slick, nice config options and documentation as Cody mentioned

...........................................................................................................

Qooxdoo

http://qooxdoo.org/

Widgets have huge increase in their recent 0.8 version.

...........................................................................................................

Ucren

http://widgets.ucren.com/ucren-documentation/

A js UI framework from China. Links on top: Home, Demo, Tutorials, API doc, Buy Click the second link to view demos, if you want to know more about it, feel free to contact Cloudream .

...........................................................................................................

Mochaui

http://mochaui.com/

...........................................................................................................

Component Art

http://www.componentart.com/webui/demos/

...........................................................................................................

Jx

http://jxlib.org/

New Moo based library that is fairly complete considering it was just released.

...........................................................................................................