Brian Leathem

3 minute read

RichWidgets 0.1 is released and ready for download. The road to this first release was a long one, requiring us to get our first javascript project in order. Built with grunt, dependencies managed by bower, and our jasmine tests run by karma, RichWidgets is pure javascript project and as such should be equally accessible with all languages and frameworks targeting the web.

To try out this release: You can download the distribution directly, or for bower users, point your bower.json file to consume the richwidgets#0.1.0 library in the bower registry.

Design Choices

The RichWidgets widgets are designed to be used either standalone, or integrated with a web-framework. The widgets are built using the jQuery UI widget factory and styled with Bootstrap. Wherever possible we aim to consume existing OSS widgets (contributing back wherever possible!). By wrapping the upstream widgets with the jQuery UI widget factory, we aim to provide a set of responsive widgets with a well-defined life-cycle, a standard API, and a consistent look-and-feel.

Have a look at our demos to get a feel for how you can use our widgets in your application. Or, if you are a developer of a we framework, take a look at how we’ve wrapped RichWidgets in the RichFaces framework.

Widgets Available

This first release makes four widgets available:

Autocomplete widget

Based on the jQuery UI widget factory, the autocomplete widget comes pre-configured for a number of typical use cases. Have a look at the autocomplete widget demo to see how you can use the widget in your own application.

Charts widget

The charts widget builds on the upstream Flot library and provides the ability to create several types of charts, including: line, pie, and bar charts. Check out the charts widget demo to see some use cases for the various chart types.

Ordering list widget

The ordering list widget is a simple widget used for re-ordering items in a list. Built using the jQuery UI selectable and sortable plug-ins, the ordering list provides support for re-ordering items with either mouse clicks or via drag and drop. Check out the ordering list widget demo to see the ordering list in various configurations.

Pick list widget

The pick list widget is composed of two ordering lists, and items can be selected by placing them in the target list. Similarly to the ordering list, items can be moved by mouse clicks, or by drag and drop. The pick list demo shows the pick list in various configurations.

Next steps

We will likely have a 0.1.1 micro release fixing some bugs with the existing widgets while we concurrently work on some new widgets for our 0.2 release. We have some ideas about what we are targeting with the 0.2 release, but nothing is set in stone. Feel free to get involved and help take the project to where you want it to go!