Default LogReader Example : Log « Development « JavaScript DHTML






Default LogReader Example


<!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>
<div id="doc" class="yui-t7">
    <div id="hd">
        <h1><img src="./examples/logger/img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: Reading Logs</h1>
    </div>

    <div id="bd">
        <!-- Content begins -->
        <div id="yui-main">
        <div class="yui-b">
            <div class="yui-gc">
                <div class="yui-u first">
                    <h3>Default LogReader Example</h3>
                    <p>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.</p>

                    <p><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></p>
                    <p><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></p>
                    <p><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></p>
                    <p><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></p>
                    <p><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)</p>
                    <p><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></p>

                    <p><a href="javascript:YAHOO.example.LogReader.hideAllReaders();">Hide All LogReaders</a> ||
                    <a href="javascript:YAHOO.example.LogReader.showAllReaders();">Show All LogReaders</a></p>

                    <p><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></p>

                    <p><a href="javascript:YAHOO.widget.Logger.reset();">Reset Logger stack</a></p>
                </div>
            </div>

            <div class="yui-g">
                <!-- Sample code begins -->
                <div id="code">
                    <h3>Sample Code</h3>

                    <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>
                    <!-- No custom markup was defined -->

                    <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>
                </div>
                <!-- Code sample ends -->
            </div>
        </div>
        </div>
        <!-- Content ends -->
    </div>
</div>
<!-- Libary begins -->
<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>
<!-- Library ends -->

<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>

           
       








yui.zip( 3,714 k)

Related examples in the same category

1.Using Logger to Debug YUI Library Components
2.Customized LogReader Example
3.Writing Log Messages From Your Code
4.JavaScript log debugger
5.Collapse log area(window)