×
Namespaces

Variants
Actions

How to use the Glow JavaScript library in a S60 WRT widget

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: Maveric (29 Oct 2010)
Last edited: hamishwillee (26 Jul 2012)

Contents

Introduction

This article shows how to add the Glow Javascript library into your WRT widget, and interact with it. This is a basic example, where we show a greeting to the user.

Prerequisites

  • Glow JavaScript library, you can download it from here:

The library will be included in the index.html. The result is a global object "glow", which will have all of the functions, properties and modules of the Glow library.


Example code

The example widget demonstrates first the drag & drop functionality. For the widget, default S60 WRT files are being used. You may separate the simple CSS clause in the html into basic.css if you like.

index.html - code for WRT default HTML file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Glow JS library test widget</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="basic.js"></script>
<script src="/js/core.js" type="text/javascript"></script>
<link rel="stylesheet" href="basic.css" type="text/css" />
<meta name="Generator" content="Nokia WDE 3.0.0" />
</head>
<body onload="init();">
<p class="output">Hello,</p>
<p class="output">from Glow!</p>
</body>
</html>

basic.js - code for WRT default JavaScript file

function init(){
//test
}
 
glow.ready(function() {
glow.dom.get("p").css("border", "2px dashed #CCC");
 
glow.events.addListener(
".output",
"click",
function () {
alert(glow.dom.get(this).html());
}
);
});

Example output

Media:glow wrt demo.jpg

This page was last modified on 26 July 2012, at 01:53.
37 page views in the last 30 days.