Using Logger to Debug YUI Library Components : Log : Development JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Development » Log »

 

Using Logger to Debug YUI Library Components




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<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;}
</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> :: YUI Integration Example</h1>
    </div>

    <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>
                            </div>
                        </form>
                    </div>
                    <!-- AutoComplete ends -->
                </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.

                // 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"});
                </script>
                </textarea>
            </div>
            <!-- Code sample ends -->
        </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-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 = [
    "Alabama",
    "Alaska",
    "Arizona",
    "Arkansas",
    "California",
    "Colorado",
    "Connecticut",
    "Delaware",
    "Florida",
    "Georgia",
    "Hawaii",
    "Idaho",
    "Illinois",
    "Indiana",
    "Iowa",
    "Kansas",
    "Kentucky",
    "Louisiana",
    "Maine",
    "Maryland",
    "Massachusetts",
    "Michigan",
    "Minnesota",
    "Mississippi",
    "Missouri",
    "Montana",
    "Nebraska",
    "Nevada",
    "New Hampshire",
    "New Jersey",
    "New Mexico",
    "New York",
    "North Dakota",
    "North Carolina",
    "Ohio",
    "Oklahoma",
    "Oregon",
    "Pennsylvania",
    "Rhode Island",
    "South Carolina",
    "South Dakota",
    "Tennessee",
    "Texas",
    "Utah",
    "Vermont",
    "Virginia",
    "Washington",
    "West Virginia",
    "Wisconsin",
    "Wyoming"
];
</script>
<!-- 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";
        }
    };
}();

YAHOO.util.Event.addListener(this,'load',YAHOO.example.AutoCompleteLogger.init);
</script>

<script type="text/javascript" src="./docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>

</body>
</html>

           
       

Download : Download nav_yui.zip nav_yui.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Development
» Log