WRT Widget Logging Example

From Forum Nokia Wiki

This page provides instructions on how to utilize YUI Logger Control in a WRT widget.

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:

<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>
    ...
  </head>

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.

Retrieved from "http://wiki.forum.nokia.com/index.php/WRT_Widget_Logging_Example"

Related Discussions
Thread	Thread Starter	Forum	Replies	Last Post
looking for a simple jajah Widget	istvanst	WRT Widget Development	2	2008-09-04 13:44
Logging during ODD	santhosh1980	Symbian Tools & SDKs	3	2008-01-11 13:25
Widgets: Which plist format?	goldentrout	WRT Widget Development	1	2008-02-13 07:40
S60WebKit missed WidgetEngineBridge.h ?	warmdawn	General Browsing	34	2008-04-14 12:57
AnimaLogic: Web Runtime game example	jappit	WRT Widget Development	7	2008-04-21 11:15

Views

WRT Widget Logging Example

From Forum Nokia Wiki

Include the necessary YUI CSS and JavaScript files

Use the logger in your JavaScript (or HTML)

Installation package and compatibility