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. Load the YUI Loader script file:
2. Create a YAHOO.util.YUILoader instance: We pass a configuration 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).

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 configuration 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 onSuccess function. This is the member of the configuration object in which we specfied our instantiation logic for Calendar.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.