YUI 2 — Yahoo! User Interface Library

YUI 2 is a JavaScript and CSS library with more than 30 unique components including low-level DOM utiltiies and high-level user-interface widgets.When creating the front end YUI could be a better solution since it comes with lot of widgets, component and utilities to provide easy AJAX connection, Data tables, tab view, date picker and many more. I got opportunity to work on this when I worked for yahoo inc. for Yahoo-Microsoft Search alliance product.

YUI 2 Core:

• The YAHOO Global Object (base requirement for all YUI components)
• DOM Collection (convenience methods for DOM interactions)
• Event Utility (event normalization and custom events)

YUI 2 Utilities:

• Animation Utility
• Browser History Manager
• Connection Manager (for XHR/Ajax)
• Cookie Utility
• DataSource Utility
• Drag and Drop Utility
• Element Utility
• Get Utility (dynamic script/css loading)
• ImageLoader Utility
• JSON Utility
• Resize Utility
• Selector Utility
• Storage Utility
• SWFStore Utility
• SWF Utility
• StyleSheet Utility
• The YUI Loader Utility

YUI 2 Widgets:

• AutoComplete
• Button
• Calendar
• Carousel
• Charts
• Color Picker
• Container (including Module, Overlay, Panel, Tooltip, Dialog, SimpleDialog)
• DataTable
• ImageCropper
• Layout Manager
• Menu
• Paginator
• Progress Bar
• Rich Text Editor
• Slider
• TabView
• TreeView
• Uploader

Getting Started

1. Check out the examples of YUI in action. I recommend starting with the Event Utility and Dom Collection examples; Event and Dom are part of the YUI Core (along with the YAHOO Global Object) and provide an important foundation for JavaScript developers using YUI. Once you’ve reviewed those foundational pieces, go on to explore utilities like Drag and Drop and Animation or UI controls like Button, Calendar and TabView. If you’re interested in YUI’s CSS components, read through the examples for Reset, Base, Fonts, and Grids in that order.
2. Remember that there are full user’s guides for each component here on the website. If you have any questions about a component as you play with the examples, check out the component’s user’s guide (by following any of the links along the left side of the page) or the searchable API documentation.
3. YUI 2.8: Learning the Library from Packt provides an excellent introduction to YUI 2. Written by one of the most active members of the YUI community, it is an excellent reference for newcomers and experts alike.
4. Articles: Check out “Writing Your First YUI Application,” an article designed to help you get up and running with YUI, and “Loading YUI: Seeds, Core, and Combo-handling,” an article that explores the three most common strategies for including YUI on the page.
5. Start building. You can include YUI scripts and CSS from the YUI download (in the download’s /build directory) or directly from Yahoo! servers. The YUI Loader Utility is a client-side loading package that can dynamically pull in YUI scripts as needed, whether from your servers or from ours. And the YUI Dependency Configurator is a great way to calculate an optimized list of script/css includes for your particular implementation.

Advertisements