Book Image

YUI 2.8: Learning the Library

Book Image

YUI 2.8: Learning the Library

Overview of this book

The YUI Library is a set of utilities and controls written in JavaScript for building Rich Internet Applications, across all major browsers and independently of any server technology. There's a lot of functionality baked into YUI, but getting to and understanding that functionality is not for the faint of heart. This book gives you a clear picture of YUI through a step-by-step approach, packed with lots of examples.YUI 2.8: Learning the Library covers all released (non-beta) components of the YUI 2.8 Library in detail with plenty of working examples, looking at the classes that make up each component and the properties and methods that can be used. It includes a series of practical examples to reinforce how each component should/can be used, showing its use to create complex, fully featured, cross-browser, Web 2.0 user interfaces. It has been updated from its first edition with the addition of several chapters covering several new controls and enriched with lots of experience of using them.You will learn to create a number of powerful JavaScript controls that can be used straightaway in your own applications. Besides giving you a deep understanding of the YUI library, this book will expand your knowledge of object-oriented JavaScript programming, as well as strengthen your understanding of the DOM and CSS. The final chapter describes many of the tools available to assist you the developer in debugging, maintaining, and ensuring the best quality in your code. In this new edition, all the examples have been updated to use the most recent coding practices and style and new ones added to cover newer components. Since the basic documentation for the library is available online, the focus is on providing insight and experience.The authors take the reader from beginner to advanced-level YUI usage and understanding.
Table of Contents (18 chapters)
YUI 2.8 Learning the Library
About the Authors
About the Reviewers

What comes with the YUI?

Some JavaScript libraries are condensed into a single script file, such as the jQuery library. While this can make linking to them easier, it can be inefficient depending on how much of the library you actually use.

The YUI Library is split into its constituent components, making it easy to pick and mix which utilities and controls are used, and making it much more efficient to implement. In addition to the large collection of JavaScript files the library provides a great deal more.

The library topography

The library is currently divided into four distinct sections; the library core files, a series of utilities, a set of controls, and some excellent CSS tools. These are complemented by a series of tools that assist in the development process. There are also three versions of most of the library's utilities and controls, including a full version of the underlying JavaScript file that powers each component, complete with whitespace and comments for better readability and understanding that can help your learning and development.

Along with the full versions, there are also -min.js and -debug.js versions of all the utilities and controls. The -min (for minified) files have had all whitespace and comments removed, and variable names have been shortened where possible to cut down drastically on file size. The tool used to produce the -min version, the YUI Compressor is available for downloading at the YUI site so you can use it on your own pages.

The -min versions of each component are perfect for production-release applications. These are the ones that you would include in your own pages. Once all development and testing is done, you should minify your own code. Your development code should be well commented and nicely formatted and spaced; you shouldn't scrimp on the code you write for the sake of reducing the file size, the YUI Compressor can take care of doing that for you.

The -debug version of each component is designed to be used in conjunction with the Logger Control rather than presented to your visitors. Along with whitespace and comments, these files also contain additional code that logs messages to the Logger console during key interactions within the components. In fact, the -debug version is the original source; the other two are automatically generated from this one by first stripping the logging messages for the full version and then compress for the minified one.

The differences between the full and -min versions of each file can be quite large, with the -min versions often being less than half the size of the full version. The only comment in each of the -min files is the copyright notice, which has to stay intact in every file. Other than that, these files are pretty much solid chunks of hard code and readability is therefore very poor.

To further improve the loading time of the library, several combinations of files often used together are provided as aggregates. Thus the core files can be loaded in just one go. These are provided only in minified form even though they lack the -min suffix.

Once the application is ready to be deployed, Yahoo provides two more performance enhancements. You may load the library files from your own servers, but you can also load them either from Yahoo's Content Delivery Network (CDN) or from Google's CDN. These ensure that the user of your application, anywhere in the world, can retrieve the YUI components from the closest server farm available, the very same servers that the Yahoo! site pages use.

Finally, Yahoo's CDN accepts combination requests. Browsers can only have a certain number of active communications channels open at once. When there are more requests for included files than it can handle, the rest will be queued. A combination request is one where the names of several components are concatenated into the same URL and requested all at once, thus avoiding getting later requests delayed in the queue.

If we try to load the Calendar component as well as the Base CSS Tools, this is how it translates into actual numbers:


Number of connections

Download Size (KB)

Delay (ms)

















Combination requests are different from aggregate files. The latter are produced in the build process of the library and are available from both CDNs as well as in the developer download. The combination requests are completely dynamic and have to be produced on the fly with an application running on the CDN; the combined components do not exist as files in the CDN as the aggregates do. You cannot do a combination request from Google CDN nor when developing in your own machine. However, a first beta release of the application that serves these requests has been released as the YUI PHP Loader and an external contributor has already done an experimental port to Java.

To assist the developer in building the <script> and <style> tags required to retrieve the library components, the YUI site provides the Dependency Configurator. It lets you select the components you need, the version (-debug, full, or -min) you want, and which CDN you want to download it from. It will produce a listing that you can simply copy and paste into your page. All mandatory dependencies will be there in the proper order.

There are also three different file designations that each component can be classed as; fully released components are termed GA (General Availability). GA components are typically the oldest, have been tested extensively, and had most of the bugs weeded out. They are reliable and have been considerably refined.

Beta designated utilities and controls are still in the process of being ironed out, but they have been released to the development community for wider testing, bug highlighting, and feature suggestion.

Any component termed experimental is still in the conceptual phase of its design and may or may not be promoted to Beta or GA status.

The core files

The core of the library consists of the following three files:

  • YAHOO Global Object

  • Dom utilities

  • Event Utility

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). It also contains the YAHOO.Lang object which is made of a series of static methods that add functionality that the language, JavaScript, should have, such as a .trim() function for strings.

The Dom utilities provides 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.

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.

As the core files are required in most YUI implementations, they have been aggregated into a single file: yahoo-dom-event.js. Using this one file instead of three individual files helps to minimize the number of HTTP requests that are made by your application.

The Utilities

The utilities provide you with different sets of user-interface functionality that you can implement within your web pages. They provide programming logic and deal specifically with the behavior and interactions between your visitors and the different objects and elements on your pages.

They are a concept that you begin with and then build upon, and they provide the foundation from which you create your vision. They provide unseen behavior; for example, the Animation Utility isn't something your visitors will see directly, but its effects on the element being animated will of course be visible. They are the backstage hands of your application.

Like the core files of the library, several utilities have all been rolled up into one easy-to-link-to aggregate file: utilities.js. Again, this can be used to make your application run more efficiently when using all of the utilities together. The Dependency Configurator will automatically offer to load this file instead of its individual components if it proves smaller.

The set of utilities included in the current release of the library (which is constantly changing and growing) are as follows:

  • Animation Utility

  • Browser History Manager

  • Connection Manager (core and full)

  • Cookie Utility

  • DataSource Utility

  • Drag & Drop Utility

  • Element Utility

  • Event plugins

  • Get Utility

  • ImageLoader Utility

  • JSON Utility

  • Resize Utility

  • Selector Utility

  • Storage Utility [beta]

  • StyleSheet Utility [beta]

  • SWF Utility and related components [beta]

  • YUILoader Utility

The Connection Manager is provided in the minimal, core, and the full featured version. So, if you need the very basic set of features, you are not loading the extras. Likewise, the basic Event Utility, part of the core utilities, is supplemented by an extra set of optionals. This pattern is repeated, as we will see in the next section.

The Controls

The controls, on the other hand, are a collection of pre-packaged objects that can be placed directly on the page as they are, with very little customization. Your visitors can then interact with them.

These are objects on the page that have properties that you can adjust and control, and are the cornerstone of any web-based user interface.

These controls will be highly recognizable to most visitors to your site and will require little or no learning in order to use. The complete suite of controls currently included with the library is:

  • AutoComplete Control

  • Button Control

  • Calendar Control

  • Carousel Control [beta]

  • Charts Control [beta]

  • Color Picker Control

  • Container Family (core and full)

  • DataTable Control

  • ImageCropper [beta]

  • Layout Manager

  • Menu Control

  • Paginator

  • ProgressBar Control [beta]

  • Rich Text Editor Control (simple and full)

  • Slider Control

  • TabView Control

  • TreeView Control

  • Uploader [experimental]

The CSS Tools

The CSS Tools form the smallest, but by no means the least useful, component of the library. The utilities and controls are designed to be used almost independently (although some of the files do depend on other files in the library to function properly), but the CSS tools are designed to be used together (although they can also be used separately if desired) and provide a framework for standardizing the visual representation of elements on the page.

The following four tools make up the current CSS section of the library:

  • Reset CSS

  • Fonts CSS

  • Grids CSS

  • Base CSS

The CSS tools have just two versions of each CSS file instead of three: a full version and a minimum version; there are no debug versions in this section of the library. As with the yahoo-dom-event utility, some of the CSS files have also been combined into one file for your convenience. You can use reset-fonts-grids.css or reset-fonts.css depending on your requirements.

The developer tools

These files are meant to assist you in the process of developing or deploying the application; they are not expected to ever reach the final user. They are:

  • Profiler

  • Profiler Viewer

  • Logger

  • YUI Test

  • YUI Compressor

  • YUI PHP Loader [beta]

  • YUI Doc

  • YUI Builder

The first four are JavaScript files that can be loaded along with your application to test or evaluate it. The others are external utilities written in different languages that need to be installed into your development machine or deployment server. These and other utilities developed by others will be covered towards the end of this book.

The library's structure

Once the library has been unpacked, you'll see that there are a series of folders within it; the build folder contains production-ready code that you can use immediately on your website. This is where the code that makes each component work and all of its associated resources, such as images and stylesheets can be found.

The docs directory contains the complete API documentation for every library component. This is where you can find the classes that make up each component, look at the underlying code, and review the properties and methods available to you.

The examples folder contains a series of demonstrative web pages that highlight the key functionality or behavior of each library component and mirror the example space found online. They are often a good place to start testing a new idea: find an example close to what you want and start changing it.

The tests folder contains a series of pages that use the YUI Test tool and the Logger Control to check that each component is functioning correctly for the platform on which it is being run. Each method for the component being tested is called, and the results are logged for you to examine. Any change or patch to the library should be tested to ensure it doesn't break existing functionality. These are the very same tests run on all A-grade browsers at Yahoo! before any new release.

The assets folder contains extras used either by the examples, the API docs, or index files in the library pack; they are not used by the YUI components. Finally, an as-docs folder contains the documentation for the interface to the SWF flash components, which are beta at this stage.

Another set of folders that you'll need frequently when using the library controls are the assets folders under each of the component folders in the build directory. Each of the controls has its own assets folder, which contains things like supporting images and stylesheets, as well as the sam skin files (if applicable) for display purposes.

There are some other files and folders within the library, such as an index for the library so that you can easily look for documentation or examples and release notes.

Due to the changing nature of the beta, and the experimental utilities and controls, we will not be looking at them in any great detail in this book. For information regarding any of these components, see the YUI site and API guides.

What else does Yahoo! provide?

There are some additional resources that are available courtesy of Yahoo! to help you use the library to its maximum potential. There is a series of very helpful "Cheat Sheets" for each component at its developer guide page in a PDF file, which can be printed each on a single page.

These resources provide a useful and centralized reference manual, which lists the key methods, properties, and syntax patterns of each of the fully released components and gives some basic examples of their implementation.

There is a discussion forum, which developers can use to discuss their projects and get help from experts. The old Yahoo! Group for YUI developers, with 13,600 members and an average of 1000 messages a month until half a year ago, is still active but it has been steadily declining since then in favor of the new forum at Both are fully searchable and they are a good place to start if you've got a problem with getting a utility or control to do what you want it to or to submit a question if there is no information listed.

The forum is home to a growing community of developers that have been brought together by the YUI; community involvement is an excellent way to connect with developers and can take a project in new and impressive directions.

For those of you who want to join the YUI development community and give something back to the Yahoo! Developers who have bestowed this awesome tool upon us, besides helping your fellow developers in the forum, there is also the facility to submit bug reports or feature requests. This is an excellent channel of feedback and as the YUI team points out, many useful features have been added to the library following a feature request. It also allows the team to remove errors and refine the features of existing components.

To file a ticket for a bug fix or an enhancement suggestion you can go to A year ago this tracking system resided in, but it didn't have all the features the YUI team needed and, in fact, internally they used another system to track their progress so the two systems were often out of sync. Now, the bug tracker we see is the one the YUI team sees. Though all the members of the YUI team participate in the forum, if you find a bug don't just comment it in the forum, as forum posts cannot be tracked; the bug tracker is the place to ensure that a bug gets fixed.

Once a bug is fixed, you no longer need to wait until the next release to get your hands on the fix. The YUI Library and many of its tools are now saved into GitHub at so, as soon as you see a bug fixed, you can retrieve the latest build from the very same place the YUI team uses. This is a live development repository, so not all the files are in a stable state; any file retrieved from this repository has to be used with caution and generally not in a production environment.

To keep up-to-date on developments in the YUI and read associated news statements and technical articles about the library and the Yahoo! Developer Network in general, or to watch screencasts from the development team and other experts, you can visit the YUI blog at

This is a companion blog not just for the YUI Library but also for the Yahoo! Design Pattern Library. This is separate from the YUI and is not something that we'll be looking at in this book, but it is worth mentioning because the two resources can be used together in many situations.

The entire selection of different video screencasts and podcasts are brought together in one place for easy searching in the YUI Theater. Both the blog and the theater are subscribable via RSS, so that you can have up-to-date news and announcements surrounding the library.

Finally, you can go further: sign a Contributor License Agreement (CLA) and help with the YUI code itself. The CLA basically ensures that you agree to provide your contributions under the same license as the YUI and that you are not violating other people's rights when offering this code. This prevents any individual contributor from forcing exceptions to the general terms of the license used with the YUI.

Are there any licensing restrictions?

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 license. This is a very unrestrictive license in general and is popular amongst the open source community.

For those of you who don't know anything about what the license stands for and what it allows you to do, I'll give you quick overview now so that you need not worry about it again. Consider these next few paragraphs your education in open source software licensing!

BSD stands for Berkeley Software Distribution and was originally designed and used by a team of developers who created an open source operating system of the same name that was similar in many ways to the UNIX platform (and even shared part of its code base with it). Many of today's most popular operating systems, including Windows and Mac OS X are derived from or contain code from the original BSD operating system.

The current BSD version, sometimes known as the New BSD license, differs from the original. It has had the restrictive UC Berkeley advertising clause removed, making it almost equivalent to the MIT license, but with the addition of a brief final clause prohibiting the use of the copyright owner's name for endorsement without obtaining prior consent.

This means that you can pretty much do whatever you want to do with the library source code; you can use it as it is, you can modify it as you wish, add to it, or even remove bits. You can use the files in the format in which they are provided, or you can use the code within them in the distribution of a compiled, closed-source application. Thus, the code belongs to the community and should Yahoo! ever drop it, the community can carry on.

You can use it in your own personal projects, as part of a commercial venture or even within an educational framework. You can do all of this provided that you retain the copyright notice in your source code, or the copyright notice present on each of the library files remains intact.

If you're using the library files as they come in the library, all you need to do is make sure that the existing copyright notice is left at the top of every file that you use. In a compiled application, it should be clearly visible in the help section or user manual.