YUI 3.x Home -

YUI Library Examples: Console: Creating a universal Console

Console: Creating a universal Console

In this example, the Console's logSource configuration is set to Y.Global, an EventTarget shared by all YUI instances.

Two YUI instances are created with different configurations and module inclusions. Each YUI instance is configured to request the module-debug.js version of its modules and dependencies and filter out all but specific log sources using the logInclude config property.

The universal Console is instantiated and rendered inside the first YUI instance.

View example in new window.

YUI #1: Slider

YUI #2: Animation

HIDE ME

Multiple YUI instances

Each YUI instance is its own sandbox. You can create as many YUI instances on a page as you want or need. The variables, module configurations and instances are kept inside that instance unless you expressly expose them via a global variable.

  1. // Create the first YUI instance
  2. YUI({ 
  3.     base: '../../build/',
  4.     timeout: 10000
  5. }).use('slider', function (Y) {
  6.  
  7.     // This Slider is not accessible from within any other YUI instance
  8.     new Y.Slider({
  9.         railSize: '150px',
  10.         thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-x.png'
  11.     }).render('#yui1_slider');
  12.  
  13. });
  14.  
  15. // This new YUI instance cannot access the Slider created in the above YUI
  16. // instance and in fact can't even instantiate a Slider.  A similar
  17. // restriction applies to the Anim instance here.
  18. YUI({ 
  19.     base: '../../build/',
  20.     timeout: 10000
  21. }).use('node','anim', function (Y) {
  22.  
  23.     var anim = new Y.Anim({
  24.         node: '#yui2_anim',
  25.         from: { opacity: 1 },
  26.         to:   { opacity: 0 }
  27.     });
  28.     anim.on('end', function () {
  29.         this.set('reverse', !this.get('reverse'));
  30.     });
  31.  
  32.     Y.on('click', function () {
  33.         this.set('innerHTML', anim.get('reverse') ? 'Hide' : 'Show');
  34.         anim.run();
  35.     }, '#yui2_anim_go');
  36.  
  37. });
// Create the first YUI instance
YUI({ 
    base: '../../build/',
    timeout: 10000
}).use('slider', function (Y) {
 
    // This Slider is not accessible from within any other YUI instance
    new Y.Slider({
        railSize: '150px',
        thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-x.png'
    }).render('#yui1_slider');
 
});
 
// This new YUI instance cannot access the Slider created in the above YUI
// instance and in fact can't even instantiate a Slider.  A similar
// restriction applies to the Anim instance here.
YUI({ 
    base: '../../build/',
    timeout: 10000
}).use('node','anim', function (Y) {
 
    var anim = new Y.Anim({
        node: '#yui2_anim',
        from: { opacity: 1 },
        to:   { opacity: 0 }
    });
    anim.on('end', function () {
        this.set('reverse', !this.get('reverse'));
    });
 
    Y.on('click', function () {
        this.set('innerHTML', anim.get('reverse') ? 'Hide' : 'Show');
        anim.run();
    }, '#yui2_anim_go');
 
});

Listening to Y.Global

To address debugging such an environment, Console can be configured to listen for log messages across all YUI instances by setting the Console instance's logSource configuration to Y.Global.

We'll insert the Console creation into the first YUI instance's callback. By default, Console will only listen to log messages originating from its own YUI instance sandbox.

  1. // Create the first YUI instance
  2. YUI({ 
  3.     base: '../../build/',
  4.     filter: 'debug',
  5.     logInclude: { slider: true },
  6.     timeout: 10000
  7. }).use('slider', 'console', function (Y) {
  8.  
  9.     // Configure the Console's logSource to Y.Global to make it universal
  10.     new Y.Console({
  11.         boundingBox: '#yconsole',
  12.         logSource: Y.Global,
  13.         style: 'block',
  14.         newestOnTop: false
  15.     }).render();
  16.  
  17.     // Create a Slider from this instance
  18.     new Y.Slider({
  19.         railSize: '150px',
  20.         thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-x.png'
  21.     }).render('#yui1_slider');
  22.  
  23. });
  24.  
  25. // Turn on the debug filter and restrict the log sources with logInclude
  26. YUI({ 
  27.     base: '../../build/',
  28.     filter: 'debug',
  29.     logInclude: { event: true, attribute: true },
  30.     timeout: 10000
  31. }).use('node','anim', function (Y) {
  32.  ...
// Create the first YUI instance
YUI({ 
    base: '../../build/',
    filter: 'debug',
    logInclude: { slider: true },
    timeout: 10000
}).use('slider', 'console', function (Y) {
 
    // Configure the Console's logSource to Y.Global to make it universal
    new Y.Console({
        boundingBox: '#yconsole',
        logSource: Y.Global,
        style: 'block',
        newestOnTop: false
    }).render();
 
    // Create a Slider from this instance
    new Y.Slider({
        railSize: '150px',
        thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-x.png'
    }).render('#yui1_slider');
 
});
 
// Turn on the debug filter and restrict the log sources with logInclude
YUI({ 
    base: '../../build/',
    filter: 'debug',
    logInclude: { event: true, attribute: true },
    timeout: 10000
}).use('node','anim', function (Y) {
 ...

Full Code Listing

Markup

  1. <div id="demo">
  2.     <div id="yconsole"></div>
  3.  
  4.     <h4>YUI #1: Slider</h4>
  5.     <div id="yui1_slider"></div>
  6.  
  7.     <h4>YUI #2: Animation</h4>
  8.     <div id="yui2_anim">HIDE ME</div>
  9.     <button type="button" id="yui2_anim_go">Hide</button>
  10. </div>
<div id="demo">
    <div id="yconsole"></div>
 
    <h4>YUI #1: Slider</h4>
    <div id="yui1_slider"></div>
 
    <h4>YUI #2: Animation</h4>
    <div id="yui2_anim">HIDE ME</div>
    <button type="button" id="yui2_anim_go">Hide</button>
</div>

JavaScript

  1. // Create the first YUI instance
  2.  
  3. YUI({ 
  4.     base: '../../build/',
  5.     filter: 'debug',
  6.     logInclude: { slider: true },
  7.     timeout: 10000
  8. }).use('slider', 'console', function (Y) {
  9.  
  10.     // Configure the Console's logSource to Y.Global to make it universal
  11.     new Y.Console({
  12.         boundingBox: '#yconsole',
  13.         logSource: Y.Global,
  14.         style: 'block',
  15.         newestOnTop: false
  16.     }).render();
  17.  
  18.     // Create a Slider from this instance
  19.     new Y.Slider({
  20.         railSize: '150px',
  21.         thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-x.png'
  22.     }).render('#yui1_slider');
  23.  
  24. });
  25.  
  26. // Create the second YUI instance
  27. YUI({ 
  28.     base: '../../build/',
  29.     filter: 'debug',
  30.     logInclude: { event: true, attribute: true },
  31.     timeout: 10000
  32. }).use('node','anim', function (Y) {
  33.  
  34.     var anim = new Y.Anim({
  35.         node: '#yui2_anim',
  36.         from: { opacity: 1 },
  37.         to:   { opacity: 0 }
  38.     });
  39.     anim.on('end', function () {
  40.         this.set('reverse', !this.get('reverse'));
  41.     });
  42.  
  43.     Y.on('click', function () {
  44.         this.set('innerHTML', anim.get('reverse') ? 'Hide' : 'Show');
  45.         anim.run();
  46.     }, '#yui2_anim_go');
  47.  
  48. });
// Create the first YUI instance
 
YUI({ 
    base: '../../build/',
    filter: 'debug',
    logInclude: { slider: true },
    timeout: 10000
}).use('slider', 'console', function (Y) {
 
    // Configure the Console's logSource to Y.Global to make it universal
    new Y.Console({
        boundingBox: '#yconsole',
        logSource: Y.Global,
        style: 'block',
        newestOnTop: false
    }).render();
 
    // Create a Slider from this instance
    new Y.Slider({
        railSize: '150px',
        thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-x.png'
    }).render('#yui1_slider');
 
});
 
// Create the second YUI instance
YUI({ 
    base: '../../build/',
    filter: 'debug',
    logInclude: { event: true, attribute: true },
    timeout: 10000
}).use('node','anim', function (Y) {
 
    var anim = new Y.Anim({
        node: '#yui2_anim',
        from: { opacity: 1 },
        to:   { opacity: 0 }
    });
    anim.on('end', function () {
        this.set('reverse', !this.get('reverse'));
    });
 
    Y.on('click', function () {
        this.set('innerHTML', anim.get('reverse') ? 'Hide' : 'Show');
        anim.run();
    }, '#yui2_anim_go');
 
});

CSS

  1. #yconsole {
  2.     float: right;
  3. }
  4.  
  5. #demo .yui-console .yui-console-title {
  6.     border: 0 none;
  7.     color: #000;
  8.     font-size: 13px;
  9.     font-weight: bold;
  10.     margin: 0;
  11.     text-transform: none;
  12. }
  13. #demo .yui-console .yui-console-entry-meta {
  14.     margin: 0;
  15. }
  16.  
  17. #yui1_slider {
  18.     margin-bottom: 2em;
  19. }
  20.  
  21. #yui2_anim {
  22.     background: #406ed9;
  23.     color: #fff;
  24.     height: 100px;
  25.     line-height: 100px;
  26.     margin-bottom: 1em;
  27.     text-align: center;
  28.     width: 100px;
  29. }
#yconsole {
    float: right;
}
 
#demo .yui-console .yui-console-title {
    border: 0 none;
    color: #000;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    text-transform: none;
}
#demo .yui-console .yui-console-entry-meta {
    margin: 0;
}
 
#yui1_slider {
    margin-bottom: 2em;
}
 
#yui2_anim {
    background: #406ed9;
    color: #fff;
    height: 100px;
    line-height: 100px;
    margin-bottom: 1em;
    text-align: center;
    width: 100px;
}

More Console Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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