YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: YUI Loader Utility (beta): Using YUI Loader to Load the Calendar Control

# YUI Loader Utility (beta): Using YUI Loader to Load the Calendar Control

In this example, we bring a YUI component onto the page using the YUI Loader Utility. This example implements YAHOO.util.YUILoader.

This example loads in new window to demonstrate the simplest use case — a page with no other content, wherein the Loader is introducing YUI into a simple context.

View example in new window.

## 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:

<script> var loader = new YAHOO.util.YUILoader({ require: ['calendar'], // what components? base: '../../build/',//where do they live? //filter: "DEBUG", //use debug versions (or apply some //some other filter? //loadOptional: true, //load all optional dependencies? //onSuccess is the function that YUI Loader //should call when all components are successfully loaded. onSuccess: function() { //Once the YUI Calendar Control and dependencies are on //the page, we'll verify that our target container is //available in the DOM and then instantiate a default //calendar into it: YAHOO.util.Event.onAvailable("calendar_container", function() { var myCal = new YAHOO.widget.Calendar("mycal_id", "calendar_container"); myCal.render(); }) }, // should a failure occur, the onFailure function will be executed onFailure: function(o) { alert("error: " + YAHOO.lang.dump(o)); } }); // Calculate the dependency and insert the required scripts and css resources // into the document loader.insert(); </script> <script src="../../build/yuiloader/yuiloader.js"></script>

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.

### YUI Loader Utility (beta) Examples:

- Using YUI Loader to Load the Calendar Control
- Using YUI Loader to Place Additional Components on a Page
- Using addModule to Add Custom (Non-YUI) Content with YUILoader
- Use YUILoader to list requirements for a set of components.
- Complex Application (included with examples for Layout Manager)

### More YUI Loader Utility (beta) Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings