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>
yui.zip( 3,714 k)Related examples in the same category