Premshree's (品速力) Personal Weblog

Yahoo! just released the Yahoo! User Interface Library, under a BSD license. From the website:

The Yahoo! User Interface Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, HTML and AJAX. The UI Library Utilities facilitate the implementation of rich client-side features by enhancing and normalizing the developer's interface to important elements of the browser infrastructure (such as events, in-page HTTP requests and the DOM). The Yahoo UI Library Controls produce visual, interactive user interface elements on the page with just a few lines of code and an included CSS file. All the components in the Yahoo! User Interface Library have been released as open source under a BSD license and are free for all uses.

A lot of us at Yahoo! have been using them to build cool “toys” (see here for an example). These libraries are amazingly simple to use. Now they are available for all of y’all to use. Do cool stuff!

Basically, the core utilities include the following:

Animation: Create "cinematic effects" on your pages by animating the position, size, opacity or other characteristics of page elements. These effects can be used to reinforce the user's understanding of changes happening on the page.

Connection Manager: This utility library helps manage XMLHttpRequest (commonly referred to as AJAX) transactions in a cross-browser fashion, including integrated support for form posts, error handling and callbacks.

DOM: The DOM Utility is an umbrella object comprising a variety of convenience methods for common DOM-scripting tasks, including element positioning and CSS style management.

Drag and Drop: Create draggable objects that can be picked up and dropped elsewhere on the page. You write code for the "interesting moments" that are triggered at each stage of the interaction (such as when a dragged object crosses over a target); the utility handles all the housekeeping and keeps things working smoothly in all supported browsers.

Event: This sophisticated manager class gives you easy and safe access to browser events (such as clicks and key presses). The Event package also includes the Custom Event object, a mechanism for publishing and subscribing to interesting moments in your own application flow.

In addition to the above core utilities, there’s also a few commonly used controls:

Calendar: The Calendar Control is a graphical, dynamic control used for date selection.

Slider: This control provides a generic slider element that enables the user to choose within a finite range of values on one or two axes.

TreeView: The TreeView control produces a content tree whose nodes can be expanded and contracted by user interaction (and by script, where necessary). The nodes can contain links or custom properties and can be loaded dynamically. The display of the node elements can be customized with CSS to create a folder view, to-do task list, and so on.

There’s also a Design Patterns Library that the UED geeks at Yahoo! have worked on.

There’s an accompanying blog to all this stuff too.

When I used to be a Javascript bigot, Dynamic Drive used to be—still is, actually, probably—a very popular place (reminds me of this script from 2002). They used to have a not-so-great-but-works UI; they have a better one now.