This example walks through the basics of setting up and logging messages to a YUI Console instance. Three Console instances are created with slightly different configurations. All calls to Y.log(..) will be broadcast to every Console.
The primary purpose of the Console is to aid in debugging your application. As such, it doesn't make much sense to require your page to include markup for something that is not bound for production.
However, Console is built on the Widget framework, so it can be rendered into a containing element just as any other Widget. We'll do that for the first two Consoles, then for the third we'll call render with no input, allowing the default behavior.
For the first two cases, we need to set up some markup. We'll throw in some placeholder content for the third.
<h4>Basic Console</h4> <div id="basic"></div> <h4>New messages added to bottom</h4> <div id="add_to_bottom"></div> <h4>Custom strings</h4> <p><em>Rendered in default location (top right corner of page)</em></p>
Then instantiate the Console instances.
// Create a YUI instance and request the console module and its dependencies
YUI().use("console", "console-filters", "dd-plugin", function (Y) {
// Create and render the three Console instances
var basic, newOnBottom, customStrings;
basic = new Y.Console({
style: 'block' // keeps the Console in the page flow as a block element
}).render( "#basic" ); // note the inline render()
newOnBottom = new Y.Console({
style: 'inline', // keeps the Console in the page flow as an inline element
newestOnTop: false,
visible: false // hidden at instantiation
}).render( "#add_to_bottom" );
customStrings = new Y.Console({
strings: {
title : 'Console with custom strings!',
pause : 'Wait',
clear : 'Flush',
collapse : 'Shrink',
expand : 'Grow'
},
visible: false // hidden at instantiation
}).plug(Y.Plugin.ConsoleFilters)
.plug(Y.Plugin.Drag, { handles: ['.yui3-console-hd'] })
.render();
});
In your code, inserting calls to Y.log(..) will cause the content of those log messages to be broadcast to every Console instance present in the YUI instance. We'll illustrate this by creating some buttons to log various types of messages.
// Create a YUI instance and request the console module and its dependencies
YUI().use("console", "console-filters", "dd-plugin", function (Y) {
// Create and render the three Console instances
var basic, newOnBottom, customStrings;
...
function report(e,type) {
Y.log(this.get('value'),type);
}
// Set the context of the event handler to the input text node
// for convenience and pass the message type as a second arg
Y.on('click', report, '#info', Y.one('#info_text'), 'info');
Y.on('click', report, '#warn', Y.one('#warn_text'), 'warn');
Y.on('click', report, '#error', Y.one('#error_text'), 'error');
});
<form>
<div id="demo" class="yui3-skin-sam">
<h4>Basic Console</h4>
<div id="basic"></div>
<p>
<button type="button" id="toggle_basic">hide console</button>
</p>
<h4>New messages added to bottom</h4>
<div id="add_to_bottom"></div>
<p>
<button type="button" id="toggle_atb">show console</button>
</p>
<h4>Custom strings</h4>
<p><em>Rendered in default location (top right)</em></p>
<p>
<button type="button" id="toggle_cstrings">show console</button>
</p>
<h4>Log some messages</h4>
<p>
<input type="text" id="info_text" value="I'm an info message!">
<input type="submit" id="info">log info message</button>
</p>
<p>
<input type="text" id="warn_text" value="I'm a warning!">
<input type="submit" id="warn">log warning</button>
</p>
<p>
<input type="text" id="error_text" value="I'm an error!">
<input type="submit" id="error">log error</button>
</p>
</div>
</form>
<script type="text/javascript">
// Create a YUI instance and request the console module and its dependencies
YUI().use("console", "console-filters", "dd-plugin", function (Y) {
// Create and render the three Console instances
var basic, newOnBottom, customStrings;
basic = new Y.Console({
style: 'block' // keeps the Console in the page flow as a block element
}).render( '#basic' );
newOnBottom = new Y.Console({
style: 'inline', // keeps the Console in the page flow as an inline element
newestOnTop: false,
visible: false
}).render( "#add_to_bottom" );
customStrings = new Y.Console({
strings: {
title : 'Draggable Console with filters!',
pause : 'Wait',
clear : 'Flush',
collapse : 'Shrink',
expand : 'Grow'
},
visible: false
}).plug(Y.Plugin.ConsoleFilters)
.plug(Y.Plugin.Drag, { handles: ['.yui3-console-hd'] })
.render('#demo');
// Set up the button listeners
function toggle(e,cnsl) {
if (cnsl.get('visible')) {
cnsl.hide();
this.set('innerHTML','show console');
} else {
cnsl.show();
cnsl.syncUI(); // to handle any UI changes queued while hidden.
this.set('innerHTML','hide console');
}
}
function report(e,type) {
Y.log(this.get('value'),type);
e.preventDefault();
}
// Display a message in the Console for reference
Y.log("Click the buttons below to log messages");
// Pass the corresponding Console instance to the handler as a second arg
Y.on('click', toggle, '#toggle_basic', null, basic);
Y.on('click', toggle, '#toggle_atb', null, newOnBottom);
Y.on('click', toggle, '#toggle_cstrings', null, customStrings);
// Set the context of the event handler to the input text node
// for convenience and pass the message type as a second arg
Y.on('click', report, '#info', Y.one('#info_text'), 'info');
Y.on('click', report, '#warn', Y.one('#warn_text'), 'warn');
Y.on('click', report, '#error', Y.one('#error_text'), 'error');
});
</script>
<style scoped>
#basic, #add_to_bottom {
margin-bottom: 1em;
}
#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;
}
</style>