Yahoo! User Interface (YUI) Library

1
Yahoo! User Interface (YUI) Library

• Natly Mekdara

2
Introduction

• A set of utilities and controls, written in
  JavaScript, for building richly interactive web
  applications using techniques such as DOM
  scripting, DHTML and AJAX.
• The library was developed by Yahoo!s client-side
  platform engineering team.

3
Introduction

• The library is divided into two logical sections
• Utilities
• Reusable infrastructure libraries that handle
  things like events, AJAX calls, animation and
  drag drop
• Controls
• Reusable interactive components, like sliders,
  menus, and calendars, that are built using the
  utility libraries

4
Library Components

• UTILITIES
• -Animation
• -Drag drop
• -Dom
• -Event
• -Connection Manager
• -Browser History Manager
• -Connection Manager
• -DataSource Utility

• CONTROLS
• -Autocomplete
• -Menu
• -Slider
• -Calendar
• -Container
• -Treeview
• -Button Control
• -DataTable Control
• -Logger
• -TabView

5
YUI CSS Resources

• CSS Grids
• CSS Fonts
• CSS Reset

6
UTILITIES Animation

• Create effects on pages by animating the
  position, size, opacity or other characteristics
  of page elements. These effects can be used to
  reinforce the user's understanding of changes
  happening on the page.
• Example http//developer.yahoo.com/yui/examples/a
  nimation/motion_plus.html

7
UTILITIES Drag drop

• Create draggable objects that can be picked up
  and dropped elsewhere on the page.
• The utility keeps things working smoothly in all
  supported browsers.
• Example http//developer.yahoo.com/yui/examples/d
  ragdrop/list.html?modedist

8
UTILITIES Dom Collection

• The Dom Collection comprises a family of
  convenience methods that simplify common
  DOM-scripting tasks, including element
  positioning and CSS style management, while
  normalizing for cross-browser inconsistencies.
• Example http//developer.yahoo.com/yui/examples/d
  om/setxy.html

9
UTILITIES Event

• This manager class gives you easy and safe access
  to browser events (such as clicks and key
  presses).
• The Event package also includes the Custom Event
  object, a mechanism for publishing and
  subscribing to interesting moments in your own
  application flow.
• Example http//developer.yahoo.com/yui/examples/e
  vent/event-delegation.html

10
UTILITIES Connection Manager

• This utility library helps manage XMLHttpRequest
  (commonly referred to as AJAX) transactions in a
  cross-browser fashion, including integrated
  support for form posts, error handling and
  callbacks.
• Connection Manager also supports file uploading.
  
• Example http//developer.yahoo.com/yui/examples/c
  onnection/weather.html

11
CONTROL Autocomplete

• The AutoComplete Control allows you to streamline
  user interactions involving text-entry.
• The control provides suggestion lists and
  type-ahead functionality based on a variety of
  data-source formats and supports server-side
  data-sources via XMLHttpRequest.
• Example http//developer.yahoo.com/yui/examples/a
  utocomplete/ysearch_xml.html

12
CONTROL Slider

• The Slider component is a UI control that enables
  the user to adjust values in a finite range along
  one or two axes.
• Typically, the Slider control is used in a web
  application as a rich, visual replacement for an
  input box that takes a number as input.
• Example http//developer.yahoo.com/yui/examples/s
  lider/rgb.html?modedist

13
CONTROL Button

• The Button Control provides checkbox, radio
  button, submit and menu-button UI elements that
  are more impact visually and more powerful
  programmatically than the browser's built-in form
  widgets.
• The Button Control enables the creation of rich,
  graphical buttons that function like traditional
  HTML form buttons.
• Unlike traditional HTML form buttons, buttons
  created with the Button Control can have labels
  that are different from their value.
• Example http//developer.yahoo.com/yui/examples/b
  utton/example02.html

14
CONTROL Menu

• Application-style fly-out menus require just a
  few lines of code with the Menu Control. Menus
  can be generated entirely in JavaScript or can be
  layered on top of semantic unordered lists.
• The Menu family of components features a
  collection of controls that make it easy to add
  menus to your website or web application.
• Example http//developer.yahoo.com/yui/examples/m
  enu/programsmenu.html

15
CONTROL TreeView

• The TreeView control produces a content tree
  whose nodes can be expanded and contracted by
  user interaction (and by script, where
  necessary).
• The nodes can contain links or custom properties
  and can be loaded dynamically.
• The display of the node elements can be
  customized with CSS to create a folder view,
  to-do task list, or other visual treatment.
• Example http//developer.yahoo.com/yui/examples/t
  reeview/html.html?modedist

16
Resources

• http//developer.yahoo.com/yui/