This is gonna be a series for all Web Developers among you, my fellow readers. And all your movie lovers (maybe). Cause it is going to feature some quotes from the most famous spy in movie history. But what it really is: a series of tutorials how the Yahoo! User Interface Library (YUI) can be your secret weapon for many Web Development matters.
Bond: You know, you’re cleverer than you look!
Q: Hmm… still, better than looking cleverer than you are.
from Die Another Day
Why YUI? Why not library X?
From my personal point of view, there are several reasons for using YUI:
- YUI is maintained by Yahoo!, a big player in the internet industry, which increases the likelihood of continued support for and development on that library.
- The syntax is easy to understand. It might be more verbose than the syntax of other libraries (e.g. jQuery), but I believe it is much more easier to hand over code from one developer to another, even if that person has not worked with YUI before.
As stated above, YUI consists of several components. In the current version (2.3.1 as of October 14th, 2007), the following components come with it and are considered stable to use:
- YAHOO Global Object: provides a single global namespaces for all components
- Dom: used for common DOM tasks
- Event: comprises methods related to attaching and subscribing to events
YUI Library Utilities
- Animation: animate elements involving size, opacity, color, position, and other visual characteristics
- Connection Manager: simplifies XMLHttpRequests – if you love AJAX, this will be your friend
- Drag & Drop: create a draggable interface efficiently
YUI Library Controls/Widgets
- AutoComplete: provides suggestion and completion functionality for text input (aka “Suggest as you type”)
- Container: family of components to let developers create content-containing modules (it includes Module and Overlay: Tooltip, Panel, Dialog, and SimpleDialog)
- Menu: as the name implies…makes it easier to add and display menus
- Slider: enables the user to adjust values in a finite range along one or two axes
- TabView: is designed to enable developers to create navigable tabbed views of content
- TreeView: create a visual presentation of hierarchical node data
YUI Library CSS Tools
- CSS Reset: neutralizes browser CSS styles
- CSS Base: applies consistent style foundation for common elements
- CSS Fonts: foundation for typography and font-sizing
- CSS Grids: more than 1,000 CSS-driven wireframes in a 4KB file
The following components are considered beta:
- Browser History Manager: …designed to facilitate the creation of web applications in which the navigation buttons are fully functional
- DataSource: provides a common configurable interface for other components to interact with different types of data
- Element Utility: makes simpler common tasks such as adding listeners, manipulating the DOM, and setting and getting attributes
- ImageLoader Utility: allows you as an implementer to delay the loading of images on your web page until such a time as the your user is likely to see them
- YUILoader Utility: allows you to load specific YUI components and their dependencies into your page via script
- Button: enables the creation of rich, graphical buttons that function like traditional HTML form buttons
- Color Picker Control: provides a rich visual interface for color selection
- DataTable: provides a simple yet powerful API to display screen-reader accessible tabular data on a web page
- Rich Text Editor: replaces a standard HTML textarea – it allows for the rich formatting of text content
This series is meant to help newcomers to get started with the YUI library by providing some simple examples (starting with the core components and taking it from there). The first one will be Mission 1: Attaching Events (the easy way).
How to include and use YUI components
To make use of the powerful YUI library, the required component files need to be included in a script statement on the page. If you only want to make use of the core components (YAHOO, Event, DOM), the include statements should look like this:
Or even shorter:
The first part of the series: Mission 1: Attaching Events (the easy way)