Dan Wellman

February 2011


YUI 2.8: Learning the Library

YUI 2.8: Learning the Library

Develop your next-generation web applications with the YUI JavaScript development library

  • Improve your coding and productivity with the YUI Library
  • Gain a thorough understanding of the YUI tools
  • Learn from detailed examples for common tasks
        Read more about this book      

(For more resources on Yui, see here.)

Q: What is the YUI?
A: The Yahoo! User Interface (YUI) Library is a toolkit packed full of powerful objects that enables rapid frontend GUI design for richly interactive web-based applications. The utilities provide an advanced layer of functionality and logic to your applications, while the controls are attractive pre-packed objects that we can drop onto a page and begin using with little customization.

Q: Who is it for and who will it benefit the most?
A: The YUI is aimed at and can be used by just about anyone and everyone, from single site hobbyists to creators of the biggest and best web applications around. Developers of any caliber can use as much or as little of it as they like to improve their site and to help with debugging. It's simple enough to use for those of you that have just a rudimentary working knowledge of JavaScript and the associated web design technologies, but powerful and robust enough to satisfy the needs of the most aspiring and demanding developers amongst you.

Q: How do I install it?
A: The simple answer is that you don’t. Both you, while developing and your users can load the components needed both from Yahoo! CDN and even from Google CDN across the world. The CDN (Content Delivery Network) is what the press nowadays calls ‘the cloud’ thus, your users are more likely to get a better performance loading the library from the CDN than from your own servers. However, if you wish, you can download the whole package either to take a deep look into it or serve it to your users from within your own network. You have to serve the library files yourself if you use SSL.

Q: From where can one download the YUI Library?
A: The YUI Library can be downloaded from the YUI homepage. The link can be found at http://developer.yahoo.com/yui/.

Q: Are there any licensing restrictions for YUI?
A: All of the utilities, controls, and CSS resources that make up the YUI have been publicly released, completely for free, under the open source BSD (Berkeley Software Distribution) license. This is a very unrestrictive license in general and is popular amongst the open source community.

Q: Which version should I use?
A: The YUI Library is currently provided in two versions, YUI2 and YUI3. YUI2 is the most stable version and there are no plans to discontinue it. In fact, the YUI Team is working on the 2.9 version, which will be the last major revision of the YUI2 code line and is to be released in the second half of 2011. The rest of this article will mostly refer to the YUI 2.8 release, which is the current one. The YUI3 code line is the newest and is much faster and flexible. It has been redesigned from the ground up with all the experience accumulated over 5 years of development of the YUI2 code line. At this point, it does not have such a complete set of components as the YUI2 version and many of those that do exist are in ‘beta’ status.
If your target release date is towards the end of 2011, YUI3 is a better choice since by then, more components should be out of ‘beta’.
The YUI team has also opened the YUI Gallery to allow for external contributions. YUI3, being more flexible, allows for better integration of third-party components thus, what you might not yet find in the main distribution might be already available from the YUI Gallery.

Q: Does Yahoo! use the YUI Library? Do I get the same one?
A: They certainly do! The YUI Library you get is the very same that Yahoo! uses to power their own web applications and it is all released at the same time. Moreover, if you are in a rush, you can also stay ahead of the releases (at your own risk) by looking at GitHub, which is the main life repository for both YUI versions. You can follow YUI’s development day by day.

Q: How do I get support?
A: The YUI Library has always been one of the best documented libraries available with good users guide and plenty of well explained examples besides the automated API docs. If that is not enough, you can reach the forums, which currently have over 7000 members with many very knowledgeable people amongst them, both from the YUI team and many power users.

Q: What does the core of the YUI library do?
A: What was then known as the ‘browser wars’, with several companies releasing their own set of features on the browsers, left the programming community with a set of incompatible features which made front-end programming a nightmare. The core utilities try to fix these incompatibilities by providing a single standard and predictable API and deal with each browser as needed. The core of the library consists of the following three files:

  • YAHOO Global Object: The Global Object sets up the Global YUI namespace and provides other core services to the rest of the utilities and controls. It's the foundational base of the library and is a dependency for all other library components (except for the CSS tools).
  • Dom utilities: The Dom utilities provide a series of convenient methods that make working with the Document Object Model much easier and quicker. It adds useful selection tools, such as those for obtaining elements based on their class instead of an ID, and smoothes out the inconsistencies between different browsers to make interacting with the DOM programmatically a much more agreeable experience.
  • Event Utility: The Event Utility provides a unified event model that co-exists peacefully with all of the A-grade browsers in use today and offers a consistent method of accessing the event object. Most of the other utilities and controls also rely heavily upon the Event Utility to function correctly.

Q: What are A-grade browsers?
A: For each release, the YUI Library is thoroughly tested on a variety of browsers. This list of browsers is taken from Yahoo!’s own statistics of visitors to their sites. The YUI Library must work on all browsers with a significant number of users. The A-grade browsers are those that make up the largest share of users.
Fortunately browsers come in ‘families’ (for example, Google’s Chrome and Apple’s Safari both use the WebKit rendering engine) thus, a positive result in one of them is likely to apply to all of them. Testing in Safari for Mac provides valid results for the Safari on Windows version, which is rarely seen. Those browsers are considered X-Grade, meaning, they haven’t been tested but they are likely to work fine.
Finally, we have the C-grade browsers which are known to be obsolete and nor YUI nor any other library can really be expected to work on them. This policy is called Graded Browser Support and it is updated quarterly. It does not depend on the age of the browser but on its popularity, for example, IE6 is still in the A-grade list because it still has a significant share.

        Read more about this book      

(For more resources on Yui, see here.)

Q: What are the CSS tools for?
A: Just as there were plenty of incompatibilities on the programming interface of the browser, there are also many in the way the information is presented and laid out on the screen. Moreover, while the standards for the DOM API exist, there is no standard on how, say, an H1 should look. It is just expected to be bolder or larger or look somehow more important than an H2, but there is no actual definition on exactly how much.
This might seem irrelevant until you try to pack more information into a web page. Then, small differences in font type or size amongst the browsers can completely break a carefully designed layout. The CSS tools try to standardize the presentation and layout of data on the screen. These tools do not require any of the other YUI components and can be used alone or in combination with other libraries.

  1. Reset CSS Tool: provides normalization services to the most common HTML elements so that borders, margins, and padding, among other things, are set to zero across all of the most common browsers. It ensures that everything starts from the ground floor, Reset turns everything off.
  2. Base CSS Tool: It builds upon the level foundation provided by Reset to give certain elements back some of the styling that marks them out from other elements. It provides an ideal browser formatting. It is not expected to be used as is but to be the base of your own ideal environment.
  3. Fonts CSS Tool: It standardizes all of your page text to the Arial font and gives a fixed line height. It also fixes sizes to a consistent size across the document.
  4. Grids CSS Tool: The precise layout of your page can be declared through the use of a range of CSS classes, IDs, and templates defined for you in the Grids CSS Tool. The resulting layout is also compatible with the recommendations of the advertising industry for banners.

Q: How can I communicate with the server?
A: The YUI Library provides several ways. The most basic is the Connection Manager, a wrapper around the XmlHttpRequest (XHR) object, providing a very simple and robust interface. It also has the ability to upload files and process the data from forms.
Since the XHR object is limited to load data from the same domain as the current page, YUI also provides the Get utility which lets you cross domain borders and reach servers that use JSONP.
If you need to fetch tabular data, such as the results of an SQL query, the DataSource makes it easier to fetch and parse it. It can read XML, JSON or CSV data both from local and remote sources, and it can parse each column into numbers, dates or use any custom parser you might provide. It returns and native JavaScript array of objects. It can use either the Connection Manager or the Get utility for remote sources.

Q: What does the The YUI Connection Manager utility do?
A: The YUI Connection Manager utility provides an almost unequalled interface to AJAX scripting methods used today among the many JavaScript libraries available. It handles the creation of a cross-platform XHR object and provides an easy mechanism for reacting to success and failure responses among others. It handles common HTTP methods such as GET and POST with equal ease, and can be put to good use in connection with a PHP (or other forms of) proxy for negotiating cross-domain requests.

Q: The ‘Go Back’ button on the browser toolbar takes the user out of my page. Can YUI help me?
A: The Browser History Manager (BHM) allows you to manipulate the browser’s own history to insert your own entries into it. When the user then goes back using the browser button, it will go back to a previous state within your own application.
To help you do that, the BHM allows you to store state information at each stage you want to preserve and allows you to recover it when the user navigates back and forth through the browser history.

Q: Can I manage cookies with the YUI Library?
A: The Cookie utility lets you manage cookies very easily., for example, to create/set a cookie you can do:


Then you can easily read it by doing:

var user = YAHOO.util.Cookie.get("user");

You can set expiration dates for each cookie, restrict it to a particular domain or path and handle subcookies.

Q: Can I define my own menu when the user right-clicks?
A: The Menu component has three types of menus. The regular left hand side menu, as often seen in most web pages, the application-type menu, a horizontal bar at the top of the screen where the options drop down and the ContextMenu which pops up by the cursor when the user right clicks anywhere on the page. This one will show up instead of the regular menu provided by the browser.
All menus allow you to have an unlimited number of submenus, to show/hide or enable/disable options, show and respond to keyboard shortcuts and add icons to any of the icons. These options can be handled dynamically so you can tailor your menu according to the element under the cursor when right-clicked.
The menu items can either navigate to other URLs or call functions within your code to respond to them.

Q: Can I offer suggestions to my users when they type on a text box?
A: That is called auto-complete and YUI’s AutoComplete component handles that. You can configure it to establish a connection to your server when the user types a minimum number of characters to fetch suggestions. AutoComplete will continue updating that list of suggestions as more characters are typed. The control will handle the dropdown list and the user selection from that list.


Q: Does YUI have a SpreadSheet?
A: Not quite, however, the DataTable provides some of the same functionality. A SpreadSheet is cell-based: each cell can contain anything any other cell could, unrelated to other neighboring cells.
DataTable behaves more like a database table does. Each column contains the same type of data, be it number, date or string, with each row containing homologous information about an item. DataTable uses DataSource to load tabular data from any local or remote sources. Columns can be grouped, resized, hidden and shown. Cells can be edited. Rows can be added or deleted.

Q: Can I get more dynamic layouts than Grid.css provides?
A: Yes, YUI provides lots of ways to allow the user to dynamically change the layout of the page. The Layout component provides you with a layout based on five panels: a central one surrounded by top, bottom, left and right panels. Except for the central one, the others are optional so you can use them in any combination. You can set the initial size of the surrounding panels and allow the user to resize them at will or completely collapse them.
The Layout component uses the Resize utility, which you can also use to resize any element in the screen. It will draw handles around any suitable element for the user to grab and resize it. You can put constrains on that resizing and you can also limit the direction of that resizing.
To move elements around, you have the Drag and Drop utility. In the most simple case, you can simply allow a container element, with all its content, to be dragged around and dropped anywhere in the page.

Q: Can I build an interface like the File Explorer?
A: Yes, you can combine several YUI components to do that. You would use the Layout component to provide you with the basic layout. You would use the TreeView control on the left panel to show the tree structure of the file system. You can use the central panel to show information about each item in the tree. If the information is tabular, like a detailed view of the files in a folder, the DataTable component is the best option. Since DataTable allows for cell editing, it is easy to set the Name column to enable file renaming. We wouldn’t use the right panel that Layout provides.
The top and bottom panels can be used to show toolbars and status respectively. The top panel could also hold an application-like Menu from the Menu component. Additional functionality could be added by the ContextMenu component in response to the user right-clicking on the files. The Button family of components makes it easy to build any toolbar you might want.

Q: Can formatted documents be edited in YUI?
A: YUI includes a Rich Text Editor (RTE) which helps in editing formatted documents. It is of two types—the basic YAHOO.widget.SimpleEditor, which provides the basic editing functionality, and the full YAHOO.widget.Editor, which is a subclass of SimpleEditor. Editor adds several features at a cost of close to 40% more size, plus several more dependencies, which we might have already loaded and might not add to the total. A look at their toolbars can help us to see the differences:


The preceding screenshot shows the standard toolbar of SimpleEditor. The toolbar allows selection of fonts, sizes, and styles. Also, it lets you select the color both for the text and the background, create lists, and insert links and pictures.


The full editor adds subscript and superscript, remove formatting, show source, undo, and redo to the top toolbar and text alignment, <Hn> paragraph styles, and indenting commands to the bottom toolbar. The full editor requires, beyond the common dependencies for both, Button and Menu so that the regular HTML <select> boxes can be replaced by a fancier one:



This article provided answers to some of the most frequently asked questions about YUI.

Further resources on this subject:

You've been reading an excerpt of:

YUI 2.8: Learning the Library

Explore Title