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.us1, Prototype2 or Mootools3.
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 Grids4 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! 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.
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)
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 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.
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.
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”.
“Loading” panels ask users to be patient, e.g. during a page load.
DataTable (YUI Library)
“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.
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” 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.
TabView (YUI Library)
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.
“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” is a 4kb CSS file that carries predefined page layouts. Layouts can be stacked, nested and subdivided in order to create distinctive layouts.
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.
- Yahoo! User Interface Library7
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 documentation8
A handbook for all modules, classes, methods, events and files used in Yahoo! User Interface Library.
- 1 http://script.aculo.us/
- 2 http://www.prototypejs.org
- 3 http://www.mootools.net
- 4 http://developer.yahoo.com/yui/grids/
- 5 http://developer.yahoo.com/yui/
- 6 http://en.wikipedia.org/wiki/Unit_Test
- 7 http://developer.yahoo.com/yui/
- 8 http://developer.yahoo.com/yui/docs/