A presentation by

Yahoo! User Interface Library

YUI

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?

contents

A presentation by

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.

what is YUI?

A presentation by

features of YUI 6 types of YUI components:

core

utilities

UI controls

CSS components

developer tools

build tools

what is YUI?

A presentation by

features of YUI (continued)

what does it all mean?

A presentation by

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.

features of YUI (continued)

what does it all mean?

A presentation by

utilities: reusable infrastructure libraries that handle things like events, Ajax calls, animation, and drag and drop.

•  animation

•  browser history manager

•  connection manager

•  data source

•  drag and drop

•  image loader

•  JSON (JavaScript Object Notation)

•  resize

•  selector

•  YUI loader

features of YUI (continued)

what does it all mean?

A presentation by

UI controls: •  auto-complete

•  button

•  calendar

•  charts

•  color picker

•  container

•  data table

•  image cropper

•  layout manager menu

•  rich text editor

•  slider

•  tab view

•  tree view

•  uploaded

features of YUI (continued)

what does it all mean?

A presentation by

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.

working examples:

what does it look like?

A presentation by

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

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

who uses YUI?

A presentation by

want to get some?

A presentation by

hello@momentumdesignlab.com

1.866.542.7124