419 lines
14 KiB
HTML
419 lines
14 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>Example: Logger - Customizing LogReader UI (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">
|
|
#styled .yui-log {font-family:verdana;}
|
|
#styled .info {background-color:blue;}
|
|
#styled .warn {background-color:green;}
|
|
#styled .error {background-color:red;}
|
|
#styled .time {background-color:orange;}
|
|
#styled .window {background-color:yellow;}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="hd">
|
|
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: Customizing LogReader UI</h1>
|
|
</div>
|
|
|
|
<div id="bd">
|
|
<!-- Intro -->
|
|
<div id="intro">
|
|
<h3>Customizing LogReader</h3>
|
|
<p>The UI of LogReader can be customized via certain properties and
|
|
methods, as well as CSS classes. Please refer to the
|
|
Sample Code section for details on how to achieve the following effects.</p>
|
|
</div>
|
|
|
|
<!-- Example: Compact Output -->
|
|
<div class="example">
|
|
<div id="compact" class="container"></div>
|
|
<div class="content">
|
|
<h4>Example: Compact Ouput</h4>
|
|
<p><a href="#" class="logit">Log a simple message</a></p>
|
|
|
|
<p>By default, log messages are printed to the console with a good
|
|
deal of whitespace for better readability. In this example, verbose
|
|
output has been disabled so each message gets output on
|
|
a single line without wrapping.</p>
|
|
|
|
<!-- Sample code begins -->
|
|
<div class="code">
|
|
<h4>Sample Code</h4>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
<body>
|
|
<div id="compact"></div>
|
|
|
|
<script type="text/javascript">
|
|
var myCompact = new YAHOO.widget.LogReader("compact", {verboseOutput:false});
|
|
myCompact.setTitle("Compact Output");
|
|
</script>
|
|
</body>
|
|
</textarea>
|
|
</div>
|
|
<!-- Code sample ends -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Example: Oldest On Top -->
|
|
<div class="example">
|
|
<div id="oldestOnTop" class="container"></div>
|
|
<div class="content">
|
|
<h4>Example: Oldest On Top</h4>
|
|
<p><a href="#" class="logit">Log a simple message</a></p>
|
|
|
|
<p>By default, new messages get prepended at the top of the console.
|
|
In this example, new messages get appended at the bottom of the
|
|
console.</p>
|
|
</div>
|
|
|
|
|
|
<!-- Sample code begins -->
|
|
<div class="code">
|
|
<h4>Sample Code</h4>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
<body>
|
|
<div id="oldestOnTop"></div>
|
|
|
|
<script type="text/javascript">
|
|
var myOldestOnTop = new YAHOO.widget.LogReader("oldestOnTop", {newestOnTop:false});
|
|
myOldestOnTop.setTitle("Oldest On Top");
|
|
</script>
|
|
</body>
|
|
</textarea>
|
|
</div>
|
|
<!-- Code sample ends -->
|
|
</div>
|
|
|
|
<!-- Example: Undraggable -->
|
|
<div class="example">
|
|
<div id="undraggable" class="container"></div>
|
|
<div class="content">
|
|
<h4>Example: Undraggable</h4>
|
|
<p><a href="#" class="logit">Log a simple message</a></p>
|
|
|
|
<p>Although the Drag and Drop Utility is available on the page,
|
|
draggability of this LogReader has been disabled.</p>
|
|
</div>
|
|
|
|
|
|
<!-- Sample code begins -->
|
|
<div class="code">
|
|
<h4>Sample Code</h4>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
<body>
|
|
<div id="undraggable"></div>
|
|
|
|
<script type="text/javascript">
|
|
var myUndraggable = new YAHOO.widget.LogReader("undraggable", {draggable:false});
|
|
myUndraggable.setTitle("Undraggable");
|
|
</script>
|
|
</body>
|
|
</textarea>
|
|
</div>
|
|
<!-- Code sample ends -->
|
|
</div>
|
|
|
|
<!-- Example: Filtered -->
|
|
<div class="example">
|
|
<div id="filtered" class="container"></div>
|
|
<div class="content">
|
|
<h4>Example: Filtered Output</h4>
|
|
<p><a href="#" class="logit">Log a simple message</a></p>
|
|
|
|
<p>The first LogReader will show only global info messages. The
|
|
second LogReader will only show info messages coming from the
|
|
"LogReader" class.</p>
|
|
</div>
|
|
|
|
|
|
<!-- Sample code begins -->
|
|
<div class="code">
|
|
<h4>Sample Code</h4>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
<body>
|
|
<div id="filtered"></div>
|
|
|
|
<script type="text/javascript">
|
|
var myFiltered1 = new YAHOO.widget.LogReader("filtered");
|
|
var myFiltered2 = new YAHOO.widget.LogReader("filtered");
|
|
myFiltered1.hideCategory("warn");
|
|
myFiltered1.hideCategory("error");
|
|
myFiltered1.hideCategory("time");
|
|
myFiltered1.hideCategory("window");
|
|
myFiltered2.hideCategory("warn");
|
|
myFiltered2.hideCategory("error");
|
|
myFiltered2.hideCategory("time");
|
|
myFiltered2.hideCategory("window");
|
|
myFiltered1.hideSource("LogReader");
|
|
myFiltered2.hideSource("global");
|
|
myFiltered1.setTitle("Filtered LogReader: Global Messages Only");
|
|
myFiltered2.setTitle("Filtered LogReader: LogReader Messages Only");
|
|
</script>
|
|
</body>
|
|
</textarea>
|
|
</div>
|
|
<!-- Code sample ends -->
|
|
</div>
|
|
|
|
<!-- Example: Buffered -->
|
|
<div class="example">
|
|
<div id="buffered" class="container"></div>
|
|
<div class="content">
|
|
<h4>Example: Buffered</h4>
|
|
<p><a href="#" class="logit">Log a simple message</a></p>
|
|
|
|
<p>Output buffer has been increased to 3 seconds. Therefore,
|
|
messages are printed to the screen every 3 seconds.</p>
|
|
</div>
|
|
|
|
<!-- Sample code begins -->
|
|
<div class="code">
|
|
<h4>Sample Code</h4>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
<body>
|
|
<div id="paused"></div>
|
|
|
|
<script type="text/javascript">
|
|
var myBuffered = new YAHOO.widget.LogReader("buffered", {outputBuffer:3000});
|
|
myPaused.setTitle("3 Second Output Buffer");
|
|
</script>
|
|
</body>
|
|
</textarea>
|
|
</div>
|
|
<!-- Code sample ends -->
|
|
</div>
|
|
|
|
<!-- Example: Paused -->
|
|
<div class="example">
|
|
<div id="paused" class="container"></div>
|
|
<div class="content">
|
|
<h4>Example: Paused</h4>
|
|
<p><a href="#" id="resume">Resume this LogReader</a> | <a href="#" id="pause">Pause this LogReader</a> | <a href="#" class="logit">Log a simple message</a></p>
|
|
|
|
<p>Output has been paused.</p>
|
|
</div>
|
|
|
|
<!-- Sample code begins -->
|
|
<div class="code">
|
|
<h4>Sample Code</h4>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
<body>
|
|
<div id="paused"></div>
|
|
|
|
<script type="text/javascript">
|
|
var myPaused = new YAHOO.widget.LogReader("paused");
|
|
myPaused.pause();
|
|
myPaused.setTitle("Paused LogReader");
|
|
</script>
|
|
</body>
|
|
</textarea>
|
|
</div>
|
|
<!-- Code sample ends -->
|
|
</div>
|
|
|
|
<!-- Example: Collapsed -->
|
|
<div class="example">
|
|
<div id="collapsed" class="container"></div>
|
|
<div class="content">
|
|
<h4>Example: Collapsed</h4>
|
|
<p><a href="#" class="logit">Log a simple message</a></p>
|
|
|
|
<p>The LogReader console has been collapsed.</p>
|
|
</div>
|
|
|
|
<!-- Sample code begins -->
|
|
<div class="code">
|
|
<h4>Sample Code</h4>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
<body>
|
|
<div id="collapsed"></div>
|
|
|
|
<script type="text/javascript">
|
|
var myCollapsed = new YAHOO.widget.LogReader("collapsed");
|
|
myCollapsed.collapse();
|
|
myCollapsed.setTitle("Collapsed LogReader");
|
|
</script>
|
|
</body>
|
|
</textarea>
|
|
</div>
|
|
<!-- Code sample ends -->
|
|
</div>
|
|
|
|
<!-- Example: Hidden -->
|
|
<div class="example">
|
|
<div id="hidden" class="container"></div>
|
|
<div class="content">
|
|
<h4>Example: Hidden</h4>
|
|
<p><a href="#" id="show">Show this LogReader</a> | <a href="#" id="hide">Hide this LogReader</a> | <a href="#" class="logit">Log a simple message</a></p>
|
|
|
|
<p>The entire LogReader console has been hidden.</p>
|
|
</div>
|
|
|
|
<!-- Sample code begins -->
|
|
<div class="code">
|
|
<h4>Sample Code</h4>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
<body>
|
|
<div id="hidden"></div>
|
|
|
|
<script type="text/javascript">
|
|
var myHidden = new YAHOO.widget.LogReader("hidden");
|
|
myHidden.hide();
|
|
myHidden.setTitle("Hidden LogReader");
|
|
</script>
|
|
</body>
|
|
</textarea>
|
|
</div>
|
|
<!-- Code sample ends -->
|
|
</div>
|
|
|
|
<!-- Example: Styled via CSS -->
|
|
<div class="example">
|
|
<div id="styled" class="container"></div>
|
|
<div class="content">
|
|
<h4>Example: Styled via CSS</h4>
|
|
<p><a href="#" class="logit">Log a simple message</a></p>
|
|
|
|
<p>The UI has been customized via CSS.</p>
|
|
</div>
|
|
|
|
|
|
<!-- Sample code begins -->
|
|
<div class="code">
|
|
<h4>Sample Code</h4>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
<head>
|
|
<style type="text/css">
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="styled"></div>
|
|
|
|
<script type="text/javascript">
|
|
var myStyled = new YAHOO.widget.LogReader("styled");
|
|
myStyled.setTitle("Styled via CSS");
|
|
</script>
|
|
</body>
|
|
</textarea>
|
|
</div>
|
|
<!-- Code sample ends -->
|
|
</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 myCompact = new YAHOO.widget.LogReader("compact", {verboseOutput:false});
|
|
myCompact.setTitle("Compact Output");
|
|
|
|
var myOldestOnTop = new YAHOO.widget.LogReader("oldestOnTop", {newestOnTop:false});
|
|
myOldestOnTop.setTitle("Oldest On Top");
|
|
|
|
var myUndraggable = new YAHOO.widget.LogReader("undraggable", {draggable:false});
|
|
myUndraggable.setTitle("Undraggable");
|
|
|
|
var myFiltered1 = new YAHOO.widget.LogReader("filtered");
|
|
var myFiltered2 = new YAHOO.widget.LogReader("filtered");
|
|
myFiltered1.hideCategory("warn");
|
|
myFiltered1.hideCategory("error");
|
|
myFiltered1.hideCategory("time");
|
|
myFiltered1.hideCategory("window");
|
|
myFiltered2.hideCategory("warn");
|
|
myFiltered2.hideCategory("error");
|
|
myFiltered2.hideCategory("time");
|
|
myFiltered2.hideCategory("window");
|
|
myFiltered1.hideSource("LogReader");
|
|
myFiltered2.hideSource("global");
|
|
myFiltered1.setTitle("Filtered LogReader: Global Messages Only");
|
|
myFiltered2.setTitle("Filtered LogReader: LogReader Messages Only");
|
|
|
|
var myBuffered = new YAHOO.widget.LogReader("buffered", {outputBuffer:3000});
|
|
myBuffered.setTitle("3 Second Ouput Buffer");
|
|
|
|
var myPaused = new YAHOO.widget.LogReader("paused");
|
|
myPaused.pause();
|
|
myPaused.setTitle("Paused LogReader");
|
|
|
|
var myCollapsed = new YAHOO.widget.LogReader("collapsed");
|
|
myCollapsed.collapse();
|
|
myCollapsed.setTitle("Collapsed LogReader");
|
|
|
|
var myHidden = new YAHOO.widget.LogReader("hidden");
|
|
myHidden.hide();
|
|
myHidden.setTitle("Hidden LogReader");
|
|
|
|
var myStyled = new YAHOO.widget.LogReader("styled");
|
|
myStyled.setTitle("Styled via CSS");
|
|
|
|
// Click to log
|
|
var clickToLog = function(e) {
|
|
YAHOO.util.Event.stopEvent(e);
|
|
YAHOO.log("This is a simple log message.");
|
|
};
|
|
var logitEls = YAHOO.util.Dom.getElementsByClassName("logit","a",YAHOO.util.Dom.get("bd"));
|
|
for(var i=0; i<logitEls.length; i++) {
|
|
YAHOO.util.Event.addListener(logitEls[i],"click",clickToLog);
|
|
}
|
|
|
|
// Click to pause
|
|
var clickToPause = function(e,LogReader) {
|
|
YAHOO.util.Event.stopEvent(e);
|
|
LogReader.pause();
|
|
};
|
|
YAHOO.util.Event.addListener(YAHOO.util.Dom.get("pause"),"click",clickToPause,myPaused);
|
|
|
|
// Click to resume
|
|
var clickToResume = function(e,LogReader) {
|
|
YAHOO.util.Event.stopEvent(e);
|
|
LogReader.resume();
|
|
};
|
|
YAHOO.util.Event.addListener(YAHOO.util.Dom.get("resume"),"click",clickToResume,myPaused);
|
|
|
|
// Click to show
|
|
var clickToShow = function(e,LogReader) {
|
|
YAHOO.util.Event.stopEvent(e);
|
|
LogReader.show();
|
|
};
|
|
YAHOO.util.Event.addListener(YAHOO.util.Dom.get("show"),"click",clickToShow,myHidden);
|
|
|
|
// Click to hide
|
|
var clickToHide = function(e,LogReader) {
|
|
YAHOO.util.Event.stopEvent(e);
|
|
LogReader.hide();
|
|
};
|
|
YAHOO.util.Event.addListener(YAHOO.util.Dom.get("hide"),"click",clickToHide,myHidden);
|
|
|
|
</script>
|
|
|
|
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
|
|
<script type="text/javascript">
|
|
dp.SyntaxHighlighter.HighlightAll('code');
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|