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="http://yui.yahooapis.com/ 2.8.0/build/yahoo-dom-event/yahoo-dom-event.js"> </script> <script type="text/javascript" src="http://yui.yahooapis.com/ 2.8.0/build/animation/animation-min.js"> </script>
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.