YUI
Yahoo! User Interface Library
A presentation by

contents
I. what is YUI?
II. what does it all mean?
III. what does it look like?
IV. who uses YUI?
V. want to get some?
A presentation by

what is YUI?
a collection of JavaScript and CSS Resources for
building richly interactive web applications
using DOM scripting and DHTML and AJAX.
developed for internal use but now available
under a BSD (Berkeley Software Distribution) license.
supported by Firefox 3, Firefox 2, IE 7, IE 6,
Opera 9.5, Safari 3.1.
A presentation by

what is YUI?
features of YUI
6 types of YUI components:
core
utilities
UI controls
CSS components
developer tools
build tools
A presentation by

what does it all mean?
features of YUI (continued)
core:
a set of tools for event management and DOM
manipulation.
YAHOO! Global Object – contains language utilities and
other infrastructure for YUI.
DOM Collection – simplifies common DOM scripting
tasks such as positioning and CSS Style Management.
Event Utility – provides developers easy & safe access
to browser events such as mouse clicks and key presses.
A presentation by

what does it all mean?
features of YUI (continued)
utilities:
reusable infrastructure libraries that handle things like
events, Ajax calls, animation, and drag and drop.
• animation • image loader
• browser history manager • JSON (JavaScript Object Notation)
• connection manager • resize
• data source • selector
• drag and drop • YUI loader
A presentation by

what does it all mean?
features of YUI (continued)
UI controls:
• auto-complete • image cropper
• button • layout manager menu
• calendar • rich text editor
• charts • slider
• color picker • tab view
• container • tree view
• data table • uploaded
A presentation by

what does it all mean?
features of YUI (continued)
developer tools:
logger – read or write log messages with a single line of
code!
profiler – non-visual code profiler that allows you to specify
which parts of your application to profile.
ProfileViewer – used with Profiler to provide visualizations of
profiling data in graphical and tabular format.
YUI Test – create test cases, failure detection, etc. for
browser-based JavaScript solutions.
A presentation by

what does it look like?
working examples:
event utility- http://developer.yahoo.com/yui/examples/event/
eventsimple.html
using custom units for an animation-http://
developer.yahoo.com/yui/examples/animation/units.html
basic drag and drop- http://developer.yahoo.com/yui/examples/
dragdrop/dd-basic.html
animated proxy re-size- http://developer.yahoo.com/yui/examples/
resize/anim_resize.html
submit form-http://developer.yahoo.com/yui/examples/button/
btn_example05.html
A presentation by

who uses YUI?
http://www.linkedin.com/
http://www.jetblue.com/
http://www.target.com/
http://www.smugmug.com/
http://www.southwest.com/
http://images.insuggest.com/
http://www.dataffect.com/usgs/#
http://www.tag4you.com/flickr.php
A presentation by

want to get some?
hello@momentumdesignlab.com
1.866.542.7124
A presentation by