by René Schmidt

Web developers may already have heard of Yahoo’s new AJAX and DHTML framework. Maybe not - Yahoo! User Interface (YUI) has yet not gained popularity similar to Script.aculo.us, Prototype or Mootools.

But it certainly will. Spot on - Smashing Magazine introduces Yahoo’s User Interface framework.

Editor’s note: be aware that libraries and frameworks often tend to generate not “optimal”, sometimes even bloated code. In YUI’s case especially if you use YUI Grids you might end up with dozens of div-containers even although you don’t really need all of them. Therefore it is almost necessary to verify the quality of the generated code before applying it to your web-site or web-applications — to maintain the quality of your code and save you a lot of headache in the future.

What is YUI?

“Yahoo’s User Interface” is a set of Javascript utilities and libraries that enable web developers to quickly create AJAX and DHTML websites and web applications. YUI is BSD-licensed and free (as in freedom) software so there are literally no restrictions in how and where to use it.

Yahoo! User Interface Library (YUI)

Do I need YUI?

Maybe not yet.

YUI still has it’s rough edges as many components are in beta or even alpha stage, which makes life hard from time to time. However, Yahoo’s developers are working hard to polish and enhance YUI. It won’t take long until YUI’s quirks have been sorted out.

YUI will certainly soon belong to the standard set of AJAX frameworks such as Script.aculo.us, Prototype, and Mootools. Not only because a Fortune 500 company is the driving force behind it, but because YUI is created by top-notch developers.

Introducing the most important components

Core components: DOM Collection & Events
DOM Collection is a set of convenience methods that simplify DOM-scripting, element positioning and CSS style management, regarding browser specifics. “Events” is a simplified interface for subscribing to DOM events and for examining properties of the browser’s Event object. Custom Events are also possible that allow you to trigger events so that other components “subscribe” to those events and respond to them.

YUI Utilities
Several utilities have been merged into this part of YUI.

Animation (YUI Utility)
Using “Animation” component developers create animated objects that fly, ease in or out, change color, or resize.

Animation along a given path

Browser History Manager (YUI Utility)

Changes of content client-side do not lead to new URLs (through page reloads) that could be bookmarked. Cure is “Browser History Manager” that records new URLs in the browser’s history in order to enable users to bookmark certain stages of a web application.

Browser History Manager: Injecting date information into the URL

Connection Manager (YUI Utility)
“Connection Manager” is a simplified interface to XMLHttpRequest (XHR). It cares for initialisation of XMLHttpRequest, handles server responses and provides a callback interface so developers can easily process server respond objects.

DataSource (YUI Utility)
“DataSource” provides a unified interface for other components to interact with different types of data. It is configurable and supports simple JavaScript arrays, JSON and online servers over XHR. This variety of data sources makes it quite simple to develop an application dummy first using static Javascript objects and then switch to live data sources in order to create a “real” working application.

Drag & Drop: grouped objects

Drag & Drop (YUI Utility)
This component offers a wide variety of methods and functions to implement a draggable interface. For example, drag handles can be customised, objects can be grouped so drag targets can reject certain dropped items or a whole group of items.

Drag & Drop: reordering items

Element (YUI Utility)
“Element” is a wrapper around the browser’s HTMLElement that simplifies manipulating and reading DOM. Developers may also implement custom event listeners.

ImageLoader (YUI Utility)
This utility allows developers to defer loading of images during page load. For example, images placed on top of the page can be loaded prior to those placed outside the viewport. This can lead to better overall pageload performance.

YUILoader (YUI Utility)
“YUILoader” handles loading of components in the right order and automatically resolves component dependencies.

YUI Test (YUI Utility)
“YUI Test” is a handy module for unit testing purposes.

YUI Library & Widgets
“YUI Library & Widgets” contains numerous ready-to-use controls and widgets based on YUI Utility components.

AutoComplete (YUI Library)
Provides autocomplete functions. Autocomplete queries may be limited in scope, they can be deferred, results can be cached. Quite handy.

Autocomplete demo

Button Control (YUI Library)
This control replaces a whole range of standard form fields such as plain buttons, select fields, checkboxes, and radio fields. Designers have full control on how these should look like, contrary to the dull standard elements. Custom logic can be implemented, so this control is like form designer’s heaven.

Select fields emulation

Checkbox fields, radio fields can also be implemented

Calendar (YUI Library)
As one might have guessed this component provides an easy to use calendar, that features single month or multiple months views. Developers can also define valid date ranges, for example if only a certain date in a given date range should be selected.

Calendar demo

Color Picker (YUI Library)
“Color Picker” provides a color picking widget we all know from desktop applications. Color codes can be displayed in RGB, hex, and HSV format. Like all other widgets, color pickers can be placed in tab views and panel containers.

Color picker in a tab view

Container (YUI Library)

“Container” is the base class for several other sub-components:

“Dialog” and “SimpleDialog” provide functions that can be used to create dialog “windows”.

Container effects

“Loading” panels ask users to be patient, e.g. during a page load.

Besides “Dialog” and “SimpleDialog” there are several other sub components: “Module” is a base module for custom widgets or for enhancing existing widgets. “Overlay” positions modules absolutely on the page, floating above the document’s inline content. Just like we all know it from Lightbox. “Panels” are in many ways just like small inline windows that can be dragged and closed. They can be created from Javascript code or from HTML markup. Using “Tooltips” developers can pop up small tool tips when mouse is hovering above an element connected to such a tooltip. As a extra, tooltips can be connected to several DOM objects at the same time.

DataTable (YUI Library)

DataTable demo

“DataTable” is a mighty widget. It can read data from just about any source DataSource can hook into, and render an HTML table completely capsuled from the developer. Although designers still have full control on how the table looks like using common CSS. Users can sort table items client-side or server-side, scroll table, append or remove rows dynamically, resize columns, or apply developer-defined functions on selected rows. Tables can be split into pages and cells can be made inline-editable. It’s YUI’s killer-widget.

DataTable inline editing in action

Logger (YUI Library)
“Logger” is a useful tool for developers that chronologically logs messages emitted from scripts. This way developers don’t have to do the dreaded “place-an-alert()-somewhere-then-reload-and-check-again” cycle if they only want to know what values variables carry.

Menu (YUI Library)
“Menu” lets developers create accessible menus. Menu items can be remove or inserted dynamically and users can navigate them by mouse or keyboard.

Menu effects

Rich Text Editor (YUI Library)
This is yet another rich text editor. It is quite basic, although it features some distinctive functions such as Flickr-Search.

RTE showing off Flickr integration

Slider
“Slider” is a simple way to let users select a number in a finite number domain. They simply slide a handle until the desired value is reached. Not neccessarily useful in every case though.

Slider

TabView (YUI Library)
“TabView” provides a tabbed view. Tabs and views can be manipulated dynamically and can be defined via Javascript or via HTML markup.

Dynamic TabView widget

TreeView (YUI Library)
We all know treeviews from desktop file managers. TreeViews are ideal for presenting hierarchical data. Using this widget, data structures can be collapsed, expanded, and outfitted with neat icons.

TreeView Widget

YUI CSS-Grids:

Reset
“Reset CSS” normalises browser’s standard rendering by “resetting” CSS values of DOM elements to 0, e.g. for margins, padding and so on. This way, HTML rendering is absolutely the same across different web browsers, though it looks quite dull because all HTML look the same.

Base CSS & Fonts CSS
So in order to add some color and styles, Base CSS extends the normalizing approach by setting (and not resetting) CSS values, that also look the same across different web browsers. The same is done for fonts by “Fonts CSS”. The latter not only regards browser specifics but platform specifics also.

Grids CSS
“Grids CSS” is a 4kb CSS file that carries predefined page layouts. Layouts can be stacked, nested and subdivided in order to create distinctive layouts.

Conclusion

YUI at this stage is already quite vast. It is hardly imaginable that a developer would have absolutely no use for anything YUI offers. The BSD license allows YUI to be integrated into opensource projects as well as closed source projects. There is a bright future ahead for YUI, that’s for sure.

Further References

• Yahoo! User Interface Library
  The main page of the YUI offers searchable API documentation, references to YUI utilities, controls and widgets as well as an overview of YUI-related articles and, of course, components.
• YUI API documentation
  A handbook for all modules, classes, methods, events and files used in Yahoo! User Interface Library.