YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Console: Creating a universal Console

## Console: Creating a universal Console

In this example, three YUI instances are created, each binding a button to call `Y.log(...)`. Then an additional, separate YUI instance is created that requests only the `console` module and creates a Console that listens for log events from all three.

View example in new window.

#### YUI #1

#### YUI #2

#### YUI #3

### 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 (though typically one is enough). 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().use("node", function (Y) {     Y.one( "#yui1" ).on( "click", function () {        Y.log( "Message from YUI instance #1" );    }); }); // Create the second YUI instanceYUI().use("node", function (Y) {     Y.one( "#yui2" ).on( "click", function () {        Y.log( "I'm the second YUI instance" );    }); }); // Create a third YUI instanceYUI().use("node", function (Y) {     Y.one( "#yui3" ).on( "click", function () {        Y.log( "And this is #3 YUI" );    }); });

    // Create the first YUI instance
    YUI().use("node", function (Y) {

        Y.one( "#yui1" ).on( "click", function () {
            Y.log( "Message from YUI instance #1" );
        });

    });

    // Create the second YUI instance
    YUI().use("node", function (Y) {

        Y.one( "#yui2" ).on( "click", function () {
            Y.log( "I'm the second YUI instance" );
        });

    });

    // Create a third YUI instance
    YUI().use("node", function (Y) {

        Y.one( "#yui3" ).on( "click", function () {
            Y.log( "And this is #3 YUI" );
        });

    });

// Create the first YUI instance YUI().use("node", function (Y) { Y.one( "#yui1" ).on( "click", function () { Y.log( "Message from YUI instance #1" ); }); }); // Create the second YUI instance YUI().use("node", function (Y) { Y.one( "#yui2" ).on( "click", function () { Y.log( "I'm the second YUI instance" ); }); }); // Create a third YUI instance YUI().use("node", function (Y) { Y.one( "#yui3" ).on( "click", function () { Y.log( "And this is #3 YUI" ); }); });

### 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 universal Console into another YUI instance.

    // Create a separate YUI instance to listen to all instances' loggingYUI().use("console", function (Y) {     // Configure the Console's logSource to Y.Global to make it universal    new Y.Console({        logSource: Y.Global,        style: 'block',        newestOnTop: false,        width: "250px"    }).render( "#yconsole" ); });

    // Create a separate YUI instance to listen to all instances' logging
    YUI().use("console", function (Y) {

        // Configure the Console's logSource to Y.Global to make it universal
        new Y.Console({
            logSource: Y.Global,
            style: 'block',
            newestOnTop: false,
            width: "250px"
        }).render( "#yconsole" );

    });

// Create a separate YUI instance to listen to all instances' logging YUI().use("console", function (Y) { // Configure the Console's logSource to Y.Global to make it universal new Y.Console({ logSource: Y.Global, style: 'block', newestOnTop: false, width: "250px" }).render( "#yconsole" ); });

### Full Code Listing

#### Markup

    <div id="demo">    <div class="yui-g">        <div class="yui-u first">            <h4>YUI #1</h4>            <button type="button" id="yui1">Log from YUI instance #1</button>             <h4>YUI #2</h4>            <button type="button" id="yui2">Log from YUI instance #2</button>             <h4>YUI #3</h4>            <button type="button" id="yui3">Log from YUI instance #3</button>        </div>        <div class="yui-u" id="yconsole">        </div>    </div>    <div class="clr"></div></div>

    <div id="demo">
        <div class="yui-g">
            <div class="yui-u first">
                <h4>YUI #1</h4>
                <button type="button" id="yui1">Log from YUI instance #1</button>

                <h4>YUI #2</h4>
                <button type="button" id="yui2">Log from YUI instance #2</button>

                <h4>YUI #3</h4>
                <button type="button" id="yui3">Log from YUI instance #3</button>
            </div>
            <div class="yui-u" id="yconsole">
            </div>
        </div>
        <div class="clr"></div>
    </div>

<div id="demo"> <div class="yui-g"> <div class="yui-u first"> <h4>YUI #1</h4> <button type="button" id="yui1">Log from YUI instance #1</button> <h4>YUI #2</h4> <button type="button" id="yui2">Log from YUI instance #2</button> <h4>YUI #3</h4> <button type="button" id="yui3">Log from YUI instance #3</button> </div> <div class="yui-u" id="yconsole"> </div> </div> <div class="clr"></div> </div>

#### JavaScript

    // Create the first YUI instanceYUI().use("node", function (Y) {     Y.one( "#yui1" ).on( "click", function () {        Y.log( "Message from YUI instance #1" );    }); }); // Create the second YUI instanceYUI().use("node", function (Y) {     Y.one( "#yui2" ).on( "click", function () {        Y.log( "I'm the second YUI instance" );    }); }); // Create a third YUI instanceYUI().use("node", function (Y) {     Y.one( "#yui3" ).on( "click", function () {        Y.log( "And this is #3 YUI" );    }); }); // Create a separate YUI instance to listen to all instances' loggingYUI().use("console", function (Y) {     // Configure the Console's logSource to Y.Global to make it universal    new Y.Console({        logSource: Y.Global,        style: 'block',        newestOnTop: false,        width: "250px"    }).render( "#yconsole" ); });

    // Create the first YUI instance
    YUI().use("node", function (Y) {

        Y.one( "#yui1" ).on( "click", function () {
            Y.log( "Message from YUI instance #1" );
        });

    });

    // Create the second YUI instance
    YUI().use("node", function (Y) {

        Y.one( "#yui2" ).on( "click", function () {
            Y.log( "I'm the second YUI instance" );
        });

    });

    // Create a third YUI instance
    YUI().use("node", function (Y) {

        Y.one( "#yui3" ).on( "click", function () {
            Y.log( "And this is #3 YUI" );
        });

    });

    // Create a separate YUI instance to listen to all instances' logging
    YUI().use("console", function (Y) {

        // Configure the Console's logSource to Y.Global to make it universal
        new Y.Console({
            logSource: Y.Global,
            style: 'block',
            newestOnTop: false,
            width: "250px"
        }).render( "#yconsole" );

    });

// Create the first YUI instance YUI().use("node", function (Y) { Y.one( "#yui1" ).on( "click", function () { Y.log( "Message from YUI instance #1" ); }); }); // Create the second YUI instance YUI().use("node", function (Y) { Y.one( "#yui2" ).on( "click", function () { Y.log( "I'm the second YUI instance" ); }); }); // Create a third YUI instance YUI().use("node", function (Y) { Y.one( "#yui3" ).on( "click", function () { Y.log( "And this is #3 YUI" ); }); }); // Create a separate YUI instance to listen to all instances' logging YUI().use("console", function (Y) { // Configure the Console's logSource to Y.Global to make it universal new Y.Console({ logSource: Y.Global, style: 'block', newestOnTop: false, width: "250px" }).render( "#yconsole" ); });

#### CSS

    #demo .first button {    margin-bottom: 2em;} #demo .yui3-console .yui3-console-title {    border: 0 none;    color: #000;    font-size: 13px;    font-weight: bold;    margin: 0;    text-transform: none;}#demo .yui3-console .yui3-console-entry-meta {    margin: 0;}

    #demo .first button {
        margin-bottom: 2em;
    }

    #demo .yui3-console .yui3-console-title {
        border: 0 none;
        color: #000;
        font-size: 13px;
        font-weight: bold;
        margin: 0;
        text-transform: none;
    }
    #demo .yui3-console .yui3-console-entry-meta {
        margin: 0;
    }

#demo .first button { margin-bottom: 2em; } #demo .yui3-console .yui3-console-title { border: 0 none; color: #000; font-size: 13px; font-weight: bold; margin: 0; text-transform: none; } #demo .yui3-console .yui3-console-entry-meta { margin: 0; }

Copyright © 2010 Yahoo! Inc. All rights reserved.

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