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: 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 Grids CSS Fonts CSS Fonts CSS Reset 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. 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/ animation/motion_plus.html Example: http://developer.yahoo.com/yui/examples/ animation/motion_plus.html http://developer.yahoo.com/yui/examples/ animation/motion_plus.html http://developer.yahoo.com/yui/examples/ animation/motion_plus.html

7. UTILITIES: Drag & drop Create draggable objects that can be picked up and dropped elsewhere on the page. Create draggable objects that can be picked up and dropped elsewhere on the page. The utility keeps things working smoothly in all supported browsers. The utility keeps things working smoothly in all supported browsers. Example: http://developer.yahoo.com/yui/examples/ dragdrop/list.html?mode=dist Example: http://developer.yahoo.com/yui/examples/ dragdrop/list.html?mode=dist http://developer.yahoo.com/yui/examples/ dragdrop/list.html?mode=dist http://developer.yahoo.com/yui/examples/ dragdrop/list.html?mode=dist

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. 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/ dom/setxy.html Example: http://developer.yahoo.com/yui/examples/ dom/setxy.html http://developer.yahoo.com/yui/examples/ dom/setxy.html http://developer.yahoo.com/yui/examples/ dom/setxy.html

9. UTILITIES: Event This manager class gives you easy and safe access to browser events (such as clicks and key presses). 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. 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/event /event-delegation.html Example: http://developer.yahoo.com/yui/examples/event /event-delegation.html http://developer.yahoo.com/yui/examples/event /event-delegation.html http://developer.yahoo.com/yui/examples/event /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. 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. Connection Manager also supports file uploading. Example: http://developer.yahoo.com/yui/examples/conne ction/weather.html Example: http://developer.yahoo.com/yui/examples/conne ction/weather.html http://developer.yahoo.com/yui/examples/conne ction/weather.html http://developer.yahoo.com/yui/examples/conne ction/weather.html

11. CONTROL: Autocomplete The AutoComplete Control allows you to streamline user interactions involving text-entry. 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. 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/autoc omplete/ysearch_xml.html Example: http://developer.yahoo.com/yui/examples/autoc omplete/ysearch_xml.html http://developer.yahoo.com/yui/examples/autoc omplete/ysearch_xml.html http://developer.yahoo.com/yui/examples/autoc omplete/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. 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. 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/slider/ rgb.html?mode=dist Example: http://developer.yahoo.com/yui/examples/slider/ rgb.html?mode=dist http://developer.yahoo.com/yui/examples/slider/ rgb.html?mode=dist http://developer.yahoo.com/yui/examples/slider/ rgb.html?mode=dist

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 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. 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. 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/button/examp le02.html Example: http://developer.yahoo.com/yui/examples/button/examp le02.html http://developer.yahoo.com/yui/examples/button/examp le02.html http://developer.yahoo.com/yui/examples/button/examp le02.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. 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. 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/menu /programsmenu.html Example: http://developer.yahoo.com/yui/examples/menu /programsmenu.html http://developer.yahoo.com/yui/examples/menu /programsmenu.html http://developer.yahoo.com/yui/examples/menu /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 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 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. 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/treevi ew/html.html?mode=dist Example: http://developer.yahoo.com/yui/examples/treevi ew/html.html?mode=dist http://developer.yahoo.com/yui/examples/treevi ew/html.html?mode=dist http://developer.yahoo.com/yui/examples/treevi ew/html.html?mode=dist

16. Resources http://developer.yahoo.com/yui/ http://developer.yahoo.com/yui/ http://developer.yahoo.com/yui/