YUI 3.x Home -

YUI Library Examples: The YUI Global Object: YUI Loader - Dynamically Adding YUI and External Modules

The YUI Global Object: YUI Loader - Dynamically Adding YUI and External Modules

This example uses the dynamic loading capability built into YUI to pull in additional components as needed. In addition, it demonstrates how to define external modules that can be loaded alongside YUI.

This example works as follows:

  1. A YUI instance is created with a configuration object that defines parameters we need to dynamically load new modules.
  2. node is used so that we can bind an event listener to a button. YUI will dynamically fetch node and its dependencies. By default, these dependencies will be fetched from the Yahoo! CDN and will be combined into a single file.
  3. A click listener is added to a button.
  4. When this button is clicked, YUI will dynamically fetch 3.x Drag & Drop and 2.x Calendar files. The CSS file will be fetched first; this helps prevent a flash of unstyled content when the Calendar Control is loaded. This file is inserted above a style block which contains our custom calendar styles (via a YUI config option) so that styles are applied in the correct order.
  5. A Calendar instance is created, and it is made draggable.

View example in new window.

Creating your YUI instance

First, we need to create our YUI instance with the node module, so we can attach a listener to a button.

  1. YUI().use('node', function(Y) {
  2.  
  3. });
YUI().use('node', function(Y) {
 
});

YUI accepts a configuration object when you create an instance. Your dynamic-loading options can be defined here.

  1. YUI({
  2.     // We can specify a node that is the insertion point for all new nodes.  This
  3.     // is useful for making sure css rules are applied in the correct order.
  4.     insertBefore: 'styleoverrides',
  5.  
  6.     // This lets you define one or more external modules that will be added to
  7.     // the YUI metadata.  You can define dependency relationships between your
  8.     // modules and also between your modules and YUI modules.  Here we are
  9.     // defining 2.x calendar components as external modules.  See
  10.     // <a href="http://developer.yahoo.com/3.x/api/Loader.html#method_addModule">
  11.     // the API docs</a> for a complete list of module configuration options.
  12.     modules: {
  13.         'yui2-yde': {
  14.             fullpath: "http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"
  15.         },
  16.         'yui2-calendar': {
  17.             fullpath: "http://yui.yahooapis.com/2.8.0r4/build/calendar/calendar-min.js",
  18.             requires: ['yui2-yde', 'yui2-calendarcss']
  19.         },
  20.         'yui2-calendarcss': {
  21.             fullpath: "http://yui.yahooapis.com/2.8.0r4/build/calendar/assets/skins/sam/calendar.css",
  22.             type: 'css'
  23.         }
  24.     }
  25.  
  26. }).use('node', function(Y) {
  27.  
  28. });
YUI({
    // We can specify a node that is the insertion point for all new nodes.  This
    // is useful for making sure css rules are applied in the correct order.
    insertBefore: 'styleoverrides',
 
    // This lets you define one or more external modules that will be added to
    // the YUI metadata.  You can define dependency relationships between your
    // modules and also between your modules and YUI modules.  Here we are
    // defining 2.x calendar components as external modules.  See
    // <a href="http://developer.yahoo.com/3.x/api/Loader.html#method_addModule">
    // the API docs</a> for a complete list of module configuration options.
    modules: {
        'yui2-yde': {
            fullpath: "http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"
        },
        'yui2-calendar': {
            fullpath: "http://yui.yahooapis.com/2.8.0r4/build/calendar/calendar-min.js",
            requires: ['yui2-yde', 'yui2-calendarcss']
        },
        'yui2-calendarcss': {
            fullpath: "http://yui.yahooapis.com/2.8.0r4/build/calendar/assets/skins/sam/calendar.css",
            type: 'css'
        }
    }
 
}).use('node', function(Y) {
 
});

Creating the Calendar

Now that we have our core YUI instance in place, we add an event listener to a button that will dynamically load YUI 3.x Drag & Drop and YUI 2.x Calendar.

  1. // The callback supplied to use() will be executed regardless of
  2. // whether the operation was successful or not.  The second parameter
  3. // is a result object that has the status of the operation.  We can
  4. // use this to try to recover from failures or timeouts.
  5. if (!result.success) {
  6.  
  7.     Y.log('Load failure: ' + result.msg, 'warn', 'Example');
  8.  
  9. } else {
  10.  
  11.     // Add a button click listener to load the calendar
  12.     var handle = Y.on('click', function(e) {
  13.  
  14.         // dynamically load the 2.x calendar and 3.x drag and drop
  15.         Y.use('dd-drag', 'yui2-calendar', function(Y) {
  16.             var cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
  17.  
  18.             // Once the 2.x calendar renders, we will add 3.x drag
  19.             // functionality t0 it.
  20.             cal1.renderEvent.subscribe(function() {
  21.                 var dd = new Y.DD.Drag({
  22.                     node: '#cal1Cont'
  23.                 }).addHandle('div.calheader');
  24.             });
  25.             cal1.render();
  26.         });
  27.  
  28.         // Remove the button click listener so that we only try to
  29.         // load the calendar control once.
  30.         handle.detach();
  31.  
  32.     }, '#button1');
  33. }
// The callback supplied to use() will be executed regardless of
// whether the operation was successful or not.  The second parameter
// is a result object that has the status of the operation.  We can
// use this to try to recover from failures or timeouts.
if (!result.success) {
 
    Y.log('Load failure: ' + result.msg, 'warn', 'Example');
 
} else {
 
    // Add a button click listener to load the calendar
    var handle = Y.on('click', function(e) {
 
        // dynamically load the 2.x calendar and 3.x drag and drop
        Y.use('dd-drag', 'yui2-calendar', function(Y) {
            var cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
 
            // Once the 2.x calendar renders, we will add 3.x drag
            // functionality t0 it.
            cal1.renderEvent.subscribe(function() {
                var dd = new Y.DD.Drag({
                    node: '#cal1Cont'
                }).addHandle('div.calheader');
            });
            cal1.render();
        });
 
        // Remove the button click listener so that we only try to
        // load the calendar control once.
        handle.detach();
 
    }, '#button1');
}

Full source

  1. <input id="button1" type="button" value="Click to load YUI Calendar" class="button" />
  2.  
  3. <div id="cal1Cont"></div>
  4.  
  5. <script>
  6.  
  7. YUI({
  8.  
  9.     // We can specify a node that is the insertion point for all new nodes.  This
  10.     // is useful for making sure css rules are applied in the correct order.
  11.     insertBefore: 'styleoverrides',
  12.  
  13.     // This lets you define one or more external modules that will be added to
  14.     // the YUI metadata.  You can define dependency relationships between your
  15.     // modules and also between your modules and YUI modules.  Here we are
  16.     // defining 2.x calendar components as external modules.  See
  17.     // <a href="http://developer.yahoo.com/3.x/api/Loader.html#method_addModule">
  18.     // the API docs</a> for a complete list of module configuration options.
  19.     modules: {
  20.         'yui2-yde': {
  21.             fullpath: "http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"
  22.         },
  23.         'yui2-calendar': {
  24.             fullpath: "http://yui.yahooapis.com/2.8.0r4/build/calendar/calendar-min.js",
  25.             requires: ['yui2-yde', 'yui2-calendarcss']
  26.         },
  27.         'yui2-calendarcss': {
  28.             fullpath: "http://yui.yahooapis.com/2.8.0r4/build/calendar/assets/skins/sam/calendar.css",
  29.             type: 'css'
  30.         }
  31.     },
  32.  
  33.     // Specifies whether or not optional dependencies should be loaded
  34.     // loadOptional: true,
  35.  
  36.     // By default, the minified versions of the files are loaded.  We can specify
  37.     // 'debug' to load versions with log statements, or 'raw' to load a version
  38.     // that isn't minified, but has log statements stripped.
  39.     filter: 'debug',
  40.  
  41.     // Give up if any single node request takes more than 10 seconds.
  42.     timeout: 10000
  43.  
  44. // 3.x node will be dynamically loaded so we can work with DOM elements
  45. }).use('node', function(Y, result) {
  46.  
  47.     // The callback supplied to use() will be executed regardless of
  48.     // whether the operation was successful or not.  The second parameter
  49.     // is a result object that has the status of the operation.  We can
  50.     // use this to try to recover from failures or timeouts.
  51.     if (!result.success) {
  52.  
  53.         Y.log('Load failure: ' + result.msg, 'warn', 'Example');
  54.  
  55.     } else {
  56.  
  57.         // Add a button click listener to load the calendar
  58.         var handle = Y.on('click', function(e) {
  59.  
  60.             // dynamically load the 2.x calendar and 3.x drag and drop
  61.             Y.use('dd-drag', 'yui2-calendar', function(Y) {
  62.                 var cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
  63.  
  64.                 // Once the 2.x calendar renders, we will add 3.x drag
  65.                 // functionality to it.
  66.                 cal1.renderEvent.subscribe(function() {
  67.                     var dd = new Y.DD.Drag({
  68.                         node: '#cal1Cont'
  69.                     }).addHandle('div.calheader');
  70.                 });
  71.                 cal1.render();
  72.             });
  73.  
  74.             // Remove the button click listener so that we only try to
  75.             // load the calendar control once.
  76.             handle.detach();
  77.  
  78.         }, '#button1');
  79.     }
  80.  
  81.  
  82. });
  83. </script>
  84.  
<input id="button1" type="button" value="Click to load YUI Calendar" class="button" />
 
<div id="cal1Cont"></div>
 
<script>
 
YUI({
 
    // We can specify a node that is the insertion point for all new nodes.  This
    // is useful for making sure css rules are applied in the correct order.
    insertBefore: 'styleoverrides',
 
    // This lets you define one or more external modules that will be added to
    // the YUI metadata.  You can define dependency relationships between your
    // modules and also between your modules and YUI modules.  Here we are
    // defining 2.x calendar components as external modules.  See
    // <a href="http://developer.yahoo.com/3.x/api/Loader.html#method_addModule">
    // the API docs</a> for a complete list of module configuration options.
    modules: {
        'yui2-yde': {
            fullpath: "http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"
        },
        'yui2-calendar': {
            fullpath: "http://yui.yahooapis.com/2.8.0r4/build/calendar/calendar-min.js",
            requires: ['yui2-yde', 'yui2-calendarcss']
        },
        'yui2-calendarcss': {
            fullpath: "http://yui.yahooapis.com/2.8.0r4/build/calendar/assets/skins/sam/calendar.css",
            type: 'css'
        }
    },
 
    // Specifies whether or not optional dependencies should be loaded
    // loadOptional: true,
 
    // By default, the minified versions of the files are loaded.  We can specify
    // 'debug' to load versions with log statements, or 'raw' to load a version
    // that isn't minified, but has log statements stripped.
    filter: 'debug',
 
    // Give up if any single node request takes more than 10 seconds.
    timeout: 10000
 
// 3.x node will be dynamically loaded so we can work with DOM elements
}).use('node', function(Y, result) {
 
    // The callback supplied to use() will be executed regardless of
    // whether the operation was successful or not.  The second parameter
    // is a result object that has the status of the operation.  We can
    // use this to try to recover from failures or timeouts.
    if (!result.success) {
 
        Y.log('Load failure: ' + result.msg, 'warn', 'Example');
 
    } else {
 
        // Add a button click listener to load the calendar
        var handle = Y.on('click', function(e) {
 
            // dynamically load the 2.x calendar and 3.x drag and drop
            Y.use('dd-drag', 'yui2-calendar', function(Y) {
                var cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
 
                // Once the 2.x calendar renders, we will add 3.x drag
                // functionality to it.
                cal1.renderEvent.subscribe(function() {
                    var dd = new Y.DD.Drag({
                        node: '#cal1Cont'
                    }).addHandle('div.calheader');
                });
                cal1.render();
            });
 
            // Remove the button click listener so that we only try to
            // load the calendar control once.
            handle.detach();
 
        }, '#button1');
    }
 
 
});
</script>
 

More The YUI Global Object Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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