Using Logger to Debug YUI Library Components : Log « Development « JavaScript DHTML

Using Logger to Debug YUI Library Components

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

<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> :: YUI Integration Example</h1>

    <div id="bd">
        <div id="yui-main">
        <div class="yui-b">
            <div class="yui-gc">
                <div class="yui-u first">
                    <!-- Content begins -->
                    <h3>Using Logger to Debug YUI Library Components</h3>
                    <p>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.</p>

                    <!-- AutoComplete begins -->
                    <div id="statesmod">
                        <form onsubmit="return validateForm();">
                            <h3>Find a state:</h3>
                            <div id="statesautocomplete">
                                <input id="statesinput">
                                <div id="statescontainer"></div>
                    <!-- AutoComplete ends -->
                <!-- Content ends -->
        <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.

                // 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"});
            <!-- Code sample ends -->

<!-- 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-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>
<!-- Library ends -->

<!-- In-memory JS array begins-->
<script type="text/javascript">
var statesArray = [
    "New Hampshire",
    "New Jersey",
    "New Mexico",
    "New York",
    "North Dakota",
    "North Carolina",
    "Rhode Island",
    "South Carolina",
    "South Dakota",
    "West Virginia",
<!-- In-memory JS array ends-->

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


<script type="text/javascript" src="./docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">


       3,714 k)

Related examples in the same category

1.Default LogReader Example
2.Customized LogReader Example
3.Writing Log Messages From Your Code
4.JavaScript log debugger
5.Collapse log area(window)