Chapter 16: Ajax Toolkits

Implementing the Logger Control for Debugging

See it run: Implementing the Logger Control for Debugging

Script 16.15

This HTML page calls additional YUI libraries.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
	<title>Event Logger</title>
	<link type="text/css" rel="stylesheet" href="yui/container.css" />
	<link type="text/css" rel="stylesheet" href="yui/logger.css" />
	<link type="text/css" rel="stylesheet" href="script03.css" />	
	<script type="text/javascript" src="yui/yahoo.js"></script>
	<script type="text/javascript" src="yui/event.js"></script>
	<script type="text/javascript" src="yui/dom.js"></script>
	<script type="text/javascript" src="yui/connection.js"></script>
	<script type="text/javascript" src="yui/dragdrop.js"></script>
	<script type="text/javascript" src="yui/container.js"></script>
	<script type="text/javascript" src="yui/animation.js"></script>
	<script type="text/javascript" src="yui/logger.js"></script>
	<script type="text/javascript" src="script05.js"></script>
</head>
<body>
<div id="WeatherWidget">
	<div id="header">
		<a href="#" id="loadDialog">edit</a>
		<span>Your Local Weather</span>
	</div>
	<a href="#">Sonoma, CA</a><br />
	<div class="weatherFig">
		Tonight<br />
		<img src="images/nt_clear.gif" alt="nt_clear.gif" width="42" height="42" /><br />
		Low: 59&deg;
	</div>
	<div class="weatherFig">
		Today<br />
		<img src="images/clear.gif" alt="clear.gif" width="42" height="42" /><br />
		High: 95&deg;
	</div>
	<span class="big">91&deg;F</span><br />
	Clear<br />
	Humidity: 36%<br />
	Visibility: 10 mi<br />
	Wind: SE 10 mph
</div>
<div id="dlg">
	<div class="hd">Your weather preferences:</div>
	<form name="dlgForm" action="#">
		<p><label for="radiobuttons">Temperature:</label>
		<input type="radio" name="radiobuttons[]" value="C" checked="checked" /> C
		<input type="radio" name="radiobuttons[]" value="F" /> F</p>
		<p><label for="zip">Zip code:</label> <input type="text" name="zip" size="5" /></p> 
	</form>
</div>
</body>
</html>

Script 16.16

This JavaScript allows you to specify which messages go to the Logger.

YAHOO.namespace("container");

function init() {
	var handleSubmit = function() {
		YAHOO.log("Dialog submitted","warn");
		this.submit();
	}

YAHOO.container.dlg = new YAHOO.widget.Dialog("dlg",
		{ 
			modal:true, visible:false, width:"250px", fixedcenter:true, constraintoviewport:true, draggable:true
		}
	);

YAHOO.container.dlg.cfg.queueProperty("buttons", [ { text:"Submit", handler:handleSubmit } ]);
	YAHOO.container.dlg.render();

var myAnim = new YAHOO.util.Anim("dlg");
	myAnim.attributes.opacity = { from: 0, to: 1 };
	myAnim.duration = 2;
	myAnim.method = YAHOO.util.Easing.easeIn;
	myAnim.onComplete.subscribe(showDialog);

document.getElementById("loadDialog").onclick = function() {
		myAnim.animate();
		YAHOO.log("Animation starting now");
		return false;
	}

var myConfigs = {
		width: "250px",
		right: "10em",
		top: "10%",
		fontSize: "80%"
	};
	var myContainer = null;
	var myLogReader = new YAHOO.widget.LogReader(myContainer, myConfigs);

function showDialog() {
		YAHOO.container.dlg.show();	
		YAHOO.log("Animation ended","warn");
	}
}

YAHOO.util.Event.addListener(window, "load", init);

Contents:

Implementing the Logger Control for Debugging

Script 16.15

Script 16.16