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

Installing the YUI

The YUI is not an application in its own right, and it doesn't need to be installed as such. Getting started with the YUI is extremely simple; you first choose whether to download all of the source files from Yahoo! and use them locally as part of your websites' hierarchy, or whether to use the URLs provided on the YUI developer pages to reference the library files stored on Yahoo's web servers.

These are the exact same files that are used in many different interface implementations across the Yahoo! websites and as such can be depended on for being almost continuously available.

Another benefit of using Yahoo's or Google's CDN is that their networks are global in nature, with servers running in many geographically distinct parts of the world. Being able to serve library files from a location closer to your visitors' location results in a better response from your application; this is good news for your visitors and therefore good news for your business.

Additionally, as I mentioned earlier, there are different versions of each of the working files in the library including a "minified" file that has been stripped of whitespace and comment blocks. The Yahoo! servers provide these minified versions of the files, but in addition, they also serve the files in a GZIP format, making the files up to 90% smaller and therefore, much more efficient for transportation across the Internet. Finally, Yahoo! also helps the cache hit rates by issuing expires headers with expiration dates set far in the future. But best of all, these benefits are all provided for free.

If you've decided that you want to download the YUI in its entirety, you'll find a link on the YUI home page at The files were formerly stored at and you might find references pointing there, including in the first edition of this book, but the project has been migrated away from SourceForge.

So as far as installing the library goes, the most that you'll need to do is to download the library to your computer and unpack it to a local directory where you can easily find the files, assets, and resources that you require for your current project, and if you choose to let Yahoo! host the files for you, you won't even need to do that.

Creating an offline library repository

All the examples in this book fetch the library components from the Yahoo servers. If you are unable to access those you may create your own repository. So you will need to create a new folder on your hard drive called yuisite. This folder is where all of our examples will reside.

Just as some of the examples included in the downloaded files do, we will use PHP for server-side scripting, thus this folder needs to be created somewhere under your web server root and where PHP scripts can be executed. It is worth mentioning that YUI is not tied to PHP in any way. Every sample PHP script in this book as well as any provided with the examples in the YUI library download can be replaced by equivalent files in any other server platform. We use PHP simply because it is popular, simple and, most important, free, but any other server platform would do just as well.

Inside this folder, create another new folder called yui. When you unpack the library, you will see a folder called build inside it. You will need to copy and paste the entire build directory into the yui folder that you have just created. You may, if you wish, copy the whole library to the yui folder, but our examples only require the build directory.

To use the examples with this offline repository, the code for the examples needs to be changed. All the <script> and <style> tags that point to the Yahoo! servers need to be changed to point to the location of the offline repository, whichever it might be. While the examples in the code bundle point to the Yahoo servers, the printed version of them might point to this off-line repository just to keep the URLs short.

It is important that this structure is correct; otherwise none of the examples that we create as we progress through this book will work. A common indicator that library files are not accessible is a JavaScript error message stating that YAHOO is undefined.