1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly{{>console-basic-css}}
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<div class="intro">
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly <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 `Y.log(..)` will be broadcast to every Console.</p>
819e90d415ed17d59af3a247b2ad9d6feb0c21b5Luke Smith<div class="example yui3-skin-sam">
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly {{>console-basic-markup}}
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly {{>console-basic-js}}
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<h3>Markup not required</h3>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<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>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<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 `render` with no input, allowing the default behavior.</p>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<p>For the first two cases, we need to set up some markup. We'll throw in some placeholder content for the third.</p>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<h4>Basic Console</h4>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<div id="basic"></div>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<h4>New messages added to bottom</h4>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<div id="add_to_bottom"></div>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<h4>Custom strings</h4>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<p><em>Rendered in default location (top right corner of page)</em></p>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<p>Then instantiate the Console instances.</p>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly// Create a YUI instance and request the console module and its dependencies
b96d996309309541dc72ee198c96c06e1b16bbfeJenny DonnellyYUI().use("console", "console-filters", "dd-plugin", function (Y) {
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly// Create and render the three Console instances
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnellyvar basic, newOnBottom, customStrings;
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly style: 'block' // keeps the Console in the page flow as a block element
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly}).render( "#basic" ); // note the inline render()
b96d996309309541dc72ee198c96c06e1b16bbfeJenny DonnellynewOnBottom = new Y.Console({
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly style: 'inline', // keeps the Console in the page flow as an inline element
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly newestOnTop: false,
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly visible: false // hidden at instantiation
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly}).render( "#add_to_bottom" );
b96d996309309541dc72ee198c96c06e1b16bbfeJenny DonnellycustomStrings = new Y.Console({
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly title : 'Console with custom strings!',
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly pause : 'Wait',
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly clear : 'Flush',
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly collapse : 'Shrink',
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly expand : 'Grow'
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly visible: false // hidden at instantiation
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly .plug(Y.Plugin.Drag, { handles: ['.yui3-console-hd'] })
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<h3>Log some messages</h3>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<p>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.</p>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly// Create a YUI instance and request the console module and its dependencies
b96d996309309541dc72ee198c96c06e1b16bbfeJenny DonnellyYUI().use("console", "console-filters", "dd-plugin", function (Y) {
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly// Create and render the three Console instances
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnellyvar basic, newOnBottom, customStrings;
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnellyfunction report(e,type) {
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly// Set the context of the event handler to the input text node
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly// for convenience and pass the message type as a second arg
b96d996309309541dc72ee198c96c06e1b16bbfeJenny DonnellyY.on('click', report, '#info', Y.one('#info_text'), 'info');
b96d996309309541dc72ee198c96c06e1b16bbfeJenny DonnellyY.on('click', report, '#warn', Y.one('#warn_text'), 'warn');
b96d996309309541dc72ee198c96c06e1b16bbfeJenny DonnellyY.on('click', report, '#error', Y.one('#error_text'), 'error');
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<h3 id="full_code_listing">Full Code Listing</h3>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<h4>Markup</h4>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly{{>console-basic-markup}}
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<h4>JavaScript</h4>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly{{>console-basic-js}}
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly{{>console-basic-css}}