<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example: Creating a Console for Debugging</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="../../build/yui/yui-min.js"></script>
</head>
<body>
<!--
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-->
<div id="doc">
<div id="hd">
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
</div>
<h1>Example: Creating a Console for Debugging</h1>
<div class="yui3-g">
<div class="yui3-u-3-4">
<div id="main">
<div class="content"><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>
<div class="intro">
<p>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 <code>Y.log(..)</code> will be broadcast to every Console.</p>
</div>
<div class="example yui3-skin-sam">
<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>
</div>
<h3>Markup not required</h3>
<p>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.</p>
<p><em>However</em>, 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 <code>render</code> with no input, allowing the default behavior.</p>
<p>For the first two cases, we need to set up some markup. We'll throw in some placeholder content for the third.</p>
<pre class="code prettyprint"><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></pre>
<p>Then instantiate the Console instances.</p>
<pre class="code prettyprint">// 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();
});</pre>
<h3>Log some messages</h3>
<p>In your code, inserting calls to <code>Y.log(..)</code> 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.</p>
<pre class="code prettyprint">// 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');
});</pre>
<h3 id="full_code_listing">Full Code Listing</h3>
<h4>Markup</h4>
<pre class="code prettyprint"><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></pre>
<h4>JavaScript</h4>
<pre class="code prettyprint"><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></pre>
<h4>CSS</h4>
<pre class="code prettyprint"><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></pre>
</div>
</div>
</div>
<div class="yui3-u-1-4">
<div class="sidebar">
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="The basics of setting up a Console">
<a href="console-basic.html">Creating a Console for Debugging</a>
</li>
<li data-description="Using your YUI instance configuration to filter which messages are reported in the Console">
<a href="console-yui-config.html">YUI Configuration to Filter Log Messages</a>
</li>
<li data-description="Using the Console's logSource attribute to consolidate log messages from multiple YUI instances into one Console">
<a href="console-global.html">Creating a Universal Console</a>
</li>
</ul>
</div>
</div>
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples That Use This Component</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Adding the ConsoleFilters plugin to a Console instance for more granular run time log message filtering">
<a href="../console-filters/console-filters-intro.html">Using the ConsoleFilters Plugin</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script>
YUI.Env.Tests = {
examples: [],
project: '../assets',
assets: '../assets/console',
name: 'console-basic',
title: 'Creating a Console for Debugging',
newWindow: '',
auto: false
};
YUI.Env.Tests.examples.push('console-basic');
YUI.Env.Tests.examples.push('console-yui-config');
YUI.Env.Tests.examples.push('console-global');
YUI.Env.Tests.examples.push('console-filters-intro');
</script>
<script src="../assets/yui/test-runner.js"></script>
</body>
</html>