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/yui/3/api/Loader.html#method_addModule">
  11.     // the API docs</a> for a complete list of module configuration options.
  12.  
  13.     // Defines a list of groups.  The modules in each group group share the 
  14.     // base path and combo specification.
  15.     groups: {
  16.         yui2: {
  17.             combine: true,
  18.             base: 'http://yui.yahooapis.com/2.8.0r4/build/',
  19.             comboBase: 'http://yui.yahooapis.com/combo?',
  20.             root: '2.8.0r4/build/',
  21.             modules:  {
  22.                 yui2_yde: {
  23.                     path: 'yahoo-dom-event/yahoo-dom-event.js'
  24.                 },
  25.                 yui2_calendar: {
  26.                     path: 'calendar/calendar-min.js',
  27.                     requires: ['yui2_yde', 'yui2_calendarcss']
  28.                 },
  29.                 yui2_calendarcss: {
  30.                     path: 'calendar/assets/skins/sam/calendar.css',
  31.                     type: 'css'
  32.                 }
  33.             }
  34.         }
  35.     }
  36.  
  37. }).use('node', function(Y) {
  38.  
  39. });
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/yui/3/api/Loader.html#method_addModule">
    // the API docs</a> for a complete list of module configuration options.
 
    // Defines a list of groups.  The modules in each group group share the 
    // base path and combo specification.
    groups: {
        yui2: {
            combine: true,
            base: 'http://yui.yahooapis.com/2.8.0r4/build/',
            comboBase: 'http://yui.yahooapis.com/combo?',
            root: '2.8.0r4/build/',
            modules:  {
                yui2_yde: {
                    path: 'yahoo-dom-event/yahoo-dom-event.js'
                },
                yui2_calendar: {
                    path: 'calendar/calendar-min.js',
                    requires: ['yui2_yde', 'yui2_calendarcss']
                },
                yui2_calendarcss: {
                    path: '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.  
  20.     // Defines a list of groups.  The modules in each group group share the 
  21.     // base path and combo specification.
  22.     groups: {
  23.         yui2: {
  24.             combine: true,
  25.             base: 'http://yui.yahooapis.com/2.8.0r4/build/',
  26.             comboBase: 'http://yui.yahooapis.com/combo?',
  27.             root: '2.8.0r4/build/',
  28.             modules:  {
  29.                 yui2_yde: {
  30.                     path: 'yahoo-dom-event/yahoo-dom-event.js'
  31.                 },
  32.                 yui2_calendar: {
  33.                     path: 'calendar/calendar-min.js',
  34.                     requires: ['yui2_yde', 'yui2_calendarcss']
  35.                 },
  36.                 yui2_calendarcss: {
  37.                     path: 'calendar/assets/skins/sam/calendar.css',
  38.                     type: 'css'
  39.                 }
  40.             }
  41.         }
  42.     }
  43.  
  44.     // Specifies whether or not optional dependencies should be loaded
  45.     // loadOptional: true,
  46.  
  47.     // By default, the minified versions of the files are loaded.  We can specify
  48.     // 'debug' to load versions with log statements, or 'raw' to load a version
  49.     // that isn't minified, but has log statements stripped.
  50.     filter: 'debug',
  51.  
  52.     // Give up if any single node request takes more than 10 seconds.
  53.     timeout: 10000
  54.  
  55. // 3.x node will be dynamically loaded so we can work with DOM elements
  56. }).use('node', function(Y, result) {
  57.  
  58.     // The callback supplied to use() will be executed regardless of
  59.     // whether the operation was successful or not.  The second parameter
  60.     // is a result object that has the status of the operation.  We can
  61.     // use this to try to recover from failures or timeouts.
  62.     if (!result.success) {
  63.  
  64.         Y.log('Load failure: ' + result.msg, 'warn', 'Example');
  65.  
  66.     } else {
  67.  
  68.         // Add a button click listener to load the calendar
  69.         var handle = Y.on('click', function(e) {
  70.  
  71.             // dynamically load the 2.x calendar and 3.x drag and drop
  72.             Y.use('dd-drag', 'yui2-calendar', function(Y) {
  73.                 var cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
  74.  
  75.                 // Once the 2.x calendar renders, we will add 3.x drag
  76.                 // functionality to it.
  77.                 cal1.renderEvent.subscribe(function() {
  78.                     var dd = new Y.DD.Drag({
  79.                         node: '#cal1Cont'
  80.                     }).addHandle('div.calheader');
  81.                 });
  82.                 cal1.render();
  83.             });
  84.  
  85.             // Remove the button click listener so that we only try to
  86.             // load the calendar control once.
  87.             handle.detach();
  88.  
  89.         }, '#button1');
  90.     }
  91.  
  92.  
  93. });
  94. </script>
  95.  
<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.
 
    // Defines a list of groups.  The modules in each group group share the 
    // base path and combo specification.
    groups: {
        yui2: {
            combine: true,
            base: 'http://yui.yahooapis.com/2.8.0r4/build/',
            comboBase: 'http://yui.yahooapis.com/combo?',
            root: '2.8.0r4/build/',
            modules:  {
                yui2_yde: {
                    path: 'yahoo-dom-event/yahoo-dom-event.js'
                },
                yui2_calendar: {
                    path: 'calendar/calendar-min.js',
                    requires: ['yui2_yde', 'yui2_calendarcss']
                },
                yui2_calendarcss: {
                    path: '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 © 2010 Yahoo! Inc. All rights reserved.

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