YUI 3.x Home -

YUI Library Examples: Plugin.ConsoleFilters: Using the ConsoleFilters plugin

Plugin.ConsoleFilters: Using the ConsoleFilters plugin

This example illustrates how to use and configure the ConsoleFilters plugin for Console. The debug versions of YUI module files are used, so standard YUI debugging messages are broadcast to the Console.

Use the checkboxes in the Console footer to control which messages are displayed or hidden. Click the "Log a message" button to call Y.log using a custom category and source.

Note how new filter checkboxes are added when a new category or source are received by the Console, for example when clicking on the "Log a message" button.

View example in new window.

Configure the YUI instance for debug mode

Only the module-debug.js versions of module files include log statements, so we'll set up our YUI instance's filter property to "debug". We'll also reduce the noise somewhat by specifying a logInclude list.

  1. YUI({ 
  2.     base: '../../build/',
  3.     filter: 'debug',
  4.     logInclude: {
  5.         event: true,
  6.         attribute: true,
  7.         base: true,
  8.         widget: true,
  9.         node: true,
  10.         MyApp: true  // This must be included for the custom source message
  11.     },
  12.     timeout: 10000
  13. }).use("console-filters", function (Y) { ... });
YUI({ 
    base: '../../build/',
    filter: 'debug',
    logInclude: {
        event: true,
        attribute: true,
        base: true,
        widget: true,
        node: true,
        MyApp: true  // This must be included for the custom source message
    },
    timeout: 10000
}).use("console-filters", function (Y) { ... });

Create the Console and plug in ConsoleFilters

All that's left to do now is plugin in the ConsoleFilters plugin. This can be done in one of a few ways.

  1. // create the console instance
  2. var yconsole = new Y.Console({
  3.     boundingBox: '#console',
  4.     height: '400px',
  5.     width: '450px',
  6.     newestOnTop: false,
  7.     plugins: [ Y.Plugin.ConsoleFilters ]
  8. }).render();
  9.  
  10. // unknown categories and sources are allowed.
  11. yconsole.filter.hideCategory('error');
  12.  
  13. // hide and show methods support N arguments.
  14. yconsole.filter.hideSource('attribute','widget');
// create the console instance
var yconsole = new Y.Console({
    boundingBox: '#console',
    height: '400px',
    width: '450px',
    newestOnTop: false,
    plugins: [ Y.Plugin.ConsoleFilters ]
}).render();
 
// unknown categories and sources are allowed.
yconsole.filter.hideCategory('error');
 
// hide and show methods support N arguments.
yconsole.filter.hideSource('attribute','widget');

Alternatively, you can attach the ConsoleFilters plugin after instantiation. This version also shows how to apply initial category and source filter states.

  1. var yconsole = new Y.Console({
  2.     boundingBox: '#console',
  3.     height: '400px',
  4.     width: '450px',
  5.     newestOnTop: false
  6. }).plug(Y.Plugin.ConsoleFilters, {
  7.     category: {
  8.         error: false
  9.     },
  10.     source: {
  11.         attribute: false,
  12.         widget: false
  13.     }
  14. }).render();
  15. </script>
var yconsole = new Y.Console({
    boundingBox: '#console',
    height: '400px',
    width: '450px',
    newestOnTop: false
}).plug(Y.Plugin.ConsoleFilters, {
    category: {
        error: false
    },
    source: {
        attribute: false,
        widget: false
    }
}).render();
</script>

Full Code Listing

Markup

  1. <div id="demo">
  2.     <div id="yconsole"></div>
  3.     <button id="log" type="button">Log a message</button>
  4.     <button id="toggle_info" type="button">Hide info messages</button>
  5. </div>
<div id="demo">
    <div id="yconsole"></div>
    <button id="log" type="button">Log a message</button>
    <button id="toggle_info" type="button">Hide info messages</button>
</div>

JavaScript

  1. // Create a YUI instance and request the console module and its dependencies
  2. YUI({base:"../../build/", timeout: 10000, filter:"debug", logInclude: {event:true, attribute:true, node:true, base:true, widget:true, MyApp:true}}).use("console", "console-filters", function (Y) {
  3.  
  4. // create the console instance
  5. var yconsole = new Y.Console({
  6.     boundingBox: '#yconsole',
  7.     height: '400px',
  8.     width: '450px',
  9.     newestOnTop: false,
  10.     style: 'block',
  11.     plugins: [ Y.Plugin.ConsoleFilters ]
  12. }).render();
  13.  
  14. // unknown categories and sources are allowed.
  15. yconsole.filter.hideCategory('error');
  16.  
  17. // hide and show methods support N arguments.
  18. yconsole.filter.hideSource('attribute','widget');
  19.  
  20. /* Alternately
  21. var yconsole = new Y.Console({
  22.     boundingBox: '#console',
  23.     height: '400px',
  24.     width: '450px',
  25.     style: 'block',
  26.     newestOnTop: false
  27. }).plug(Y.Plugin.ConsoleFilters, {
  28.     category: {
  29.         error: false
  30.     },
  31.     source: {
  32.         attribute: false,
  33.         widget: false
  34.     }
  35. }).render();
  36. */
  37.  
  38. // Broadcast a log message from a button that uses a custom category and source
  39. Y.on('click', function () {
  40.     Y.log('Logging a message to the Console','my_stuff','MyApp');
  41. },'#log');
  42.  
  43. // It is also possible to set the filter's subattributes directly
  44. Y.on('click', function () {
  45.     var current = yconsole.filter.get('category.info');
  46.  
  47.     yconsole.filter.set('category.info', !current);
  48.  
  49.     this.set('text', (current ? 'Show' : 'Hide') + ' info messages');
  50. },'#toggle_info');
  51.  
  52. });
// Create a YUI instance and request the console module and its dependencies
YUI({base:"../../build/", timeout: 10000, filter:"debug", logInclude: {event:true, attribute:true, node:true, base:true, widget:true, MyApp:true}}).use("console", "console-filters", function (Y) {
 
// create the console instance
var yconsole = new Y.Console({
    boundingBox: '#yconsole',
    height: '400px',
    width: '450px',
    newestOnTop: false,
    style: 'block',
    plugins: [ Y.Plugin.ConsoleFilters ]
}).render();
 
// unknown categories and sources are allowed.
yconsole.filter.hideCategory('error');
 
// hide and show methods support N arguments.
yconsole.filter.hideSource('attribute','widget');
 
/* Alternately
var yconsole = new Y.Console({
    boundingBox: '#console',
    height: '400px',
    width: '450px',
    style: 'block',
    newestOnTop: false
}).plug(Y.Plugin.ConsoleFilters, {
    category: {
        error: false
    },
    source: {
        attribute: false,
        widget: false
    }
}).render();
*/
 
// Broadcast a log message from a button that uses a custom category and source
Y.on('click', function () {
    Y.log('Logging a message to the Console','my_stuff','MyApp');
},'#log');
 
// It is also possible to set the filter's subattributes directly
Y.on('click', function () {
    var current = yconsole.filter.get('category.info');
 
    yconsole.filter.set('category.info', !current);
 
    this.set('text', (current ? 'Show' : 'Hide') + ' info messages');
},'#toggle_info');
 
});

CSS

  1. #console {
  2.     margin: 0 auto 1em;
  3. }
  4.  
  5. // To override some styles applied by the YDN chrome
  6. #demo .yui-console .yui-console-title {
  7.     border: 0 none;
  8.     color: #000;
  9.     font-size: 13px;
  10.     font-weight: bold;
  11.     margin: 0;
  12.     text-transform: none;
  13. }
  14. #demo .yui-console .yui-console-entry-meta {
  15.     margin: 0;
  16. }
#console {
    margin: 0 auto 1em;
}
 
// To override some styles applied by the YDN chrome
#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;
}

More Plugin.ConsoleFilters Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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