uitags is an open source JSP custom-tag library (taglib) that makes developing friendly UI (user interface) effortless. It aims to help developers create interactive UIs that let end-users work more efficiently. Its collection includes tags for well-known UI components, such as formGuide, calendar, optionTransfer, and panel.

uitags v1 is the successor to uitags v0 (the current stable version). Its public API may change until it hits the first stable release. Generally uitags v1 is stable enough for production use. We encourage users to choose uitags v1 over v0 as new improvements will only go to v1.

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


9 December 2006

Version 1.0.0 Non-Final 5

  • FR 1560150. Added <search> tag: a tag that performs search to populate a widget with data. See the demo.
  • FR 1544885. The <sort> tag now accepts a custom JavaScript sorting strategy class.
  • FR 1544893. Completed tag reference documentation.
  • FR 1546148. uitags JavaScript documentation is now available online.
  • BUG 1599082. Renamed <calendarGrid weekLabels="" /> to <calendarGrid dayLabels="" /> .
  • BUG 1605164. It is now possible to have more than one calendar on one page.
  • BUG 1610713. Panel now works when wrapped within a containing element that has position:absolute; .
  • BUG 1592159.
There are several changes with make this release of uitags incompatible with earlier versions of 1.0.0 Non-Final:
  • <updateDate event="" /> is now <updateDate on="" />
  • <calendarGrid weekLabels="" /> is now <calendarGrid dayLabels="" /> .
  • <show on="" /> is now of type java.lang.Integer rather than primitive int (this change has minimal impact).
  • <hide on="" /> is now of type java.lang.Integer rather than primitive int (this change has minimal impact).

16 October 2006

Version 1.0.0 Non-Final 4
  • FR 1545270. JsIncluderServlet now returns proper LastModifiedTime header.
  • BUG 1560120. Options with the same label and value are now considered equal.
  • BUG 1560112. Exception is no longer thrown on empty select box.
  • BUG 1559771. uiUtil_IllegalArgumentException is no longer thrown when the name of an element is specified instead of its ID.

Why Use uitags

There are plenty of JavaScript libraries out there. Why use uitags?

Using a taglib lets you write more robust code as you catch errors easier and earlier. Modern IDEs are capable of validating custom tag usage on-the-fly while you write your code. Furthermore, web containers use TLD to enforce proper use of custom tags. You discover coding errors without having to open up a browser. Custom tags, having XML-like syntax, blend in with the rest of your HTML code, making it easier to read. Using uitags, often you write shorter and more intuitive code. For example, to create a panel you write the following:
            <uic:panel ...>Panel contents</uic:panel>
When someone sees that piece of code they know that it renders a panel. Using JavaScript, they'd only see a standard HTML element (likely a <div>) which is turned into a panel by a JavaScript code located elsewhere. This leads to hard-to-comprehend code.


To give you full flexibility, uitags since v1 no longer renders widgets for you (there's a few exceptions to this). This means that you are free to use whatever technique to render a widget. You could use your MVC framework's custom tags, or write plain HTML. You then use uitags to inject rich client-side behavior to the widget. We call this technique "behavior injection". Here's an example of how to turn an image into a date-picker button:
            <!-- You have full freedom in creating and styling your image -->
            <img id="trigger" ... />
            <!-- And then using uitags you inject dynamic behavior to your image -->
            <uic:show injectTo="trigger" on="click" />


uitags lets you hook into its JavaScript code by providing listeners and strategy classes. As a testimony to uitags' extensibility, we managed to glue together two completely separate uitags suites, panel and calendar, by providing listeners. We then implemented a simple strategy class to turn them into a fully-featured date picker. See the demo at