Writing Log Messages From Your Code : Log « Development « JavaScript DHTML






Writing Log Messages From Your Code


<!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>
<div id="doc" class="yui-t7">
    <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">
        <!-- Content begins -->
        <div id="yui-main">
        <div class="yui-b">
            <div class="yui-gc">
                <div class="yui-u first">
                    <div id="content">
                        <h3>Writing Log Messages From Your Code</h3>
                        <p>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.</p>

                        <p><input id="yui-log-inputinfo" class="yui-log-input" type="text" value="Log an info message.">
                            <button id="btn_loginfo">Log this message</button></p>
                        <p><input id="yui-log-inputwarn" class="yui-log-input" type="text" value="Log a warning.">
                            <button id="btn_logwarn">Log this message</button></p>
                        <p><input id="yui-log-inputerror" class="yui-log-input" type="text" value="Log an error.">
                            <button id="btn_logerror">Log this message</button></p>
                        <p><input id="yui-log-inputtime" class="yui-log-input" type="text" value="Log a timing message.">
                            <button id="btn_logtime">Log this message</button></p>
                        <p><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)</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="myCategory">
                            <button id="btn_logcustom">Log this message with this category</button></p>

                        <p><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></p>
                    </div>
                    <!-- Content ends -->
                </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">
                    <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>
                </div>
                <!-- Code sample ends -->
             </div>
        </div>
        </div>
    </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.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>

           
       








yui.zip( 3,714 k)

Related examples in the same category

1.Using Logger to Debug YUI Library Components
2.Default LogReader Example
3.Customized LogReader Example
4.JavaScript log debugger
5.Collapse log area(window)