×
Namespaces

Variants
Actions

How to use GlassBox Javascript Library in a WRT widget

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

Contents

Introduction

GlassBox is a lightweight JavaScript library to create different type of boxes for the UI. It uses the Prototype and Script.aculo.us 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.

Prerequisites

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

http://www.glassbox-js.com/#download

Full documentation for this library is available at the http://www.glassbox-js.com/ 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


index.html

<html>
<head>
<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>
</head>
<body onload="init();">
<div id="myBox">Hello GlassBox!</div>
</body>
</html>

basic.css

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

basic.js

	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.
21 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.

×