YUI Library Home

YUI Library Examples: YUI Loader Utility: Using YUI Loader to Load the Calendar Control

YUI Loader Utility: 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.

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:

1<script> 
2 
3    var loader = new YAHOO.util.YUILoader({ 
4 
5        require: ['calendar'], // what components? 
6 
7        base: '../../build/',//where do they live? 
8 
9        //filter: "DEBUG",  //use debug versions (or apply some 
10                            //some other filter? 
11 
12        //loadOptional: true, //load all optional dependencies? 
13 
14        //onSuccess is the function that YUI Loader 
15        //should call when all components are successfully loaded. 
16        onSuccess: function() { 
17            //Once the YUI Calendar Control and dependencies are on 
18            //the page, we'll verify that our target container is  
19            //available in the DOM and then instantiate a default 
20            //calendar into it: 
21            YAHOO.util.Event.onAvailable("calendar_container", function() { 
22                var myCal = new YAHOO.widget.Calendar("mycal_id", "calendar_container"); 
23                myCal.render(); 
24            }) 
25         }, 
26 
27        // should a failure occur, the onFailure function will be executed 
28        onFailure: function(o) { 
29            alert("error: " + YAHOO.lang.dump(o)); 
30        } 
31 
32     }); 
33 
34    // Calculate the dependency and insert the required scripts and css resources 
35    // into the document 
36    loader.insert(); 
37 
38</script> 
39 
40<script src="../../build/yuiloader/yuiloader.js"></script> 
view plain | print | ?

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.

More YUI Loader Utility Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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