A Simple Use Case: Using YUI Loader to Load the Calendar Control

This example implements the YUI Loader Utility to load the Calendar Control.

The workflow happens in three steps:

1. Create a YAHOO_config object: We use the YAHOO_config object to set up our instruction set for Loader, including things like what components to load, whether to load optional components, and what to do once the components are loaded (in this case, once the components are loaded we instantiate a Calendar Control on the page).
2. Load the YUI Loader script file: This script, once loaded, will look for an existing YAHOO_config object and follow any instructions it finds there.
3. Using the loaded components: Once YAHOO_config is consumed by the YUI Loader, and after Loader has brought in the required dependencies, your code that makes use of the requested YUI components can fire. You specify that code (e.g., by pointing to a callback) in YAHOO_config, but it doesn't get fired until Loader has successfully loaded all of your required components.

Here's what that looks like in terms of raw source — this is the full JavaScript source code for this example:

This code executes the following steps in order:

1. YUI Loader loads and consumes the YAHOO_config object. It gets instructions about what components are required, how to configure them, and what code to execute when loading is done.
2. YUI Loader checks the dependency tree. Loader knows that Calendar requires the Yahoo Global Object, the Dom Collection, the Event Utility, and the Calendar Control file as well as Calendar's CSS file. It knows that it can get Yahoo, Dom and Event in a single file, so it uses a rollup for those and loads that rolled up JavaScript file via a <script> node that it inserts on the page. It waits for that file to load, then loads the Calendar Control's JavaScript file; this must be loaded after Yahoo, Dom and Event are in place. (The CSS file is loaded immediately by inserting a <link> element on the page.)
3. YUI Loader executes its onLoadComplete function. This is the member of the YAHOO_config's load object in which we specfied our instantiation logic for Calendar.