Yahoo! UI Library

Infobox Software
name = Yahoo! UI Library (YUI)

developer = Yahoo!
latest release version = 2.6.0
latest release date = release date|2008|10|01
operating system = Cross-platform (JavaScript)
programming language = JavaScript
genre = JavaScript library
license = BSD License
website = http://developer.yahoo.com/yui/

The Yahoo! UI Library (YUI) is an open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML and DOM scripting. YUI includes several core CSS resources. It is available under a [http://developer.yahoo.com/yui/license.html BSD License] cite web
url = http://developer.yahoo.com/yui/
title= Yahoo! User Interface Library
accessdate=2008-06-13] .Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. In February 2006 [http://yuiblog.com/blog/2006/02/13/the-yahoo-user-interface-library/ YUI was released for public use] under BSD. It is actively developed by a core team of Yahoo! engineers.

The YUI Library project at Yahoo! was founded by Thomas Sha and sponsored internally by Yahoo! co-founder Jerry Yang; its principal architects have been Sha, Adam Moore, and Matt Sweeney. The library's developers maintain [http://yuiblog.com the YUIBlog] ; the YUI community discusses the library and implementations [http://tech.groups.yahoo.com/group/ydn-javascript/ in its community forum] .

Also associated with the YUI Library, the [http://developer.yahoo.com/yui/theater/ YUI Theater] , founded and managed by Eric Miraglia, provides worldwide access to more than 40 talks by notable speakers on JavaScript and web development.

Features

The YUI Library is fully documented [http://developer.yahoo.com/yui/ on its website] ; [http://developer.yahoo.com/yui/docs/ detailed API documentation] accompanies the [http://developer.yahoo.com/yui/download library download] . It has six types of components: YUI core, utilities, UI controls, CSS components, developer tools, and build tools.

Core

The YUI Core is a light (31KB minified) set of tools for event management and DOM manipulation.

* [http://developer.yahoo.com/yui/yahoo/ YAHOO Global Object] : The Yahoo Global Object contains language utilities and other baseline infrastructure for YUI.
* [http://developer.yahoo.com/yui/dom/ Dom Collection] : Helps with common DOM scripting tasks, including element positioning and CSS style management.
* [http://developer.yahoo.com/yui/event Event Utility] : Provides developers with easy and safe access to browser events (such as mouse clicks and key presses). It also provides the Custom Event object for publishing and subscribing to custom events.

Utilities

* [http://developer.yahoo.com/yui/animation Animation] : Helps create "effects" by animating the position, size, opacity or other characteristics of page elements.
* [http://developer.yahoo.com/yui/history Browser History Manager] : Helps web applications use the browser's back button and bookmarking functionality.
* [http://developer.yahoo.com/yui/connection/ Connection Manager] : Helps manage XMLHttpRequest transactions in a cross-browser fashion. It has integrated support for form posts, error handling, callbacks and file uploading.
* [http://developer.yahoo.com/yui/cookie/ Cookie] : Allow you to manage browser cookies and subcookies through a simple API.
* [http://developer.yahoo.com/yui/datasource/ DataSource] : Provides a common configurable interface for other components to interact with different types of data, from simple JavaScript arrays to online servers over XHR.
* [http://developer.yahoo.com/yui/dragdrop Drag and Drop] : The YUI Drag and Drop Utility makes it easy to make elements draggable and to create drop targets that respond to drag events.
* [http://developer.yahoo.com/yui/element/ Element] : Provides a wrapper for HTMLElements in the DOM and makes simpler common tasks such as adding listeners, manipulating the DOM, and setting and getting attributes.
* [http://developer.yahoo.com/yui/get/ Get] : The Get Utility supports the asynchronous loading of data and scripts through script nodes and the dynamic loading of external CSS files.
* [http://developer.yahoo.com/yui/imageloader/ ImageLoader] : YUI's ImageLoader allows you to defer the loading of images that are not visible in the viewport at the time the page loads. This can result in big performance boosts.
* [http://developer.yahoo.com/yui/json/ JSON] : The JSON Utility provides methods for validation incoming JSON data to verify that it is safe and methods to convert JavaScript data to a JSON-formatted string. These methods are based on Douglas Crockford's work at [http://json.org JSON.org] .
* [http://developer.yahoo.com/yui/resize/ Resize] : Allows you to make any block-level HTML element resizable.
* [http://developer.yahoo.com/yui/selector/ Selector] : The YUI Selector Utility allows you to grab references to HTML elements via CSS3 selector syntax.
* [http://developer.yahoo.com/yui/yuiloader/ YUI Loader] : YUI Loader is a client-side loader engine that can dynamically load any YUI component (and dependencies) on the fly.

Controls

* [http://developer.yahoo.com/yui/ AutoComplete] : Provides autocomplete feature (suggestion lists and type-ahead functionality) for user interactions involving text-entry. It supports a variety of data-source formats. It also supports server-side data-sources via XMLHttpRequest.
* [http://developer.yahoo.com/yui/button/ Button] : Enables the creation of rich, graphical buttons that function like traditional HTML form buttons.
* [http://developer.yahoo.com/yui/calendar/ Calendar] : A graphical, dynamic control used for date selection.
* [http://developer.yahoo.com/yui/charts/ Charts] : The Charts Control retrieves data via the DataSource Utility and displays the data in a variety of common chart formats (line, bar, pie, etc.).
* [http://developer.yahoo.com/yui/colorpicker Color Picker] : The Color Picker Control provides a rich visual interface for color selection.
* [http://developer.yahoo.com/yui/container/ Container] : Supports a variety of DHTML windowing patterns including Tooltip, Panel, Dialog, SimpleDialog, Module and Overlay.
* [http://developer.yahoo.com/yui/datatable/ DataTable] : Simple yet powerful API to display screen-reader accessible tabular data on a web page. Notable features include sortable columns, pagination, scrolling, row selection, resizeable columns, and inline editing.
* [http://developer.yahoo.com/yui/imagecropper/ ImageCropper] : ImageCropper provides the UI and interactive elements for a client-side image cropper.
* [http://developer.yahoo.com/yui/layout/ Layout Manager] : Allows you to create cross-browser, pixel perfect layouts with little effort by providing a fixed layout containing, top, bottom, left, right and center layout units.
* [http://developer.yahoo.com/yui/menu Menu] : Provides an easy API for creating fly-out menus, menu bars, and context menus.
* [http://developer.yahoo.com/yui/editor Rich Text Editor] : The YUI Rich Text Editor is a sophisticated client-side text-processor that is modular and highly configurable, suitable for any open-ended text-entry situation.
* [http://developer.yahoo.com/yui/slider Slider] : Provides a generic slider element that enables the user to choose within a finite range of values on one or two axes.
* [http://developer.yahoo.com/yui/tabview/ TabView] : Provides navigable tabbed views of content; supports dynamic loading of tab content via XMLHttpRequest.
* [http://developer.yahoo.com/yui/treeview TreeView] : Produces a content tree whose nodes can be expanded and contracted.
* [http://developer.yahoo.com/yui/uploader Uploader] : Allows for multi-file file upload with feedback on upload progress.

CSS resources

* [http://developer.yahoo.com/yui/base/ CSS Base] : Use Base after Reset to provide a consistent, cross-browser replacement for the standard browser CSS rules to which web developers are accustomed.
* [http://developer.yahoo.com/yui/grids CSS Grids] : Seven basic page wireframes with subsection components to support over 1000 different page layouts.
* [http://developer.yahoo.com/yui/fonts/ CSS Fonts] : Standardized cross-browser font families and size rendering.
* [http://developer.yahoo.com/yui/reset/ CSS Reset] : CSS declarations remove margins and standardize cross-browser rendering on common elements.

Developer tools

* [http://developer.yahoo.com/yui/logger Logger] : Provides a quick and easy way to write log messages to an on-screen console, the FireBug extension for Mozilla Firefox, or the Safari JavaScript console.
* [http://developer.yahoo.com/yui/profiler/ Profiler] : A cross-browser, non-visual code profiler for JavaScript.
* [http://developer.yahoo.com/yui/profilerviewer/ ProfilerViewer] : Used in combination with Profiler to provide rich visualizations of your profiling data — both graphically (using the Charts Control) and in tabular format (using DataTable).
* [http://developer.yahoo.com/yui/yuitest YUI Test] : YUI Test is a testing framework for browser-based JavaScript solutions. Using YUI Test, you can easily add unit testing to your JavaScript solutions. While not a direct port from any specific xUnit framework, YUI Test does derive some characteristics from nUnit and JUnit.

Build tools

* [http://developer.yahoo.com/yui/compressor YUI Compressor] : The YUI Compressor is JavaScript and CSS minifier designed to be 100% safe and yield a higher compression ratio than most other tools.

References

ee also

* [http://www.insideria.com/2008/05/writing-your-first-yui-applica.html "Writing Your First YUI Application" on InsideRIA]
* Comparison of JavaScript frameworks

External links

* [http://developer.yahoo.com/yui/ Official homepage]
* [http://yuiblog.com/ Yahoo! User Interface Blog]
* [http://groups.yahoo.com/group/ydn-javascript YUI Community Forum]
* [http://sourceforge.net/projects/yui SourceForge project page]
* [http://developer.yahoo.com/ypatterns/ Yahoo! Design Patterns Library]
* [http://javascript-frameworks.wrox.com Wrox Wiki of book Professional JavaScript Frameworks with YUI Yahoo! User Interface section]
* [http://hackday.org/ Yahoo! Hack Day Homepage]