WRT Widget Logging Example
This page provides instructions on how to utilize YUI Logger Control in Symbian Web Runtime.
Article Metadata
Code Example
Article
Include the necessary YUI CSS and JavaScript files
You can find out the YUI file dependencies here: [1]
Serve the files needed by the Logger Conrol from YUI servers by defining the following in your widget HTML file:
<head>
<!-- css -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/logger/assets/skins/sam/logger.css">
<!-- js -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/logger/logger-min.js"></script>
...
</head>
Alternatively, you can copy the necessary files to your widget bundle and serve them locally on your device when the widget is running:
Please familiarize yourself with the YUI licensing terms.
Use the logger in your JavaScript (or HTML)
Please check YUI Logger Control documentation for more instructions. The sample code below just creates a container for the Logger Control on the HTML page and allows logging a hard coded word to the screen.
window.onload = init;
var myLogReader;
var myConfigs = {
width: "230px",
height: "30em",
newestOnTop: true,
footerEnabled: false
};
// Initializes the widget
function init() {
var myContainer = document.body.appendChild(document.createElement("div"));
myLogReader = new YAHOO.widget.LogReader(myContainer);
}
function logMsg() {
YAHOO.log("hello there");
}
The full source of the HTML using the JavaScript above is:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- css -->
<link rel="stylesheet" type="text/css" href="./YUI/logger.css">
<!-- js -->
<script type="text/javascript" src="./YUI/yahoo-dom-event.js"></script>
<script type="text/javascript" src="./YUI/logger-min.js"></script>
<script type="text/javascript" src="script.js" /></script>
<title>YUI Logger Example</title>
</head>
<body>
<br><a href="#" onclick="logMsg();">log</a><br>
</body>
</html>
Installation package and compatibility
This demo widget should be compatible with these devices.
Rename the attachment to .wgz before installing to a device.
30 Sep
2009
This article demonstrates how to integrate logging functionality into WRT widgets through the use of Yahoo's YUI logger. The article primarily consists of a fairly simple code example showing how to integrate the logger into your own WRT widget. The code examples demonstrate how to link to the YUI logger stylesheet and JavaScript files, either locally (if you download and save them), or via their URL. A code snippit is also provided to demonstrate how to perform logging via JavaScript. Finally, the code of the html page demonstrating the use of the JavaScript logging function is provided.
The YUI logging component can be used for a variety of purposes, not least of which is debugging. Alternatively, it can be useful for tracking user activity.