Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

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

From Wiki
Jump to: navigation, search
Article Metadata
Article
Created: Maveric (29 Oct 2010)
Last edited: hamishwillee (25 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 25 July 2012, at 22:53.
31 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×