YUI 3.x Home -

Site Search (YDN & YUIBlog):

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

    // Create the first YUI instanceYUI({     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'); });

    // 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');

    });

// 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.

    // Create the first YUI instanceYUI({     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 logIncludeYUI({     base: '../../build/',    filter: 'debug',    logInclude: { event: true, attribute: true },    timeout: 10000}).use('node','anim', function (Y) { ...

    // 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) {
     ...

// 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

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

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

<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

    // 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 instanceYUI({     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'); });

    // 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');

    });

// 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

    #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;}

    #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;
    }

#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; }

Copyright © 2009 Yahoo! Inc. All rights reserved.

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