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

Using the library files in your own web pages

One thing that you need to check when using different controls and utilities from the library is which, if any, of the other utilities will be needed by the component that you wish to use; fortunately the online documentation and cheat sheets will list out any dependencies of any component that you choose and the Dependency Configurator will assist you in finding out the best combination.

There is only one file that must be used in every implementation of any of the various components: the YAHOO Global Object. This utility creates the namespaces within which all of the YUI library code resides, and contains some additional methods that are used by other files throughout the library.

It must appear before any of the other library files because if references to other component files appear before the Global Object, none of the namespaces used will be recognized by your script. This will cause a JavaScript error message stating that YAHOO is undefined.

The CSS files should be linked to in the <head> section of your page, as any other CSS file would be. For performance reasons, the code that invokes and customizes the library components should be as close to the bottom of the page as possible. Also, you can easily separate your JavaScript from your HTML altogether and keep your scripts in separate files.

To use the current version of the Animation Utility from the Yahoo! servers for example, the following script tags would be required:

<script type="text/javascript" src=" 2.8.0/build/yahoo-dom-event/yahoo-dom-event.js">
<script type="text/javascript" src=" 2.8.0/build/animation/animation-min.js">

All code components depend on the YAHOO Global Object, which should always go first. As the Animation Utility also depends on the Event and Dom utilities, we can use the yahoo-dom-event aggregate instead of individual files.

Once these script tags have been added to your page, the code required to animate your object or element would go into its own script tag in the <body> section of the page.

Now, we'll take our first look at one of the library components in detail: the Calendar Control. We can take a quick look at its supporting classes to see what methods and properties are available to us, and can then move on to implement the control in the first of our coding examples.