webgui/www/extras/yui/examples/logger/logwriter.html
2007-07-05 04:23:55 +00:00

177 lines
7.2 KiB
HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example: Logger - Writing Logs (YUI Library)</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/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="./css/examples.css">
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css" />
<style type="text/css">
.yui-log-container {position:absolute;top:1em;right:1em;}
.yui-log .mytype {background-color:#FF99CC;}
</style>
</head>
<body>
<div id="hd">
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: Writing Logs</h1>
</div>
<div id="bd">
<!-- Intro -->
<div id="intro">
<h3>Writing Logs</h3>
<p>The following examples demonstrate how to assign
different categories and sources to your log messages.</p>
</div>
<!-- Example: Global -->
<div class="example">
<div class="content">
<h4>Example: Log messages into different categories</h4>
<p>By default, unsourced log messages get assigned to a "global" bucket.</p>
<ul id="globals">
<li><a href="#" class="global info">Log an "info" message.</a></li>
<li><a href="#" class="global warn">Log a "warn" message.</a></li>
<li><a href="#" class="global error">Log an "error" message.</a></li>
<li><a href="#" class="global time">Log a "time" message.</a></li>
</ul>
<!-- Sample code begins -->
<div class="code">
<h4>Sample Code</h4>
<textarea name="code" class="JScript" cols="60" rows="1">
YAHOO.log("This is an \"info\" message.", "info"); // or just YAHOO.log("This is an \"info\" message.");
YAHOO.log("This is a \"warn\" message.", "warn");
YAHOO.log("This is an \"error\" message.", "error");
YAHOO.log("This is a \"time\" message.", "time");
</textarea>
</div>
<!-- Code sample ends -->
</div>
</div>
<!-- Example: Sourced -->
<div class="example">
<div class="content">
<h4>Example: Log messages into different categories and assign them
to a source called <code>myBucket</code></h4>
<p>You can assign a source to a log message by passing it in as
the third argument to <code>YAHOO.log()</code>.</p>
<ul>
<li><a href="#" class="myBucket info">Log an "info" message.</a></li>
<li><a href="#" class="myBucket warn">Log a "warn" message.</a></li>
<li><a href="#" class="myBucket error">Log an "error" message.</a></li>
<li><a href="#" class="myBucket time">Log a "time" message.</a></li>
</ul>
<!-- Sample code begins -->
<div class="code">
<h4>Sample Code</h4>
<textarea name="code" class="JScript" cols="60" rows="1">
YAHOO.log("This is an \"info\" message.", "info", "myBucket");
YAHOO.log("This is a \"warn\" message.", "warn", "myBucket");
YAHOO.log("This is an \"error\" message.", "error", "myBucket");
YAHOO.log("This is a \"time\" message.", "time", "myBucket");
</textarea>
</div>
<!-- Code sample ends -->
</div>
</div>
<!-- Example: Classed -->
<div class="example">
<div class="content">
<h4>Example: Create a LogWriter write log messages from a class
named <code>MyClass</code></h4>
<p>If you plan to assign many log messages to the same source (such
as from a class), it may be easier to write log messages from a
LogWriter instance.</p>
<ul>
<li><a href="#" class="MyClass info">Log an "info" message.</a></li>
<li><a href="#" class="MyClass warn">Log a "warn" message.</a></li>
<li><a href="#" class="MyClass error">Log an "error" message.</a></li>
<li><a href="#" class="MyClass time">Log a "time" message.</a></li>
</ul>
<!-- Sample code begins -->
<div class="code">
<h4>Sample Code</h4>
<textarea name="code" class="JScript" cols="60" rows="1">
var myLogWriter = new YAHOO.widget.LogWriter("MyClass");
myLogWriter.log("This is an \"info\" message.", "info"); // or just myLogWriter.log("This is an \"info\" message.");
myLogWriter.log("This is a \"warn\" message.");
myLogWriter.log("This is an \"error\" message.");
myLogWriter.log("This is a \"time\" message.");
</textarea>
</div>
<!-- Code sample ends -->
</div>
</div>
</div>
<!-- Libary begins -->
<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/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- Library ends -->
<script type="text/javascript">
var myLogReader = new YAHOO.widget.LogReader();
var myLogWriter = new YAHOO.widget.LogWriter("MyClass");
// Click to log
var clickToLog = function(e) {
YAHOO.util.Event.stopEvent(e);
var target = YAHOO.util.Event.getTarget(e);
var source = (YAHOO.util.Dom.hasClass(target, "MyClass")) ? "MyClass" : null;
if(!source) {
source = (YAHOO.util.Dom.hasClass(target, "myBucket")) ? "myBucket" : null;
if(YAHOO.util.Dom.hasClass(target, "info")) {
YAHOO.log("This is an \"info\" message.", "info", source);
}
else if(YAHOO.util.Dom.hasClass(target, "warn")) {
YAHOO.log("This is a \"warn\" message.", "warn", source);
}
else if(YAHOO.util.Dom.hasClass(target, "error")) {
YAHOO.log("This is an \"error\" message.", "error", source);
}
else if(YAHOO.util.Dom.hasClass(target, "time")) {
YAHOO.log("This is a \"time\" message.", "time", source);
}
}
else {
if(YAHOO.util.Dom.hasClass(target, "info")) {
myLogWriter.log("This is an \"info\" message.", "info");
}
else if(YAHOO.util.Dom.hasClass(target, "warn")) {
myLogWriter.log("This is a \"warn\" message.", "warn");
}
else if(YAHOO.util.Dom.hasClass(target, "error")) {
myLogWriter.log("This is an \"error\" message.", "error");
}
else if(YAHOO.util.Dom.hasClass(target, "time")) {
myLogWriter.log("This is a \"time\" message.", "time");
}
}
};
YAHOO.util.Event.addListener(YAHOO.util.Dom.get("bd"),"click",clickToLog);
</script>
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>