|
1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="utf-8"> |
|
5 <title>Example: Creating a Console for Debugging</title> |
|
6 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
7 <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
8 <link rel="stylesheet" href="../assets/css/main.css"> |
|
9 <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
10 <link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
11 <script src="../../build/yui/yui-min.js"></script> |
|
12 |
|
13 </head> |
|
14 <body> |
|
15 <!-- |
|
16 <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> |
|
17 --> |
|
18 <div id="doc"> |
|
19 <div id="hd"> |
|
20 <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
21 </div> |
|
22 |
|
23 |
|
24 <h1>Example: Creating a Console for Debugging</h1> |
|
25 <div class="yui3-g"> |
|
26 <div class="yui3-u-3-4"> |
|
27 <div id="main"> |
|
28 <div class="content"><style scoped> |
|
29 #basic, #add_to_bottom { |
|
30 margin-bottom: 1em; |
|
31 } |
|
32 |
|
33 #demo .yui3-console .yui3-console-title { |
|
34 border: 0 none; |
|
35 color: #000; |
|
36 font-size: 13px; |
|
37 font-weight: bold; |
|
38 margin: 0; |
|
39 text-transform: none; |
|
40 } |
|
41 #demo .yui3-console .yui3-console-entry-meta { |
|
42 margin: 0; |
|
43 } |
|
44 </style> |
|
45 |
|
46 |
|
47 |
|
48 <div class="intro"> |
|
49 <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> |
|
50 </div> |
|
51 |
|
52 <div class="example yui3-skin-sam"> |
|
53 <form> |
|
54 <div id="demo" class="yui3-skin-sam"> |
|
55 <h4>Basic Console</h4> |
|
56 <div id="basic"></div> |
|
57 <p> |
|
58 <button type="button" id="toggle_basic">hide console</button> |
|
59 </p> |
|
60 |
|
61 <h4>New messages added to bottom</h4> |
|
62 <div id="add_to_bottom"></div> |
|
63 <p> |
|
64 <button type="button" id="toggle_atb">show console</button> |
|
65 </p> |
|
66 |
|
67 <h4>Custom strings</h4> |
|
68 <p><em>Rendered in default location (top right)</em></p> |
|
69 <p> |
|
70 <button type="button" id="toggle_cstrings">show console</button> |
|
71 </p> |
|
72 |
|
73 <h4>Log some messages</h4> |
|
74 <p> |
|
75 <input type="text" id="info_text" value="I'm an info message!"> |
|
76 <input type="submit" id="info">log info message</button> |
|
77 </p> |
|
78 <p> |
|
79 <input type="text" id="warn_text" value="I'm a warning!"> |
|
80 <input type="submit" id="warn">log warning</button> |
|
81 </p> |
|
82 <p> |
|
83 <input type="text" id="error_text" value="I'm an error!"> |
|
84 <input type="submit" id="error">log error</button> |
|
85 </p> |
|
86 </div> |
|
87 </form> |
|
88 <script type="text/javascript"> |
|
89 // Create a YUI instance and request the console module and its dependencies |
|
90 YUI().use("console", "console-filters", "dd-plugin", function (Y) { |
|
91 |
|
92 // Create and render the three Console instances |
|
93 var basic, newOnBottom, customStrings; |
|
94 |
|
95 basic = new Y.Console({ |
|
96 style: 'block' // keeps the Console in the page flow as a block element |
|
97 }).render( '#basic' ); |
|
98 |
|
99 newOnBottom = new Y.Console({ |
|
100 style: 'inline', // keeps the Console in the page flow as an inline element |
|
101 newestOnTop: false, |
|
102 visible: false |
|
103 }).render( "#add_to_bottom" ); |
|
104 |
|
105 customStrings = new Y.Console({ |
|
106 strings: { |
|
107 title : 'Draggable Console with filters!', |
|
108 pause : 'Wait', |
|
109 clear : 'Flush', |
|
110 collapse : 'Shrink', |
|
111 expand : 'Grow' |
|
112 }, |
|
113 visible: false |
|
114 }).plug(Y.Plugin.ConsoleFilters) |
|
115 .plug(Y.Plugin.Drag, { handles: ['.yui3-console-hd'] }) |
|
116 .render('#demo'); |
|
117 |
|
118 // Set up the button listeners |
|
119 function toggle(e,cnsl) { |
|
120 if (cnsl.get('visible')) { |
|
121 cnsl.hide(); |
|
122 this.set('innerHTML','show console'); |
|
123 } else { |
|
124 cnsl.show(); |
|
125 cnsl.syncUI(); // to handle any UI changes queued while hidden. |
|
126 this.set('innerHTML','hide console'); |
|
127 } |
|
128 } |
|
129 |
|
130 function report(e,type) { |
|
131 Y.log(this.get('value'),type); |
|
132 e.preventDefault(); |
|
133 } |
|
134 |
|
135 // Display a message in the Console for reference |
|
136 Y.log("Click the buttons below to log messages"); |
|
137 |
|
138 // Pass the corresponding Console instance to the handler as a second arg |
|
139 Y.on('click', toggle, '#toggle_basic', null, basic); |
|
140 Y.on('click', toggle, '#toggle_atb', null, newOnBottom); |
|
141 Y.on('click', toggle, '#toggle_cstrings', null, customStrings); |
|
142 |
|
143 // Set the context of the event handler to the input text node |
|
144 // for convenience and pass the message type as a second arg |
|
145 Y.on('click', report, '#info', Y.one('#info_text'), 'info'); |
|
146 Y.on('click', report, '#warn', Y.one('#warn_text'), 'warn'); |
|
147 Y.on('click', report, '#error', Y.one('#error_text'), 'error'); |
|
148 |
|
149 }); |
|
150 </script> |
|
151 |
|
152 </div> |
|
153 |
|
154 <h3>Markup not required</h3> |
|
155 <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> |
|
156 |
|
157 <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> |
|
158 |
|
159 <p>For the first two cases, we need to set up some markup. We'll throw in some placeholder content for the third.</p> |
|
160 |
|
161 <pre class="code prettyprint"><h4>Basic Console</h4> |
|
162 <div id="basic"></div> |
|
163 |
|
164 <h4>New messages added to bottom</h4> |
|
165 <div id="add_to_bottom"></div> |
|
166 |
|
167 <h4>Custom strings</h4> |
|
168 <p><em>Rendered in default location (top right corner of page)</em></p></pre> |
|
169 |
|
170 |
|
171 <p>Then instantiate the Console instances.</p> |
|
172 |
|
173 <pre class="code prettyprint">// Create a YUI instance and request the console module and its dependencies |
|
174 YUI().use("console", "console-filters", "dd-plugin", function (Y) { |
|
175 |
|
176 // Create and render the three Console instances |
|
177 var basic, newOnBottom, customStrings; |
|
178 |
|
179 basic = new Y.Console({ |
|
180 style: 'block' // keeps the Console in the page flow as a block element |
|
181 }).render( "#basic" ); // note the inline render() |
|
182 |
|
183 newOnBottom = new Y.Console({ |
|
184 style: 'inline', // keeps the Console in the page flow as an inline element |
|
185 newestOnTop: false, |
|
186 visible: false // hidden at instantiation |
|
187 }).render( "#add_to_bottom" ); |
|
188 |
|
189 customStrings = new Y.Console({ |
|
190 strings: { |
|
191 title : 'Console with custom strings!', |
|
192 pause : 'Wait', |
|
193 clear : 'Flush', |
|
194 collapse : 'Shrink', |
|
195 expand : 'Grow' |
|
196 }, |
|
197 visible: false // hidden at instantiation |
|
198 }).plug(Y.Plugin.ConsoleFilters) |
|
199 .plug(Y.Plugin.Drag, { handles: ['.yui3-console-hd'] }) |
|
200 .render(); |
|
201 |
|
202 });</pre> |
|
203 |
|
204 |
|
205 <h3>Log some messages</h3> |
|
206 <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> |
|
207 |
|
208 <pre class="code prettyprint">// Create a YUI instance and request the console module and its dependencies |
|
209 YUI().use("console", "console-filters", "dd-plugin", function (Y) { |
|
210 |
|
211 // Create and render the three Console instances |
|
212 var basic, newOnBottom, customStrings; |
|
213 |
|
214 ... |
|
215 |
|
216 function report(e,type) { |
|
217 Y.log(this.get('value'),type); |
|
218 } |
|
219 |
|
220 // Set the context of the event handler to the input text node |
|
221 // for convenience and pass the message type as a second arg |
|
222 Y.on('click', report, '#info', Y.one('#info_text'), 'info'); |
|
223 Y.on('click', report, '#warn', Y.one('#warn_text'), 'warn'); |
|
224 Y.on('click', report, '#error', Y.one('#error_text'), 'error'); |
|
225 |
|
226 });</pre> |
|
227 |
|
228 |
|
229 <h3 id="full_code_listing">Full Code Listing</h3> |
|
230 |
|
231 <h4>Markup</h4> |
|
232 |
|
233 <pre class="code prettyprint"><form> |
|
234 <div id="demo" class="yui3-skin-sam"> |
|
235 <h4>Basic Console</h4> |
|
236 <div id="basic"></div> |
|
237 <p> |
|
238 <button type="button" id="toggle_basic">hide console</button> |
|
239 </p> |
|
240 |
|
241 <h4>New messages added to bottom</h4> |
|
242 <div id="add_to_bottom"></div> |
|
243 <p> |
|
244 <button type="button" id="toggle_atb">show console</button> |
|
245 </p> |
|
246 |
|
247 <h4>Custom strings</h4> |
|
248 <p><em>Rendered in default location (top right)</em></p> |
|
249 <p> |
|
250 <button type="button" id="toggle_cstrings">show console</button> |
|
251 </p> |
|
252 |
|
253 <h4>Log some messages</h4> |
|
254 <p> |
|
255 <input type="text" id="info_text" value="I'm an info message!"> |
|
256 <input type="submit" id="info">log info message</button> |
|
257 </p> |
|
258 <p> |
|
259 <input type="text" id="warn_text" value="I'm a warning!"> |
|
260 <input type="submit" id="warn">log warning</button> |
|
261 </p> |
|
262 <p> |
|
263 <input type="text" id="error_text" value="I'm an error!"> |
|
264 <input type="submit" id="error">log error</button> |
|
265 </p> |
|
266 </div> |
|
267 </form></pre> |
|
268 |
|
269 |
|
270 <h4>JavaScript</h4> |
|
271 |
|
272 <pre class="code prettyprint"><script type="text/javascript"> |
|
273 // Create a YUI instance and request the console module and its dependencies |
|
274 YUI().use("console", "console-filters", "dd-plugin", function (Y) { |
|
275 |
|
276 // Create and render the three Console instances |
|
277 var basic, newOnBottom, customStrings; |
|
278 |
|
279 basic = new Y.Console({ |
|
280 style: 'block' // keeps the Console in the page flow as a block element |
|
281 }).render( '#basic' ); |
|
282 |
|
283 newOnBottom = new Y.Console({ |
|
284 style: 'inline', // keeps the Console in the page flow as an inline element |
|
285 newestOnTop: false, |
|
286 visible: false |
|
287 }).render( "#add_to_bottom" ); |
|
288 |
|
289 customStrings = new Y.Console({ |
|
290 strings: { |
|
291 title : 'Draggable Console with filters!', |
|
292 pause : 'Wait', |
|
293 clear : 'Flush', |
|
294 collapse : 'Shrink', |
|
295 expand : 'Grow' |
|
296 }, |
|
297 visible: false |
|
298 }).plug(Y.Plugin.ConsoleFilters) |
|
299 .plug(Y.Plugin.Drag, { handles: ['.yui3-console-hd'] }) |
|
300 .render('#demo'); |
|
301 |
|
302 // Set up the button listeners |
|
303 function toggle(e,cnsl) { |
|
304 if (cnsl.get('visible')) { |
|
305 cnsl.hide(); |
|
306 this.set('innerHTML','show console'); |
|
307 } else { |
|
308 cnsl.show(); |
|
309 cnsl.syncUI(); // to handle any UI changes queued while hidden. |
|
310 this.set('innerHTML','hide console'); |
|
311 } |
|
312 } |
|
313 |
|
314 function report(e,type) { |
|
315 Y.log(this.get('value'),type); |
|
316 e.preventDefault(); |
|
317 } |
|
318 |
|
319 // Display a message in the Console for reference |
|
320 Y.log("Click the buttons below to log messages"); |
|
321 |
|
322 // Pass the corresponding Console instance to the handler as a second arg |
|
323 Y.on('click', toggle, '#toggle_basic', null, basic); |
|
324 Y.on('click', toggle, '#toggle_atb', null, newOnBottom); |
|
325 Y.on('click', toggle, '#toggle_cstrings', null, customStrings); |
|
326 |
|
327 // Set the context of the event handler to the input text node |
|
328 // for convenience and pass the message type as a second arg |
|
329 Y.on('click', report, '#info', Y.one('#info_text'), 'info'); |
|
330 Y.on('click', report, '#warn', Y.one('#warn_text'), 'warn'); |
|
331 Y.on('click', report, '#error', Y.one('#error_text'), 'error'); |
|
332 |
|
333 }); |
|
334 </script></pre> |
|
335 |
|
336 |
|
337 <h4>CSS</h4> |
|
338 |
|
339 <pre class="code prettyprint"><style scoped> |
|
340 #basic, #add_to_bottom { |
|
341 margin-bottom: 1em; |
|
342 } |
|
343 |
|
344 #demo .yui3-console .yui3-console-title { |
|
345 border: 0 none; |
|
346 color: #000; |
|
347 font-size: 13px; |
|
348 font-weight: bold; |
|
349 margin: 0; |
|
350 text-transform: none; |
|
351 } |
|
352 #demo .yui3-console .yui3-console-entry-meta { |
|
353 margin: 0; |
|
354 } |
|
355 </style></pre> |
|
356 |
|
357 |
|
358 </div> |
|
359 </div> |
|
360 </div> |
|
361 |
|
362 <div class="yui3-u-1-4"> |
|
363 <div class="sidebar"> |
|
364 |
|
365 |
|
366 |
|
367 <div class="sidebox"> |
|
368 <div class="hd"> |
|
369 <h2 class="no-toc">Examples</h2> |
|
370 </div> |
|
371 |
|
372 <div class="bd"> |
|
373 <ul class="examples"> |
|
374 |
|
375 |
|
376 <li data-description="The basics of setting up a Console"> |
|
377 <a href="console-basic.html">Creating a Console for Debugging</a> |
|
378 </li> |
|
379 |
|
380 |
|
381 |
|
382 <li data-description="Using your YUI instance configuration to filter which messages are reported in the Console"> |
|
383 <a href="console-yui-config.html">YUI Configuration to Filter Log Messages</a> |
|
384 </li> |
|
385 |
|
386 |
|
387 |
|
388 <li data-description="Using the Console's logSource attribute to consolidate log messages from multiple YUI instances into one Console"> |
|
389 <a href="console-global.html">Creating a Universal Console</a> |
|
390 </li> |
|
391 |
|
392 |
|
393 |
|
394 |
|
395 </ul> |
|
396 </div> |
|
397 </div> |
|
398 |
|
399 |
|
400 |
|
401 <div class="sidebox"> |
|
402 <div class="hd"> |
|
403 <h2 class="no-toc">Examples That Use This Component</h2> |
|
404 </div> |
|
405 |
|
406 <div class="bd"> |
|
407 <ul class="examples"> |
|
408 |
|
409 |
|
410 |
|
411 |
|
412 |
|
413 |
|
414 |
|
415 |
|
416 <li data-description="Adding the ConsoleFilters plugin to a Console instance for more granular run time log message filtering"> |
|
417 <a href="../console-filters/console-filters-intro.html">Using the ConsoleFilters Plugin</a> |
|
418 </li> |
|
419 |
|
420 |
|
421 </ul> |
|
422 </div> |
|
423 </div> |
|
424 |
|
425 </div> |
|
426 </div> |
|
427 </div> |
|
428 </div> |
|
429 |
|
430 <script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
431 <script>prettyPrint();</script> |
|
432 |
|
433 <script> |
|
434 YUI.Env.Tests = { |
|
435 examples: [], |
|
436 project: '../assets', |
|
437 assets: '../assets/console', |
|
438 name: 'console-basic', |
|
439 title: 'Creating a Console for Debugging', |
|
440 newWindow: '', |
|
441 auto: false |
|
442 }; |
|
443 YUI.Env.Tests.examples.push('console-basic'); |
|
444 YUI.Env.Tests.examples.push('console-yui-config'); |
|
445 YUI.Env.Tests.examples.push('console-global'); |
|
446 YUI.Env.Tests.examples.push('console-filters-intro'); |
|
447 |
|
448 </script> |
|
449 <script src="../assets/yui/test-runner.js"></script> |
|
450 |
|
451 |
|
452 |
|
453 </body> |
|
454 </html> |