JavaScript DHTML/Development/Log
Содержание
- 1 Collapse log area(window)
- 2 Customized LogReader Example
- 3 <img src="./examples/logger/img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: Customizing LogReader
- 4 <img src="./examples/logger/img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: Reading Logs
- 5
- 6 <img src="./examples/logger/img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: YUI Integration Example
- 7 <img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: Writing Logs
Collapse log area(window)
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:x2="http://www.w3.org/TR/xhtml2" xmlns:role="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#" xmlns:state="http://www.w3.org/2005/07/aaa">
<head> <title>Yahoo! UI Library - Slider Widget</title> <link rel="stylesheet" type="text/css" href="./examples/slider/css/screen.css"> <style type="text/css">
.dragPanel {
position: absolute;
background-color: #eeeeee;
top: 200px;
left: 20px;
width: 320px;
height: 180px;
}
.dragPanel h4 {
background-color: #bbbbbb;
height: 10px;
margin: 0px;
cursor: move;
}
input { font-size: 85%}
.thumb {
cursor:default;
width:18px;
height:18px;
z-index: 9;
position: absolute;
left: 0px;
}
.bg {
position:absolute;
left:10px;
height:18px;
width:146px;
border: 0px solid #aaaaaa;
}
.bg span, .bg p {
cursor:default;
position: relative;
font-size: 2px;
overflow: hidden;
color: #aaaaaa;
top: 4px;
height: 10px;
width: 4px;
display: block;
float:left;
}
.bg span {
border-top:1px solid #cccccc;
border-bottom:1px solid #cccccc;
}
.bg .lb {
border-left:1px solid #cccccc;
}
.bg .rb {
border-right:1px solid #cccccc;
}
#valdiv { position:absolute; top: 100px; left:10px; }
#rBG {top:30px}
#gBG {top:50px}
#bBG {top:70px}
#swatch {
position:absolute;
left:160px;
top:34px;
height:50px;
width:50px;
border:1px solid #aaaaaa;
}
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script> <script type="text/javascript" src="./build/event/event.js" ></script> <script type="text/javascript" src="./build/logger/logger.js" ></script> <script type="text/javascript" src="./build/dom/dom.js" ></script> <script type="text/javascript" src="./build/animation/animation.js" ></script> <script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script> <script type="text/javascript" src="./examples/slider/js/color.js" ></script> <script type="text/javascript" src="./examples/slider/js/key.js" ></script> <script type="text/javascript" src="./build/slider/slider-debug.js" ></script></head> <body>
Slider Widget
<style type="text/css">
#logButtonHeader input { font-size: 80% }
/* logger default styles */ /* font size is controlled here: default 77% */
- yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */ .yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;} .yui-log p {margin:1px;padding:.1em;} .yui-log button {font-family:monospace;} .yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;} /* height is controlled here: default 20em*/ .yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;} .yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;} .yui-log .yui-log-ft .yui-log-categoryfilters {} .yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;} .yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;} .yui-log .yui-log-filtergrp {margin-right:.5em;} .yui-log .info {background-color:#A7CC25;} /* A7CC25 green */ .yui-log .warn {background-color:#F58516;} /* F58516 orange */ .yui-log .error {background-color:#E32F0B;} /* E32F0B red */ .yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */ .yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>
<script type="text/javascript">
YAHOO.example.logApp = function() {
return {
init: function() {
if (YAHOO.widget.Logger) {
var reader = new YAHOO.widget.LogReader( "logDiv",
{ newestOnTop: true, height: "400px" } );
reader._onClickPauseBtn(null, reader);
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
</script>
RGB Slider
The RGB slider implements three slider controls to generate a RGB color. The background color of each slider is also dynamically modified to reflect the colors that could be generated by moving a single slider.
The logger is paused for performance reasons. Click "Resume" to re-enable it.
<form name="rgbform" onsubmit="return userUpdate()">
RGB |
<input name="rval" id="rval" type="text" value="0" size="4" maxlength="4" /> <input name="gval" id="gval" type="text" value="0" size="4" maxlength="4" /> <input name="bval" id="bval" type="text" value="0" size="4" maxlength="4" /> |
<input type="button" value="Update" onclick="userUpdate()" /> |
Hex: # |
<input name="hexval" id="hexval" type="text" value="" size="6" maxlength="6" /> |
<input type="button" value="Update" onclick="userUpdate(true)" /> |
<input type="button" value="Reset" onclick="userReset()" /> |
</form>
<script type="text/javascript">
var r, g, b;
var dd;
function init() {
rgbInit();
}
function rgbInit() {
r = YAHOO.widget.Slider.getHorizSlider("rBG", "rthumb", 0, 128);
r.onChange = function(newVal) { listenerUpdate("r", newVal*2); };
g = YAHOO.widget.Slider.getHorizSlider("gBG", "gthumb", 0, 128);
g.onChange = function(newVal) { listenerUpdate("g", newVal*2); };
b = YAHOO.widget.Slider.getHorizSlider("bBG", "bthumb", 0, 128);
b.onChange = function(newVal) { listenerUpdate("b", newVal*2); };
initColor();
dd = new YAHOO.util.DD("ddRGB");
dd.setHandleElId("pickerHandle");
}
window.onload = init;
function initColor() {
var ch = " ";
d = document.createElement("P");
d.className = "rb";
r.getEl().appendChild(d);
d = document.createElement("P");
d.className = "rb";
g.getEl().appendChild(d);
d = document.createElement("P");
d.className = "rb";
b.getEl().appendChild(d);
for (var i=0; i<34; i++) {
d = document.createElement("SPAN");
d.id = "rBG" + i
// d.innerHTML = ch;
r.getEl().appendChild(d);
d = document.createElement("SPAN");
d.id = "gBG" + i
// d.innerHTML = ch;
g.getEl().appendChild(d);
d = document.createElement("SPAN");
d.id = "bBG" + i
// d.innerHTML = ch;
b.getEl().appendChild(d);
}
d = document.createElement("P");
d.className = "lb";
r.getEl().appendChild(d);
d = document.createElement("P");
d.className = "lb";
g.getEl().appendChild(d);
d = document.createElement("P");
d.className = "lb";
b.getEl().appendChild(d);
userUpdate();
}
function updateSliderColors() {
var curr, curg, curb;
curr = Math.min(r.getValue() * 2, 255);
curg = Math.min(g.getValue() * 2, 255);
curb = Math.min(b.getValue() * 2, 255);
YAHOO.log("updateSliderColor " + curr + ", " + curg + ", " + curb);
var d;
for (var i=0; i<34; i++) {
d = document.getElementById("rBG" + i);
d.style.backgroundColor =
"rgb(" + (i*8) + "," + curg + "," + curb + ")";
d = document.getElementById("gBG" + i);
d.style.backgroundColor =
"rgb(" + curr + "," + (i*8) + "," + curb + ")";
d = document.getElementById("bBG" + i);
d.style.backgroundColor =
"rgb(" + curr + "," + curg + "," + (i*8) + ")";
}
document.getElementById("swatch").style.backgroundColor =
"rgb(" + curr + "," + curg + "," + curb + ")";
document.getElementById("hexval").value =
YAHOO.util.Color.rgb2hex(curr, curg, curb);
}
function listenerUpdate(whichSlider, newVal) {
if (newVal == 256) {
newVal = 255;
}
document.getElementById(whichSlider + "val").value = newVal;
updateSliderColors();
}
function userUpdate(isHex) {
var v;
var f = document.forms["rgbform"];
if (isHex) {
var hexval = f["hexval"].value;
// shorthand #369
if (hexval.length == 3) {
var newval = "";
for (var i=0;i<3;i++) {
var a = hexval.substr(i, 1);
newval += a + a;
}
hexval = newval;
}
YAHOO.log("hexval:" + hexval);
if (hexval.length != 6) {
alert("illegal hex code: " + hexval);
} else {
var rgb = YAHOO.util.Color.hex2rgb(hexval);
// alert(rgb.toString());
if (YAHOO.util.Color.isValidRGB(rgb)) {
f["rval"].value = rgb[0];
f["gval"].value = rgb[1];
f["bval"].value = rgb[2];
}
}
}
// red
v = parseFloat(f["rval"].value);
v = ( isNaN(v) ) ? 0 : Math.round(v);
YAHOO.log("setValue, r: " + v);
r.setValue(Math.round(v) / 2);
v = parseFloat(f["gval"].value);
v = ( isNaN(v) ) ? 0 : Math.round(v);
YAHOO.log("setValue, g: " + g);
g.setValue(Math.round(v) / 2);
v = parseFloat(f["bval"].value);
v = ( isNaN(v) ) ? 0 : Math.round(v);
YAHOO.log("setValue, b: " + b);
b.setValue(Math.round(v) / 2);
updateSliderColors();
return false;
}
function userReset() {
var v;
var f = document.forms["rgbform"];
r.setValue(0);
g.setValue(0);
b.setValue(0);
}
</script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Customized LogReader Example
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Logger Widget :: Customizing LogReader</title> <link type="text/css" rel="stylesheet" href="./build/reset/reset.css"> <link type="text/css" rel="stylesheet" href="./build/fonts/fonts.css"> <link type="text/css" rel="stylesheet" href="./build/grids/grids.css"> <link type="text/css" rel="stylesheet" href="./examples/logger/css/examples.css"> <link type="text/css" rel="stylesheet" href="./docs/assets/dpSyntaxHighlighter.css"> <style type="text/css"> /* customized ylogger styles - logger.css is NOT called above */ /* font size is controlled here: default 77% */
- yui-log {position:relative;font-size:85%;}
/* width is controlled here: default 31em */ .yui-log {padding:1em;width:31em;background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;} .yui-log p {margin:1px;padding:.1em;} .yui-log button {font-family:monospace;} .yui-log .yui-log-hd {position:relative;margin-top:1em;padding:.5em;background-color:#575757;color:#FFF;} /* height is controlled here: default 20em*/ .yui-log .yui-log-bd {position:relative;background-color:#FFF;border:1px solid gray;overflow:auto;width:100%;height:10em;} .yui-log .yui-log-ft {position:relative;margin-top:.5em;margin-bottom:1em;} .yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;} .yui-log .info {background-color:#A7CC25;} /* A7CC25 green */ .yui-log .warn {background-color:#F58516;} /* F58516 orange */ .yui-log .error {background-color:#E32F0B;} /* E32F0B red */ .yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */ .yui-log .window {background-color:#F2E886;} /* F2E886 tan */ .yui-log .mytype {background-color:#FF99CC;} /* FF99CC pink */ </style> </head> <body>
<img src="./examples/logger/img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: Customizing LogReader
Customized LogReader Example
This LogReader implementation has been modified by changing some default CSS styles as well as modifying some properties through the constructor. In this example, the LogReader is placed in a fixed position at the bottom right of the screen. The height of each of the consoles has been made smaller, the font size has been bumped up, and the log messages of the second LogReader has been made more compact (i.e., the line break within each message has been removed).
<input id="yui-log-inputinfo" class="yui-log-input" type="text" value="Log an info message."> <button onclick="YAHOO.log(document.getElementById("yui-log-inputinfo").value,"info")">Log</button>
<input id="yui-log-inputwarn" class="yui-log-input" type="text" value="Log a warning."> <button onclick="YAHOO.log(document.getElementById("yui-log-inputwarn").value,"warn")">Log</button>
<input id="yui-log-inputerror" class="yui-log-input" type="text" value="Log an error."> <button onclick="YAHOO.log(document.getElementById("yui-log-inputerror").value,"error")">Log</button>
<input id="yui-log-inputtime" class="yui-log-input" type="text" value="Log a timing message."> <button onclick="YAHOO.log(document.getElementById("yui-log-inputtime").value,"time")">Log</button>
<input id="yui-log-inputwindow" class="yui-log-input" type="text" value="Log a window error."> <button onclick="someUndefinedFunction();">Log</button> (not supported in Opera, Safari)
<input id="yui-log-inputcustommsg" class="yui-log-input" type="text" value="Log a custom type message."> <input id="yui-log-inputcustomtype" type="text" value="mytype"> <button onclick="YAHOO.log(document.getElementById("yui-log-inputcustommsg").value,document.getElementById("yui-log-inputcustomtype").value)">Log</button>
<a href="javascript:YAHOO.example.LogReader.hideAllReaders();">Hide All LogReaders</a> || <a href="javascript:YAHOO.example.LogReader.showAllReaders();">Show All LogReaders</a>
<a href="javascript:YAHOO.widget.Logger.enableBrowserConsole();">Enable Output to console.log()</a> || <a href="javascript:YAHOO.widget.Logger.disableBrowserConsole();">Disable Output to console.log()</a>
<a href="javascript:YAHOO.widget.Logger.reset();">Reset Logger stack</a>
Sample Code
<textarea name="code" class="HTML" cols="60" rows="1">
<head>
<style type="text/css">
/* container is relatively positioned and
font size is adjusted here (default is 77%) */
#yui-log {position:relative;font-size:85%;}
/* width is controlled here: default 31em */
.yui-log {padding:1em;width:31em;background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {position:relative;margin-top:1em;padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {position:relative;background-color:#FFF;border:1px solid gray;overflow:auto;width:100%;height:10em;}
.yui-log .yui-log-ft {position:relative;margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
/* a style for a custom category */
.yui-log .mytype {background-color:#FF99CC;} /* FF99CC pink */
</style>
</head>
<body>
<script type="text/javascript">
myLogReader1 = new YAHOO.widget.LogReader("yui-log");
myLogReader2 = new YAHOO.widget.LogReader("yui-log",{compactOutput: true});
</script>
</body>
</textarea>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script> <script type="text/javascript" src="./build/dom/dom.js"></script> <script type="text/javascript" src="./build/event/event.js"></script> <script type="text/javascript" src="./build/logger/logger.js"></script>
<script type="text/javascript"> YAHOO.example.LogReader = function() {
var myLogReader1;
var myLogReader2;
return {
init: function() {
myLogReader1 = new YAHOO.widget.LogReader("yui-log");
myLogReader2 = new YAHOO.widget.LogReader("yui-log",{verboseOutput: false});
},
hideAllReaders: function() {
myLogReader1.hide();
myLogReader2.hide();
},
showAllReaders: function() {
myLogReader1.show();
myLogReader2.show();
}
};
}(); YAHOO.util.Event.onAvailable("yui-log",YAHOO.example.LogReader.init); </script> <script type="text/javascript" src="./docs/assets/dpSyntaxHighlighter.js"></script> <script type="text/javascript"> dp.SyntaxHighlighter.HighlightAll("code"); </script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Default LogReader Example
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Logger Widget :: Reading Logs</title> <link type="text/css" rel="stylesheet" href="./build/reset/reset.css"> <link type="text/css" rel="stylesheet" href="./build/fonts/fonts.css"> <link type="text/css" rel="stylesheet" href="./build/grids/grids.css"> <link type="text/css" rel="stylesheet" href="./build/logger/assets/logger.css"> <link type="text/css" rel="stylesheet" href="./examples/logger/css/examples.css"> <link type="text/css" rel="stylesheet" href="./docs/assets/dpSyntaxHighlighter.css" /> <style type="text/css"> .yui-log .mytype {background-color:#FF99CC;} </style> </head> <body>
<img src="./examples/logger/img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: Reading Logs
Default LogReader Example
With just a few lines of code, you can put a LogReader on any web page that displays log messages built into the YUI Library or custom log messages that you can insert into your own code. This example takes advantage of the YUI Library"s Drag and Drop utility to make the LogReader draggable.
<input id="yui-log-inputinfo" class="yui-log-input" type="text" value="Log an info message."> <button onclick="YAHOO.log(document.getElementById("yui-log-inputinfo").value,"info")">Log</button>
<input id="yui-log-inputwarn" class="yui-log-input" type="text" value="Log a warning."> <button onclick="YAHOO.log(document.getElementById("yui-log-inputwarn").value,"warn")">Log</button>
<input id="yui-log-inputerror" class="yui-log-input" type="text" value="Log an error."> <button onclick="YAHOO.log(document.getElementById("yui-log-inputerror").value,"error")">Log</button>
<input id="yui-log-inputtime" class="yui-log-input" type="text" value="Log a timing message."> <button onclick="YAHOO.log(document.getElementById("yui-log-inputtime").value,"time")">Log</button>
<input id="yui-log-inputwindow" class="yui-log-input" type="text" value="Log a window error."> <button onclick="someUndefinedFunction();">Log</button> (not supported in Opera, Safari)
<input id="yui-log-inputcustommsg" class="yui-log-input" type="text" value="Log a custom type message."> <input id="yui-log-inputcustomtype" type="text" value="mytype"> <button onclick="YAHOO.log(document.getElementById("yui-log-inputcustommsg").value,document.getElementById("yui-log-inputcustomtype").value)">Log</button>
<a href="javascript:YAHOO.example.LogReader.hideAllReaders();">Hide All LogReaders</a> || <a href="javascript:YAHOO.example.LogReader.showAllReaders();">Show All LogReaders</a>
<a href="javascript:YAHOO.widget.Logger.enableBrowserConsole();">Enable Output to console.log()</a> || <a href="javascript:YAHOO.widget.Logger.disableBrowserConsole();">Disable Output to console.log()</a>
<a href="javascript:YAHOO.widget.Logger.reset();">Reset Logger stack</a>
Sample Code
<textarea name="code" class="HTML" cols="60" rows="1">
<head>
<style type="text/css">
/* A style was defined for a custom category.
By convention, it is defined with narrow-scope
selectors to achieve namespacing*/
.yui-log .mytype {background-color:#FF99CC;}
</style>
</head>
<body>
<script type="text/javascript">
myLogReader1 = new YAHOO.widget.LogReader();
myLogReader2 = new YAHOO.widget.LogReader();
myLogReader2.newestOnTop = false;
myLogReader2.setTitle("Logger Console: Oldest > on > Top!");
</script>
</body>
</textarea>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script> <script type="text/javascript" src="./build/dom/dom.js"></script> <script type="text/javascript" src="./build/event/event.js"></script> <script type="text/javascript" src="./build/dragdrop/dragdrop.js"></script> <script type="text/javascript" src="./build/logger/logger.js"></script>
<script type="text/javascript"> YAHOO.example.LogReader = function() {
var myLogReader1;
var myLogReader2;
return {
init: function() {
myLogReader1 = new YAHOO.widget.LogReader(null, {verboseOutput:false});
myLogReader1.setTitle("Compact Output!");
myLogReader2 = new YAHOO.widget.LogReader(null, {newestOnTop:false});
myLogReader2.setTitle("Logger Console: Oldest > on > Top!");
},
hideAllReaders: function() {
myLogReader1.hide();
myLogReader2.hide();
},
showAllReaders: function() {
myLogReader1.show();
myLogReader2.show();
}
};
}(); YAHOO.util.Event.addListener(this,"load",YAHOO.example.LogReader.init); </script> <script type="text/javascript" src="./docs/assets/dpSyntaxHighlighter.js"></script> <script type="text/javascript"> dp.SyntaxHighlighter.HighlightAll("code"); </script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
JavaScript log debugger
<source lang="html4strict">
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Yahoo! UI Library - Tree Control</title> <link rel="stylesheet" type="text/css" href="./examples/treeview/css/screen.css"> </head>
<body onload="treeInit()"> <link rel="stylesheet" type="text/css" href="./examples/treeview/css/folders/tree.css">
Tree Control
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js"></script> <script type="text/javascript" src="./build/dom/dom.js"></script> <script type="text/javascript" src="./build/logger/logger.js"></script>
<script type="text/javascript" src="./build/treeview/treeview-debug.js" ></script> <style type="text/css"> /* logger default styles */ /* font size is controlled here: default 77% */
- yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */ .yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;} .yui-log p {margin:1px;padding:.1em;} .yui-log button {font-family:monospace;} .yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;} /* height is controlled here: default 20em*/ .yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;} .yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;} .yui-log .yui-log-ft .yui-log-categoryfilters {} .yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;} .yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;} .yui-log .yui-log-filtergrp {margin-right:.5em;} .yui-log .info {background-color:#A7CC25;} /* A7CC25 green */ .yui-log .warn {background-color:#F58516;} /* F58516 orange */ .yui-log .error {background-color:#E32F0B;} /* E32F0B red */ .yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */ .yui-log .window {background-color:#F2E886;} /* F2E886 tan */ </style>
<img class="ylogo" src="./examples/treeview/img/logo.gif" alt="" />
Examples
<script type="text/javascript">
YAHOO.example.logApp = function() {
var divId;
return {
init: function(p_divId, p_toggleElId, p_clearElId) {
divId = p_divId
},
onload: function() {
if (YAHOO.widget.Logger) {
new YAHOO.widget.LogReader( "logDiv", { height: "400px" } );
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
</script>
<form name="mainForm" action="javscript:;">
Folders
<a href="javascript:tree.expandAll()">Expand all</a> <a href="javascript:tree.collapseAll()">Collapse all</a>
</form>
</div>
<script type="text/javascript">
var tree;
var nodes = new Array();
var nodeIndex;
function treeInit() {
buildRandomTextNodeTree();
}
function buildRandomTextNodeTree() {
tree = new YAHOO.widget.TreeView("treeDiv1");
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
buildRandomTextBranch(tmpNode);
}
tree.draw();
}
var callback = null;
function buildRandomTextBranch(node) {
if (node.depth < 6) {
YAHOO.log("buildRandomTextBranch: " + node.index);
for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) {
var tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
buildRandomTextBranch(tmpNode);
}
}
}
</script>
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Using Logger to Debug YUI Library Components
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Logger Widget :: YUI Integration Example</title> <link type="text/css" rel="stylesheet" href="./build/reset/reset.css"> <link type="text/css" rel="stylesheet" href="./build/fonts/fonts.css"> <link type="text/css" rel="stylesheet" href="./build/grids/grids.css"> <link type="text/css" rel="stylesheet" href="./build/logger/assets/logger.css"> <link type="text/css" rel="stylesheet" href="./examples/logger/css/examples.css"> <link type="text/css" rel="stylesheet" href="./docs/assets/dpSyntaxHighlighter.css"> <style type="text/css">
#statesmod {position:relative;}
#statesautocomplete{position:relative;width:15em;margin-bottom:1em;}/* set width of widget here*/
#statesinput {width:100%;height:1.4em;}
#statescontainer {position:absolute;top:1.7em;width:100%}
#statescontainer .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
#statescontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#statescontainer ul {padding:5px 0;width:100%;}
#statescontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
#statescontainer li.yui-ac-highlight {background:#ff0;}
#statescontainer li.yui-ac-prehighlight {background:#FFFFCC;}
</style> </head> <body>
<img src="./examples/logger/img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: YUI Integration Example
Using Logger to Debug YUI Library Components
In this example, we have set up an instance of AutoComplete. By using the debug build of AutoComplete source code, we are able to instantiate a LogReader on this page and read the messages generated from the component. In order to place the LogReader in a convenient spot, we pass in a custom bottom value into its constructor.
<form onsubmit="return validateForm();">
Find a state:
<input id="statesinput">
</form>
Sample Code
<textarea name="code" class="HTML" cols="60" rows="1">
<script type="text/javascript">
///No custom CSS styles were defined.
// No custom markup was defined.
// We have first included the debug builds of YUI components
// event-debug.js and autocomplete-debug.js
// Then we can see log messages being output to our LogReader
var oLogReader = new YAHOO.widget.LogReader(null,{top:"4em",fontSize:"92%",width:"30em",height:"20em"});
</script>
</textarea>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script> <script type="text/javascript" src="./build/dom/dom.js"></script> <script type="text/javascript" src="./build/event/event-debug.js"></script> <script type="text/javascript" src="./build/animation/animation.js"></script> <script type="text/javascript" src="./build/autocomplete/autocomplete-debug.js"></script> <script type="text/javascript" src="./build/logger/logger.js"></script>
<script type="text/javascript">
var statesArray = [
"Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Dakota", "North Carolina", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"
]; </script>
<script type="text/javascript">
YAHOO.example.AutoCompleteLogger = function() {
return {
validateForm: function() {
// Validate form inputs here
return false;
},
init: function() {
// Instatiate LogReader
var oLogReader = new YAHOO.widget.LogReader(null,{top:"4em",fontSize:"92%",width:"30em",height:"20em"});
// Instantiate DataSource
var oACDS = new YAHOO.widget.DS_JSArray(statesArray);
// Instantiate AutoComplete
var oAutoComp = new YAHOO.widget.AutoComplete("statesinput","statescontainer", oACDS);
oAutoComp.queryDelay = 0;
oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
}
};
}(); YAHOO.util.Event.addListener(this,"load",YAHOO.example.AutoCompleteLogger.init); </script> <script type="text/javascript" src="./docs/assets/dpSyntaxHighlighter.js"></script> <script type="text/javascript"> dp.SyntaxHighlighter.HighlightAll("code"); </script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Writing Log Messages From Your Code
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Logger Widget :: Writing Logs</title> <link type="text/css" rel="stylesheet" href="./build/reset/reset.css"> <link type="text/css" rel="stylesheet" href="./build/fonts/fonts.css"> <link type="text/css" rel="stylesheet" href="./build/grids/grids.css"> <link type="text/css" rel="stylesheet" href="./build/logger/assets/logger.css"> <link type="text/css" rel="stylesheet" href="./examples/logger/css/examples.css"> <link type="text/css" rel="stylesheet" href="./docs/assets/dpSyntaxHighlighter.css"> </head> <body>
<img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: Writing Logs
Writing Log Messages From Your Code
In this example, we instanatiate a simple LogReader to display log messages. We use the global method YAHOO.log() to write simple messages, and we also instantiate a LogWriter instance to write messages from a custom-named source.
<input id="yui-log-inputinfo" class="yui-log-input" type="text" value="Log an info message."> <button id="btn_loginfo">Log this message</button>
<input id="yui-log-inputwarn" class="yui-log-input" type="text" value="Log a warning."> <button id="btn_logwarn">Log this message</button>
<input id="yui-log-inputerror" class="yui-log-input" type="text" value="Log an error."> <button id="btn_logerror">Log this message</button>
<input id="yui-log-inputtime" class="yui-log-input" type="text" value="Log a timing message."> <button id="btn_logtime">Log this message</button>
<input id="yui-log-inputwindow" class="yui-log-input" type="text" value="Log a window error."> <button onclick="someUndefinedFunction();">Log this message</button> (not supported in Opera, Safari)
<input id="yui-log-inputcustommsg" class="yui-log-input" type="text" value="Log a custom type message."> <input id="yui-log-inputcustomtype" type="text" value="myCategory"> <button id="btn_logcustom">Log this message with this category</button>
<input id="yui-log-inputsource" class="yui-log-input" type="text" value="SomeClass instance1"> <button id="btn_logsource">Generate some messages from a named source</button>
Sample Code
<textarea name="code" class="HTML" cols="60" rows="1">
<script type="text/javascript">
//No custom CSS styles were defined
//No custom markup was defined
// Instantiate a logreader and a logwriter
myLogReader = new YAHOO.widget.LogReader(null,{top:"10%",right:"10px"});
myLogWriter = new YAHOO.widget.LogWriter("myWriter");
// You can call the global function YAHOO.log() anytime, anywhere
YAHOO.log("Yahoo! is great"); // defaults to type "info"
YAHOO.log("Here is a warning", "warn");
YAHOO.log("Some error has occurred", "error");
YAHOO.log("Use timers to profile your code", "time");
myLogWriter.log("something","info");
myLogWriter.log("something","warn");
myLogWriter.log("something","error");
myLogWriter.log("something","time");
myLogWriter.log("something","custom");
</script>
</textarea>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script> <script type="text/javascript" src="./build/dom/dom.js"></script> <script type="text/javascript" src="./build/event/event.js"></script> <script type="text/javascript" src="./build/dragdrop/dragdrop.js"></script> <script type="text/javascript" src="./build/logger/logger.js"></script>
<script type="text/javascript"> YAHOO.example.LogWriter = function() {
var myLogReader;
var myLogWriter;
return {
init: function() {
// Instantiate a logreader and a logwriter
myLogReader = new YAHOO.widget.LogReader(null,{top:"10%",right:"10px"});
myLogWriter = new YAHOO.widget.LogWriter("myWriter");
// You can call the global function YAHOO.log() anytime, anywhere
YAHOO.log("Yahoo! is great"); // defaults to type "info"
YAHOO.log("Here is a warning", "warn");
YAHOO.log("Some error has occurred", "error");
YAHOO.log("Use timers to profile your code", "time");
// Define interesting moments that cause log messages to be written
var oSelf = YAHOO.example.LogWriter;
YAHOO.util.Event.addListener(document.getElementById("btn_loginfo"),"click",oSelf.onLogInfoClick);
YAHOO.util.Event.addListener(document.getElementById("btn_logwarn"),"click",oSelf.onLogWarnClick);
YAHOO.util.Event.addListener(document.getElementById("btn_logerror"),"click",oSelf.onLogErrorClick);
YAHOO.util.Event.addListener(document.getElementById("btn_logtime"),"click",oSelf.onLogTimeClick);
YAHOO.util.Event.addListener(document.getElementById("btn_logcustom"),"click",oSelf.onLogCustomClick);
YAHOO.util.Event.addListener(document.getElementById("btn_logsource"),"click",oSelf.onSourceWriterClick);
},
hideAllReaders: function() {
myLogReader.hide();
},
showAllReaders: function() {
myLogReader.show();
},
createNewLogWriter: function(source) {
// You can instantiate your own named logwriter and use it to write log messages
var newWriter = new YAHOO.widget.LogWriter(source);
newWriter.log("Doing great!"); // defaults to type "info"
newWriter.log("Giving a warning", "warn");
newWriter.log("Throwing an error", "error");
newWriter.log("Timing some code", "time");
},
onSourceWriterClick: function() {
YAHOO.example.LogWriter.createNewLogWriter(document.getElementById("yui-log-inputsource").value);
},
onLogInfoClick: function() {
myLogWriter.log(document.getElementById("yui-log-inputinfo").value,"info");
},
onLogWarnClick: function() {
myLogWriter.log(document.getElementById("yui-log-inputwarn").value,"warn");
},
onLogErrorClick: function() {
myLogWriter.log(document.getElementById("yui-log-inputerror").value,"error");
},
onLogTimeClick: function() {
myLogWriter.log(document.getElementById("yui-log-inputtime").value,"time");
},
onLogCustomClick: function() {
myLogWriter.log(document.getElementById("yui-log-inputcustommsg").value,document.getElementById("yui-log-inputcustomtype").value);
}
};
}(); YAHOO.util.Event.addListener(this,"load",YAHOO.example.LogWriter.init); </script> <script type="text/javascript" src="./docs/assets/dpSyntaxHighlighter.js"></script> <script type="text/javascript"> dp.SyntaxHighlighter.HighlightAll("code"); </script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
