Introduction

uitags is an open source JSP custom-tag library (taglib) that makes developing friendly UI (user interface) effortless. It has a unique aim of helping developers create interactive UIs that let end-users work more efficiently. This library's collection include tags for well-known UI components, such as formGuide and optionTransfer.

To find out more, have a quick look at the remaining of this page, and then proceed to the demo site. Consult the Using uitags and Tag Reference pages when you're developing with uitags.

Compatibility note: uitags presently works with IE 6 and Mozilla Firefox 1.x (and possibly with older versions of Firefox).

News

04 September 2006

Version 0.6.12 Released
  • Added support for custom velocity templates. (Feature Request ID 1542059).

To upgrade, simply replace the older uitags-main-0.6.x.jar with uitags-main-0.6.12.jar and copy the newer JS file.

19 July 2006

Version 0.6.11 Released
  • Added the <observeForNull> tag to the formGuide suite.
  • Fixed a bug whereby observing the same widget more than once could produce an unexpected behavior.

To upgrade, simply replace the older uitags-main-0.6.x.jar with uitags-main-0.6.11.jar and copy the newer JS file.

01 March 2006

Version 0.6.10 Released
  • Fixed javascript error in formGuide caused by a misplaced closing bracket (Forum thread ID 1444829).
  • Added HTML option tag under every generated select tag for XHTML compliance (Bug ID 1398790).

To upgrade, simply replace the older uitags-main-0.6.x.jar with uitags-main-0.6.10.jar.

UI Best Practices

Disable Unused Input Fields

Problem

Unused/irrelevant input fields which aren't "grayed out" generally confuse and slow down users, thereby adversely affecting their productivity.

Solution

Use <formGuide> to guide user through a form by disabling irrelevant input fields.

Never Lose User Input

Problem

Imagine you just spent the last 20-30 minutes typing up a report. Now you click the Submit button to save your work and suddenly you are looking at the login page with a message saying that your session has expired. You try the back button with no avail. Your beautifully written report is lost forever.....

OK, you can stop this horrible imagination now. Just make sure your end-users never have to experience this.

Solution

uitags' <timer> creates a hidden JavaScript timer that triggers a reminder if user's session is about to expire and gives him the option to renew the session without affecting his current work.

Selecting from A Long List of Values

Problem

When faced with the task of making users choose from a list of known values, a developer would instinctively use a select box. If the list of values can grow infinitely, using a select box by itself is generally a bad idea. Users may find it difficult to pinpoint one or two options out of hundreds (or thousands).

Solution 1: Lookup the Values

Provide an empty select box for capturing values, and a search facility to let user populate it. The <searchRequest> tag lets you easily implement this.

Solution 2: Split the Values into Logical Groups

Sometimes you have no option but show users the complete list of values to choose from. In this situation, you should split them into smaller groups of values. <optionTransfer> and its sub-tags dramatically ease the task of doing this.

Explain But Don't Clutter

Problem

Each input field should have an accompanying explanation if its short label cannot adequately describe its purpose. The extra information should not, however, take up precious space and make the form hard to follow.

Solution

<info> renders a little icon that expands into an info panel when clicked. The icons themselves can be hidden by users who are already familiar with the form to further remove clutter.



One Button to Rule Them All

Problem

If you have a list of checkboxes, don't let user tick those checkboxes one by one, it's a waste of their time!

Solution

<fastTick> renders convenience buttons that tick/untick all or many checkboxes in one click.