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. Thanks for all your past and future contributions.

How to use GlassBox Javascript Library in a WRT widget

From Wiki
Jump to: navigation, search
Article Metadata
Created: Maveric (01 Nov 2010)
Last edited: hamishwillee (25 Jul 2012)



GlassBox is a lightweight JavaScript library to create different type of boxes for the UI. It uses the Prototype and for some effects. With GlassBox lucent borders, colorful layouts and "Flash-like" effects can be built. A basic Ajax XHR for example, has been included for dynamic content loading. There is possibility to customize and use skins for the components as required. The library is an open source project distributed under MIT license.


You need the GlassBox JavaScript library along with two other libraries it uses. You can download them by following link:

Full documentation for this library is available at the main site.

You can use any code editor of your choise. Notepad++ is very popular which gives syntax highlighting for most of the programing languages. This example is build with Aptana Studio and the WRT S60 plugin.

Note.pngNote: Aptana has been superseded by the Nokia Web Tools, an IDE and Simulator based on Aptana and Eclipse.

A phone device supporting with Web Runtime.

Example code

For this example we will create a default WRT S60 widget, with the following 3 files namely index.html, basic.css and basic.js


<title>GlassBox in WRTS60</title>
<!-- include javascript libraries-->
<script type="text/javascript" src="glassbox.2.0.0/javascripts/glassbox/glassbox.js"></script>
<script type="text/javascript" src="basic.js"></script>
<body onload="init();">
<div id="myBox">Hello GlassBox!</div>


/* Setting background image for the page body  */
body {
background-image: url(hello.png);
/* Defining style sheet for myBox id */
#myBox #myBox_content{
font-family: verdana, arial, helvetica;
font-size: 12px;


	path_to_root_dir = "../";  // A local variable declared.
var myBox = new GlassBox();
myBox.init( 'myBox', '128px', '62px', 'hidden' );
myBox.apos( '170px', '150px' );
This page was last modified on 25 July 2012, at 22:54.
12 page views in the last 30 days.