Notice (November 2013): QuickUI is no longer in active development. Many thanks to all who have supported this project. People interested in component-based web user interface design and development should look at HTML web components, for example those possible in the Polymer framework. |
|
QuickUI is a free and open JavaScript framework that lets you create your web application's user interface with components called controls. A control includes all the DOM elements, interactive behavior, and visual styling necessary for the component to function. You can define a control to implement any level of your app's UI: a page template, a region on the page, a special button, etc. This approach lets you apply all the benefits of traditional object-oriented design to your JavaScript UI code. You'll have a rich set of components you can assemble into a great web application with a clean, intuitive, and responsive user interface.
|
|
Build up complex user interfaces from small building blocks |
|
Every web framework offers a date picker, but a date picker built in QuickUI packs in a world of power. You can see a typical example on the right. (Whenever you're up for it, you can check out the docs and source for this DateComboBox control and the other controls described here.) |
|
It may not look like much, but under the covers, many pieces are working together to make this date picker function. Every one of those pieces is available to you as a useful component in its own right. Take the combo box behavior, for example, which joins a popup with a text box, and adds a little dropdown arrow for discoverability. You can use the ComboBox class on its own (see right), or a common subclass called ListComboBox that specializes in presenting the user's choice in a list. |
[Some UI to select choices goes here]
|
In the date picker case, the text box portion of a date picker needs to actually understand how to parse and represent dates, so that's offered as its own DateTextBox control. The DateTextBox doesn't have a popup — it just handles dates as text. Generally speaking, QuickUI controls try to do just one thing really well. | |
The DateTextBox above gets combined with a CalendarMonthNavigator that just focuses on letting you navigate through dates, one month at a time. Try the calendar on the right. This sort of in-line calendar might be a much better choice for your application's user interface than a normal, tiny date picker. If you have the room for an inline-calendar, and selecting a date is an important part of your UI, then an in-line calendar lets the user select a date without having to go through the trouble of finding and opening a popup calendar. | |
The ability to navigate left and right (here, between months) is a general user interface pattern that crops up in lots of other situations — so of course that's delivered as a control as well. In this case, it's a LateralNavigator, which is also the basis of controls like Carousel (right) that can navigate through sets of things like images. |
|
Here, you're navigating among calendar months. The month itself is rendered using a static CalendarMonthWithHeadings control. This control doesn't deal with navigation at all — it can focus entirely on just rendering a clean, accurate calendar. | |
Each piece of the month — the headings, the cells for the days, etc., are all available as controls, all of which you can use. These components take care of all the date math, so you don't have to worry about that. In all, the little date picker control turns out to be constructed from twenty different control classes, each playing a clearly-defined role in the date picker's final appearance and behavior. You can see these class relationships represented visually below (click for a larger graph). You can use each of those contributing control classes on their own, or in new combinations. The point of this date picker example is not (just) that QuickUI has good date controls — the point is that the QuickUI framework gives you a powerful way to express your user interface in classes. |
|
Waaaay beyond styling |
|
Previous user interface frameworks only gave you big, chunky UI widgets to work with. Your ability to customize them is limited to the things the widget author could image you'd want to change. And while you can customize thigns a bit, there's a limit to what's possible with CSS. QuickUI lets you go way beyond that limit, with controls that can accept other controls. Suppose you can have a product like, say, Flickr and want to show interesting the most interesting photo of the day on a calendar. Using the CalendarDay control as a starting point, create a new calendar-day-with-photo control. Drop that control into the exact same calendar month navigator control shown above, and voilà, a photo calendar: |
|
Or you could create a new day control that renders a date with both Roman numerals and kanji calligraphy, and drop that into a calendar month for a result that's not possible with CSS alone: |
|
Remixable user interface controlsEveryone's user interface needs are different. That's why all QuickUI controls are designed to be remixed: composed with other controls, extended with custom behavior, and generally adapted to the needs of your app. In the case of this calendar, you can tell the calendar to use a different control to render the days — and in that control, you can do whatever you want. Or suppose you have more complex needs, and need to let the user select a date range. You can recombine the above elements to create a date range selector: This particular example above makes use of a meta-control called Repeater that instantiates a given control class multiple times, so you can quickly adapt your UI to show two months, or four months, or however many work best. |
|
Shared components encourage investment in fundamentalsThere are many reasons why building user interfaces this way makes a lot of sense. One is that reusable components change the economics of making a heavier investment in user interface fundamentals. Take the complex chore of localizing a calendar to other languages. The QuickUI date controls use the Globalize library, which supports roughly 350 different cultures around the world. Here are some instances of the same calendar month control, only now they've been instructed to show a calendar appropriate to French, Japanese, or Thai cultures: |
|
|
|
Not only do the text labels for the month or days of the week change, different cultures prefer to see different days of the week as the "first" day of a week: Sunday in North American, Monday in Europe. And different cultures expect to see the different parts of a date rendered differently in text, so the DateTextBox control changes its presentation (and date parsing) accordingly. Few teams can afford to invest that kind of effort — but if everyone shares an implementation, then that kind of investment will produce returns for everyone. Other examples of investments the component approach makes more reasonable are: performance, keyboard support, general accessibility, cutting-edge CSS optimization, and device responsiveness. |
|
What makes QuickUI different from other web frameworks?
|
|
Good citizen of the open webQuickUI is built with jQuery, the web’s most popular JavaScript library, and works in all mainstream browsers: Apple Safari, Google Chrome, Microsoft Internet Explorer 8+, and Mozilla Firefox. The framework is agnostic with regards to your back end, your data binding model, your workflow, and your tool pipeline. QuickUI is planned to co-evolve with upcoming HTML specifications for web components. QuickUI is free, and the source code is open under the MIT License. A catalog of parts to start withThe optional QuickUI Catalog is a library of approximately 80 UI controls. Each control tries to do just one thing really well, and these are intended as starting point for your own UI. Originally designed for full browsers, many of the catalog controls work on mobile browsers as well. The page you are reading now, and this entire site, is built using QuickUI and controls from the QuickUI Catalog. Get started
|