Yahoo! User Interface Yahoo! User Interface (YUI) Library(YUI) Library

Natly MekdaraNatly Mekdara

IntroductionIntroduction

- A set of utilities and controls, written A set of utilities and controls, written in JavaScript, for building richly in JavaScript, for building richly interactive web applications using interactive web applications using techniques such as DOM scripting, techniques such as DOM scripting, DHTML and AJAX. DHTML and AJAX.

- The library was developed by The library was developed by Yahoo!’s client-side platform Yahoo!’s client-side platform engineering team.engineering team.

IntroductionIntroduction

The library is divided into two logical The library is divided into two logical sections:sections:– UtilitiesUtilities

Reusable infrastructure libraries that handle Reusable infrastructure libraries that handle things like events, AJAX calls, animation and things like events, AJAX calls, animation and drag & dropdrag & drop

– ControlsControls Reusable interactive components, like Reusable interactive components, like

sliders, menus, and calendars, that are built sliders, menus, and calendars, that are built using the utility librariesusing the utility libraries

Library ComponentsLibrary Components

UTILITIESUTILITIES-Animation-Animation-Drag & drop-Drag & drop-Dom-Dom-Event-Event-Connection Manager-Connection Manager-Browser History -Browser History

ManagerManager-Connection Manager-Connection Manager-DataSource Utility-DataSource Utility

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

YUI CSS ResourcesYUI CSS Resources CSS GridsCSS Grids CSS FontsCSS Fonts CSS ResetCSS Reset

UTILITIES: Animation UTILITIES: Animation

Create effects on pages by animating Create effects on pages by animating the position, size, opacity or other the position, size, opacity or other characteristics of page elements. characteristics of page elements. These effects can be used to These effects can be used to reinforce the user's understanding of reinforce the user's understanding of changes happening on the page. changes happening on the page.

Example: Example: http://developer.yahoo.com/yui/examhttp://developer.yahoo.com/yui/examples/animation/motion_plus.htmlples/animation/motion_plus.html

UTILITIES: Drag & dropUTILITIES: Drag & drop

Create draggable objects that can be Create draggable objects that can be picked up and dropped elsewhere on picked up and dropped elsewhere on the page. the page.

The utility keeps things working The utility keeps things working smoothly in all supported browsers. smoothly in all supported browsers.

Example: Example: http://developer.yahoo.com/yui/examhttp://developer.yahoo.com/yui/examples/dragdrop/list.html?mode=distples/dragdrop/list.html?mode=dist

UTILITIES: Dom CollectionUTILITIES: Dom Collection

The Dom Collection comprises a The Dom Collection comprises a family of convenience methods that family of convenience methods that simplify common DOM-scripting simplify common DOM-scripting tasks, including element positioning tasks, including element positioning and CSS style management, while and CSS style management, while normalizing for cross-browser normalizing for cross-browser inconsistencies. inconsistencies.

Example: Example: http://developer.yahoo.com/yui/examhttp://developer.yahoo.com/yui/examples/dom/setxy.htmlples/dom/setxy.html

UTILITIES: EventUTILITIES: Event

This manager class gives you easy and This manager class gives you easy and safe access to browser events (such as safe access to browser events (such as clicks and key presses). clicks and key presses).

The Event package also includes the The Event package also includes the Custom Event object, a mechanism for Custom Event object, a mechanism for publishing and subscribing to interesting publishing and subscribing to interesting moments in your own application flow. moments in your own application flow.

Example: Example: http://developer.yahoo.com/yui/examples/http://developer.yahoo.com/yui/examples/event/event-delegation.htmlevent/event-delegation.html

UTILITIES: Connection UTILITIES: Connection ManagerManager

This utility library helps manage This utility library helps manage XMLHttpRequest (commonly referred to as XMLHttpRequest (commonly referred to as AJAX) transactions in a cross-browser AJAX) transactions in a cross-browser fashion, including integrated support for fashion, including integrated support for form posts, error handling and callbacks.form posts, error handling and callbacks.

Connection Manager also supports file Connection Manager also supports file uploading. uploading.

Example: Example: http://developer.yahoo.com/yui/examples/http://developer.yahoo.com/yui/examples/connection/weather.htmlconnection/weather.html

CONTROL: AutocompleteCONTROL: Autocomplete

The AutoComplete Control allows you to The AutoComplete Control allows you to streamline user interactions involving text-streamline user interactions involving text-entry.entry.

The control provides suggestion lists and The control provides suggestion lists and type-ahead functionality based on a type-ahead functionality based on a variety of data-source formats and variety of data-source formats and supports server-side data-sources via supports server-side data-sources via XMLHttpRequest. XMLHttpRequest.

Example: Example: http://developer.yahoo.com/yui/examples/http://developer.yahoo.com/yui/examples/autocomplete/ysearch_xml.htmlautocomplete/ysearch_xml.html

CONTROL: SliderCONTROL: Slider

The Slider component is a UI control that The Slider component is a UI control that enables the user to adjust values in a finite enables the user to adjust values in a finite range along one or two axes. range along one or two axes.

Typically, the Slider control is used in a Typically, the Slider control is used in a web application as a rich, visual web application as a rich, visual replacement for an input box that takes a replacement for an input box that takes a number as input. number as input.

Example: Example: http://developer.yahoo.com/yui/examples/http://developer.yahoo.com/yui/examples/slider/rgb.html?mode=distslider/rgb.html?mode=dist

CONTROL: ButtonCONTROL: Button The Button Control provides checkbox, radio The Button Control provides checkbox, radio

button, submit and menu-button UI elements that button, submit and menu-button UI elements that are more impact visually and more powerful are more impact visually and more powerful programmatically than the browser's built-in form programmatically than the browser's built-in form widgets. widgets.

The Button Control enables the creation of rich, The Button Control enables the creation of rich, graphical buttons that function like traditional graphical buttons that function like traditional HTML form buttons. HTML form buttons.

UnlikeUnlike traditional HTML form buttons, buttons traditional HTML form buttons, buttons created with the Button Control can have labels created with the Button Control can have labels that are different from their value. that are different from their value.

Example: Example: http://developer.yahoo.com/yui/examples/button/http://developer.yahoo.com/yui/examples/button/example02.htmlexample02.html

CONTROL: MenuCONTROL: Menu Application-style fly-out menus require just a Application-style fly-out menus require just a

few lines of code with the Menu Control. few lines of code with the Menu Control. Menus can be generated entirely in Menus can be generated entirely in JavaScript or can be layered on top of JavaScript or can be layered on top of semantic unordered lists. semantic unordered lists.

The Menu family of components features a The Menu family of components features a collection of controls that make it easy to collection of controls that make it easy to add menus to your website or web add menus to your website or web application. application.

Example: Example: http://developer.yahoo.com/yui/examples/mehttp://developer.yahoo.com/yui/examples/menu/programsmenu.htmlnu/programsmenu.html

CONTROL: TreeViewCONTROL: TreeView The TreeView control produces a content The TreeView control produces a content

tree whose nodes can be expanded and tree whose nodes can be expanded and contracted by user interaction (and by contracted by user interaction (and by script, where necessary). script, where necessary).

The nodes can contain links or custom The nodes can contain links or custom properties and can be loaded dynamically. properties and can be loaded dynamically.

The display of the node elements can be The display of the node elements can be customized with CSS to create a folder view, customized with CSS to create a folder view, to-do task list, or other visual treatment. to-do task list, or other visual treatment.

Example: Example: http://developer.yahoo.com/yui/examples/trhttp://developer.yahoo.com/yui/examples/treeview/html.html?mode=disteeview/html.html?mode=dist

ResourcesResources

http://http://developer.yahoo.com/yuideveloper.yahoo.com/yui//