The Yahoo! User Interface Library (YUI)

YUI is a collection of JavaScript components available for use as shortcuts to website programming. Yahoo! opened it to the public in 2006 in hopes that releasing it freely would allow people to generate new ideas and further advance website programming. On the YUI homepage the full YUI documentation is available for download and use, along with the complete API. As an alternative, Yahoo opened up free YUI hosting from the Yahoo! network via yui.yahooapis.com and they created an easy-to-use YUI Dependency Configurator which generates the needed dependency scripts and tags based off your YUI usage selections. Another extremely helpful feature YAHOO supplies are cheatsheets for every component which act as a quick reference guide to the key methods, properties, and syntax patterns


YUI provides its users with a very useful developer tool called Logger Control which may help debug any YUI Library Component. You can easily read and write log messages or even tap into the debug files.


YUI also provides a standard 'skin' for all the YUI Controls called Sam (after its developer). Sam skin gives the controls a cohesive look and feel. In order to apply this skin to you page or your elements simply add class="yui-skin-sam" into your element tag.

Animation Utility Demo

Here is an example of the Animation Utility. Animation can be applied to any member of an element's style object that takes a numeric value. The demonstration below shows two types of animation: motion and color animation. Together these two animations can be chained together by the onComplete event in which the second animation suscribes to, this allows for the animations to take place sequentially. This utility uses the Event Utility as well to create a response to the button being clicked.

Box

Here is the code used to create this animation using YUI.

<script type="text/javascript">

(function() {

var changes = {points: { to: [500,380] } };

var move = new YAHOO.util.Motion('box', changes,4, YAHOO.util.Easing.elasticOut);

var color = new YAHOO.util.ColorAnim('box',{backgroundColor: {to: '#D0A9F5'}},1.5);

move.onComplete.subscribe(function() { color.animate(); });

YAHOO.util.Event.on('button', 'click', function() { move.animate();});

})();</script>

YUI Animation Cheat Sheet

  • YAHOO Global Object:

    This object provides a single global namespace within which all YUI Library code resides. A reference to its source file must be included in all files that that use the YUI library.
    <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js"></script>

  • DOM Collection

    This part of the library was created to help programmers by simplifying some of the common DOM-scripting tasks. It provides methods to position HTML elements, set styles, manage class names and get the viewport size.

  • Event Utility

    This is an extemely useful piece of the library that helps with event-driven applications by simplifying tasks such as subscribing to DOM events or dealing with the properties of the browser's Event object.

DOM Collection

  • Animation Utility
  • Browser History Manager
  • Connection Manager
  • Cookie Utility
  • DataSource Utility
  • Drag and Drog Utility
  • Element Utility
  • Get Utility
  • ImageLoader Utility
  • JSON Utility
  • Resize Utility
  • Selector Utility
  • StyleSheet Utility
  • The YUI Loader Utility

Event Utility

  • AutoComplete
  • Button
  • Calender
  • Carousel
  • Charts
  • Color Picker
  • Container
  • DataTable
  • ImageCropper
  • Layout Manager
  • Menu
  • Paginator
  • Rich Text Editor
  • Slider
  • TabView
  • TreeView
  • Uploader

ImageCropper Control

This is an example of the ImageCropper tool being used. It takes advantage of the DOM methods that YUI provides to easily set the initial x and y coordinates of the crop tool as well as the initial area.

<script type="text/javascript">
(function() {
var Dom=YAHOO.util.Dom, Event=YAHOO.util.Event;
var crop= new YAHOO.widget.ImageCropper('pic', {initialXY: [100,100], initHeight: (Dom.get('pic').height/3), initWidth: (Dom.get('pic').width/3)});
})();
</script>