Forum Nokia Wiki - Recent changes [en]

How to create a new Component for the Guarana UI Library

Jappit — Fri, 20 Nov 2009 22:07:00 GMT

This article shows all the steps involved in creating a new Component from scratch for the Nokia WRT Guarana UI Library.

The Component built is this article is also visible on the Guarana UI online Components Browser.

1 Introduction
- 1.1 Component files Structure
2 The Guarana UI Build processes
3 Setup the Component source files
4 Writing the Component code
5 Using the component
6 Finalize the Component
7 Links and Resources

Introduction

The Guarana UI Library is a jQuery-Based UI Library for Nokia WRT, that provides a full set of Components ready to be used within Web Runtime widgets.

Guarana UI is structured into Components: User Interface elements that fulfill a specific function. Some examples include: Date, Rating and Progress Bar.

The Guarana UI structure allows to create new Components, by extending the Widget base class. The Widget base class represents a common base for all Guarana UI Components, providing basic and utility functions that manage event handling, vibration control and loading management of the Components.

Component files Structure

A Guarana UI Component is typically composed by:

1 JavaScript file, placed in the "<GUARANA_BASE_PATH>/src/" folder
1 CSS file, placed in the "<GUARANA_BASE_PATH>/themes/nokia/base/" folder
optionally, 1 or more images placed in the "<GUARANA_BASE_PATH>/themes/nokia/base/images/" folder

The Guarana UI Build processes

Before starting to create the new Component, it is necessary to download and uncompress the Full Guarana UI Package, available here: Guarana UI Full Package.

The Full Package ships with all the source files of the Guarana UI Library, and includes the build files necessary to create custom Library versions. To have a detailed overview of the Guarana UI folders and build process, check out the Guarana UI Overview.

Note: In this article, <GUARANA_BASE_PATH> refers to the complete path where the Guarana UI Full Package was uncompressed

Setup the Component source files

The following sections describe how to perform the setup steps for a new Guarana UI Component, here named TestComponent. The involved steps are:

creating the Component skeleton in the Guarana UI Full Package
build and move the lib and themes folder to an empty Web Runtime widget

Create an empty Web Runtime project

Before starting, create an empty Web Runtime project: it will be used to write and test the actual Component's code. You can do this manually, or by using the available Web Runtime IDE's Plugins.

Setup the Component skeleton structure

Now let's start, by creating the empty source files for the new TestComponent. These will be:

testcomponent.js: place this empty file in the "<GUARANA_BASE_PATH>/src" folder
testcomponent.css: place this empty file in the "<GUARANA_BASE_PATH>/themes/nokia/base/" folder

Now, it is necessary to tell the Guarana UI Library that these files exist. To do this, open the "<GUARANA_BASE_PATH>/src/defaults.js" file, and add this JavaScript code, just after all the other Components, as properties of the window.NOKIA_DEFAULTS.modules object:

/*
* Test Component
*/
'testcomponent': {
	getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'testcomponent.js'; },
	requires: ['widget', 'testcomponent-css']
},
 
'testcomponent-css': {
	getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'testcomponent.css'; },
	type: 'css',
	requires: ['base-css']
}

These 2 properties allow Guarana UI to know that new resources exist, and specify the dependencies of each of them. Most of the Components usually require only the specified dependencies, but it's possible to change them accordingly to different needs.

Before proceeding, perform the same modifications to the "<GUARANA_BASE_PATH>/build/build/js/defaults.js" file.

Build Guarana UI and move resources

Now that the skeleton files are ready, it is possible to build Guarana UI by using the standard build process. Just go into the "<GUARANA_BASE_PATH>/build/" folder and, from command-line, call:

ant

Once built, move the "<GUARANA_BASE_PATH>/build/Guarana/lib/" and "<GUARANA_BASE_PATH>/build/Guarana/themes/" to the empty Web Runtime widget created before.

Before proceeding, check that the Component empty files were actually built. If so, they should be located at these paths:

"<GUARANA_BASE_PATH>/build/Guarana/lib/testcomponent.js"
"<GUARANA_BASE_PATH>/build/Guarana/themes/nokia/base/testcomponent.css"

Writing the Component code

The following sections show how to write the actual Component's code.

The Component JavaScript skeleton

The very-basic Component is composed by just one function, that takes care of initializing the Component itself:

(function() {
	Nokia.TestComponent = Nokia.Widget.extend({
		initialize: function(options) {
 
			// initialize the Component
 
		}
	});
})();

Some other functions and properties are also usually defined, and they are:

the _create() function, that takes care of creating the Component's DOM structure and of defining all the event handlers
the Styles property, that holds the names of CSS classes used by the Component

So, a more complete Component will be the following one:

(function() {
	Nokia.TestComponent = Nokia.Widget.extend({
		initialize: function(options) {
 
			// initialize the Component
 
		},
 
		_create: function() {
 
			// create the Component DOM structure and define events
 
		},
 
		Styles: {
 
			// define the main CSS styles classes used by the Component
 
		}
	});
})();

Define the Component DOM structure

The TestComponent built in this article has to show a message, and so it is possible to use the following simple DOM structure:

<div class="test-component">
	<p class="test-component-message">
		Hello World!
	</p>
</div>

The Component's CSS classes

Since the Component uses 2 CSS classes, it is possible to use the Component's Styles property to store their names, as shown below:

Styles: {
	testComponent: 'test-component',
	message: 'test-component-message'
}

Those classes will be defined in the Component's CSS file, testcomponent.css. Some simple rules are the following:

.test-component {
	margin: .5em;
	padding: .5em;
	background: #dddddd;
	border: 4px solid #aaaaaa;
}
.test-component-message {
	color: #666666;
}

Initializing the Component

The initialization is actually the most important part of the Component, as it has to:

initialize the Component's properties, by using the passed options together with the default ones. The following code shows how to define some default options (in this case, a default message), and how to add to these options the ones passed to the Component:

var defaults = {
	message: "Hello World!"
};
 
instance.options = jQuery.extend(defaults, options);

get a reference to the Component's placeholder DOM element:

instance.element = jQuery( instance.options.element );

call the Widget super-class initialization function:

instance._super.apply(instance, [instance.options]);

register the component. This is done with a call to the "registerData()" function:

instance.registerData("testcomponent");

create the DOM structure. This is usually done from a separate function (usually the "_create" one), so the initialize() function just calls that:

instance._create();

fire the 'create' callback, to notify the finish of the initialization process:

instance.fireCallback('create');

The complete initialize() function is the following one:

initialize: function(options) {
	var instance = this;
 
	var defaults = {
		message: "Hello World!"
	};
 
	instance.options = jQuery.extend(defaults, options);
 
	instance.element = jQuery( instance.options.element );
 
	instance._super.apply(instance, [instance.options]);
 
	instance.registerData("testcomponent");
 
	instance._create();
 
	instance.fireCallback('create');
}

Create the DOM structure

Let's take back the Component's DOM structure: it is now necessary to create it via JavaScript, defining the necessary event handlers, and using the Styles property to assign the right CSS class to the various elements. The following code shows how this can be performed:

_create: function() {
	var instance = this;
	var options = instance.options;
	var element = instance.element;
	var Styles = instance.Styles;
 
	element.each(function(i, el) {
		Nokia.util.addClass(el, Styles.testComponent);
	});
 
	instance.hello = Nokia.dom.parseHTML('<p class="' + Styles.message + '">' + this.options.message + '</p>');
 
	element.append(instance.hello);
 
}

In the above code, it is possible to see how to use the Component's "options" property to retrieve the message to display.

Add some interactivity to the Component

In order to add some interactivity, let's define a function that allows to change the displayed message. This function is visible below:

setValue: function(html)
{
	var instance = this;
 
	instance.hello.html(html);
}

Using the component

The component is now ready for use, and to actually create a TestComponent within a Web Runtime widget the following steps have to be performed:

Include the Guarana UI CSS dependencies (as explained here: GuaranaUI-QuickStart):

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/default-theme/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="themes/nokia/ext-theme/default/360x640/custom.css" type="text/css" media="screen">

Include the JavaScript dependencies:

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

Define a placeholder DOM element in the widget's HTML code:

<div id="testcomponent01"></div>

Call the "Nokia.use" function to tell Guarana UI that you need to use the new component. Details about the Nokia Loader are available here: Nokia Loader. Before calling the Nokia Loader, it is necessary to define the 2 Guarana UI PATH variables, to specify where its folders are located:

<script>
NOKIA_PATH_JAVASCRIPT = 'lib/';
 
NOKIA_PATH_STYLE_ROOT = 'themes/nokia/base/';
 
Nokia.use('testcomponent', init);
</script>

When the Component resources will be available, the init() function is called. Within the init() function, it is so possible to create an instance of the newly created TestComponent:

function init()
{	
    var testComponent1 = new Nokia.TestComponent({
        element: '#testcomponent01',
        message: "I'm a custom message!",
        create: function() {
            alert('test component created');
        }
    });
}

If all goes well, an alert message with the "test component created" message should be displayed, just after the Component creation.

Finalize the Component

Now that the Component is ready, it is possible to move its resources back to the Guarana UI Full Package folders, overwriting the empty files created at the beginning.

Note: if the Component also uses images (e.g.: referenced by the Component's CSS file), it is necessary to move them also to the Guarana UI folders. In case of images, the folder to use is the "<GUARANA_BASE_PATH>/themes/nokia/base/images/".

Once the Component's files are copied back to the Guarana UI folders, it is possible to launch a new build process, that will optimize and compress the Component's code. Done that, everything is ready to use and distribute the new Component.

Links and Resources

KIS001490 - HTTP Filter doesn't receive events during a DM session

Forum Nokia KB — Fri, 20 Nov 2009 13:54:49 GMT

Knowledge Base Home

ID	KIS001490	Creation date	November 20, 2009
Platform	S60 3rd Edition FP1 & FP2	Devices	Tested on: Nokia N79, E71, E75
Category	Symbian C++	Subcategory	Device Management

Keywords (APIs, classes, methods, functions):

Description

An HTTP Filter is an ECom plug-in which is loaded automatically during all HTTP sessions on the device. It receives all the events of the session. However, the filter doesn't receive the HTTP events that occur during Device Management client-server interactions.

How to reproduce

Install an HTTP Filter which can receive all the HTTP events that occur in a session. Whenever a DM client-server HTTP transaction takes place, you can see that the MHFRunL() function of the filter, used for receiving the events, is not invoked.

Solution

No known solution.

TSS001489 - Send data using RTP/RTCP API

Forum Nokia KB — Fri, 20 Nov 2009 13:42:36 GMT

Knowledge Base Home

ID	TSS001489	Creation date	November 20, 2009
Platform	S60 3rd Edition & 5th Edition	Devices	Tested on: Nokia N79, Nokia N97
Category	Symbian C++	Subcategory	Connectivity

Keywords (APIs, classes, methods, functions): RTCP, RTP, streaming

Overview

The RTP/RTCP API available in the SDK API Plug-in pack can be used for delivering different types of data between devices. The Real-time Transport Protocol(RTP) is used to send or receive the data and the RTP Control Protocol(RTCP) provides out-of-band statistics and control information for an RTP flow.

Description

This article demonstrates how to enable RTCP and register an observer for receiving the Receiver report(RR) packet in an RTP session. The receiver report informs the sender about the quality of service. The other RTCP messages that can be exchanged are Sender report(SR), Source description(SDES), End of participation (BYE), and Application-specific message (APP).

Since RTCP streaming is used during an RTP flow, more information on starting a RTP session is given in the following link: http://wiki.forum.nokia.com/index.php/S60_RTP/RTC_API

Solution

Header Files:

#include <rtpapi.h> 
 #include <rtpheader.h>
 #include <RtpDef.h>

Link Against:

LIBRARY  rtpservice.lib

Enabling RTCP and registering an observer in an RTP session

iRtpId = iRtpSession->CreateSessionL( sessionParam,
                                       localPort,
                                       ETrue,	//enable RTCP
                                       NULL );	//Set default RTCP parameters
 // Set remote RTCP address
 TInt  err1 = iRtpSession->SetRemoteRtcpAddress(iRtpId, addr2 );<br>
 //Register for RTCP callback
 err1 = iRtpSession->RegisterRtcpObserver(iRtpId, *this);

Sending a Receiver Report(RR) to sender:

iRtpSession->SendRtcpRrPacket(aStreamId); //aStreamId is the TRtpId 
                                           //of a received RTP packet.

Receiving the RTCP packet:

void CRTPEngine::RrReceived( TRtpId aStreamId, TRtpSSRC aSSRC )
 { 
  //Log the received parameters
 }

Unregistering the RTCP callback and closing the session:

iRtpSession->UnregisterRtcpObserver(iRtpId);
 iRtpSession->CloseSession(iRtpId);

Example Application

This application sends data packets using RTP and receives feedback about the sent packets using RTCP. http://wiki.forum.nokia.com/index.php/File:RTPTest.zip

KIS001488 - Feature Discovery returns invalid value for keyboard support on Nokia 5800 XpressMusic

Forum Nokia KB — Fri, 20 Nov 2009 13:08:35 GMT

Knowledge Base Home

ID	KIS001488	Creation date	November 20, 2009
Platform	S60 5th Edition	Devices	Nokia 5800 XpressMusic
Category	Symbian C++	Subcategory	UI, Usability

Keywords (APIs, classes, methods, functions): CFeatureDiscovery, KFeatureIdQwertyInput

Description

The Feature Discovery API provides methods for querying supported features on an S60 device.

The following line of code can be used for checking if a device has a QWERTY keyboard:

TBool isSupported = CFeatureDiscovery::IsFeatureSupportedL( KFeatureIdQwertyInput );

This code returns ETrue for Nokia 5800 XpressMusic, even though the device has no physical keyboard.

Solution

No solution available.

KIJ001487 - Scrollbar track tap may crash eSWT MIDlet with ListView

Forum Nokia KB — Fri, 20 Nov 2009 11:58:18 GMT

Knowledge Base Home

ID	KIJ001487	Creation date	November 20, 2009
Platform	S60 5th Edition	Devices	Nokia N97, Nokia 5800 XpressMusic
Category	Java ME	Subcategory	eSWT API

Keywords (APIs, classes, methods, functions): ListView

Overview

Tapping the scrollbar track area crashes an eSWT MIDlet with ListView.

Description

ListView is an eSWT API widget that allows the user to select one or more items from a collection of items that can be displayed in a multi-column way with different styles.

When there are several items available and some of them are not visible on the screen, a scrollbar allows the user to scroll the view to see all the items. On S60 5th Edition's touch-based devices, the user can drag the scrollbar by touching the screen.

On certain S60 5th devices, when user taps the track area of a scrollbar (without dragging the thumb), the eSWT MIDlet with ListView may crash as result.

Solution

No solution for the Nokia 5800 XpressMusic.

This issue has been fixed for the Nokia N97, starting with second commercial software releases (v 20.0.019).

KIJ001486 - SortedList with FILTER style not working in eSWT MIDlets

Forum Nokia KB — Fri, 20 Nov 2009 10:34:17 GMT

Knowledge Base Home

ID	KIJ001486	Creation date	November 20, 2009
Platform	S60 5th Edition	Devices	Nokia N97, Nokia 5800 XpressMusic
Category	Java ME	Subcategory	eSWT API

Keywords (APIs, classes, methods, functions): SortedList, FILTER

Description

SortedList instances represent a selectable user interface object that displays a sorted list of text items. Using the FILTER style adds a text entry field to the widget which enables the filtering of list items so that fewer items are displayed in the list.

In S60 5th Edition devices however, the SortedList filter editor cannot be used, as tapping the entry field has no effect.

How to reproduce

Download and install a test MIDlet (eSWT Showcase) from the Forum Nokia Java Developer's Library:

http://library.forum.nokia.com/index.jsp?topic=/Java_Developers_Library/GUID-660EC670-B7DB-4005-BF2D-411E5C0B3867_overview-d0e99645.html

1. From the main menu, select Lists.

2. From Lists, select Gem Lookup.

3. Try to tap the text entry field for the filter editor.

Solution

No solution for the Nokia 5800 XpressMusic.

This issue has been fixed for the Nokia N97, starting with second commercial software releases (v 20.0.019).

KIJ001485 - MultiPageDialog in eSWT MIDlets causes application exit problems

Forum Nokia KB — Fri, 20 Nov 2009 10:15:37 GMT

Knowledge Base Home

ID	KIJ001485	Creation date	November 20, 2009
Platform	S60 5th Edition	Devices	Nokia N97, Nokia 5800 XpressMusic
Category	Java ME	Subcategory	eSWT API

Keywords (APIs, classes, methods, functions): MultiPageDialog

Description

MultiPageDialog stands for a tabbed dialog which consists of multiple pages, with only one page made visible at time. The page visibility can be defined by end-users or applications programmatically.

In S60 5th Edition devices, using MultiPageDialog results in problems with exiting the application: either the MIDlet hangs at exit, or the application crashes abruptly.

Solution

No solution for Nokia 5800 XpressMusic.

This issue will be fixed for the Nokia N97, starting from second commercial software releases (v 20.0.019).

Incorrect Machine UID documented for Nokia 6730

Mgroeber9110 — Thu, 19 Nov 2009 08:31:31 GMT

ID	Unofficial - No ID assigned	Creation date	18 November 2009
Platform	S60 3rd Edition FP2	Devices	Nokia 6730 Classic
Category	Symbian C++	Subcategory

Description

Some Nokia documents (e.g.http://www.forum.nokia.com/devices/6730_classic) report the Product ID of the Nokia 6730 to be 0x2001DE9A. It was observed that this is not the value returned by HAL::Get when invoked with HAL::EMachineUid. The actual value returned is 0x2001DE97, rather than the documented product ID.

This needs to be taken into account when writing code that checks for specific FP2 models.

It is not known whether other uses of the Product ID (such as Product ID checking in a .pkg file) are also affected.

How to reproduce

   TInt uid;
   HAL::Get(HAL::EMachineUid, uid);
   /* uid will contain 0x2001DE97 on return */

Solution

Since there is currently no other device on the market which uses 0x2001DE9A as its product ID, it is probably safest to treat both values as variants of the 6730 Classic, as this discrepancy may be specific to a particular firmware variant or version of the device.

Reference

http://www.forum.nokia.com/devices/6730_classic

Porting iPhone web app to WRT - a porting example

Jimgilmour1 — Thu, 19 Nov 2009 20:02:07 GMT

1 Introduction
2 Porting steps
3 Conclusions
- 3.1 First conclusion
- 3.2 Second conclusion
4 iPhone web app/WRT widget co-development tips
- 4.1 A small WRT widget acts as a launcher
- 4.2 Optimising the UI
5 Using device-specific JavaScript APIs in WRT
6 Final conclusion

Introduction

This article describes the porting process of a simple web app from iPhone to Web Runtime (WRT) on Nokia devices such as the Nokia N97 device. It complements the article Porting iPhone web app to WRT on Nokia devices, which provides a general description of what an iPhone web app developer needs to know when switching to WRT development on Nokia devices based on Symbian platform. The purpose of this article is to describe the porting steps in practice. The example is for a horoscope web application (http://horoscope.internetdesigns.eu/) that will be ported from iPhone to WRT.

Porting a widget consists of the following steps:

creating a new project
copying remote content (HTML pages, style sheets, and image resources) to local static content
enabling user interaction with JavaScript™ code in Nokia devices

In addition to a porting case, the article discusses co-development possibilities and lists device-specific extensions to widgets on both platforms.

Prerequisites

To get started, you will need a tool to create HTML pages and JavaScript files. A simple text editor will serve the purpose just fine, but in this document Aptana Studio with the Nokia WRT plug-in is used, because it contains more sophisticated features than a text editor. In addition, Aptana Studio can be used to create iPhone web apps. The tools can be downloaded here:

http://www.forum.nokia.com/Tools_Docs_and_Code/Tools/Runtimes/Web_Runtime/Aptana_Plugin/

For developers who are new to WRT, it will be helpful to read an introduction to WRT technology:

http://www.forum.nokia.com/Technology_Topics/Web_Technologies/Web_Runtime/

Porting steps

Create a new project

1. Start Aptana Studio.

2. Select File > New > Project.

3. Select Nokia Web Runtime (WRT) > New Nokia Web Runtime Widget. Click Next.

4. Select Basic Widget Project.

5. Name the project ’horoscope’ and enter the location where the project will be created. Click Next.

6. Name the widget ’horoscope’ and use com.widget.horoscope as the widget identifier. A unique widget identifier is required for successful installation of the widget on the device. Click Next.

7. Name the main HTML file ’horoscope’. This file, horoscope.html, will be replaced in the following steps, but you’ll avoid having to rename the file if you name it ’horoscope.html’ here.

8. Name the CSS file ’style’ and the JavaScript file ’horoscope’. Click Finish. The project has been created.

Transfer remote website content into local static content

Your first task is to get the HTML pages from the website into the WRT project. The Horoscope web app is a dynamic website running in PHP, so getting the HTML files is done most easily by saving the web pages into the root directory of the Horoscope project. There are three pages to save:

1. Save http://horoscope.internetdesigns.eu/ as horoscope.html. Overwrite the existing horoscope.html in the project with this one.

2. Save http://horoscope.internetdesigns.eu/zodiac.php as zodiac.html.

3. Save http://horoscope.internetdesigns.eu/horoscope.php as zodiac_result.html.

The next step is to get the style sheet for the web application. This can be done by browsing to http://horoscope.internetdesigns.eu/css/style.css and saving the file into your computer. As with the HTML files, save the Cascading Style Sheet (CSS) file into the root directory of the Horoscope project.

After this, in Aptana Studio, refresh the project so that the HTML files and the CSS file appear in it. Right-click on the ’horoscope’ project in the Project view and select Refresh. The following files should now be visible in the project:

horoscope.html

horoscope.js

Info.plist

style.css

zodiac_result.html

zodiac.html

(* wrt_preview_frame.html)

(* wrt_preview_main.html)

After the web pages have been saved, the next task is to save the pictures from the web application as local copies. The reason for doing this is because the HTML pages have relative references to the pictures, and creating local copies saves you the trouble of updating all the references. Here is the list of pictures to be saved:

header.png (http://iphoneapps.internetdesigns.eu/images/header.png)

home.png (http://iphoneapps.internetdesigns.eu/images/home.png)

dayicon.png (http://horoscope.internetdesigns.eu/img/dayicon.png)

weekicon.png (http://horoscope.internetdesigns.eu/img/weekicon.png)

monthicon.png (http://horoscope.internetdesigns.eu/img/monthicon.png)

aquarius.png (http://horoscope.internetdesigns.eu/img/aquarius.png)

aries.png (http://horoscope.internetdesigns.eu/img/aries.png)

cancer.png (http://horoscope.internetdesigns.eu/img/cancer.png)

capricorn.png (http://horoscope.internetdesigns.eu/img/capricorn.png)

gemini.png (http://horoscope.internetdesigns.eu/img/gemini.png)

leo.png (http://horoscope.internetdesigns.eu/img/leo.png)

libra.png (http://horoscope.internetdesigns.eu/img/libra.png)

pisces.png (http://horoscope.internetdesigns.eu/img/pisces.png)

sagittarius.png (http://horoscope.internetdesigns.eu/img/sagittarius.png)

scorpio.png (http://horoscope.internetdesigns.eu/img/scorpio.png)

taurus.png (http://horoscope.internetdesigns.eu/img/taurus.png)

virgo.png (http://horoscope.internetdesigns.eu/img/virgo.png)

In Aptana Studio, create a new folder for the pictures:

1. Select File > New > Other.

2. Select General > Folder. Click Next.

3. Select the Horoscope project as the parent folder and name the folder ’img’. Click Finish. The folder has been created.

Save the pictures listed above into the img folder you just created.

Edit the Info.plist file

Open Info.plist in Aptana’s editor by double-clicking on it in the Project view and make sure that horoscope.html is set as the main HTML file:

<key>MainHTML</key>

<string>horoscope.html</string>

Also make sure that the key AllowNetworkAccess is set to true:

<key>AllowNetworkAccess</key>

<true/>

AllowNetworkAccess enables the widget to access the network.

Edit HTML files and file paths to fit local context

The first modifications in the HTML pages will target the internal linking between the files in your project. First, in horoscope.html, change all occurrences of zodiac.php to zodiac.html. The result should look like this:

<tr valign="middle" align="center">

<td>Aries<br /><a href="zodiac.html?id=0" ><img src="img/aries.png" alt="Aries" border="0" /></a></td>

<td>Taurus<br /><a href="zodiac.html?id=1" ><img src="img/taurus.png" alt="Taurus" border="0" /></a></td>

<td>Gemini<br /><a href="zodiac.html?id=2" ><img src="img/gemini.png" alt="Gemini" border="0" /></a></td>

</tr>

Next, in the <head> tag of each HTML page (horoscope.html, zodiac.html, zodiac_result.html), change the JavaScript link to point to horoscope.js, from this:

<script src="http://iphoneapps.internetdesigns.eu/javascript/functions.js" type="text/javascript"></script>

to this:

<script src="horoscope.js" type="text/javascript"></script>

You should have the horoscope.js in your Aptana project if you created the project with the New Project wizard (see Section 2.1, ’Create a new project’).

Change the style-sheet link in every HTML file to point to style.css in the root folder of your project. This is the original line of code:

<link href="css/style.css" rel="stylesheet" type="text/css" />

and this should be the result:

<link href="style.css" rel="stylesheet" type="text/css" />

The style sheet itself contains many references to external images (for example, this line: li.menu:hover{background:url("http://iphoneapps.internetdesigns.eu/images/menutouched.png") repeat-x #369}), which causes the widget to download them from the internet. This doesn’t necessarily matter, but if you prefer, you can comment these lines out. (Also, the widget looks just fine without them.)

With regard to the style sheet, you may have noticed some advanced CSS 3.0 parameters/values, such as text-overflow:ellipsis; or WebKit-related ones, such as -webkit-border-radius:8px;. These may or may not be understood by the WRT engine depending on the version in the user’s device. However, this is not a problem; the ones that are not understood by the engine will be silently ignored by it.

Returning to the HTML files, change the menu list element in the zodiac.html so that it points to the zodiac_result.html instead of horoscope.php:

<ul class="pageitem">

<li class="textbox"><p>Which horoscope would you like to see?</p></li>

<li class="menu"><a href="zodiac_result.html?h=d&id="><img alt="changelog" src="img/dayicon.png" /><span class="name">daily horoscope</span><span class="arrow"></span></a></li>

<li class="menu"><a href="zodiac_result.html?h=w&id="><img alt="changelog" src="img/weekicon.png" /><span class="name">weekly horoscope</span><span class="arrow"></span></a></li>

<li class="menu"><a href="zodiac_result.html?h=m&id="><img alt="changelog" src="img/monthicon.png" /><span class="name">monthly horoscope</span><span class="arrow"></span></a></li>

</ul>

Lastly, remove the content from zodiac_result.html:

<img src="img/" alt="" border="0" align="left" hspace="10"/><br /><span class="graytitle"><br /></span><br /><br /><br />

<ul class="pageitem">

<li class="textbox"><img alt="daily" src="img/dayicon.png" /> <span class="name">daily horoscope</span></li>

<li class="textbox"><strong></strong><br /><br /></li>

</ul>

The fewer elements on the screen the better, because they are visible while the result page is loading.

Remove references to external resources

You can now clean up the HTML pages a bit by removing references to the resources in the web. First, remove the Google-related JavaScript at the end of each HTML page:

<script type="text/javascript">

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

document.write(unescape("%3Cscript src=’" + gaJsHost + "google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E"));

</script>

<script type="text/javascript">

try {

var pageTracker = _gat._getTracker("UA-5622831-6");

pageTracker._trackPageview();

} catch(err) {}</script>

Also remove advertisements that lead to the affiliate website in zodiac.html and zodiac_result.html:

<a href="http://iphoneapps.internetdesigns.eu/ringostation.htm"><img src="http://affiliates.ringostation.com/images/iphone_320_50_22.png" border="0" /></a>

However, keep the reference to the original creator of the web app in the footer (to give credit where credit is due).

<div id="footer">

<a class="noeffect" href="http://iphoneapps.internetdesigns.eu">Designed by InternetDesigns</a>

</div>

Test the first working project

At this point, you have a working set of static HTML pages with internal linking and without unnecessary references to the resources in the web.

Test the HTML pages with Aptana’s own editor. To do this, click on the Nokia Web Runtime (WRT) tab at the bottom of the editor view. The result should look something like this:

Don’t worry about functionality yet; we’ll return to that shortly.

Make the application scalable to different screen sizes

iPhone has a specific screen size that is used among all models. This is not the case with the plethora of Nokia devices based on Symbian platform. For Nokia touch devices, the current resolution is 360 x 640 pixels, and it can be either portrait or landscape, depending on which way the user is holding the device (for example, the Nokia N97 and Nokia 5800 XpressMusic devices). The common screen size for non-touch devices is QVGA (240 x 320 pixels) in a variety of physical sizes. Depending on the device, it can be portrait (for example, the Nokia 6730 device), landscape (the Nokia E71 and similar devices), or both (for example, the Nokia N95, Nokia N96, and Nokia 6760 slide devices). Furthermore, there are special cases such as the Nokia E90 Communicator, which has a small cover display of 240 x 320 pixels and a large internal display of 800 x 352 pixels.

The same WRT widget can be installed into all of these devices, so you should make sure that your WRT widget always fits nicely in the user’s screen.

Take a look at the <table> tag in horoscope.html. It has a fixed width that matches the iPhone’s screen width. This is what you would like to change, but since your widget will have to deal with many different screen sizes, you should handle that dynamically through some JavaScript code.

First, give an ID to your table ’mainTable’):

<table id="mainTable" border="0" cellpadding="0" cellspacing="0" width="320" class="zodiac"  align="center">

Then, in horoscope.js, add this code:

window.onload = init;

window.onresize = windowResized;

function init() {

// Call windowResized() manually because it doesn’t get called automatically

// for the first time

windowResized();

}

function windowResized() {

document.getElementById("mainTable").width = window.innerWidth;

}

init() is called when the HTML page is loaded, and windowResized() is called whenever the screen size changes. windowResized() must also be called from the init() function because it does not get called automatically for the first time (in other words, the resize event is not raised when the widget is launched). windowResized() gets the inner width of the window (the width of the content area) and sets the width of the table to match it.

Of course there may also be cases where the content doesn’t fit the screen vertically. However, the height of the whole HTML page is not easy to restrict. After all, HTML is designed for computer displays where it can flow vertically and be scrolled. Therefore, vertical scaling of content is omitted from this document.

There is one other thing that can be done to improve the layout of the widget — remove the iPhone-specific title bar from every HTML file:

<div id="topbar">

<div id="title">Horoscope</div>

</div>

Removing the title bar allows the content to fit nicely in landscape orientation in nHD resolution (640 x 360 pixels):

NOTE: If there are any commands in the title bar, they should be moved to the Symbian S60 Options menu. Creation of the Options menu will be discussed later.

Add horoscope-related functionality with JavaScript

Horoscope is originally a PHP-based website, which means that all work is done on the server side in PHP code. This is fine for a remote website, but not for your WRT widget. The goal now is to make zodiac.html and zodiac_result.html work with some JavaScript so that they will act as original PHP code.

In this section, nothing is WRT specific. This is all about JavaScript code.

* zodiac.html:

This HTML page shows the sign that was selected in horoscope.html. Currently, the image source (the src attribute) is empty because no sign has been selected:

<img src="img/" alt="" border="0" align="left" hspace="10"/><br /><span class="graytitle"><br /></span><br /><br /><br />

To be able to fill in the required image source through JavaScript, add an ID attribute to the img tag. This way you can refer to the img element from JavaScript code. Call the element ’image’:

<img id="image" src="img/" alt="" border="0" align="left" hspace="10"/><br /><span class="graytitle"><br /></span><br /><br /><br />

Next, parse the ID value from the URL parameters. For this, write a helper function that stores all URL parameters into an array. Open horoscope.js and write the following function in it:

function getUrlVars() {

var vars = [];

var hash;

var hashes = location.search.substr(1).split("&");

for (var i = 0; i < hashes.length; i++) {

hash = hashes[i].split("=");

vars.push(hash[0]);

vars[hash[0]] = hash[1];

}

return vars;

}

Now you are ready to replace the empty src attribute of the image element with the location of the zodiac image in question:

function setZodiacImage() {

var hash = getUrlVars();

var image = "";

switch (hash[’id’]) {

case ’0’:

image = "img/aries.png";

break;

case ’1’:

image = "img/taurus.png";

break;

// Rest of the cases omitted for brevity.

}

document.getElementById("image").src = image;

}

The setZodiacImage() function above can be called after the image element has been declared. One possible place is right after the content div:

<div id="content">

<img id="image" src="img/" alt="" border="0" align="left" hspace="10"/><br /><span class="graytitle"><br /></span><br /><br /><br />

<ul class="pageitem">

<li class="textbox"><p>Which horoscope would you like to see?</p></li>

<li class="menu"><a href="zodiac_result.html?h=d&id="><img alt="changelog" src="img/dayicon.png" /><span class="name">daily horoscope</span><span class="arrow"></span></a></li>

<li class="menu"><a href="zodiac_result.html?h=w&id="><img alt="changelog" src="img/weekicon.png" /><span class="name">weekly horoscope</span><span class="arrow"></span></a></li>

<li class="menu"><a href="zodiac_result.html?h=m&id="><img alt="changelog" src="img/monthicon.png" /><span class="name">monthly horoscope</span><span class="arrow"></span></a></li>

</ul>

</div>

<!-- google_afm -->

<script language="javascript">;

setZodiacImage();

</script>

Clicking on the ’menu’ list item elements in zodiac.html should also provide zodiac_result.html with correct IDs. Currently ID parameters are empty (’href="zodiac_result.html?h=d&id="’). 'First, however, give each menu anchor an ID so that the anchors can be referred to' from the JavaScript code. Call them ’day’, ’week’, and ’month’:

<li class="menu"><a id="day" href="zodiac_result.html?h=d&id="><img alt="changelog" src="img/dayicon.png" /><span class="name">daily horoscope</span><span class="arrow"></span></a></li>

<li class="menu"><a id="week" href="zodiac_result.html?h=w&id="><img alt="changelog" src="img/weekicon.png" /><span class="name">weekly horoscope</span><span class="arrow"></span></a></li>

<li class="menu"><a id="month" href="zodiac_result.html?h=m&id="><img alt="changelog" src="img/monthicon.png" /><span class="name">monthly horoscope</span><span class="arrow"></span></a></li>

Now write a function that appends the right ID to the href attributes of every anchor element:

function setZodiacId() {

var vars = getUrlVars();

document.getElementById("day").href = document.getElementById("day").href + vars[’id’];

document.getElementById("week").href = document.getElementById("week").href + vars[’id’];

document.getElementById("month").href = document.getElementById("month").href + vars[’id’];

}

Here, again, the getUrlVars() function (declared previously) parses the parameters from the URL and returns them in an array.

Call this function right after you have called the setZodiacImage() function:

<script language="javascript">;

setZodiacImage();

setZodiacId();

</script>

* zodiac_result.html:

This HTML page shows the requested horoscope. It is the only thing that needs to be picked up from the internet. Since you do not have the original PHP code, you will get the content from the original website using Ajax, and place the content between <div id="content"></div> tags.

The JavaScript function getHoroscope() makes a request to the horoscope website, and, after receiving data, calls another function, named gotResult():

function getHoroscope() {

var vars = getUrlVars();

if (window.XMLHttpRequest) {

xhr_object = new XMLHttpRequest();

} else {

alert("Ajax not supported.");

return;

}

var url = "http://horoscope.internetdesigns.eu/horoscope.php?h="+vars[’h’]+"&id="+vars[’id’];

xhr_object.open("GET", url, true);

xhr_object.onreadystatechange = gotResult;

xhr_object.send(null);

}

function gotResult() {

if (xhr_object.readyState == 4) {

if (xhr_object.status == 200) {

displayHoroscopeResult();

}

else {

alert("Bad HTTP status");

}

}

}

Finally, displayHoroscopeResult() is called, and it parses the web page and writes the selected data into zodiac_result.html:

function displayHoroscopeResult() {

var content = xhr_object.responseText.toLowerCase();

var div_start = 0, div_stop = 0;

var text;

div_start = content.indexOf("<div id=\"content\"");

div_start = content.indexOf(">", div_start);

div_stop = content.indexOf("</div", div_start);

text = content.slice(div_start+1, div_stop-1);

document.getElementById("content").innerHTML = text;

}

Create Options menu

Remember that iPhone is a touch-only device, whereas Nokia devices based on Symbian platform range from full QWERTY keyboard and conventional ITU-T mobile phone keys to touchscreen only. And these devices can, of course, have any or all input options in the same device.

When using WRT’s widget.menu object, the WRT engine is aware of the device’s input methods, and shows the menu in the correct format. Therefore, using menu-controlled WRT is usually the way to proceed. In this case, the user probably wants to have a way to go back easily from zodiac_result.html to zodiac.html to select another scale of dates.

You will want to add a menu entry in your WRT to be able to go back:

- From zodiac.html to horoscope.html;

- From zodiac_result.html to zodiac.html.

You’ll also want to be able to go back to the main HTML page from the zodiac.html and zodiac_result.html pages.

Add the menu entries using the widget menu object, which is specific to WRT technology. Creating menu entries is straightforward:

- Create a menu item;

- Link a callback to this menu item;

- Append the menu item to the menu;

- Handle menu item selection in the callback.

For instance:

var CMD_BACK = 1;

backMenuItem = new MenuItem("Back", CMD_BACK);

backMenuItem.onSelect = onMenuItemSelected;

window.menu.append(backMenuItem);

CMD_BACK is a global variable that owns a number (here: 1). Each number is used to identify the menu item in the callback, which should follow this prototype:

function nameOfCallBack(<parameter>)

In your case:

function onMenuItemSelected(command) {

switch (command) {

case CMD_BACK:

// Branch depending on where you are

if (location.href.indexOf("zodiac.html") != -1) {

// If you are on the zodiac.html page, go back to the main page

location = "horoscope.html";

} else if (location.href.indexOf("zodiac_result.html") != -1) {

// If you are on the zodiac_result.html page, go back to the

// zodiac.html page. Take care that the zodiac ID is preserved.

var vars = getUrlVars();

var id = vars[’id’];

location = "zodiac.html?id=" + id;

}

break;

default:

break;

}

}

Have a look at the addMenus() function in the horoscope.js file. It is called by init(), which is called by the onload JavaScript event.

NOTE: It is also possible to implement the Back command on the right softkey. This provides a typical way of switching between different views and also prevents accidental closing of the application. For further details, see a related Forum Nokia code snippet: http://wiki.forum.nokia.com/index.php/CS001402_-_Controlling_the_softkey_in_WRT.

Conclusions

First conclusion

Porting the web app to WRT is easy. Moreover, you don’t need any specific knowledge or technique to do it. In other words, an experienced iPhone web app developer won’t have any trouble switching to WRT. The only issue is if the web app uses CSS 3.0 or iPhone-specific JavaScript events (see Chapter 4, Replacement technologies Porting iPhone web app to WRT on Nokia devices.

Second conclusion

Creating menus on WRT is quite simple. Though this was a small example of what you can do with WRT JavaScript APIs, all other APIs are quite easy to use, too. Again, switching from iPhone web app development to WRT should not be hard — knowing JavaScript enables you to be ready to develop for WRT; you simply need the API documentation provided in the Forum Nokia Web Developer's Library.

iPhone web app/WRT widget co-development tips

You’ve seen how to port an iPhone web app to a WRT widget. This works well as a one-shot activity, but is tedious to maintain if the original web app is updated. Thus, when creating a new web app/widget it is worthwhile to avoid using any WRT- or iPhone-specific components, or to make sure that both platforms are supported.

A small WRT widget acts as a launcher

If you want to keep both platforms supported, here’s one solution. Provide a small launcher WRT widget, which will load the iPhone- and Nokia device -enabled remote web app.

The launcher widget will:

- Set up the menu entries (back item, etc.);

- Load the remote web page from the internet.

You will only need the horoscope.html page in your widget, with the following content:

<!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>

<title>Horoscope</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

<body>

</body>

<script language="JavaScript">

var CMD_BACK = 1;

function onSelectedItem(command) {

switch (command) {

case CMD_BACK:

history.back();

break;

}

}

if (window.widget) {

var timerid = setInterval(function() {

if (history.length != 0) {

var backMenuItem = new MenuItem("Back", CMD_BACK);

backMenuItem.onSelect = onSelectedItem;

window.menu.append(backMenuItem);

clearInterval(timerid);

}

}, 1500);

widget.setNavigationEnabled(true);

window.menu.showSoftkeys();

}

this.location.href="http://horoscope.internetdesigns.eu/";

</script>

</html>

In this case, the only maintenance needed in the WRT widget involves the menu: adding/removing/modifying items. The work will be centralised on http://horoscope.internetdesigns.eu/, the original web app.

Device includes the simple WRT files and the updateable code resides on the server side. Code updates have an effect on both WRT and iPhone pages.

Optimising the UI

Taking both iPhone and Nokia devices based on Symbian platform into account is a pretty straightforward matter with this web application. The only required modification is to adapt the table on the first page (horoscope.html) to the screen size of the device, which you already did in Section 2.6, ’Make the applications scalable to different screen sizes’. That is all that is needed, because JavaScript works on both platforms. Now, maintaining both the web app and the WRT widget will only require maintaining the code on http://horoscope.internetdesigns.eu/.

When porting the application, we did not fully optimise the user interface for Nokia devices (for example for S60 5th Edition devices). Optimisation is naturally recommended to achieve the best look and feel on target devices. This porting case was intended to demonstrate basic porting steps; fine-tuning of the application to fully meet the Nokia UI guidelines and user experience recommendations will be covered in upcoming articles.

Using device-specific JavaScript APIs in WRT

If the web app uses specific third-party JavaScript APIs that let the developer access device-specific (in this case, iPhone-specific) features, porting to WRT may not be as simple as demonstrated here. One of these APIs is PhoneGAP. This API provides functions for accessing location, contact and accelerometer data, and making use of the device’s vibration and sound functionality. Unfortunately, even though PhoneGap is supposed to be a cross-platform API, it will not run on Nokia devices based on Symbian platform. However, if you have used such a third-party API, it is still possible to make your code compatible with Nokia devices by using Platform Services. Platform Services will allow WRT widgets to do the following:

Access and launch applications on a device (AppManager Service API)

Access and manage calendar information (Calendar Service API)

Access and manage information about contacts (Contacts Service API)

Access and manage information about landmarks (Landmarks Service API)

Access device logging events (Logging Service API)

Access device location information and perform location-based calculations (Location Service API)

Access information about media files stored on a device (Media Management Service API)

Send, retrieve, and manage messages such as SMS and MMS (Messaging Service API)

Access data from the physical sensors of a device (Sensor Service API)

Access and modify system information on a device (SystemInfo Service API of WRT 1.1)

Access system information and control certain device features (SystemInfo Service API of WRT 1.0)

Platform Services are supported from S60 5th Edition onwards and are available as updates to some S60 3rd Edition devices as well.

Developers can use device detection mechanisms familiar from the mobile web to figure out if the device the application is running in supports extra functionalities. More information can be found at: http://wiki.forum.nokia.com/index.php/Mobilising_your_Web_Service#Detecting_the_client_browser.

Final conclusion

It is fairly straightforward to port an iPhone web app that uses basic HTML, CSS, and JavaScript to WRT. Developers will need to rework the web app a bit more to provide similar functionality in a WRT widget only if device-specific APIs were originally used. Fortunately, the technologies supported in the platforms are very similar — behind the scenes it is still HTML/CSS/JavaScript. This means that iPhone developers will not face an unknown world when switching to WRT widgets. On top of that, the potential user base for their applications will expand tremendously.

To test the ported application on a device, download the unzip the Horoscope.zip file and install the widget (horoscope.wgz) to your device.

Media:Horoscope.zip

Copyright © 2009 Nokia Corporation. All rights reserved. Nokia and Forum Nokia are trademarks or registered trademarks of Nokia Corporation. Java and all Java-based marks are trademarks or registered trademarks of Sun Microsystems, Inc. Other product and company names mentioned may be trademarks or trade names of their respective owners.

Porting iPhone web app to WRT on Nokia devices

Tasala — Fri, 20 Nov 2009 11:25:44 GMT

1 Introduction
2 General considerations
3 Compatible technologies
4 Replacement technologies
5 Technologies not supported by Nokia devices based on Symbian platform and WRT
6 Additional technologies supported in WRT
- 6.1 Widget as a stand-alone application
- 6.2 Additional features
7 iPhone to WRT tips and hints
- 7.1 External links
- 7.2 Client-side storage with HTML 5 features
8 IDE issues
9 Web browsing on Nokia devices based on Symbian Platform

Introduction

This article provides information that iPhone web app developers need to know when switching to Web Runtime (WRT) development on Nokia devices based on Symbian platform. In this article, WRT refers to WRT on the following Nokia devices based on Symbian platform: S60 5th Edition devices, S60 3rd Edition, Feature Pack 2 devices, and selected S60 3rd Edition, Feature Pack 1 devices.

Porting to WRT is a great way to add volume to the user base and expand markets, with minimal investment. It is beneficial to target as many vendors as possible, and WRT offers an economical way to do it. Lots of iPhone web apps in the market work on Nokia devices based on Symbian platform, with only minor adjustments and optimizations to the screen (adjustments may need to be made to resources on the UI front end; nothing may need to change on the back end). The simplest and fastest way to make them work is to create a WRT widget that includes a link to the web page and add an icon for the widget to the application shell. This is possible because basic web technologies (HTML; Cascading Style Sheets, or CSS; and JavaScript™) work for both iPhone and Nokia devices based on Symbian platform.

When starting the porting work, it’s a good idea to consider exploiting all the possibilities WRT offers, such as Platform Services. Access to location, phone book, camera functions, and so on adds a great integration experience. Obviously, a static web page from the server side cannot achieve this. Using Platform Services is optional, of course, but the rewards are substantial.

WRT offers other benefits, too, including real multitasking and multiprocesses. Widgets can run simultaneously, there is no need to exit the widget when going to external web sites, and other applications can be launched at the same time. With the introduction of home-screen widgets in S60 5th Edition (for example, the Nokia N97 device), a background process provides live updates to enable better experiences. WRT takes web technology on mobile devices to a whole new level, making it a truly application-like experience. WRT widget delivery is also straightforward; there's no need to sign the widget and e.g. Ovi Store offers an easy way to distribute and monetize the widgets to Nokia users all over the world.

This article assumes the reader has a good basic knowledge of web technologies (HTML, CSS, JavaScript, Ajax, XML, etc.). The real porting example (porting a horoscope web app from iPhone to WRT) is described in details in the article Porting iPhone web app to WRT - a porting example.

General considerations

The iPhone (and iPod Touch) browser is Mobile Safari, based on the open source WebKit browser. S60 5th Edition devices (such as the Nokia 5800 XpressMusic or Nokia N97 device) use the same base (WebKit) for both the mobile browser and the widget engine (WRT), which provides a similar experience for the part of standard HTML and CSS on both platforms.

The iPhone SDK does not provide a comprehensive solution for building stand-alone applications using only HTML/CSS /JavaScript. Small applications such as widgets are usually based on native code. While the iPhone browser allows some interaction with device resources (for example, using HTML off-line data functionality), the JavaScript APIs exposed by WRT are in many ways more comprehensive and offer the possibility of developing fully fledged applications with JavaScript. This is perhaps the biggest difference between iPhone and Nokia devices based on S60 5th Edition, where web-based widgets (or WRT) provide extensive JavaScript APIs that allow developers to reach the same powerful functions as with native code.

WRT is comparable to other widget development environments such as Google Gadgets and desktop Apple Dashboard widgets, with added extras such as device interaction (GPS, Calendar, Contacts, Sensor data, Messaging, etc.) and Flash from Adobe.

Compatible technologies

Both platforms implement various web-standardized technologies. Therefore, most of these technologies are compatible with both platforms. Here, globally, is what developers can keep in S60 5th Edition:

HTML 4.01, XHTML 1.0/1.1 and XHTML Mobile Profile (MP)

CSS 2.1

JavaScript 1.5

XMLHttpRequest object for Ajax

URL schemes for short message service (SMS), mail sending, phone call, Maps and YouTube.

Replacement technologies

Some iPhone-specific technologies have to be replaced on S60 5th Edition, either because they are Apple specific or because iPhone is sporting a slightly newer version of the WebKit core, with support for, for example, HTML5 off-line functionality. Here are the technologies and their replacements on S60 5th Edition.

Client-side storage with HTML 5 features

On WRT, it is preferable to use the WRT JavaScript API or cookies to do such a task. See

http://wiki.forum.nokia.com/index.php/Storing_settings_in_WRT.

On iPhone, use:

http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/.

Canvas vector drawing

This is currently not supported on Nokia devices based on Symbian platform. As a replacement, consider using Flash Lite from Adobe. The iPhone JavaScript contained in your canvas tags can be exported easily into ActionScript 2.0 in Flash. Another solution is to create the drawing using the SVG Tiny standard.

Viewport metadata

iPhone web apps support the viewport metadata to give information about the zoom and content area that you want to use in your website. The viewport is the area that determines specifics about laying out the content (for example, where text wraps on the web page). The Web Browser for Nokia devices based on Symbian platform automatically adjusts the content to the screen, so there is no need to use this feature. If you create a WRT widget you can have a full-screen web application similar to the full-screen mode in an iPhone web app.

Icon for home page

The home screen icon for iPhone is a meta-tag that won’t make any difference in the website or WRT widget. You can leave, or not, the following tag if you are using it in your iPhone application:

<link rel="apple-touch-icon" href="/path_to_icon.png"/>

If you want to use the same icon in your WRT widget, rename the icon to icon.png and copy it into the root folder of the widget. You can replace or add the following line to use the same icon as the shortcut icon used in the Web Browser’s Bookmarks. This will not have any effect on WRT widgets and is only valid when creating a mobile web page.

<link rel="shortcut icon" href="/path_to_icon.png">

Both metatags can live in the same HTML page. iPhone will use the first one and Nokia devices based on Symbian platform will use the second. The PNG file must be 57 x 57 pixels to be compatible for iPhone. Nokia devices can use that as well, or you can create a 16 x 16 ICO file and reduce the size of the image.

Touch events

S60 on Symbian platform OS is not meant to run on multitouch-based mobile devices. Therefore, all iPhone-specific events that begin with ’ontouch*’ and ’ongesture*’ have to be dropped. As a replacement, use the standard events (onclick, onmousedown, etc.). Make sure that the events behave as expected after the change has been made.

Technologies not supported by Nokia devices based on Symbian platform and WRT

CSS 3.0 features

Dedicated WebKit CSS visual effects

The following CSS iPhone properties will not work in all versions of the Web Browser on Nokia devices. If you leave them, however, they should not affect the rendering:

-webkit-border-image

-webkit-border-radius

-webkit-text-size-adjust

-webkit-tap-highlight-color

CSS transforms (scaling, rotating, skewing, and translating objects using the -webkit-transform property)

Touch events (see Section 4, ’Replacement technologies’)

The following JavaScript events will not work in the browser or WRT widget:

ontouchstart

ontouchend

ontouchmove

ontouchend

ongesturestart

ongestureend

ongesturechange

Additional technologies supported in WRT

Widget as a stand-alone application

iPhone web apps are usually meant to be deployed from a web server, so they can be accessed through the internet connection on iPhone. This is perhaps the biggest difference from WRT: WRT widgets can be embedded into the device itself and run as stand-alone applications (while of course being able to access resources on the web, as well).

On iPhone, there is a trick to make a web app appear like a stand-alone application, with an icon in the application shell. The idea is to create a small native code snippet that uses the UIWebView class to run the web-based code of the widget. On WRT, you are only writing web-based code and not a single line of native code.

Additional features

Flash support

iFrame support

Localized name and icon for Applications menu

UI string localization support

Navigation features for hiding or showing the cursor, allowing tab navigation, and creating transitions between divs.

Home-screen support (in compatible devices such as the Nokia N97 device)

Platform services

WRT provides a set of APIs that gives you the ability to access most of the device’s underlying features. These JavaScript APIs allow you to create high-featured applications without typing any native code, which is the true strength of WRT widgets.

For more information, see:

http://library.forum.nokia.com/index.jsp?topic=/Web_Developers_Library/GUID-65AAF569-D347-462B-B59A-9D7CA184AB9C.html

iPhone doesn’t save any files on the device side. WRT widget uses only the server side PHP code and since other files reside on the device, the application can use the device capabilities.

Widget object

For more information, see:

http://library.forum.nokia.com/index.jsp?topic=/Web_Developers_Library/GUID-7C69DDA4-16F1-4A8F-BDB2-4CB0015B4E81.html

iPhone to WRT tips and hints

External links

For external links (to another website, YouTube video, or Google Maps application), a web app for iPhone uses the A tag in HTML. In WRT widgets it is recommended to open a new browser instance to let the user access external content outside of your widget. This is achieved with the widget.openURL() method, which leaves your widget on the background while the user browses the external content.

You can change every link:

<a href="http://www.cnn.com">Go To CNN</a>

with this code:

<a href="JavaScript:widget.openURL('http://www.cnn.com')">Go To CNN</a>

Or, if you want to be unobtrusive, you can leave the original link and cancel it if it is a WRT engine:

<a href="http://www.cnn.com" onclick="if (widget!=undefined) {widget.openURL(this.href); return false}">Go To CNN</a>

Client-side storage with HTML 5 features

In an iPhone web app you can use HTML 5 features to generate SQL-like databases on the client. With WRT widgets you can use the setPreferenceForKey method of the widget object to store information on the device for future use from the widget.

// To store a variable

widget.setPreferenceForKey(’value’, ’name’);

// To retrieve a variable

var data = widget.preferenceForKey(’name’);

The value is a string, so if in your iPhone web app you were using tables with records you can recreate the same scheme using an array of objects in JavaScript and then convert them to a JSON-like string. The string can be converted again to an array of objects using the eval() method. If you are using Prototype or jQuery, the library can help you convert the array to a JSON string. Here is an example:

//Class Friend definition

var Friend = function(n, i, e) {

this.name = n;

this.icon = i;

this.email = e;

}

function quote(string) {

       return "'" + string.replace("'", "\'") + "'";
   }


// Function to convert a Friend to JSON-friendly

function friendToJSON(friend) {

return "{ name: " + quote(friend.name) + ", icon: " +

quote(friend.icon) + ", email: " +

quote(email) +

"}";

}

// Function to convert an array to JSON-friendly

function arrayToJSON(array) {

var json = "[";

for (var i=0; i<array.length; i++) {

json += array[i].toJSON() + (i==array.length-1) ? "" : ",";

}

json += "]";

return json;

}

// Save friends ’table’ to the storage

function saveFriends() {

widget.setPreferenceForKey(arrayToJSON(friends), ’friends’);

}

// Load friends from the storage or create the storage for the first time

function loadFriends() {

if (widget.preferenceForKey(’friends’)!=null) {

// The storage already has a collection

friends = eval("(" + widget.preferenceForKey(’friends’) + ")");

} else {

// Initialization for the first time

friends = [

new Friend(’John’, ’john.gif’, ’john@developer.com’),

new Friend(’Mary’, ’mary.gif’, ’mary@developer.com’)

];

}

}

// Similar to a ’table’ of friends

var friends;

IDE issues

If you created your iPhone web app using Aptana and the iPhone plug-in, it will be very easy to port it as a WRT widget using the Aptana plug-in for WRT, available at http://aptana.com/nokia. The Aptana IDE is actually the best IDE to use for such porting tasks since it supports both platforms.

If you created your iPhone web app using Dashcode for Mac, you can easily import the project in Aptana. Dashcode uses its own JavaScript component library optimized for the iPhone browser.

Web browsing on Nokia devices based on Symbian Platform

In addition to offering WRT widgets, Nokia devices based on Symbian platform provide a rich mobile web browsing experience through a WebKit-based browser. Optimizing an iPhone-specific web page to S60 5th Edition, for example, is straightforward because both platforms support standard web technologies such as HTML, CSS, and JavaScript.

However, there are some differences between devices, so when designing web pages, the supported browser and device features should be taken into account and serve the optimized content to target devices. This can be done easily by checking the UAProfile or user-agent header information that is unique to each device model. When the functionality is built in the server side, all that is needed is to optimize the web page to be target platform/device specific, by changing the supported resolution and UI elements. To make mobile website or application customisation faster and easier, Forum Nokia offers Nokia Mobile Web Templates, a series of custom, tested mobile web styles and components targeted at mobile web developers and designers.

[[Category:]]

GuaranaUI-Documentation

Allanbezerra — Thu, 19 Nov 2009 15:10:25 GMT

Components Documentation

Accordion	Busy Indicator	Button	Carousel	Checkbox	Customisable List
Date	Dropdown	Iconic Menu	Image Description	LightBox	Miniview
Options Menu	Progress Bar	Radio Button	Rating	Scroll	Sortable Grid
Tabs Bar	Text Label	Text Link	Tooltip	Transition	Transition List

Extra Components Documentation

1. Widget

2. Option Box

3. Nokia Loader

Bondi Widget porting example - devicestatus API

Jimgilmour1 — Wed, 18 Nov 2009 17:12:18 GMT

1 Preface
2 1. Download the .wgt package
3 2. Rename and unzip the Test widget archive
4 3. Create info.plist manifest file
5 4. Add Javascript wrapper library
6 5. Packaging
7 6. Deploy

Preface

This is an example of porting a Bondi Widget to Nokia WRT using the guide found here. The example widget uses Bondi API specific device status functions. It gets charging status of battery, indicating whether the phone's battery is being charged or not.

1. Download the .wgt package

The Charge! widget package can be found by following this link. This porting example was written using the Charge! widget version 1.0. The link may require login credentials for the Bondi website.

2. Rename and unzip the Test widget archive

The archive needs to be unzipped to make modifications to its contents. First rename the file extension from *.wgt to *.zip. Then extract the zip archive.

3. Create info.plist manifest file

When installing a .wgz file the system looks for a manifest file called info.plist. The Bondi Widget equivalent is called config.xml.

Here's how to use the Bondi Widget config.xml data to create the WRT manifest file:

Download and unzip this info.plist template file and save it in the widget's root directory.
Open the widget's config.xml file and find the <name> element. Copy the text found within the element and paste it into the <string> element under <key>DisplayName</key> element of the info.plist file.
```
<key>DisplayName</key>    
<string>Charge!</string>
```
The identifier of a Bondi widget can be found in the id attribute of the <widget> element in config.xml. If the value is a URL, use the conventional WRT identifier form, which is the URL in reverse. Add the identifier to <string> element under <key>Identifier</key> element of the info.plist file.
```
<key>Identifier</key>       
<string>fi.metropolia.users.miasa.widgets.charging</string>
```
The HTML-file can be found in the src attribute of <content> element.
```
<key>MainHTML</key>
<string>index.html</string>
```
This widget does not require network access so it can be set to false.
```
<key>AllowNetworkAccess</key>   
<false />
```
Save the file.

4. Add Javascript wrapper library

Download bondi.js (to be uploaded later) and save it to the widget's root directory.
Add the following line inside <head> element in main HTML file:

<script type="text/javascript" src="bondi.js"></script>

5. Packaging

Re-zip the containing Charge! widget folder and change the file extension from *.zip to *.wgz.

6. Deploy

Upload the widget to your mobile device and install.

An example of the ported widget will be uploaded later. Remember to change the extension to *.wgz before installing.

Bondi Widget porting example - geolocation API

Jimgilmour1 — Wed, 18 Nov 2009 17:14:15 GMT

1 Preface
2 1. Download the .wgt package
3 2. Rename and unzip the Test widget archive
4 3. Create info.plist manifest file
5 4. Add Javascript wrapper libraries
6 5. Packaging
7 6. Deploy

Preface

This is an example of porting a Bondi Widget to Nokia WRT using the guide found here. The example widget uses Bondi API specific geo-location and file-system functions. It gets the location via GPS, saves the location to file-system and displays a map based on the given latitude and longitude.

NOTE: The Javascript wrapper library currently supports only geo-location functions, file-system functions are not supported.

1. Download the .wgt package

The Here I am! widget package can be found by following this link. This porting example was written using the Here I am! widget version 1.0. The link may require login credentials for the Bondi website.

2. Rename and unzip the Test widget archive

The archive needs to be unzipped to make modifications to its contents. First rename the file extension from *.wgt to *.zip. Then extract the zip archive.

3. Create info.plist manifest file

When installing a .wgz file the system looks for a manifest file called info.plist. The Bondi Widget equivalent is called config.xml.

Here's how to use the Bondi Widget config.xml data to create the WRT manifest file:

Download and unzip this info.plist template file and save it in the widget's root directory.
Open the widget's config.xml file and find the <name> element. Copy the text found within the element and paste it into the <string> element under <key>DisplayName</key> element of the info.plist file.
```
<key>DisplayName</key>    
<string>Here I am!</string>
```
The identifier of a Bondi widget can be found in the id attribute of the <widget> element in config.xml. If the value is a URL, use the conventional WRT identifier form, which is the URL in reverse. Add the identifier to <string> element under <key>Identifier</key> element of the info.plist file.
```
<key>Identifier</key>       
<string>net.webvm.bondi.geo</string>
```
The HTML-file can be found in the src attribute of <content> element.
```
<key>MainHTML</key>
<string>geo.html</string>
```
This widget requires network access so it should be set to true.
```
<key>AllowNetworkAccess</key>   
<true />
```
Rename the icon from aplix.png to icon.png.
Save the file.

4. Add Javascript wrapper libraries

Download bondi.js and platformservices.js (to be uploaded later) and save them to the widget's root directory.
Add the following lines inside <head> element in main HTML file:

<script type="text/javascript" src="bondi.js"></script>
<script type="text/javascript" src="platformservices.js"></script>

5. Packaging

Re-zip the containing Here I am! widget folder and change the file extension from *.zip to *.wgz.

6. Deploy

Upload the widget to your mobile device and install.

An example of the ported widget will be uploaded later. Remember to change the extension to .wgz before installing.

Guarana UI: a jQuery-Based UI Library for Nokia WRT

Allanbezerra — Thu, 19 Nov 2009 15:52:21 GMT

1. Introduction

This is the documentation of the Guarana UI - a jQuery-Based UI Library for Nokia WRT. Nokia WRT is a development and delivery platform that allows the creation of applications (widgets) based on standard web technologies, such as HTML, CSS, JavaScript, and AJAX. WRT Framework intends to offer developers a set of common components to create and deploy widgets in a friendly way. If you would like to know how to start developing with Nokia WRT, please visit Web Runtime QuickStart available in the Forum Nokia website.

The Guarana UI Library is a jQuery-based set of customisable UI elements, application frameworks, and templates that can be used for the creation of user interfaces in Nokia's Web Runtime platform.

2. Overview of Guarana UI

The WRT Framework is closely integrated with the jQuery library. The library uses the best practices of other libraries such as jQueryUI and ThemeRoller.

Click here for more details.

3. Download Guarana UI

The point to starting widget development using Guarana UI.

Click here to download Builded Package (recommended).

Click here to download Full Package.

4. My first widget using Guarana UI

The point to understand how to use these components in your WRT widget.

Click here for more details.

5. Components Documentation

This wikipage includes the Components documentation for all developed components.

Click here for more details.

Creating Debian packages for Maemo 4 Qt applications and showing in the application menu

Jimgilmour1 — Tue, 17 Nov 2009 10:55:49 GMT

1 Introduction
2 .Deb Packages In Brief
3 Prerequisites
4 Creating the Application
5 Copying the Application to Scratchbox
6 Compiling the Application at Scratchbox
7 Creating the Tree of Debian Package
8 Creating the file thats put the Application on Maemo Menu
9 Copying the Application Compiled to Deb Tree
10 Creating the Deb Package
11 Sending the .Deb Package to Maemo Device
12 Installing the Deb Package at Maemo Device
13 Snapshoot of HelloWorld Application

Introduction

In this article, I will present how to build a .deb package . This is a usual implementation, but the difference is the Qt for Maemo application. The other problem that this article will address is how to put the Qt application at Menu of Maemo Device. The proposed strategy does not use dh_make to create the basic debian package structure, as described in Qt for Maemo Developers Guide.

.Deb Packages In Brief

Deb is the extension of the Debian software package format and the most often used name for such binary packages. Like the Deb part of the term Debian. Debian packages are used in distributions based on Debian, such as Ubuntu and others.

Prerequisites

You need to have libqt4-dev ,ScratchBox and Maemo SDK installed on your Computer and libqt4-dev installed on your Scratchbox ARM target and your Maemo Device . For more information on ScratchBox Installation click here and for Qt on Maemo click here.

Creating the Application

You need to create a simple Qt HelloWorld Project on computer. I created a project with two labels how is showed below. Remember of to set the size of QWidget to 720 of Width and 420 of Height because the resolution of Maemo Device.

Copying the Application to Scratchbox

First , copy the sources files of application to a folder at Scratchbox. In general the address is /scratchbox/users/username/home/username/. I do this:

flavio@flavio-desktop:~/workspace$ cp -r  HelloWorld/ /scratchbox/users/flavio/home/flavio/

Compiling the Application at Scratchbox

At Start, you need login at Scratchbox:

~$ /scratchbox/login

If necessary select the ARM target using sb-conf se DIABLO_ARMEL . To compile do this :

[sbox-DIABLO_ARMEL: ~] > cd HelloWorld
[sbox-DIABLO_ARMEL: ~/HelloWorld] > qmake
[sbox-DIABLO_ARMEL: ~/HelloWorld] > make

Creating the Tree of Debian Package

After that , you need to create the following folders:

[sbox-DIABLO_ARMEL: ~/HelloWorld] cd ..
[sbox-DIABLO_ARMEL: ~] > mkdir HelloWorldApplication
[sbox-DIABLO_ARMEL: ~] > mkdir HelloWorldApplication/DEBIAN

You'll need to create a control file for your package using a simple text edit. In this post I use the Vi.

[sbox-DIABLO_ARMEL: ~] > vi  HelloWorldApplication/DEBIAN/control

In this step we'll look at what each field in the control file means and what kind of information you need to provide. The syntax for the control fields is very simple: the name of the field, followed by a colon, and then the body or value of the field.

Package: HelloWorld
Priority: optional
Version: 1.0
Architecture: all
Maintainer: Flavio Fabricio <flaviofabricio@gmail.com>
Depends: libqt4-dev
Description: This is a HelloWorld Application

Returns to HelloWorld Application directory and create the folders below:

[sbox-DIABLO_ARMEL: ~] > cd  HelloWorldApplication/
[sbox-DIABLO_ARMEL: ~/HelloWorldApplication] > mkdir usr

Creating the /usr subdirectories:

[sbox-DIABLO_ARMEL: ~/HelloWorldApplication] > cd usr/
[sbox-DIABLO_ARMEL: ~/HelloWorldApplication/usr] > mkdir bin
[sbox-DIABLO_ARMEL: ~/HelloWorldApplication/usr] > mkdir lib
[sbox-DIABLO_ARMEL: ~/HelloWorldApplication/usr] > mkdir share

Creating the /share subdirectories:

[sbox-DIABLO_ARMEL: ~/HelloWorldApplication/usr] > cd share/
[sbox-DIABLO_ARMEL: ~/HelloWorldApplication/usr/share] > mkdir applications
[sbox-DIABLO_ARMEL: ~/HelloWorldApplication/usr/share] > mkdir pixmaps

Creating the hildon subdirectory that is the folder where is the .desktop files :

[sbox-DIABLO_ARMEL: ~/HelloWorldApplication/usr/share] > cd applications
[sbox-DIABLO_ARMEL: ~/HelloWorldApplication/usr/share/applications] > mkdir hildon

Creating the file thats put the Application on Maemo Menu

You'll need to create too, a .desktop file that the Maemo uses to put application at Menu.

[sbox-DIABLO_ARMEL: cd /HelloWorldApplication/usr/share/applications/hildon
[sbox-DIABLO_ARMEL: ~/HelloWorldApplication/usr/share/applications/hildon]>vi helloworld.desktop

Here we'll to add the address of executable file , image icon file , etc...

[Desktop Entry]
Categories=Qt;
Encoding=UTF-8
Version=0.1
Type=Application
Name=HelloWorld
Exec=/usr/bin/HelloWorld
Icon=helloworld

Copying the Application Compiled to Deb Tree

[sbox-DIABLO_ARMEL: ~] > cd HelloWorld
[sbox-DIABLO_ARMEL: ~/HelloWorld] > ls
HelloWorld     helloworld.cpp  main.cpp       helloworld.png  
HelloWorld.pro helloworld.h    helloworld.ui  ui_helloworld.h

In this step, you will to copy the executable file to /usr/bin folder. This executable is called by helloworld.desktop at line Exec=/usr/bin/HelloWorld on the file described above.

[sbox-DIABLO_ARMEL: ~/HelloWorld] > cp helloworld ../HelloWorldApplication/usr/bin/

Now, you will to copy the sources files to /usr/lib folder.This is recommended , but not required.

[sbox-DIABLOE_ARMEL: ~/HelloWorld] > cp HelloWorld.pro ../HelloWorldApplication/usr/lib/
[sbox-DIABLO_ARMEL: ~/HelloWorld] > cp helloworld.cpp ../HelloWorldApplication/usr/lib/
[sbox-DIABLO_ARMEL: ~/HelloWorld] > cp helloworld.h ../HelloWorldApplication/usr/lib/
[sbox-DIABLO_ARMEL: ~/HelloWorld] > cp helloworld.ui ../HelloWorldApplication/usr/lib/
[sbox-DIABLO_ARMEL: ~/HelloWorld] > cp main.cpp ../HelloWorldApplication/usr/lib/

You will need a picture to use like Icon. You can search some image at the Google Images.In this case I renamed the picture to helloworld.png.This image is called by helloworld.desktop at line Icon=helloworld on the file described above and save to /usr/share/pixmaps/ folder.

[sbox-DIABLO_ARMEL: ~/HelloWorld] > cp helloworld.png ../HelloWorldApplication/usr/share/pixmaps/

Creating the Deb Package

[sbox-DIABLO_ARMEL: ~/HelloWorld] > cd ..
[sbox-DIABLO_ARMEL: ~] > dpkg-deb -b HelloWorldApplication

Sending the .Deb Package to Maemo Device

I used the Scp command with the IP address of device. The IP address of device is searched at Settings->Connection Manager , after that , click at Connection Manager at left-Up-Corner->internet connection->IP address.

[sbox-DIABLO_ARMEL: ~/HelloWorld] > scp HelloWorldApplication.deb root@10.0.0.13:/home/

Installing the Deb Package at Maemo Device

Open a new terminal and do this:

ssh root@10.0.0.13

enter with the password of Maemo Device

root@10.0.0.13's password:
Nokia-N810-43-7:~# cd ..
Nokia-N810-43-7:/# cd /home/
Nokia-N810-43-7:/home# dpkg -i HelloWorldApplication.deb

Now, the application is installed at Maemo Device.

Snapshoot of HelloWorld Application

This post is also available too QtEfforts of the Efforts Projects in the Embedded Systems and Pervasive Computing Laboratory.

Java Memory Management

Tiger79 — Tue, 17 Nov 2009 12:46:35 GMT

Reviewer Approved

Memory management can be one of the great joys of developing with a garbage-collected language like Java. Being able to create objects temporarily, without having to worry about making sure they are destroyed later, makes object orientation much more usable. Using libraries without having to worry about who is responsible for allocating and deallocating memory means less time rummaging through documentation, and less time tracking down memory leaks.

In the world of Java ME, however, we're often working in very tight spaces, sometimes as low as 200k, so memory management is still something we have to think about. And it can still be something we have to do.

Which means, you'll need to know how memory is being managed...

1 The Heap(s)
2 Garbage Collection
- 2.1 What The Garbage Collector Doesn't Do
- 2.2 "But, I Don't Create Any Garbage"
3 Classes
4 Objects
5 Further Reading

The Heap(s)

The heap is the space used for all runtime data. This can include classes and objects, as well as stack frames. Stack frames are used by methods to store parameters and local variables, as well as temporary values during expression evaluation. They are created when a method is entered, and destroyed when it exits.

Heaps come in all shapes and sizes, which can make life confusing for those new to mobile Java.

Every implementation has at least one heap. This is the main place where classes are loaded and objects are allocated. It might be a fixed size (like Series 40), or it might grow as required (Series 60). The Runtime class has methods for finding the size of this heap and how much is free (unallocated).

Some implementations will use additional heaps. These will usually be specialised in some way. Examples include:

Native object heap: sometimes, Java objects are used to access "native objects" - objects that are created and managed by the operating system or user interface. In some cases, these objects will exist outside of the Java heap, with a small object inside the Java heap that interfaces between the two environments. Images and 3D objects can fall into this category.

Image heap: images heaps are used only for images. They are sometimes more closely coupled to the video hardware to improve graphical performance.

Large object heap: this kind of heap is used for "large objects" - which could include images or large arrays.

Heaps like these may be shared between applications. There may be no way to find out how large these heaps are, or how much is available. Heaps shared between applications can be a common cause of OutOfMemoryErrors that occur only the first time the application is executed after download, usually because the browser is still consuming memory.

Since some kinds of object may have to be stored in a specific heap, running out of space in any one heap can result in an OutOfMemoryError.

Garbage Collection

The garbage collector (GC)gets rid of objects (from all heaps) that you don't need anymore. Eventually. It doesn't get rid of them immediately that they become unreachable.

What you can guarantee, is that the GC will have done it's best to find memory before an OutOfMemoryError is thrown. Usually, the GC runs when there is not enough memory to create a new object. If you watch the memory monitor of an emulator, you'll usually see the free memory drop steadily towards zero, then bounce back up as the GC does its work.

It will never release an object that you can possibly use. If any variable anywhere in the system refers to an object, then the object isn't garbage.

There doesn't always need to be a variable to keep an object. An object isn't garbage if it's referenced from a stack frame. For example:

String s2 = s1.trim().toLowerCase();

The call to trim() creates a new String object. A reference to this String is placed on the stack so that the toLowerCase() method can be invoked on this new object. toLowerCase() creates another object, a reference to which is saved in the variable "s2". Once toLowerCase() returns, the object created by trim() is no longer needed. Its reference is lost, and the object becomes garbage.

Some objects are referenced by system objects.

Threads are referenced by the Java Virtual Machine, as long as they're running. So, threads can't become garbage until they die.

Each MIDlet is associated with an instance of Display. That object never becomes garbage (until the application terminates). Any objects reachable through the Display won't become garbage either. The Display holds a reference to a Displayable object - whatever you passed to Display.setCurrent(). That Displayable might also reference object, such as Images used on a Form or List.

You can, you're probably aware, invoke the garbage collector manually, by calling System.gc(). In general, this is a bad plan. When the GC runs automatically, it might (on some implementations) run a quick cycle, freeing up enough memory for the program to continue. But the rules say that when you run it manually, it must make every attempt to collect all the garbage. This can be much slower on devices with large heaps. Series 60 devices are particular prone to this.

On most devices, the garbage collector will defragment the available space in the heap. This ensures that you can create objects as big as possible. However, some older devices don't. This can result in the free space being split into many small pieces. The largest object you can create is restricted to the largest single piece, so you can run out of memory even if you have enough memory in total. On devices like this, running the GC manually after creating a lot of garbage can reduce fragmentation. It's also useful (on the same devices) in-between loading images.

Manual GC's are best performed when the user will expect some kind of delay - like, when you have a "loading" or "please wait" screen displayed.

What The Garbage Collector Doesn't Do

It doesn't kill threads. Threads die when their run() method terminates, either by hitting the closing brace, reaching a return statement, or throwing an exception.

It doesn't close files, network connections, record stores, media players, or anything else. These objects must be closed by calling the appropriate methods, or scarce system resources might not get released.

"But, I Don't Create Any Garbage"

It's pretty much impossible to execute Java code and not create any garbage. Even if you don't create objects, library code will do. Graphics objects will be created every time the screen is re-painted, for example.

Since trying to avoid garbage is futile, you are generally better to create new objects when you need them, and not to try to re-use existing objects. Objects that have already been used might retain unwanted data, or be left in a different state than a fresh object, resulting in peculiar bugs.

Classes

The code you run gets loaded into the heap. Classes are loaded as needed, not necessarily all at the start. Classes are never unloaded (until the VM terminates), because they never become garbage. (In Java ME CLDC, that is. Classes can become garbage in versions of Java that support multiple class-loaders, like J2SE or ME CDC.)

In most cases, this doesn't include system classes. System classes are usually pre-loaded in the phone's firmware.

Objects

Arrays are objects too, so all the same rules apply to them.

Since the Java Virtual Machine specification doesn't describe how objects should be represented in memory, it's impossible to say how much memory things actually take. But, based on experience, here's some pretty close figures.

On all the VM's I've tried, all objects take 16 bytes, no matter what. This is the overhead that the VM needs to manage the object. Add to that whatever is required for their fields, and round that up to a multiple of four (memory is almost always allocated in four-byte chunks).

Object references, floats and ints need four bytes each. Bytes need (you guessed) one byte each. So do booleans. Shorts and chars need two. Longs and doubles need eight.

A couple of examples will help to put this in some perspective, and maybe explain why you can seem to run out of memory a long time before you expect to.

Consider this.

byte[][] array = new byte[3][3];

An array big enough to hold nine bytes. How much heap will that need? Well, a two-dimensional array is actually an array of arrays (an array of objects, since arrays are objects). So, the following code is equivalent.

byte[][] array = new byte[3][];
array[0] = new byte[3];
array[1] = new byte[3];
array[2] = new byte[3];

The first array we create is an object, so needs 16 bytes of memory. On top of that, it contains three object references of four bytes each. I make that 28 bytes.

Then we create another three objects. These also need 16 bytes, plus enough space for the three bytes each one contains. That's going to mean four bytes, since it has to be a multiple of four. Three objects of 20 bytes each, so 60 bytes.

That's 88 bytes in total. Small objects can be very, very expensive.

Strings are also deceptively expensive.

Each String is an object (16 bytes of overhead), containing an int (four bytes, to store the length of the String) and a reference to a char[] (four bytes). The char[] is also an object (16 bytes), needing two bytes for each character, rounded up to a multiple of four. That's 40 bytes, plus two per character, plus zero or two bytes of padding. The String "Hi!", for example, takes 48 bytes.

Another String example: let's say you have a dictionary of 15,000 words, averaging seven characters per word. That's 105,000 characters. The easy trap to fall into is that this will need 105,000 bytes.

A seven-character String takes 56 bytes. 15,000 * 56 comes to 840,000 bytes.

You'll also need somewhere to store the references to these objects. A String[] of 15,000 elements will need a little over 60,000 bytes, taking the total to over 900,000 bytes. If you want to reference your Strings through something more exotic, like a Hashtable, the total is going to be over 1Mb.

How to get preferences of active profile using CRepository

Jimgilmour1 — Tue, 17 Nov 2009 11:02:08 GMT

Reviewer Approved

Note!
This API is not part of the public SDK. It can be found in the SDK API Plug-in.

The following code snippet explains how to read settings of currently active profile using CRepository. Create() and Set() methods are not documented in SDK.

There are potentially 2^32 repositories, each identified by a UID. Within each repository up to 2^32 settings can be stored. Settings within a repository are identified by a 32-bit key and may be of the types integer, real or descriptor.

Get() method of CRepository class will be used to read active profile settings. UID of profile repository is KCRUidProfileEngine.

Code

Includes:
// for CRepository
#include <centralrepository.h> 
// for active profile settings
#include <ProfileEngineSDKCRKeys.h>
 
Libraries: 
centralrepository.lib

void GetSettingsOfActiveProfileL()
{
	 CRepository *repository = CRepository::NewLC( KCRUidProfileEngine );
	 TInt value;
 
	 // Get the ID of the active profile:
	 User::LeaveIfError( repository->Get( KProEngActiveProfile, value ) );
 
	 // Get the keypad tone volume of active profile
	 User::LeaveIfError( repository->Get( KProEngActiveKeypadVolume, value ) );
 
	 // Get the ringtone of the cactive profile
	 User::LeaveIfError( repository->Get( KProEngActiveRingingType, value ) );
 
	 // Get the ringing volume of the active profile
	 User::LeaveIfError( repository->Get( KProEngActiveRingingVolume, value ) );
 
	 // Get the warning tone setting of the active profile
	 User::LeaveIfError( repository->Get( KProEngActiveWarningTones, value ) );
 
	 // Get the message alert setting of the active profile:
	 User::LeaveIfError( repository->Get( KProEngActiveMessageAlert, value ) );
 
	 CleanupStack::PopAndDestroy( repository );
}

How to make your widget to stretch to full screen

Thiagobrunoms — Wed, 18 Nov 2009 01:54:34 GMT

How to make your widget to stretch to full screen

Initially body-element has some predefined margin and padding values. To make your widget to cover full screen you will need to reset those by setting margin:0 and padding:0 in CSS. If you don’t override default values and set body width:100% you will experience some horizontal movement.

body{
 width:100%;
 height: 100%;
 background-color:#f3f3d1;
 
 /*set this to get rid of the small horizontal movement*/
 margin: 0;
 padding: 0;
}

The next step is to make a wrapper div that contains all your content. You will have to use absolute postioning and place the div to start from the left upper corner by setting left:0; and top:0; in css:

/*absolute posioning is neede to cover full screen*/
#fsWrapper{
 width: 100%;
 overflow: hidden;
 position: absolute;
 left: 0;
 top: 0;
 margin: 0;
 padding: 0;
}

Example Widget

<!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>FS sample</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="style.css" type="text/css">
    <style>			
	body{
           width:100%;
	   height: 100%;
	   background-color:#f3f3d1;
 
	   /*set this to get rid of the small horizontal movement*/
	   margin: 0;
	   padding: 0;
	}
 
	/*absolute positioning is needed to cover full screen*/
	#fsWrapper{
	   width: 100%;
 	   overflow: hidden;
 	   position: absolute;
	   left: 0;
	   top: 0;
	   margin: 0;
	   padding: 0;
	}			
     </style>
  </head>
  <body>			
      <div id="fsWrapper">
           <!-- your widget content -->	
      </div>		 
  </body>
</html>

Zoom and Rotate Gestures in FlashLite for touch-enabled devices

Sangramp@cybage.com — Fri, 13 Nov 2009 05:42:07 GMT

1 Introduction
2 Core concept
3 Source Code
4 Download source code

Introduction

Flash Lite technology is supported across all Nokia platforms and is widely integrated with our mobile WebKit browser. The S60 5th Edition platform comes up with the exciting touch UI concept. S60 5th Edition with touch UI offers a promising future for the mobile developers. It has opened new doors to developers not only to survive but also to dominate market with touch UI-enabled applications.

Till now, we have been using the basic touch gestures in Flash Lite for nokia devices. The basic gestures are vertical and horizontal gestures.

The following article will explain how to implement the interesting zoom, rotate and panning gestures on touch enabled devices like Nokia 5800 XpressMusic using Flash Lite.

Core concept

The traditional zoom gestures are normally implemented for mutli-touch screens. Multi-touch (e.g. Microsoft Surface) consists of a touch screen (screen, table, wall, etc.) or touchpad, as well as software that recognizes multiple simultaneous touch points, as opposed to the standard touch-screen (e.g. ATM), which recognizes only one touch point. In case of those multi-touch screens, the zoom gesture is assumed if we drag the fingers in opposite directions. If the fingers are dragged toward each other, it is considered as Zoom out gesture and in case the fingers are dragged away from each other, it is considered as Zoom in gesture.

To define the counter zoom gesture in case of single touch screen, we need to assume a fixed reference point. The fixed reference point can be the center of the image. In case the user drags the finger away from the fixed reference point, it will be considered as Zoom In gesture and in case the user drags the finger towards the fixed reference point, it will be considered as Zoom Out gesture. Depending upon the gesture, the image will be resized at the center and aligned accordingly.

In order to check if the gesture is towards/away from the reference point, we need to check, if the line formed by the start and end points coincides with the reference point. As the probability of the line crossing a single point is less, we will assume a fixed reference area that is, circle. We will check if the line formed by the start and end point intersects the reference circle. In case the line intersects the circle, it will be considered as Zoom gesture and rotate gesture otherwise.

Source Code

Create Zoom Movie

Create a base movieclip for holding the image. Add the graphics of the image inside the movieclip. This is the movieclip which is able to detect and react to zoom and rotate gesture.

Make sure that the registration point of the above movieclip is center.

Add the following code on the above created movieclip and name it as ‘mcImage’.

onClipEvent (mouseDown) {
	if (_parent.bZoomRotateMode)
	{
		if (this.bRollingOver)
		{
			this.bDragging = true;
			this.nStartX = _parent._xmouse;
			this.nStartY = _parent._ymouse;
			nAngleOnMousePress = (180 * Math.atan2 (_root._ymouse - this._y, _root._xmouse - this._x)) / Math.PI + 90;
		}
	}
}
onClipEvent (mouseMove) {
	if (_parent.bZoomRotateMode)
	{
		if (this.bRollingOver && this.bDragging)
		{
			_parent.fnCheckIfToZoom (this.nStartX,this.nStartY,_parent._xmouse,_parent._ymouse);
		}
	}
}
onClipEvent (mouseUp) {
	if (_parent.bZoomRotateMode)
	{
		if (this.bRollingOver)
		{
			this.bDragging = false;
			nInitialWidth = mcLoadedImage._width;
			nInitialHeight = mcLoadedImage._height;
			nInitialWidth = mcLoadedImage._width;
			nInitialHeight = mcLoadedImage._height;
			nInitialAngle = this._rotation;
		}
	}
}
onClipEvent (load) {
	nInitialOnloadX = this._x;
	nInitialOnloadY = this._y;
}

Define the reference circle

As per the logic explained above, we need to define the area for the reference circle. In case the user intersects with this circle, it will be considered as zoom gesture. Cerate a reference circle of suitable width and height inside the above image movieclip and name it as ‘mcRestrict’.

Add the following code on the first layer inside the zoom movieclip for storing the initial with and height of the image.

var nInitialWidth:Number = mcLoadedImage._width;
var nInitialHeight:Number = mcLoadedImage._height;
var nInitialWidthForXY:Number = mcLoadedImage._width;
var nInitialHeightForXY:Number = mcLoadedImage._height;
var nAspectRatio:Number = nInitialWidth / nInitialHeight;
var nInitialAngle:Number = this._rotation;

Define the Spanning Constraints

As the main image is zoomed, it will increase in width and height and will not accommodate in the actual mobile space, we need to provide the spanning for the image. To define the spanning constraints create a movieclip. When the image will start spanning, it will always span within this movieclip boundary. Name the movieclip as ‘mcSpanningRestrictions’. This movieclip will be on the same timeline as that of zoom image ‘mcImage’.

Define the Movieclip Dragger

Inside the main image movieclip and above the reference circle layer create a button of same width and height as that of the image and name it as ‘mcLoadedImage’. This button will be used to add the rollOver and rollOut listener for the image and also to define the image dragging in case of spanning.

Add the following code on the button.

on (rollOver) {
	this.bRollingOver = true;
}
on (rollOut) {
	this.bRollingOver = false;
}
on (press) {
	if (_parent.bZoomRotateMode == false)
	{
		if (this._width > _parent.mcSpanningRestrictions._width || this._height > _parent.mcSpanningRestrictions._height)
		{
			this.startDrag (false,(_parent.mcSpanningRestrictions._x - (_parent.mcSpanningRestrictions._width / 2 - this._width / 2)),(_parent.mcSpanningRestrictions._y - (_parent.mcSpanningRestrictions._height / 2 - this._height / 2)),(_parent.mcSpanningRestrictions._x + (_parent.mcSpanningRestrictions._width / 2 - this._width / 2)),(_parent.mcSpanningRestrictions._y + (_parent.mcSpanningRestrictions._height / 2 - this._height / 2)));
		}
	}
}
on (release, releaseOutside) {
	this.stopDrag ();
}

The above code starts the image dragging in case the current mode is ‘Spanning’. The dragging is confined with-in the boundary of the above ‘mcSpanningRestrictions’ movieclip.

Zoom Logic Implementation

The main image movieclip has a Mouse-move listener. This listener checks the current mode, if the current mode is that of Zoom, it calls the main timeline function ‘fnCheckIfToZoom’. This is the core function which checks if the gesture is zoom gesture and the amount by which the image should be zoomed. The function is called with the following parameters passed:

X-Mouse location when the user press mouse on the image to zoom
Y-Mouse location when the user press mouse on the image to zoom
Current X-Mouse location
Current Y-Mouse location

Create the 'Funtions' layer on the main timeline and add the following code to the layer.

var bZoomRotateMode:Boolean = true;
var nMinimumWidth:Number = 75;
var nMaximumWidth:Number = 450;
function fnFindShortestDistance (point_x:Number, point_y:Number, line_x1:Number, line_y1:Number, line_x2:Number, line_y2:Number):Number
{
	var A:Number = point_x - line_x1;
	var B:Number = point_y - line_y1;
	var C:Number = line_x2 - line_x1;
	var D:Number = line_y2 - line_y1;
	var nDiastance = Math.abs ((A * D) - (C * B)) / Math.sqrt ((C * C) + (D * D));
	return nDiastance;
}
function fnFindDistanceInPoints (oPoint_1, oPoint_2):Number
{
	var nLineLength:Number = Math.sqrt (Math.pow ((oPoint_1.x - oPoint_2.x), 2) + Math.pow ((oPoint_1.y - oPoint_2.y), 2));
	return nLineLength;
}
function fnCheckIfToZoom (nStartX, nStartY, nEndX, nEndY)
{
	var nSlopeOfLine:Number = (nEndY - nStartY) / (nEndX - nStartX);
	var nPreviousY:Number = ((nSlopeOfLine) * (nStartX - 800 - nEndX)) + nEndY;
	var nNextY:Number = ((nSlopeOfLine) * (nEndX + 800 - nEndX)) + nEndY;
	var myPoint:Object = {x:mcImage.mcRestrict._x, y:mcImage.mcRestrict._y};
	mcImage.localToGlobal (myPoint);
	var nCirCentX:Number = myPoint.x;
	var nCirCentY:Number = myPoint.y;
	var nShortestDistance:Number = fnFindShortestDistance (nCirCentX, nCirCentY, nStartX, nStartY, nEndX, nEndY);
	if (nShortestDistance <= (mcImage.mcRestrict._width / 2))
	{
		var oPoint_1:Object = new Object ();
		var oPoint_2:Object = new Object ();
		oPoint_1.x = nStartX;
		oPoint_1.y = nStartY;
		oPoint_2.x = nEndX;
		oPoint_2.y = nEndY;
		var nDisplacement:Number = fnFindDistanceInPoints (oPoint_1, oPoint_2);
		var sZoomDirection:String = fnCheckQuadrant (nStartX, nStartY, nEndX, nEndY);
		if (sZoomDirection == "ZoomIn")
		{
			mcImage.mcLoadedImage._width = mcImage.nInitialWidth + nDisplacement;
			if (mcImage.mcLoadedImage._width > nMaximumWidth)
			{
				mcImage.mcLoadedImage._width = nMaximumWidth;
			}
		}
		else if (sZoomDirection == "ZoomOut")
		{
			mcImage.mcLoadedImage._width = mcImage.nInitialWidth - nDisplacement;
			if (mcImage.mcLoadedImage._width < nMinimumWidth)
			{
				mcImage.mcLoadedImage._width = nMinimumWidth;
			}
		}
		mcImage.mcLoadedImage._height = mcImage.mcLoadedImage._width / mcImage.nAspectRatio;
	}
	else
	{
		fnCheckIfToRotate (nEndX,nEndY);
	}
	fnCheckIfToRotate (nEndX,nEndY);
}
function fnCheckQuadrant (nStartX:Number, nStartY:Number, nEndX:Number, nEndY:Number):String
{
	var oGlobalCoordinatesOfRestrict:Object = {x:mcImage.mcRestrict._x, y:mcImage.mcRestrict._y};
	mcImage.localToGlobal (oGlobalCoordinatesOfRestrict);
	if (nStartX > (oGlobalCoordinatesOfRestrict.x - mcImage.mcRestrict._width / 2) && nStartX < (oGlobalCoordinatesOfRestrict.x + mcImage.mcRestrict._width / 2) && nStartY < oGlobalCoordinatesOfRestrict.y - mcImage.mcRestrict._height / 2)
	{
		//This is Qudrant 1
		if (nEndY < nStartY)
		{
			return "ZoomIn";
		}
		else
		{
			return "ZoomOut";
		}
	}
	else if (nStartX >= (oGlobalCoordinatesOfRestrict.x + mcImage.mcRestrict._width / 2) && nStartY <= (oGlobalCoordinatesOfRestrict.y - mcImage.mcRestrict._height / 2))
	{
		//This is Qudrant 2
		if (nEndY < nStartY)
		{
			return "ZoomIn";
		}
		else
		{
			return "ZoomOut";
		}
	}
	else if (nStartX > (oGlobalCoordinatesOfRestrict.x + mcImage.mcRestrict._width / 2) && nStartY > (oGlobalCoordinatesOfRestrict.y - mcImage.mcRestrict._height / 2) && nStartY < (oGlobalCoordinatesOfRestrict.y + mcImage.mcRestrict._height / 2))
	{
		//This is Qudrant 3
		if (nEndX > nStartX)
		{
			return "ZoomIn";
		}
		else
		{
			return "ZoomOut";
		}
	}
	else if (nStartX >= (oGlobalCoordinatesOfRestrict.x + mcImage.mcRestrict._width / 2) && nStartY >= (oGlobalCoordinatesOfRestrict.y + mcImage.mcRestrict._height / 2))
	{
		//This is Qudrant 4
		if (nEndX > nStartX)
		{
			return "ZoomIn";
		}
		else
		{
			return "ZoomOut";
		}
	}
	else if (nStartX > (oGlobalCoordinatesOfRestrict.x - mcImage.mcRestrict._width / 2) && nStartX < (oGlobalCoordinatesOfRestrict.x + mcImage.mcRestrict._width / 2) && nStartY > (oGlobalCoordinatesOfRestrict.y + mcImage.mcRestrict._height / 2))
	{
		//This is Qudrant 5
		if (nEndY > nStartY)
		{
			return "ZoomIn";
		}
		else
		{
			return "ZoomOut";
		}
	}
	else if (nStartX <= (oGlobalCoordinatesOfRestrict.x - mcImage.mcRestrict._width / 2) && nStartY >= (oGlobalCoordinatesOfRestrict.y + mcImage.mcRestrict._height / 2))
	{
		//This is Qudrant 6
		if (nEndY > nStartY)
		{
			return "ZoomIn";
		}
		else
		{
			return "ZoomOut";
		}
	}
	else if (nStartX < (oGlobalCoordinatesOfRestrict.x - mcImage.mcRestrict._width / 2) && nStartY > (oGlobalCoordinatesOfRestrict.y - mcImage.mcRestrict._height / 2) && nStartY < (oGlobalCoordinatesOfRestrict.y + mcImage.mcRestrict._height / 2))
	{
		//This is Qudrant 7
		if (nEndX < nStartX)
		{
			return "ZoomIn";
		}
		else
		{
			return "ZoomOut";
		}
	}
	else if (nStartX <= (oGlobalCoordinatesOfRestrict.x - mcImage.mcRestrict._width / 2) && nStartY <= (oGlobalCoordinatesOfRestrict.y - mcImage.mcRestrict._height / 2))
	{
		//This is Qudrant 8
		if (nEndX < nStartX)
		{
			return "ZoomIn";
		}
		else
		{
			return "ZoomOut";
		}
	}
	else
	{
		return "ZoomIn";
	}
}
function fnCheckIfToRotate (nXMouse:Number, nYMouse:Number)
{
	var nBaseAngle:Number = (180 * Math.atan2 (nYMouse - mcImage._y, nXMouse - mcImage._x)) / Math.PI + 90;
	var nRotationChange:Number = nBaseAngle - mcImage.nAngleOnMousePress;
	mcImage._rotation = mcImage.nInitialAngle + nRotationChange;
}
function fnToggleZoomSpan ()
{
	bZoomRotateMode = !bZoomRotateMode;
	if (bZoomRotateMode)
	{
		mcZoomSpan.gotoAndStop (1);
	}
	else
	{
		mcZoomSpan.gotoAndStop (2);
	}
	mcImage._x = mcImage.nInitialOnloadX;
	mcImage._y = mcImage.nInitialOnloadY;
}

The function performs the following important tasks for identifying the zooming:

Check if the user is dragging through the reference circle.
Check if it is Zoom-out or Zoom-in gesture.
Calculate the zoom factor and resize the image accordingly.

Check if the user is dragging through the reference circle

We need to figure out if the user is dragging the imgae so that the line formed goes through the circle or not. If the line drawn by the user intersects the reference circle, it means it is Zoom gesture.

We will calculate the shortest distance between the line and the center of the reference circle, if the shortest distance happens to be less than the radius of the reference circle, it means that the line is intersecting the circle and not otherwise.

As the user may drag a line of short length which does not intersect the circle but there is probability of it intersecting the circle if extended, we will extend the line in both directions before calculating the shortest distance.

We will calculate the slop of the line and extend the line in both directions about 800 pixels away.

Check if it is Zoom-out or Zoom-in gesture

Once we conclude it is Zoom gesture, we need to identify if it is Zoom-out/Zoom-in gesture. The following function takes the starting X and Y coordinates and Ending X and Y coordinates and returns the Zoom direction.

function fnCheckQuadrant (nStartX:Number, nStartY:Number, nEndX:Number, nEndY:Number):String
{
	var oGlobalCoordinatesOfRestrict:Object = {x:mcImage.mcRestrict._x, y:mcImage.mcRestrict._y};
	mcImage.localToGlobal (oGlobalCoordinatesOfRestrict);
	if (nStartX > (oGlobalCoordinatesOfRestrict.x - mcImage.mcRestrict._width / 2) && nStartX < (oGlobalCoordinatesOfRestrict.x + mcImage.mcRestrict._width / 2) && nStartY < oGlobalCoordinatesOfRestrict.y - mcImage.mcRestrict._height / 2)
	{
		//This is Qudrant 1
		if (nEndY < nStartY)
		{
			return "ZoomIn";
		}
		else
		{
			return "ZoomOut";
		}
	}
	else if (nStartX >= (oGlobalCoordinatesOfRestrict.x + mcImage.mcRestrict._width / 2) && nStartY <= (oGlobalCoordinatesOfRestrict.y - mcImage.mcRestrict._height / 2))
	{
		//This is Qudrant 2
		if (nEndY < nStartY)
		{
			return "ZoomIn";
		}
		else
		{
			return "ZoomOut";
		}
	}
	else if (nStartX > (oGlobalCoordinatesOfRestrict.x + mcImage.mcRestrict._width / 2) && nStartY > (oGlobalCoordinatesOfRestrict.y - mcImage.mcRestrict._height / 2) && nStartY < (oGlobalCoordinatesOfRestrict.y + mcImage.mcRestrict._height / 2))
	{
		//This is Qudrant 3
		if (nEndX > nStartX)
		{
			return "ZoomIn";
		}
		else
		{
			return "ZoomOut";
		}
	}
	else if (nStartX >= (oGlobalCoordinatesOfRestrict.x + mcImage.mcRestrict._width / 2) && nStartY >= (oGlobalCoordinatesOfRestrict.y + mcImage.mcRestrict._height / 2))
	{
		//This is Qudrant 4
		if (nEndX > nStartX)
		{
			return "ZoomIn";
		}
		else
		{
			return "ZoomOut";
		}
	}
	else if (nStartX > (oGlobalCoordinatesOfRestrict.x - mcImage.mcRestrict._width / 2) && nStartX < (oGlobalCoordinatesOfRestrict.x + mcImage.mcRestrict._width / 2) && nStartY > (oGlobalCoordinatesOfRestrict.y + mcImage.mcRestrict._height / 2))
	{
		//This is Qudrant 5
		if (nEndY > nStartY)
		{
			return "ZoomIn";
		}
		else
		{
			return "ZoomOut";
		}
	}
	else if (nStartX <= (oGlobalCoordinatesOfRestrict.x - mcImage.mcRestrict._width / 2) && nStartY >= (oGlobalCoordinatesOfRestrict.y + mcImage.mcRestrict._height / 2))
	{
		//This is Qudrant 6
		if (nEndY > nStartY)
		{
			return "ZoomIn";
		}
		else
		{
			return "ZoomOut";
		}
	}
	else if (nStartX < (oGlobalCoordinatesOfRestrict.x - mcImage.mcRestrict._width / 2) && nStartY > (oGlobalCoordinatesOfRestrict.y - mcImage.mcRestrict._height / 2) && nStartY < (oGlobalCoordinatesOfRestrict.y + mcImage.mcRestrict._height / 2))
	{
		//This is Qudrant 7
		if (nEndX < nStartX)
		{
			return "ZoomIn";
		}
		else
		{
			return "ZoomOut";
		}
	}
	else if (nStartX <= (oGlobalCoordinatesOfRestrict.x - mcImage.mcRestrict._width / 2) && nStartY <= (oGlobalCoordinatesOfRestrict.y - mcImage.mcRestrict._height / 2))
	{
		//This is Qudrant 8
		if (nEndX < nStartX)
		{
			return "ZoomIn";
		}
		else
		{
			return "ZoomOut";
		}
	}
	else
	{
		return "ZoomIn";
	}
}

We divide the stage in 8 quadrants as shown below and will check in which quadrant the user is zooming. Depending upon the quadrant, we will decide if this is Zoom-out gesture or Zoom-in gesture.

Calculate the zoom factor and resize the image accordingly

Calculate the distance between the start and end points. This will be nothing but the length of the line formed by these two points. If the gesture is 'Zoom Out', decrease the width of the image by this length and if the gesture is 'Zoom In', increase the width of the image by this length. Now increase the height of the image with respect to the original aspect ratio.

Rotate and Spanning Gesture

Calculating the angle of the rotation is fairly simple and we will apply the change in angle to the image rotation. The following function takes the _xmouse and _ymouse as the parameter and calculates the angle formed at the center of the image. The final angle will be original angle in addition to the change in angle.

function fnCheckIfToRotate (nXMouse:Number, nYMouse:Number)
{
	var nBaseAngle:Number = (180 * Math.atan2 (nYMouse - mcImage._y, nXMouse - mcImage._x)) / Math.PI + 90;
	var nRotationChange:Number = nBaseAngle - mcImage.nAngleOnMousePress;
	mcImage._rotation = mcImage.nInitialAngle + nRotationChange;
}

The spanning code is added on the button(mcLoadedImage) inside the Image movieclip(mcImage). This will start the dragging of the Image movieclip subject to the dragging constraint movieclip on the main timeline.

on (press) {
	if (_parent.bZoomRotateMode == false)
	{
		if (this._width > _parent.mcSpanningRestrictions._width || this._height > _parent.mcSpanningRestrictions._height)
		{
			this.startDrag (false,(_parent.mcSpanningRestrictions._x - (_parent.mcSpanningRestrictions._width / 2 - this._width / 2)),(_parent.mcSpanningRestrictions._y - (_parent.mcSpanningRestrictions._height / 2 - this._height / 2)),(_parent.mcSpanningRestrictions._x + (_parent.mcSpanningRestrictions._width / 2 - this._width / 2)),(_parent.mcSpanningRestrictions._y + (_parent.mcSpanningRestrictions._height / 2 - this._height / 2)));
		}
	}
}
on (release, releaseOutside) {
	this.stopDrag ();
}

Download source code

The following source code is tested on Nokia 5800 XpressMusic device.

The source code is available at Zoom and Rotate Gestures in FlashLite.

Campus party mexico

Kiran10182 — Sun, 15 Nov 2009 08:47:46 GMT

1 Conferencias y taller de Forum Nokia en Campus Party México
2 Instalando las herramientas para el taller y concurso
3 *Taller
4 Competencia

Conferencias y taller de Forum Nokia en Campus Party México

English translation below

Participa en las conferencias y talleres de Forum Nokia en Campus Party México. Conoce la forma más fácil de hacer aplicaciones móviles para distribuir en el Ovi Store y gana muchos premios. Participa en nuestro concurso de Widgets y podrás ganar un espectacular N97, 5530 o un 6790. Las instrucciones se darán en el taller.

CONFERENCIA Web 2.0, creando el WOW en el teléfono celular

Fecha: vie, 13 de noviembre, 17:00 – 18:00

Lugar: Auditorio de Desarrolladores

Descripción: En esta charla, el experto en tecnología Rubén Rincón nos hablará sobre el cambio de paradigma en desarrollo de aplicaciones móviles y sobre cómo cualquier persona que pueda crear una página HTML puede hacer una aplicación 100% funcional en un teléfono celular.

TALLER Haciendo aplicaciones móviles con Javascript y HTML

Fecha: sáb, 14 de noviembre, 09:00 – 10:00

Lugar: Auditorio Desarrolladores

Descripción: En este taller, expertos en tecnología de Nokia mostrarán cómo hacer aplicaciones que corran en dispositivos móviles con tecnologías Web2.0. Además se mostrará cómo hacer uso de recursos del teléfono como el acelerómetro y el GPS. Las instrucciones para descargar las herramientas de trabajo aparecen en la parte de abajo, en el apartado "Instalando las herramientas para el taller y concurso" Al finalizar el taller, se darán las instrucciones del concurso de Widgets que deben ser entregados el último día del evento (Lunes 16 Nov). Los 3 mejores Widgets recibirán como premio teléfonos Nokia.

CONFERENCIA Qt, revolucionando las plataformas móviles

Fecha: dom, 15 de noviembre, 14:00 – 15:00

Lugar: Auditorio Desarrolladores

Descripción: En esta charla, el experto en tecnología Daniel Rocha nos hablará sobre Qt, un framework de desarrollo open source que está revolucionando la forma de hacer aplicaciones para dispositivos móviles por su facilidad en cuanto al proceso de desarrollo y la capacidad de hacer aplicaciones fuertemente integradas al dispositivo móvil.

Instalando las herramientas para el taller y concurso

Paso 1: Descargar Aptana Studio

Aptana Studio

Paso 2: Descarga el plugin de Aptana para WRT

Plugin de aptana para WRT

Paso 3: Descarga el paquete de Platform Services 2.0

Platform Services 2.0

*Taller

Primero es necesario descargar el software como aparece en el anterior apartado.

Puedes descargar aquí el taller

File:Taller campus party.zip

Se debe importar el proyecto

File->Import->Existing Projects into workspace Y seleccionar la carpeta en donde está el archivo .project = Taller Widgets Nov 09\Proyecto Aptana\WidgetContactos

Una vez cargado el proyecto, se puede ir punto por punto del taller: son 9 puntos para ir paso a paso

Los puntos 1-2 están en el archivo HTML, Los puntos 3-8 están en el archivo .js, El punto 9 está en el archivo .css.

Algunos puntos son sólo demostrativos. Cuando aparecen letras de la forma a. b. c. Significa que los asistentes deben hacer algo para continuar

Competencia

Debes realizar un Widget que utilice platforms services, puede conectarse a internet o ser únicamente una aplicación del teléfono. Puedes utilizar ejemplos de la página de Forum Nokia como referencia y puedes basarte en el taller. Debes enviar la aplicación a ruben.rincon@nokia.com ó daniel.rocha@nokia.com hasta el lunes 16 a las 9:00 AM. La premiación se hará en el auditorio de desarrolladores a las 12:00M el día Lunes. Nos pueden contactar en caso de cualquier pregunta.

Buena Suerte

English Translation using Google Translation to English

 Conferences and workshops from Forum Nokia in Mexico Campus Party

Participate in conferences and workshops at Campus Party Forum Nokia Mexico. Know the easiest way to distribute mobile applications for the Ovi Store and win many awards. Enter our contest Widgets and you could win a spectacular N97, 5530 or 6790. The instructions are given in the workshop.

Web 2.0 Conference, creating the WOW in cell phone

Date: Fri, 13 November, 17:00 to 18:00

Venue: Auditorium Developers

Description: In this talk, Ruben Rincon technology expert will talk about the paradigm shift in mobile application development and how anyone can create an HTML page can make your application 100% functional in a cell phone.

WORKSHOP Making mobile applications with JavaScript and HTML

Date: Sat, 14 November, 09:00 - 10:00

Venue: Auditorium Developers

Description: In this workshop, Nokia's technology experts will demonstrate how to build applications that run on mobile devices with Web 2.0 technologies. Furthermore we show how to use your phone's resources as the accelerometer and GPS. Instructions for downloading tools work appear in the bottom, under "Installing the tools for the workshop and contest" the end of the workshop, will be instructed Widgets contest to be delivered on the last day of the event (Monday, 16 Nov). The 3 best will be awarded Widgets Nokia phones.

CONFERENCE Qt revolutionizing mobile platforms

Date: Sun, 15 November, 14:00 to 15:00

Venue: Auditorium Developers

Description: In this talk, technology expert Daniel Rocha will speak on Qt, an open source development framework that is revolutionizing the way to make applications for mobile devices for ease about the process of development and the ability to make applications highly integrated into the mobile device.

[edit] Installing the tools for the workshop and contest

    Step 1: Download Aptana Studio

Aptana Studio

    Step 2: Download the plugin for Aptana WRT

Aptana Plugin for WRT

    Step 3: Download the package 2.0 Platform Services

Platform Services 2.0

Good luck

How to use USB cable connection in Java ME

Thiagobrunoms — Thu, 12 Nov 2009 12:14:09 GMT

1 Overview
2 How to create CommConnection
3 Instructions
4 USBTest MIDlet
5 Source code: openUSBConnection() method in USBTest.java
6 Source code: listenUSB() method in USBTest.java
7 Example application
8 See also

Overview

This article updates the existing Forum Nokia document MIDP: Using Cable Connection In Nokia Devices. The document explains how to use CommConnection over cable in Nokia devices. There are differences in devices and their port numbers, and also on PC side. In practice using USB connection between PC and mobile device might need some testing.

How to create CommConnection

After creation of the Forum Nokia document there have been changes in connecting phone to PC. In older models CommConnection was created for example like this:

//Opens a connection on port "com0".
CommConnection comm = (CommConnection)Connector.open("comm:com0");

In the newer devices the connection is opened for example like this:

//Opens a connection on port "USB2". Defines USB interface
CommConnection comm = (CommConnection)Connector.open("comm:USB2");

The example MIDlet has been tested in Nokia N97 device, which is S60 5th Edition device. There might be differences in the port names in different devices. Ports can be queried from the system with:

String ports = System.getProperty("microedition.commports");

In case of N97 the system property returns a long list of COM, IR, USB and BT ports. There are two USB ports: USB1 and USB2. If USB1 is used in Connector.open() method, IOException is thrown with message "Access denied". The connection can be successfully opened when USB2 is used. Note also that if some port is in other use (other applications in the device, system usage), it cannot be accessed through CommConnection although it is listed by the system property.

Instructions

Here are some practical instructions for creating CommConnection between Nokia N97 and PC:

For simple testing HyperTerminal (included with most of the Windows versions) or similar programs can be used
Connect your phone by using the USB cable (model CA-101 in case of N97) with the PC
- Select "PC Suite" as USB mode

Start the HyperTerminal application and create a new connection
- Change "Connect using:" field to have correct COM port (in this case COM5 was used)
- The correct port can be found from Windows Control Panel -> System -> Device Manager -> Ports (COM & LPT)
- There is no need to change the port settings, accept them -> connection is made between the PC and the phone
- It might be a good idea to set "Echo typed characters locally" on in HyperTerminal from here: File -> Properties -> Settings -> "Ascii Setup..."

Install the USBTest MIDlet to your phone and launch it
- When MIDlet is started, it automatically opens the connection to PC
- You should see "Hello from USBTest MIDlet! Anybody there at USB?" message on the HyperTerminal screen
- Select "Start" command for starting the USB port listening

Now write something in HyperTerminal window and press enter
- The message should be shown on the phone's screen

USBTest MIDlet

The USBTest MIDlet demonstrates, how a MIDlet can send and receive data between a phone and a PC by using USB cable and standard MIDP CommConnection. The whole NetBeans project with the MIDlet jad and jar files and the source code are available below. Two most important methods are also shown below. The openUSBConnection() method opens the CommConnection to the PC and listenUSB() method takes care of listening the data traffic.

The image below shows the MIDlet screen in Nokia N97 device after it has received a message from the connected PC.

Source code: openUSBConnection() method in USBTest.java

/**
 * This method checks by using the system property "microedition.commports", that
 * there is a USB port in the device. If found, CommConnection is opened to 
 * remote device (PC) by using the USB port. A message is sent to the remote 
 * device for indicating the successful connection.
 */
public void openUSBConnection() {
	try {
		String ports = System.getProperty("microedition.commports");
		Tracer.outln("got ports="+ports, textbox);
		int index = ports.indexOf("USB", 0);
		if(index == -1) {
			throw new RuntimeException("No USB port found in the device");
		}
		comm = (CommConnection)Connector.open("comm:USB2");
		int orgBaudRate = comm.getBaudRate();
		os = comm.openOutputStream();
		String text = "Hello from USBTest MIDlet! Anybody there at USB?\r\n";
		os.write(text.getBytes());
		os.flush();
		is = comm.openInputStream();
	} catch (IOException e) {
		Tracer.outln("IOException: " + e.getMessage(), textbox);
		return;
	}
}

Source code: listenUSB() method in USBTest.java

/**
 * This method listens to CommConnection traffic. When a message (a line of
 * text with enter pressed in the end) is received, it is shown in the TextBox.
 * If the message is "EXIT + enter key", the streams and the connection are 
 * closed.
 */
public void listenUSB() {
	Tracer.outln("Listening USB port...", textbox);
	try {
		byte[] buffer = new byte[500];
		StringBuffer message = new StringBuffer();
		for(int i = 0; i < 500;) {
			try {
				Thread.sleep(10);
			}
			catch(InterruptedException ie) { }
			int available = is.available();
			if(available == 0) {
				continue;
			}
			String outText = "";
			int count = is.read(buffer, i, available);
			if(count > 0) {
				outText = new String(buffer, i, count);
				i = i + count;
				message.append(outText);
				if (outText.endsWith("\n")) {
					String messageString = message.toString();
					Tracer.outln("Message: " + messageString, textbox);
					message.delete(0, message.length());
				}
			}
			String total = new String(buffer,0,i);
			if ((i > 3) && (-1 != total.indexOf("EXIT\r\n"))) {
				Tracer.outln("Closing...", textbox);
				break;
			}
		}
		os.close();
		is.close();
		comm.close();
	}
	catch (IOException ioe) {
		Tracer.outln("IOException: " + ioe.getMessage(), textbox);
	}
	Tracer.outln("SUCCEEDED.", textbox);
}

Example application

USBTest.zip containing USBTest.jad and USBTest.jar

Bondi Widget porting example - standard Javascript

Miasa — Wed, 11 Nov 2009 12:55:31 GMT

1 Preface
2 1. Download the .wgt package
3 2. Rename and unzip the Test widget archive
4 3. Create info.plist manifest file
5 4. Packaging
6 5. Deploy

Preface

This is an example of porting a Bondi Widget to Nokia WRT using the guide found here. The example widget does not use Bondi API functions, only standard Javascript. The widget demonstrates different methods of passing variables to another HTML-page.

1. Download the .wgt package

The Test widget wgt package can be found by following this link. This porting example was written using the Test widget version 1.1.

2. Rename and unzip the Test widget archive

The archive needs to be unzipped to make modifications to its contents. First rename the file extension from *.wgt to *.zip. Then extract the zip archive.

3. Create info.plist manifest file

When installing a .wgz file the system looks for a manifest file called info.plist. The Bondi Widget equivalent is called config.xml.

Here's how to use the Bondi Widget config.xml data to create the WRT manifest file:

Download and unzip this info.plist template file and save it in the widget's root directory.
Open the widget's config.xml file and find the <name> element. Copy the text found within the element and paste it into the <string> element under <key>DisplayName</key> element of the info.plist file.
```
<key>DisplayName</key>    
<string>Test widget</string>
```
The identifier of a Bondi widget can be found in the id attribute of the <widget> element in config.xml. If the value is a URL, use the conventional WRT identifier form, which is the URL in reverse. Add the identifier to <string> element under <key>Identifier</key> element of the info.plist file.
```
<key>Identifier</key>       
<string>net.webvm.bondi.test</string>
```
The HTML-file has not been specified in this Bondi widget. In this case, it searches for index.html by default.
```
<key>MainHTML</key>
<string>index.html</string>
```
This widget does not require network access so it can be set to false.
```
<key>AllowNetworkAccess</key>   
<false />
```
Save the file.

4. Packaging

Re-zip the containing Test widget folder and change the file extension from *.zip to *.wgz.

5. Deploy

Upload the widget to your mobile device and install. Here is an example of the ported widget. Remember to change the extension to .wgz before installing.

Constructing simply UI classes with Javascript

Sah2ed — Thu, 12 Nov 2009 09:47:58 GMT

Constructing simply UI classes with Javascript

This page is describing how you could make custom UI components with JavaScript and add them into your WRT widget. The example UI is really simple, it is using normal javascript UI components, and includes only static label, button and text box. The original example was written in Dojo and was explained in Dojo: the definitive guide book. The Dojo example shown here is modified version of the original, and all other examples are then based on this modified version.

1 Standard JavaScript implementation
2 Dojo implementation
3 JQuery implementation
4 YUI Version 3 implementation
5 Mootools implementation

Standard JavaScript implementation

Javascript does not really have classes in a normal object oriented way, anyway, you can construct sort-of classes by using the prototype method as shown in following source code:

Genie = function(divId){
		this.initialize(divId);
	};
 
	Genie.prototype.divId = "genie";
	Genie.prototype._predictions = ["As I see it, yet", "Ask again later", "Better not tell you now", "Cannot predict now", "Concentrate and ask again", "Don't count on it", "It is certain", "It is decidedly so", "Most likely", "My reply is no", "My sources say no", "Outlook good", "Outlook not so good", "Reply hazy, try again", "Signs point to yes", "Very doubtful", "Without a doubt", "Yes", "Yes - definitely", "You may rely on it"];
 
	Genie.prototype._getPrediction = function(){
		var idx = Math.round(Math.random() * 19)
		return Genie.prototype._predictions[idx];
	};
 
	Genie.prototype.initialize = function(divId){
 
		if(divId && divId.length)
			this.divId = divId;
 
		var label = document.createElement("p");
		label.innerHTML = "Ask a question. The genie knows the answer...";
 
		var question = document.createElement("input");
			question.size = 50;
 
		var button = document.createElement("button");
		button.innerHTML = "Ask!";
		button.onclick = function(){
			alert(Genie.prototype._getPrediction());
			question.value = "";
		}
 
		var container = document.getElementById(this.divId);
		container.appendChild(label);
		container.appendChild(question);
		container.appendChild(button);
	};

Then to get the UI component to display in the HTML page, you can use following code:

<html>
<head>
	<title>Fun With the Genie!</title>
	<script type="text/javascript" src="js/Genie.js"></script>
	<script type="text/javascript">
		var myGenie = null;
 
	  	function myinit(){
			myGenie = new Genie('genie');
		}
	</script>	
</head>
<body onload="myinit();">
	<div id="genie"></div>
</body>
</html>

If the Genie “class” would be extended with additional methods, you could use the stored myGenie variable for accessing them later on program. The Generic_class.zip shows the full WRT example for the implementation.

Dojo implementation

Dojo in sense does not really have classes, but you can use the extend method to construct things that work bit like classes. Dojo has its own way on handling extensions, with the extension implementation, a dojo.provide() line needs to be included to tell the Dojo about the extensions provided by the js file as shown in the following example code:

dojo.provide("dtdg.Genie");
 
	//define the object
	dtdg.Genie = function(divId) {
		this.initialize(divId);
	}
	//and now extend it
	dojo.extend(dtdg.Genie, {
 
		divId: "genie",
		_predictions : [
			"As I see it, yet",
			"Ask again later",
			"Better not tell you now",
			"Cannot predict now",
			"Concentrate and ask again",
			"Don't count on it",
			"It is certain",
			"It is decidedly so",
			"Most likely",
			"My reply is no",
			"My sources say no",
			"Outlook good",
			"Outlook not so good",
			"Reply hazy, try again",
			"Signs point to yes",
			"Very doubtful",
			"Without a doubt",
			"Yes",
			"Yes - definitely",
			"You may rely on it"
		],
 
		_getPrediction : function( ) {
			var idx = Math.round(Math.random( )*19)
			return this._predictions[idx];
		},
 
		initialize : function(divId) {
 
			if(divId && divId.length)
				this.divId = divId;
 
			var label = document.createElement("p");
			label.innerHTML = "Ask a question. The genie knows the answer...";
 
			var question = document.createElement("input");
			question.size = 50;
 
			var button = document.createElement("button");
			button.innerHTML = "Ask!";
			button.onclick = function( ) {
				alert(dtdg.Genie.prototype._getPrediction( ));
				question.value = "";
			}
 
			var container = document.getElementById(this.divId);
			container.appendChild(label);
			container.appendChild(question);
			container.appendChild(button);
		}
	});

And then with HTML, Dojo extensions are not included as js files, instead dojo.require() is used to tell the Dojo to look for the extension and to load the required js file(s). Otherwise the HTML is rather much the same as with the generic example:

<html>
<head>
	<title>Fun With the Genie!</title>
	<script	type="text/javascript" src="dojo/dojo.js"> </script>
	<script type="text/javascript">
		dojo.require("dtdg.Genie");
 
		var myGenie = null;
 
	  	function myinit(){
			myGenie = new dtdg.Genie('genie');
		}
 
		dojo.addOnLoad(myinit);
	</script>	
</head>
<body>
	<div id="genie"></div>
</body>
</html>

The Dojo_class.zip shows the full WRT example for the implementation.

JQuery implementation

JQuery implementation is nearly identical with the Dojo implementation, with JQuery, there also are no real defined classes, instead the class objects can again be made with the extend method provided by JQuery as shown in the following example:

Genie = function(divId) {
	  	this.initialize(divId);
	}
 
	$.extend(Genie.prototype, {
	   	// object variables
	   	divId: 'genie',
 
		_predictions: [
			"As I see it, yet",
			"Ask again later",
			"Better not tell you now",
			"Cannot predict now",
			"Concentrate and ask again",
			"Don't count on it",
			"It is certain",
			"It is decidedly so",
			"Most likely",
			"My reply is no",
			"My sources say no",
			"Outlook good",
			"Outlook not so good",
			"Reply hazy, try again",
			"Signs point to yes",
			"Very doubtful",
			"Without a doubt",
			"Yes",
			"Yes - definitely",
			"You may rely on it"
		],
 
		_getPrediction: function( ) {
			var idx = Math.round(Math.random( )*19)
			return this._predictions[idx];
		},
	   	initialize: function(divId) {
 
			if(divId && divId.length)
				this.divId = divId;
 
			var label = document.createElement("p");
			label.innerHTML = "Ask a question. The genie knows the answer...";
 
			var question = document.createElement("input");
			question.size = 50;
 
			var button = document.createElement("button");
			button.innerHTML = "Ask!";
			button.onclick = function( ) {
				alert(Genie.prototype._getPrediction( ));
				question.value = "";
			}
 
			var container = document.getElementById(this.divId);		
			container.appendChild(label);
			container.appendChild(question);
			container.appendChild(button);
	   	}
});

As JQuery does not implement any additional extension management, the js file is included in the html as usual, and the HTML otherwise is nearly identical to the Dojo example:

<html>
<head>
	<title>Fun With the Genie!</title>
	<script	type="text/javascript" src="js/jquery-1.3.2.js"> </script>
	<script	type="text/javascript" src="js/jquery.genie.js"> </script>	
	<script type="text/javascript">	
		var myGenie = null;
 
	  	function myinit(){
			myGenie = new Genie('genie');
		}
 
		$(document).ready(myinit);		
	</script>	
</head>
<body>
	<div id="genie"></div>
</body>
</html>

The JQuery_class.zip shows the full WRT example for the implementation.

YUI Version 3 implementation

Similarly as with Dojo & JQuery, YUI also does not really define any base that could be used for forming classes, thus the YUI version 3 implementation is rather similar to the Dojo and JQuery. Note that for some reason Y.extend() appears to work only when combining classes, and as with this example we are adding methods and variable to a “class”, the Y.mix() is used instead of the Y.extend(). Also note that since the interface to YUI APIs is only given as a argument for the callback, and not as a global object, the whole code is wrapped in a one function, and the YUI interface is given to it as a second argument:

Genie = function (divId, Y){
 
		_Genie = function(){}
 
		Y.mix(_Genie, {
 
			divId: "genie",
			_predictions: ["As I see it, yet", "Ask again later", "Better not tell you now", "Cannot predict now", "Concentrate and ask again", "Don't count on it", "It is certain", "It is decidedly so", "Most likely", "My reply is no", "My sources say no", "Outlook good", "Outlook not so good", "Reply hazy, try again", "Signs point to yes", "Very doubtful", "Without a doubt", "Yes", "Yes - definitely", "You may rely on it"],
 
			_getPrediction: function(){
				var idx = Math.round(Math.random() * 19)
				return this._predictions[idx];
			},
 
			initialize: function(divId){
 
				if (divId && divId.length) 
					this.divId = divId;
 
				var label = document.createElement("p");
				label.innerHTML = "Ask a question. The genie knows the answer...";
 
				var question = document.createElement("input");
				question.size = 50;
 
				var button = document.createElement("button");
				button.innerHTML = "Ask!";
				button.onclick = function(){
					alert(_Genie._getPrediction());
					question.value = "";
				}
 
				var container = document.getElementById(this.divId);
				container.appendChild(label);
				container.appendChild(question);
				container.appendChild(button);
			}
		});		
 
		_Genie.initialize(divId);
		return _Genie;
	}

The HTML then again looks nearly identical to the previous examples, only real difference is that the init function now also gets the YUI API interface as an argument:

<html>
<head>
	<title>Fun With the Genie!</title>
	<script type="text/javascript" src="js/yui-min.js"></script>
	<script type="text/javascript" src="js/Genie.js"></script>
	<script type="text/javascript">
		var myGenie = null;
 
		function myinit(Y){
			myGenie = new Genie('genie',Y);	
		}
 
	 	YUI().use('node', myinit);	
	</script>	
</head>
<body>
	<div id="genie"></div>
</body>
</html>

The YUI3_class.zip shows the full WRT example for the implementation.

Mootools implementation

Mootools is the only one of these five different methods that actually defines a Class with inheritance. Anyway, the implementation is basically nearly identical to other ones, just the wrapping is different. With Motools I also decided to inherit the Options with Implements, to get the div id handling done in native way.

var Genie = new Class({
	Implements: Options,
	options: {
		divId: 'genie'
	},
 
	_predictions: [
			"As I see it, yet",
			"Ask again later",
			"Better not tell you now",
			"Cannot predict now",
			"Concentrate and ask again",
			"Don't count on it",
			"It is certain",
			"It is decidedly so",
			"Most likely",
			"My reply is no",
			"My sources say no",
			"Outlook good",
			"Outlook not so good",
			"Reply hazy, try again",
			"Signs point to yes",
			"Very doubtful",
			"Without a doubt",
			"Yes",
			"Yes - definitely",
			"You may rely on it"
	],
 
	_getPrediction: function () {
		var idx = Math.round(Math.random( )*19)
		return this._predictions[idx];
	},
 
	initialize: function(options){
 
		this.setOptions(options);
 
		var label = document.createElement("p");
		label.innerHTML = "Ask a question. The genie knows the answer...";
 
		var question = document.createElement("input");
		question.size = 50;
 
		var button = document.createElement("button");
		button.innerHTML = "Ask!";
		button.onclick = function( ) {
			alert(Genie.prototype._getPrediction( ));
			question.value = "";
		}
 
		var container = document.getElementById(this.options.divId);
		container.appendChild(label);
		container.appendChild(question);
		container.appendChild(button);
  }
});

The HTML is again nearly identical, the only real difference to previous examples is the argument format passed for the Genie:

<html>
<head>
	<title>Fun With the Genie!</title>
	<script type="text/javascript" src="js/mootools-1.2.4-core.js"></script>	
	<script type="text/javascript" src="js/Genie.js"></script>
	<script type="text/javascript">
		var myGenie = null;
 
	  	function myinit(){
			myGenie = new Genie({div: 'genie'});
		}
 
	 	window.addEvent('domready',myinit);	 	
	</script>	
</head>
<body>
	<div id="genie"></div>
</body>
</html>

The Mootools_class.zip shows the full WRT example for the implementation.

Button

Hkaliste — Wed, 18 Nov 2009 14:44:05 GMT

Inheritance

Nokia.Widget
    | - Nokia.Button

1 - Description

The traditional Button component.

2 - Visual Design

3 - Component Dependencies

3.1 CSS

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">

3.2 Javascript

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

4 - Functional Specifications/Requirements

4.1 - Options:

element: 'selector'
- jQuery selector or the DOM reference to become the container of the component.
label: string
- Label content to be included in the component.
disable: boolean
- Defines whether the component is disabled.
keeppressed: boolean
- Defines whether the component is in keeppressed mode.
pressed: boolean
- Defines whether the component is pressed.
roundedCorners: boolean
- Defines whether the component has rounded corners.
width: int
- Defines the component width.
height: int
- Defines the component height.
click: function
- Defines the called function to click callback.
disable: function
- Defines the called function to disable callback.
enable: function
- Defines the called function to enable callback.
press: function
- Defines the called function to press callback.
unpress: function
- Defines the called function to unpress callback.

4.2 - Events - Callbacks

create: function()
- Scope: [this.element]
click: function(event)
- Scope: [this.element]
disable: function(event)
- Scope: [this.element]
enable: function(event)
- Scope: [this.element]
press: function(event)
- Scope: [this.element]
unpress: function(event)
- Scope: [this.element]

4.3 - Methods

enable: function()
- Enables the button component.
- return [void]
disable: function()
- Disables the button component.
- return [void]
press: function()
- Performs the button component press.
- return [void]
unpress: function()
- Performs the button component unpress.
- return [void]
setLabel: function()
- Sets a specific label for the button component.
- return [void]
getLabel: function()
- Returns the component label
- return [string]
setClick: function()
- Reassign the click function.
- return [void]

4.4 - Default options

element: ",
label: ' ',
disabled: false,
keeppressed: false,
pressed: false,
roundedCorners: true,
width: 'auto',
height: 'auto'
click: function() {},
disable: function() {},
enable: function() {},
press: function() {},
unpress: function() {}

5 - Component Demo

5.1 HTML

<span id="button01" class="btn"></span>

5.2 Javascript

var btn1 = new Nokia.Button({
     element: '#button01',
     disabled: false,
     keeppressed: false,
     label: 'Button 01',
     create: function() {
          //alert('Button: Created');
     },
     click: function() {
          //alert('Button: Click');
     }
});

6 - Nokia WRT Browser Compatibility

▴	S60 3.1	S60 3.2	S60 5.0
Button	NO	YES	YES

UI Manager Overview

Forum Nokia KB — Wed, 18 Nov 2009 07:22:55 GMT

In this page we described how the developer can use the WRT Framework UI Manager.

We will have a class Nokia.View, below a draft for this:

Nokia.View = new Class({
initialize: function(options) {
        var instance = this;
        instance.options = jQuery.extend({ container: this._createContainter() }, options);
        this.setContainer(instance.options.container);
        this.init(); // call the init() for lifecycle
    },
    _createContainter: function() {
        return Nokia.dom.parseHTML('<div class="nokia-view-container"></div>');
    },
    setContainer: function(container) {
        this._container = jQuery(container);
    },
    getContainer: function() {
        return this._container;
    },
    render: function(target) {
        this._renderUI(target || document.body);
        this.renderUI();
        this.bindUI();
        this.syncUI();
    },
    show: function() {
        this.getContainer().show();
        // this calls the show callback
    },
    hide: function() {
        this.getContainer().hide();
        // this calls the hide callback
    },
    _renderUI: function(target) {
        Nokia.dom.append(target, this.getContainer());
    },
    destroy: function() {    
   // this makes the elements distribution and unbinds
    }
});

Take a look on method render. This method will make the content inclusion on the DOM, adding elements and modifying the existed one. This also adds listeners for events. Morever, the manages th Lifecycle in widgets, to have logic and DOM integration in a separated way.

In the Class Nokia.ViewControl we will have the View manipulations:

Nokia.ViewControl = new Class({
     initialize: function() {
     // this call .show() for the first view (index 0)
     },
    next: function() {
        // this call .show() for the next view in stack
    },
    prev: function() {
        // this call .show() for the previous view in stack
    },
    show: function(index) {
        // this call .show() for the view in index
    },
    hide: function(index) {
        // this call .hide() for the view in index
    },
    getCurrentView: function() {
        // returns the current view
    },
    getCurrentIndex: function() {
        // returns the current view index
    },
    add: function(view) {
        // this adds a view in stack
    },
    remove: function(view or index) {
        // this removes a view in stack
    },
    size: function() {
        // this returns the view stack size
    }
});

Here, how this will be used in a Widget:

/*
 * Developer Implementation
 * - First View    
 */

var FirstPageView = Nokia.View.extend({
    /*
    * Lifecycle
    */
    init: function() {
        console.log("Init for my View");
    },
    renderUI: function() {
        this._cabecalho = Nokia.dom.parseHTML('<div class="nokia-view-cabecalho"></div>');
        Nokia.dom.append(this.getContainer(), this._cabecalho);
    },
    bindUI: function() {
        this._cabecalho.click(function() {
            console.log('clicked on cabecalho');
        });
    },
    syncUI: function() {
        this._cabecalho.css('background', 'blue');
    }
});

/*
 * Developer Implementation
 * - Second View    
 */

var SecondPageView = Nokia.View.extend({
    /*
    * Lifecycle
    */
    renderUI: function() {
        this._meioDaPaginaBlah = Nokia.dom.parseHTML('<div class="nokia-view-meio"></div>');
        this._linkBack = Nokia.dom.parseHTML('<a href="">Voltar</a>');
        Nokia.dom.append(this._meioDaPaginaBlah, this._linkBack);
        Nokia.dom.append(this.getContainer(), this._meioDaPaginaBlah);
    },
    bindUI: function() {
        this._meioDaPaginaBlah.click(function() {
            console.log('clicou no meio da pagina');
        });
        this._linkBack.click(function() {
            // ViewControlGlobal GLOBAL chamando o back()
            console.log( "Current index: ", ViewControlGlobal.getCurrentIndex() );
            ViewControlGlobal.prev();
        });
    },
    getEntradasAjax: function(callback) {
        // AJAX
    },
    show: function() {
        this.getEntradasAjax(function(entradas) {
            // Show entries
        });
    }
}); 

var viewControll = new Nokia.ViewControl();

viewControl.add(
     new FirstPageView()
);

viewControl.add(
    new SecondPageView({
        container: '#containerPreCriado',
        //callbacks
        show: function() {
            // call  show
        },
        hide: function() {
            // call hide
        }
    });
);

GuaranaUI-Overview

Allanbezerra — Thu, 19 Nov 2009 15:09:27 GMT

The Guarana UI Overview

In this section we make general overview about WRT Framework. We describe the Library Structure, the Build System and the Javascript and CSS architecture.

The Framework Structure

Build (build folder)

This folder is the Guarana Build System. We will talk more about it in the next section.

Components Demos (demos folder)

This folder include demos for the UI components. We have a demo for each Guarana component.

JQuery files (lib folder)

This folder includes JQuery Files used by Guarana. The JQuery version used is 1.2.6. This version is the most compatible version thats works stable in S60 devices.

Core files (src folder)

This folder includes all javascript core files. Here we have library core files and components implementation files. Additionally we have a sub-folder called i18n that has information about components internationalization. In the current version, the only that have internationalization is Date component.

Themes (themes folder)

This folders includes all CSS files used by WRT Framework. The two sub-folders presented are described bellow:

a) themeroller: This is the jQuery UI CSS Framework used by Framework. More information about Themeroller is available here.

b) nokia: This is the nokia base. Here we have component CSS base for Guarana UI. The default base CSS is designed for 360x640 resolution with Nokia Green Theme. Everything different from this, i.e. 240x320 resolutions or other theme, need to be implemented as an nokia base extension.

The Guarana Build System

The library has an automated build system that makes packaging process easy and fast. This optimized the production version concatenating and minifying all CSS and javascript files in a single one file. After this we have a minimized and simplified version for the Framework. To build Guarana, use the following commands. An important point is that the Apache Ant Tool must be configured:

$ cd build
 
$ ant

The build output is a folder Guarana in the build foldere, the structure is detailed:

demos/

This includes a demo for each component available in the Framework.

lib/

This file includes all javascript componentes implementation and jQuery.

themes/themeroller/

The Themeroller CSS Theme, according the theme setted in the build.

themes/nokia/base/

The Nokia base CSS File. The default base CSS is designed for 360x640 resolution with Nokia Green Theme. Everything different from this, i.e. 240x320 resolutions or other theme need to be implemented as an nokia base extension. We will talk more about it in next item.

themes/Nokia/<theme>/<resolution>

custom.css: Here we have a extension for a specific theme and resolution. For example if you are building a library version for Red theme and 240x320 resolution, we we have the CSS adjustiments for this theme and resolution here.

Our build system allows generate a wgz demo package for each component available. This is a good way to see the components demo working on devices. To generate this use the following comand:

$ cd build
 
$ ant -Dplist.component=<component_name>

For example, to generate demo for rating component, you must type:

$ ant -Dplist.component=rating // For rating component

This will generate a wgz package in build/Guarana.wgz with demos/rating/sample_rating.html as MainHTML.

Additionally, the default configuration for the framework is 360x640 resolution using Nokia Green Theme. Developer can build library versions for others resolutions and themes available. To generate this use the following command:

$ cd build
 
$ ant -Dresolution=<resolution> -Dtheme=<theme>

The resolution available in this version is 360x640, used by N97 and 5800 for example, and 240x320, very common resolution for non-touch devices. The themes supported at this time is the default green theme and red, this one only available for 360x640. We will have more themes supported in next release.

For example, to generate the red theme version for N97 device (360x640), you must type:

$ cd build
 
$ ant -Dresolution=360x640 -Dtheme=red

Additionally, developer can build a customized version including only a set of components. For example, to generate a custom version including only accordion and button components, you must type:

$ cd build
 
$ ant -Dcomponents=accordion_button

IMPORTANTE! After the build process, please copy lib and themes folders to your widget.

In the following sections we will talk more about WRT Framework Internals.

WRT Framework - Compatibility Matrix with Nokia S60 Versions

JAVASCRIPT

CSS

GuaranaUI-QuickStart

Allanbezerra — Thu, 19 Nov 2009 18:41:51 GMT

The WRT Framework Quick Start

In this section we describe how you can use Guarana UI in our widget. The started point can be checking out the demos. In the demo folder we have an example of each component. The examples are very simples and shows dependencies, component html and how can you create a component. In the next section we will describe in details necessary steps.

Five Steps To Use WRT Framework

To start the development using the Guarana UI, basically you need to follow the 5 steps bellow:

0. Build and Copy Guarana Files to your Widget

The first thing to use the WRT Framework in your Widget is to build. Please, take a look in the GuaranaUI Overview Section for more information about the Framework Structure and Build System. An option it get the Builded Version. After it, copy the necessary files to your widget:

lib folder: jQuery Library and Guarana javascript files

theme folder: Themeroller and Guarana CSS files

1. Include CSS Dependencies

You need to include CSS dependencies for the components. Every component has two common CSS dependencies files: /themes/themeroller/<theme>/Themeroller.css and //themes/nokia/ext-theme/<theme>/<resolution>/custom.css. The first one is the main Themeroller Theme and the Second one is the specific theme-resolution CSS. The order that the CSS files need to be included is:

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">

This theme path depends with theme you are using. The default theme is the Green theme applied for 360x640 resolution. If you would like to use diferent theme/resolution you need to define it during the build process. For example, if you like to use the red theme in 240x360 screen, the /themes/nokia/ext-theme/red/240x360/custom.css need to be included. This file includes all adjustment necessary to use the WRT Framework in this situation.

You can also visit the Framework Overview Section in order to check the WRT Framework CSS architecture. If you do not know what CSS is, please visit W3C Website.

2. Include Javascript Dependencies

You need to include Javascript dependencies for the components. Every component has two common javascript dependencies files: jQuery.js and Guarana.js. The first one is the jQuery library and the Second one is the core file from Guarana UI. These files can be found in the lib folder and need to be included in your widget:

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

You can also visit the GuaranaUI Overview Section in order to check the Javascript Architecture.

3. Include the Component minimal HTML

You need also to include the minimal HTML for the component. This in only to anchor the UI component in the HTML. You can find the necessary html in the component documentation page. For example for the Rating, as showed in component documentation page, the needed html is:

<div id="rating01"></div>

In this html we have only a div with the id that we will use to refer the component. All other things like component behavior and style will be provided by Guarana UI. In next subtopic we will talk more about create the component over this static information (html).

4. Create the Component in your Javascript Code

After include all dependencies, CSS and Javascript, and put the minimal html for the component it is time to create the component. The Guarana UI is strongly object oriented and you can easily create a UI element calling the component constructor:

MyComponent = new Nokia.Component({ // Component must be replaced by component name
          // Component Constructor Options
          // Components Callbacks
     });

When you are creating a component two importants points need to be observed:

Options: The component constructor has options that the developer can use. Theses options indicates component peculiarities. For example, the only mandatory options is the element, which defines the DOM element where the component will be created. The default values are used when the options are omitted in the component constructor.

Callbacks: The second point to be detailed is callback functions. Every important interaction event in the components is mapped in a callback function. This is a very important feature to execute actions after interactions.

Please, take a look in the specific component documentation page to check the list of options available, the defaults values and the callbacks available for each component. In the next topic we will show a complete example of the rating component uses.

A Complete Example of Rating Component Uses

The 5 Steps to use WRT Framework Rating Component in your widget:

0. Build and Copy WRT Framework Files to your Widget

$ cd build 
// Building Guarana for Default Theme using 360x640 resolution
$ ant (Apache Ant Tool must be configured)
// Guarana folder will be created in build folder
// After it, copy lib and theme folder to your widget

1. Include CSS Dependencies

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/default-theme/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="themes/nokia/ext-theme/default/360x640/custom.css" type="text/css" media="screen">

2. Include Javascript Dependencies

<script src="/lib/jQuery.js" type="text/javascript" charset="utf-8"></script>
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

3. Include the Component minimal HTML

<div id="rating01"></div>

4. Create the Component in your Javascript Code

/*
* Set library base path
*/
 
NOKIA_PATH_JAVASCRIPT = 'js/lib/';
 
NOKIA_PATH_STYLE_ROOT = 'css/themes/nokia/base/';
 
Nokia.use('rating', function(){
    var rating1 = new Nokia.Rating({
        element: '#rating01',
        value: 2,
        create: function() {
            alert('rating created');
        },
        change: function(event, value) {
            alert('rating change');
        }
    } );

5. Full Example

Click here to download this full demo.

6. Packaging and Deploy

You can find packaging and deploy information available in the Forum Nokia Website.

Before you start (mobile web page development)

Jimgilmour1 — Wed, 11 Nov 2009 08:37:17 GMT

To develop static web pages for a mobile device, you need the following items:

Computer workstation - a PC with a Microsoft Windows operating system, Linux or an Apple Macintosh is required.
Text editor.
Nokia Mobile Web Templates for High-end devices, which can be downloaded fromForum Nokia.
A mobile device to test the application.
To test the mobile web page, and for more advanced development, you can install an IDE such as Aptana Studio Professional 1.5 with a Nokia WRT Plug-in.

To install Aptana Studio, go to Aptana Download and select a suitable installation type (stand-alone with full installer preferred) and operating system. Click Download Now and run the installer after downloading.

After Aptana has been installed, install the WRT plug-in. In Aptana Studio Professional 1.5 this is done in the following way:

From the Help-menu select Install New Software.
Click Add and then type in, for example, "Nokia WRT Plugin" as the name and "http://tools.ext.nokia.com/wrt/prod/aptana/v2.1/" as the location for the installed software. Click OK.
From the list that appears, select the Nokia WRT Plugin, click Next and click Finish.
The plug-in has been installed, and new options will appear when you select File > New > Project.

WRT project creates needed index.html, css and js files. It also creates a *.plist file that is not needed for the mobile web page (only for WRT widget). Otherwise default WRT project is a good starting point when creating the first mobile web page, and that is why WRT plug-in is recommended to be installed.

You can create mobile web pages easily with other IDEs, too. For example, Adobe Dreamweaver has also Nokia WRT Extension. Dreamweaver WRT project creates needed files similarly as Aptana.

To create your first mobile web page, see Create your first mobile web page. See also Before you start (WRT widget development)

Create your first mobile web page

Jimgilmour1 — Wed, 11 Nov 2009 08:47:23 GMT

You can learn the main phases of mobile web page creation by following this example, which shows how to create and deploy a very simple static mobile web page. Before starting, make sure your development environment complies with the requirements listed in the section Before you start (mobile web page development). Here you will learn how to create a mobile page without any specific tools, like an IDE.

In this example you will create a new mobile web page, HelloMobileWeb. It can be viewed properly in all Nokia devices that have high-end browser support. The result page can also be viewed quickly with a normal desktop browser.

1 Creating HelloMobileWeb
2 Testing the mobile page
- 2.1 Running the mobile page on a PC or mobile browser
- 2.2 Running the mobile page on an SDK emulator

Creating HelloMobileWeb

This example application generates a very basic view with some text and a simple form with text input, switch-toggler, and a button. When the button is clicked and toggle is enabled, the text of the input field is shown under the form as a new paragraph. The example uses the Nokia Mobile Web Templates for High-End Devices to create some formatted styles and components.

The example screenshot is in a 240 x 320 resolution display, but the application scales for different display sizes and orientations as well.

Creating a main HTML file

Create a new file named index.html. This is the mandatory file of any mobile web page, but this example also uses other files to create dynamic and styled content (see below). The name of the HTML file can be anything, for example index.html. Copy and paste the following code to the index.html file and save it.

<!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>
     <!-- Define the title of the page -->
     <title>Hello Mobile Web!</title>
     <!-- Define the page content type -->
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <!-- Introduce the JavaScript-file the page uses (optional) -->
     <script language="javascript" type="text/javascript" src="basic.js"></script>		
     <!-- Introduce the JavaScript- and CSS files the Nokia templates use -->
     <script language="javascript" type="text/javascript" src="resources/scripts/templates.js"></script>			
     <link type="text/css" rel="stylesheet" href="resources/styles/reset.css">
     <link type="text/css" rel="stylesheet" href="resources/styles/baseStyles.css">			
     </head>
<body onload="init()">
  <div id="wrap">
  <div id="content">
  <!-- Define a heading-text for the page -->
  <h1>Hello Mobile Web!</h1>
  <!-- Create a simple form, which uses JavaScript to handle inputted text -->
  <form action="#" onsubmit="send(this.textinput1.value); return false">
  <!-- Create HTML label -->
  <label>Enter your name:</label>
  <!-- Create the form input field -->
  <input name="textinput1" type=text value=""/>
  <!-- Create a toggle component using Nokia templates -->
  <ul class="toggle">
  <li>
  <label>Enable button?</label>
  <input id="toggler1" type="checkbox" name="preference"  />
  </li>
  </ul>					
  <!-- Define the form button -->			
  <button id="submit" class="button-submit" value="submit" disabled="disabled">
  <span>Say Hello!</span>
  </button>
  </form>				
  <!-- Define a paragraph for result text -->
  <p id="result"></p>
  </div>
  </div>
</body>
</html>

Creating a simple JavaScript™ file to add basic functionality

Create a new file named basic.js to the same folder as index.html, which will hold some JavaScript™ functionality for the mobile web page. This is not a mandatory file for a web page, but this example has a few lines of functionality for the page. Copy and paste the following code to the basic.js file and save it.

/**
 * Initialize the JavaScript components on the web page.
 */
function init()
{
	// Create a new toggle-component and define a callback method for clicking the switch
	var myToggle = new ToggleSwitch(['toggler1'], function(state) {
		// Enable form submit when toggled "ON"
		var element = document.getElementById('submit');
		if(!element.getAttribute('disabled')) 
		{
			element.setAttribute('disabled', 'disabled');
		}
		else
		{
			element.removeAttribute('disabled');
		}
	});	
}
 
/**
 * Method to handle input data. Parameter data is appended as new paragraph 
 * below the form.
 * @param {Object} data The inputted text.
 */
function send(data)
{
	// Create a new paragraph for result
	var theNewParagraph = document.createElement('p');
	// Create text node for result
	var theText1 = document.createTextNode('Hello ' + data + '!');
	// Append the result text for result paragraph
	theNewParagraph.appendChild(theText1);
	// Show the result paragraph on the page
	document.getElementById("result").appendChild(theNewParagraph);	
}

Using Cascading Style Sheet (CSS) files to control style and layout

You can create a new file named basic.css, for example, which holds any style and layout control for your HTML elements. The file should be introduced in the index.html file inside the <head>-element, as described below. However, in this example you will use Cascading Style Sheet (CSS) definitions from the Nokia Mobile Web Templates for High-End Devices. Below is the declaration of two CSS files from the templates. See Before you start (mobile web page development) to find out where your can download the templates. After downloading, simply copy the resources folder to the same folder containing the above-mentioned files you have created.

<head>
	...
	<link type="text/css" rel="stylesheet" href="resources/styles/reset.css">
	<link type="text/css" rel="stylesheet" href="resources/styles/baseStyles.css">			
</head>

Testing the mobile page

Now you have created a simple static web page. You can view it using a PC or mobile web browser or an SDK emulator.

Running the mobile page on a PC or mobile browser

To test the mobile web page in a PC browser, simply open the index.html. You can also deploy (or, in this case, copy) index.html, basic.js, and the resources folder to a web server, where the page can be accessed using a PC or mobile browser. Here are free web hosting tips to deploy your web page for device testing.

To run a mobile page locally on your device without using a web server, you need to transfer index.html, basic.js, and the resources folder to your mobile device’s c/Data/Others/ folder and open index.html from there. Nokia PC Suite can be used to transfer the files.

Running the mobile page on an SDK emulator

To test the mobile page on an SDK emulator, you need to copy index.html, basic.js, and the resources folder to your SDK directory, for example to C:\S60\devices\S60_5th_Edition_SDK_v1.0\epoc32\winscw\c\Data\Others\. After this, you can open your SDK and use its web browser to open the page. Input the following URL to the browser: file://c/Data/Others/index.html.

TSS001484 - How to List Delivery Reports

Forum Nokia KB — Tue, 10 Nov 2009 06:44:31 GMT

Knowledge Base Home

ID	TSS001484	Creation date	November 10, 2009
Platform	S60 3rd Edition S60 3rd Edition FP1 S60 3rd Edition FP2 S60 5th Edition	Devices	Tested on Nokia E66, Nokia N96
Category	Symbian C++	Subcategory	Messaging

Keywords (APIs, classes, methods, functions): CLogFilter, CLogFilterList, CLogViewEvent,

Overview

This article describes how to list delivery reports for short messages.

Description

Delivery reports can be listed by filtering logs as follows:

Event type: SMS
Direction: Out
Status: Pending, Delivered or Failed

Solution

Derive a class from CActive and use classes provided by the log engine to filter out log events corresponding to SMS delivery reports.

Header file

#include <e32base.h>
  #include <f32file.h>    // RFs
  #include <logcli.h>     // CLogClient
  #include <logview.h>    // CLogViewEvent  
 
  class CDeliveryReportEngine : public CActive
    {
  public:
    // NewL constructor
    static CDeliveryReportEngine* NewL();
 
    // destructor
    ~CDeliveryReportEngine();
 
  public:
    void ReadDeliveryReportsL();
 
  protected:  // from CActive
    void RunL();
    void DoCancel();
 
  private:  
    // Private constructors
    CDeliveryReportEngine();
    void ConstructL();
 
    void AppendFilterL( const TDesC &aDirection,
                        const TDesC &aStatus,
                        TLogFlags aFlags,
                        TUint32 aNullFields,
                        TUid aType );
 
  private:
 
    // Data
    CLogClient*       iLogClient;
    CLogViewEvent*    iLogViewEvent;
    CLogFilterList*   iFilterList;
    RFs               iFs;
    };

Filtering the logs for Delivery Reports

The CLogViewEvent and CLogFilterList classes provide methods for reading log entries one by one from the database and filtering them based on event type, direction, and status. The delivery status is represented by a string. Standard strings are available in the log wrapper resource file and can be accessed through predefined resource IDs.

CDeliveryReportEngine::CDeliveryReportEngine()
  : CActive( CActive::EPriorityStandard )
    {
    CActiveScheduler::Add( this );
    }
 
 
  CDeliveryReportEngine* CDeliveryReportEngine::NewL()
    {
    CDeliveryReportEngine* self = new (ELeave) CDeliveryReportEngine;
    CleanupStack::PushL( self );
    self->ConstructL();
    CleanupStack::Pop(); // self
    return self;
    }
 
 
  void CDeliveryReportEngine::ConstructL()
    {
    User::LeaveIfError( iFs.Connect() );
    iLogClient = CLogClient::NewL( iFs );  
    }
 
 
  CDeliveryReportEngine::~CDeliveryReportEngine()
    {
    Cancel();
 
    if( iFilterList )
      {
      // Deletes all filters in the list
      iFilterList->ResetAndDestroy();
      }
 
    delete iFilterList;
    delete iLogViewEvent;
    delete iLogClient;
    iFs.Close();
    }
 
 
  void CDeliveryReportEngine::ReadDeliveryReportsL()
    {
    Cancel();
 
    if( !iLogViewEvent )
      {
      iLogViewEvent = CLogViewEvent::NewL( *iLogClient );
      }
 
    if( !iFilterList )
      {
      TLogString logString;
 
      // Create a set of event view filters  
      iFilterList = new ( ELeave ) CLogFilterList();
 
      // Append filter for Direction: OUT
      iLogClient->GetString( logString, R_LOG_DIR_OUT );  
      AppendFilterL( logString, KNullDesC, KLogEventRead, ELogFlagsField, TUid() );
 
      // Append filter for event type: SMS
      AppendFilterL( KNullDesC, KNullDesC, 0, 0, KLogShortMessageEventTypeUid );
 
      // Append filter for Status: Pending
      iLogClient->GetString( logString, R_LOG_DEL_PENDING );
      AppendFilterL( KNullDesC, logString, 0, 0, TUid() );
 
      // Append filter for Status: Delivered
      iLogClient->GetString( logString, R_LOG_DEL_DONE );
      AppendFilterL( KNullDesC, logString, 0, 0, TUid() );
 
      // Append filter for Status: Failed
      iLogClient->GetString( logString, R_LOG_DEL_FAILED );
      AppendFilterL( KNullDesC, logString, 0, 0, TUid() );
      }
 
    if ( iLogViewEvent->SetFilterL( *iFilterList, iStatus ) )
      {
      SetActive();
      }
    else
      {
      // No events in the view
      }
    }
 
 
  void CDeliveryReportEngine::AppendFilterL( const TDesC &aDirection,
                                             const TDesC &aStatus,
                                             TLogFlags aFlags,
                                             TUint32 aNullFields,
                                             TUid aType )
    {
    CLogFilter* logFilter = CLogFilter::NewL();
    CleanupStack::PushL( logFilter );
    logFilter->SetDirection( aDirection );
    logFilter->SetStatus( aStatus );
    logFilter->SetFlags( aFlags );
    logFilter->SetNullFields( aNullFields );
    logFilter->SetEventType( aType );
    iFilterList->AppendL( logFilter );  
    CleanupStack::Pop( logFilter );
    }

After reading each filtered log entry, the RunL() function of the active object will be called. CLogViewEvent::Event() will return the current log event that matches the set filters.

void CDeliveryReportEngine::RunL()
    {
    if( iStatus == KErrNone && iLogViewEvent )
      {    
      // Use the following functions to access delivery report details:
 
      // iLogViewEvent->Event().Description();
      // iLogViewEvent->Event().Status();
      // iLogViewEvent->Event().Number();
 
      // Try retrieving the next event
      if ( iLogViewEvent->NextL( iStatus ) )
        {
        SetActive();
        }
      else
        {
        // No more events
        }
      }
    }
 
 
  void CDeliveryReportEngine::DoCancel()
    {
    delete iLogViewEvent;
    iLogViewEvent = 0;
    }

Required capabilities
ReadUserData

S60 Platform Log example

Before you start (WRT widget development)

Jimgilmour1 — Wed, 11 Nov 2009 08:36:16 GMT

To develop an S60 Web Runtime (WRT) widget for a mobile device, you need the following items:

Computer workstation — a PC with a Microsoft Windows operating system, Linux, or an Apple Macintosh;
Text editor;
Zip utility software capable of creating .zip files.

In addition to the requirements listed above, it is recommended that you use the following tools to test the functionality of the WRT widget:

S60 3rd Edition, Feature Pack 2 SDK, or S60 5th Edition SDK. You can install the SDK from here.

A mobile device to test the application. See Running the widget on a mobile device on how to transfer content to a mobile device.

To make more advanced WRT widgets, you can install an IDE such as Aptana Studio Professional 1.5 with a Nokia WRT Plug-in.

To install Aptana Studio, go here and select a suitable installation type (stand-alone with full installer preferred) and operating system. Click Download Now and run the installer after downloading.

After Aptana has been installed, install the WRT plug-in. In Aptana Studio Professional 1.5 this is done in the following way:

From the Help menu, select Install New Software.
Click Add and then type in, for example, ‘Nokia WRT Plugin’ as the name and http://tools.ext.nokia.com/wrt/prod/aptana/v2.1/ as the location for the installed software. Click OK.
From the list that appears select the Nokia WRT Plug-in, click Next, and click Finish.
The plug-in has been installed, and new options will appear when you select File > New > Project.

To create your first WRT widget, see Create your first WRT widget.

Create your first WRT widget

Kiran10182 — Thu, 12 Nov 2009 19:39:42 GMT

Creating HelloWRT

This example application generates a very basic view with some text and a simple form with text input and a button. No style sheets or complex JavaScript™ is used. When the button is clicked, the text of the input field is shown under the form as a new paragraph.

The example screenshot is a 240 x 320 pixel resolution display, but the application will scale for different display sizes and orientations as well.

Creating a main HTML file

Create a new file named index.html. This is the first of two mandatory files for a WRT widget. The name of the HTML file can be anything, for example index.html. Copy and paste the following code to the index.html file and save it.

<!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>
    <!-- Define the title of the page -->
    <title>Hello WRT!</title>
    <!-- Define the page content type -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- Introduce the JavaScript-file the widget uses (optional) -->
    <script language="javascript" type="text/javascript" src="basic.js"></script>
    <!-- Introduce the CSS-file the widget uses (optional) -->
    <link rel="stylesheet" href="basic.css" type="text/css">
  </head>
  <body>
    <!-- Define a heading-text for the page -->
    <h1>Hello WRT!</h1>
    <!-- Create a simple form, which uses JavaScript to handle inputted text -->
    <form action="#" onsubmit="send(this.textinput1.value); return false">
      <!-- Create HTML paragraph -->
      <p>Enter your name:</p>
      <!-- Create the form input field -->
      <input name="textinput1" type=text value=""/>
      <!-- Define the form button -->
      <input type="submit" value="Say Hello!"/>
    </form>
    <!-- Define a paragraph for result text -->
    <p id="result"></p>
  </body>
</html>

Creating an info.plist file

Create a new file named info.plist to the same folder as index.html. This is the second of the two mandatory files for a WRT widget. Notice that the HTML file name inside the <string> </string> tags must match with the .html file created in step 1 (in this case index.html). Copy and paste the following lines of XML to the info.plist file and save it.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Nokia//DTD PLIST 1.0//EN" "http://www.nokia.com/DTDs/plist-1.0.dtd">
<plist version="1.0">
<dict>
  <key>DisplayName</key>
  <string>HelloWRT</string>
  <key>Identifier</key>
  <string>com.HelloWRT.basic.widget</string>
  <key>Version</key>
  <string>1.0</string>
  <key>MainHTML</key>
  <string>index.html</string>
  <key>MiniViewEnabled</key>
  <false/>
</dict>
</plist>

Creating a simple JavaScript file to add basic functionality

Create a new file named basic.js to the same folder as index.html, which will hold some JavaScript for the widget. This is not a mandatory file for a widget, but we have just a couple of lines of functionality for the widget there. Copy and paste the following code to the basic.js file and save it.

/**
 * Method to handle input data. Parameter data is appended as new paragraph 
 * below the widget's form.
 * @param {Object} data The inputted text.
 */
function send(data)
{
  // Create a new paragraph for result
  var theNewParagraph = document.createElement('p');
  // Create text node for result
  var theText1 = document.createTextNode('Hello ' + data + '!');
  // Append the result text for result paragraph
  theNewParagraph.appendChild(theText1);
  // Show the result paragraph on the page
  document.getElementById("result").appendChild(theNewParagraph);	
}

Optional step: Creating a Cascading Style Sheet (CSS) file to control style and layout

Optionally you can create a new file named basic.css, which would hold any style and layout control for the HTML elements. The file should be introduced in the index.html with the following line in the <head>-element. Note that this is not mandatory for the widget and is not used in this example.

<link rel="stylesheet" href="basic.css" type="text/css">

Example code for basic.css

body
{
background-color:navy;
}

Optional step: Adding an application icon

Optionally you can add an icon for the widget. If no custom icon is added, then a default application icon is shown. If you wish to add a custom application icon, it needs to be in Portable Networking Graphics (PNG) file format and named as icon.png. The recommended size for the icon is 88 x 88 pixels. The icon is automatically scaled, based on the device screen resolution. The custom icon needs to be in the same directory as the other widget files.

The default application icon can be seen here

Creating the widget package

Finally, create the widget package. Select the folder containing the files created above and create a ZIP file using a suitable utility, such as WinZip. Then change the extension of the resulting file to .wgz.

Running the widget on a PC browser, a mobile device, an emulator, or Forum Nokia RDA service

When the widget is ready there are several options for testing:

- PC browser - S60 mobile device - Emulator - Forum Nokia Remote Device Access (RDA) service

Note: Widgets do not need to be signed.

Testing the page with a PC browser

To test the widget in a PC browser, simply open the index.html.

Running the widget on a mobile device

When the *.wgz package has been created, you can transfer it to a device like any other installable application or content. To transfer the package to a device, use Nokia PC Suite and connect your mobile phone using, for example, Bluetooth or a USB cable connection. When PC Suite has connected your device, the easiest way to install the widget is to double-click the .wrt package, which initiates the install process. Another choice is to open the PC Suite application and drag-and-drop the .wgz package on top of the device image. PC Suite will inform you how the installation is progressing. You also need to accept the installation in the device. Note that the default icon does not necessarily show on the device before you have rebooted it. The widget can, however, be started without rebooting after the installation.

Running the widget on an emulator

Another way to test the WRT widget is to use the emulator included in the S60 3rd Edition, Feature Pack 2 or S60 5th Edition SDK. The emulator allows you to install *.wgz files and run WRT widgets as you would on a device.

Running the widget on an emulator Install the SDK here. Once the SDK has been installed, run the widget by selecting File > Open from the emulator.

Select the HelloWRT.wgz file and choose Open. When the emulator asks if you wish to install the application, choose Yes.

The emulator asks if you wish to install on C: Phone mem. or E: Memory Card. Click one of the options, or choose Select if the default is okay.

The emulator installs the widget and states ‘Installation complete’ after installation.

After the widget has been installed, go to the menu and select Applications.

At the bottom of Applications, find the HelloWRT widget and select it.

Running the widget on the Forum Nokia Remote Device Access (RDA) service

The Remote Device Access (RDA) service allows developers to test mobile applications and services remotely on various Nokia devices based on Symbian OS. It is available for all Forum Nokia members. See Forum Nokia RDAfor instructions for RDA usage. Remember to delete your package file when you end the device reservation.

Customisable List

Hkaliste — Wed, 18 Nov 2009 14:51:00 GMT

Inheritance

Nokia.Widget
    | - Nokia.CustomizableList

1 - Description

The Customisable List component combines list behaviour with the following components: Button, Text, Link, and Images.

2 - Visual Design

3 - Component Dependencies

3.1 CSS

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">

3.2 Javascript

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

4 - Functional Specifications/Requirements

4.1 - Options

element: 'selector'
- jQuery selector or the DOM reference to become the container of the component.
visible: boolean
- Defines the visible state of the component.

4.2 - Events - Callbacks

create: function()
- Scope: [this.element]
addItem function(null, item)
- Scope: [this.element]
removeItem: function(null, index)
- Scope: [this.element]
show: function(event, openercustomizableList)
- Scope: [this.element]
hide: function(event)
- Scope: [this.element]

4.3 - Methods

addItem: function(item)
- Adds a new element to the component.
- return [void]
removeItem: function(item)
- Removes an element from the component.
- return [void]
show: function()
- Shows the component.
- return [void]
hide: function()
- Hides the component.
- return [void]

4.4- Default options

visible: false

5 - Component Demo

5.1 HTML

<div id="list"></div>
                
<div id="item1" class="ui-helper-clearfix">
     <img src="images/carousel02.jpg" id="textimage" />
          <p id="paragraph">Lorem ipsum dolor sit amet.</p>
          <br style="clear:both;" />
</div>

5.2 Javascript

window.list = new Nokia.CustomizableList({
     element: '#list',
     visible: true,
     create: function() {
          //alert("Customizable List: Create");
     },
     show: function(openerTransitionList) {
          //alert("Customizable List: Show", openerTransitionList);
     },
     hide: function() {
          //alert("Customizable List: Hide list1.");
     },
     addItem: function(event, item) {
          //alert("Customizable List: AddItem", item);
     },
     removeItem: function(event, item) {
          //alert("Customizable List: RemoveItem", item);
     }
});

list.addItem('#item1');

6 - Nokia WRT Browser Compatibility

▴	S60 3.1	S60 3.2	S60 5.0
Customisable List	No	YES	YES

Text Link

Hkaliste — Wed, 18 Nov 2009 15:33:05 GMT

Inheritance

Nokia.Widget
    | - Nokia.TextLink

1 - Description

A link to a specific destination.

2 - Visual Design

3 - Component Dependencies

3.1 CSS

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">

3.2 Javascript

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

4 - Functional Specifications/Requirements

4.1 - Options

element: 'selector'
- jQuery selector or the DOM reference to become the container of the component.
label: string
- Label content to be included in the component.
url: string
- Defines the component URL address.
style: Object {}
- Defines the component style. This option is a hash table with CSS properties.

4.2 - Events - Callbacks

click: function(event, url)
- Scope: [this.element]
create: function()
- Scope: [this.element]

4.3 - Methods

go: function(url)
- Opens a specific URL address.
- return [void]

4.4 - Default options

url: false
label:

5 - Component Demo

5.1 HTML

<a href="#" id="link01">the label will be placed here</a>

5.2 Javascript

var link1 = new Nokia.TextLink({
     element: '#link01'
     label: 'New Link',
     style: {
          color: 'red',
          fontSize: '15px
     },
     create: function() {
          //alert("TextLink: Create");
     },
     click: function() {
          //alert("TextLink: Click");                                           
     }
});

6 - Nokia WRT Browser Compatibility

▴	S60 3.1	S60 3.2	S60 5.0
Text Link	YES	YES	YES

Sortable Grid

Hkaliste — Wed, 18 Nov 2009 15:25:30 GMT

Inheritance

Nokia.Widget
    | - Nokia.Sortable

1 - Description

This component is a content organiser that enables the user to sort the items it contains.

2 - Visual Design

3 - Component Dependencies

3.1 CSS

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">

3.2 Javascript

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

4 - Functional Specifications/Requirements

4.1 - Options

element: 'selector'
- jQuery selector or the DOM reference to become the container of the component.
items[]: string
- Defines the list of sortable grid items.
selectedClass: Object
- Defines the CSS class when the component is in selected mode.
resetInterval: int
- Defines resetInterval, used in component animation.

4.2 - Events - Callbacks

create: function()
- Scope: [this.element]
select: function(event, originalItem, targetItem)
- Scope: [this.element]
change: function(event, originalItem, targetItem)
- Scope: [this.element]
reset: function(event)
- Scope: [this.element]

4.3 - Methods

select: function(item, event)
- Selects a component item.
- return [void]
getSelectedElements: function()
- Returns the set of selected elements.
- return [jQuery collection]
clear: function(item)
- Clears component elements.
- return [void]
changePosition: function(event)
- Changes the position of selected elements.
- return [void]

4.4 - Default options

items: '> div',
selectedClass: 'selected',
resetInterval: 300

5 - Component Demo

5.1 HTML

In this demo we will apply the sortable component for the html bellow, but sortable can be applied for any html.

 <style type="text/css" media="screen">
     #container1 {
          width: 340px;
          height: 640px;
          background: #efefef;
     }

     #container1 div {
          width: 105px;
          height: 105px;
          line-height: 50px;
          float: left;
     }

     #container1 div, #container2 div {
          text-align: center;
          font-size: 20px;
          margin: 3px;
     }
 </style>
 

 

<div id="container1">
     <div class="ui-widget-header ui-state-default"> 1 </div>
     <div class="ui-widget-header ui-state-default"> 2 </div>
     <div class="ui-widget-header ui-state-default"> 3 </div>
     <div class="ui-widget-header ui-state-default"> 4 </div>
     <div class="ui-widget-header ui-state-default"> 5 </div>
     <div class="ui-widget-header ui-state-default"> 6 </div>
     <div class="ui-widget-header ui-state-default"> 7 </div>
     <div class="ui-widget-header ui-state-default"> 8 </div>
     <div class="ui-widget-header ui-state-default"> 9 </div>
</div>

5.2 Javascript

var sortable1 = new Nokia.Sortable({ 
     element: '#container1', 
     items: '> div', 
     selectedClass: 'ui-state-active', 
     create: function() { 
          //alert("Sortable: Create"); 
     }, 
     select: function(event, originalItem, targetItem) { 
          //alert('Sortable: Select');
     }, 
     change: function(event, originalItem, targetItem) { 
          //alert('Sortable: Change'); 
     }, 
     reset: function(event) { 
          //alert('Sortable: Reset'); 
     } 
});

6 - Nokia WRT Browser Compatibility

▴	S60 3.1	S60 3.2	S60 5.0
Sortable Grid	YES	YES	YES

Miniview

Hkaliste — Wed, 18 Nov 2009 14:59:24 GMT

Inheritance

Nokia.Widget
    |- Nokia.Miniview

1 - Description

The widget miniview component can be used to show a widget's content on the home screen of a mobile device. It allows mobile device users to view dynamic data from several applications simultaneously, without having to launch the applications on full screen.

2 - Visual Design

3 - Component Dependencies

3.1 CSS

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">

3.2 Javascript

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

4 - Functional Specifications/Requirements

4.1 - Options

element: 'selector'
- jQuery selector or the DOM reference to become the container of the component.
content: string
- Defines the component content.
image: String
- Defines the image path used in the component
style: Object {}
- Defines the component style. This option is a hash table with CSS properties.

4.2 - Events - Callbacks

create: function()
Scope: [this.element]
show: function()
Scope: [this.element]
hide: function()
Scope: [this.element]

4.3 - Methods

setContent: function(value)
- Sets the component content.
- return [void]
getContent: function()
- Gets the component content.
- return [String]
show: function()
- Shows the component.
- return [void]
hide: function()
- Hides the component.
- return [Object]

4.4 - Default options

content: "

5 - Component Demo

5.1 HTML

<div id="miniview1"></div>

5.2 Javascript

window.miniview1 = new Nokia.MiniView({
     element: '#miniview1',
     content: 'Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor',
     create: function() {
          //alert("Miniview: Create");
     },
     show: function() {
          //alert("Miniview: Show");
     },
     hide: function() {
          //alert("Miniview: Hide");
     }
});

6 - Nokia WRT Browser Compatibility

▴	S60 3.1	S60 3.2	S60 5.0
Miniview	NO	NO	YES (N97)

Iconic Menu

Hkaliste — Wed, 18 Nov 2009 14:55:09 GMT

Inheritance

Nokia.Widget
    |- Nokia.IconicMenu

1 - Description

A menu with content organized in a grid, enabling the calling of native applications accessed by the WRT library. This content should be an image and/or a text. To access the content, the user must tap or click the icon.

2 - Visual Design

3 - Component Dependencies

3.1 CSS

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">

3.2 Javascript

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

4 - Functional Specifications/Requirements

4.1 - Options

element: 'selector'
- jQuery selector or the DOM reference to become the container of the component.
maximize: boolean
- Defines whether the component is created as maximised.

4.2 - Events - Callbacks

create: function()
- Scope: [this.element]

4.3 - Methods

select: function(item, event)
- Selects a component item.
- return [void]

4.4- Default options

maximize: true

5 - Component Demo

5.1 HTML

<div id="menu"></div>

5.2 Javascript

var tabs = new Nokia.IconicMenu({
     element: '#menu',
     items: [
          {
               label: "favorites",
               icon: 'images/icon1.png',
               select: function(item, event) {
                    alert('IconicMenu Clicked on: ' + item.label);
               }
          },
          {
               label: "e-mails",
               icon: 'images/icon2.png',
               select: function(item, event) {
                    alert('IconicMenu Clicked on: ' + item.label);
               }
          },
          {
               label: "chat",
               icon: 'images/icon3.png',
               select: function(item, event) {
                    alert('IconicMenu Clicked on: ' + item.label);
               }
          },
          {
               label: "trash",
               icon: 'images/icon4.png',
               select: function(item, event) {
                    alert('IconicMenu Clicked on: ' + item.label);
               }
          },
          {
               label: "save",
               icon: 'images/icon5.png',
               select: function(item, event) {
                    alert('IconicMenu Clicked on: ' + item.label);
               }
          },
          {
               label: "gallery",
               icon: 'images/icon6.png',
               select: function(item, event) {
                    alert('IconicMenu Clicked on: ' + item.label);
               }
          },
     ]
});

6 - Nokia WRT Browser Compatibility

▴	S60 3.1	S60 3.2	S60 5.0
Iconic Menu	NO	YES	YES

Options Menu

Hkaliste — Wed, 18 Nov 2009 15:07:46 GMT

Inheritance

Nokia.Widget
    |- Nokia.OptionsMenu

1- Description

The Options Menu component contains a row of single-line items. Each item presents the user with a list of action items.

2 - Visual Design

3 - Component Dependencies

3.1 CSS

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">

3.2 Javascript

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

4 - Functional Specifications/Requirements

4.1 - Options

element: 'selector'
- jQuery selector or the DOM reference to become the container of the component.
transitions: boolean
- Defines whether transitions are applied on the component.
label: string
- Defines a label for a specific section of the component.

4.2 - Events - Callbacks

create: function()
- Scope: [this.element]

4.3 - Methods

appendShadow: function()
- Adds a shadow on the component.
- return [void]
addSection: function(section)
- Adds a new section on the component.
- return [void]
addItem: function(item)
- Adds a new item in a specific section.
- return [int]
getItems: function()
- Returns a set of items.
- return [jQuery collection]
getLabel: function()
- Gets the label for a specific section of the component.
- return [String]
select: function(event)
- Selects a component item.
- return [void]

4.4 - Default options

transitions: false

5 - Component Demo

5.1 HTML

<div id="menu"></div>

5.2 Javascript

var optionsmenu = new Nokia.OptionsMenu({
     element: '#menu',
     transitions: true
});

// Secction 1 Definition
var section1 = new Nokia.OptionsMenuSection({
     label: 'File'
});

var option1 = new Nokia.OptionsMenuItem({
     label: 'New',
     select: function() {
          alert('This creates a new file.');
     }
});

var option2 = new Nokia.OptionsMenuItem({
     label: 'Open',
     select: function() {
          alert('This opens a new file.');
     }
});

section1.addItem(option1);
section1.addItem(option2);

// Secction 2 Definition
var section2 = new Nokia.OptionsMenuSection({
     label: 'Edit'
});

var option5 = new Nokia.OptionsMenuItem({
     label: 'Undo',
     select: function() {
          alert('This undo last change');
     }
});
var option6 = new Nokia.OptionsMenuItem({
     label: 'Redo',
     select: function() {
          alert('This redo last change.');
     }
});

section2.addItem(option5);
section2.addItem(option6);

//Adding Section
optionsmenu.addSection(section1);
optionsmenu.addSection(section2);

//Creating Component
optionsmenu.create();

6 - Nokia WRT Browser Compatibility

▴	S60 3.1	S60 3.2	S60 5.0
Options Menu	NO	YES	YES

Dropdown

Hkaliste — Wed, 18 Nov 2009 15:04:45 GMT

Inheritance

Nokia.Widget
    |- Nokia.DropDown

1 - Description

The Drop Down component behaves similarly to the Options Menu component.

2 - Visual Design

3 - Component Dependencies

3.1 CSS

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">

3.2 Javascript

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

4 - Functional Specifications/Requirements

4.1 - Options

element: 'selector'
- jQuery selector or the DOM reference to become the container of the component.
items[]: string
- Defines the list of component items.
maximize: boolean
- Defines whether the component is created as maximised.

4.2 - Events - Callbacks

create: function()
- Scope: [this.element]

4.3 - Methods

showOptions: function()
- Shows the component options.
- return [void]
hideOptions: function()
- Hides the component options.
- return [void]
select: function(i, event)
- Selects specific item i in the component.
- return [void]
getSelected: function()
- Returns the selected item in the component.
- return [Object]

4.4 - Default options

maximize: false

5 - Component Demo

5.1 HTML

<div id="dropdown"></div>

5.2 Javascript

window.dropdown = new Nokia.DropDown({
     element: '#dropdown',
     items: [
          {
               label: "First option",
               value: 'some value',
               select: function(item, event) {
                    alert('Drop Down Clicked on: ' + item.label);
               }
          },
          {
               label: "Second option",
               value: 'some value',
               select: function(item, event) {
                    alert('Drop Down Clicked on: ' + item.label);
               }
          },
          {
               label: "Third option",
               value: 'some value',
               select: function(item, event) {
                    alert('Drop Down Clicked on: ' + item.label);
               }
          },
     ]
});

6 - Nokia WRT Browser Compatibility:

▴	S60 3.1	S60 3.2	S60 5.0
DropDown	NO	YES	YES

Rating

Manikantan — Thu, 19 Nov 2009 17:56:33 GMT

Inheritance

Nokia.Widget
    |- Nokia.Rating

1 - Description

The Rating component provides a control that allows the user to edit the rating of a content element.

2 - Visual Design

3 - Component Dependencies

3.1 CSS

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">

3.2 Javascript

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

4 - Functional Specifications/Requirements

4.1 - Options

element: 'selector'
- jQuery selector or the DOM reference to become the container of the component.
stars: int
- Defines the total number of stars in the component.
value: int
- This defines the number of stars that are selected in the component by default. This is a number between 0 and the value of the stars option.

4.2 - Events - Callbacks

create: function()
- Scope: [this.element]
change: function(value)
- Scope: [this.element]

4.3 - Methods

getValue: function()
- Returns the component value.
- return [int]
setValue: function(value)
- Sets the component value.
- return [void]

4.4 - Default options

stars: 5
value: 0

5 - Component Demo

5.1 HTML

<div id="rating01"></div>

5.2 Javascript

window.rating1 = new Nokia.Rating({
     element: '#rating01',
     value: 2,
     create: function() {
          //alert("Rating: Create.");
     },
     change: function(value) {
          //alert("Rating: Change - " + value);
     }
});

6 - Nokia WRT Browser Compatibility

▴	S60 3.1	S60 3.2	S60 5.0
Rating	YES	YES	YES

Image Description

Hkaliste — Wed, 18 Nov 2009 14:57:55 GMT

Inheritance

Nokia.Widget
    |- Nokia.ImageDescription

1 - Description

An image label combines a text label with an image.

2 - Visual Design

3 - Component Dependencies

3.1 CSS

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">

3.2 Javascript

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

4 - Functional Specifications/Requirements

4.1 - Options

element: 'selector'
- jQuery selector or the DOM reference to become the container of the component.
Description: String
- Defines the image description text.
lineHeight: int
- Defines the line height property.
applyRoundedCorners: boolean
- Defines whether the component has rounded corners.
backgroundClass: boolean
- Defines the background CSS class for the component.
create: function
- Defines the called function to create callback.
toggle: function
- Defines the called function to togglecallback.
maxLines
- Defines the number of lines displayed in compressed mode

4.2 - Events - Callbacks

create: function()
- Scope: [this.element]
toggle: function(event)
- Scope: [this.element]

4.3 - Methods

No public methods for this component.

4.4 - Default options

description: 'Image Description'
lineHeight: 18
applyRoundedCorners: true
backgroundClass: 'ui-state-default'
create: function() {}
toggle: function() {}

5 - Component Demo

5.1 HTML

<img id="image01" src="images/image01.png" />

5.2 Javascript

window.image1 = new Nokia.ImageDescription({
     element: '#image01',
     description: jQuery('#description').html(),
     maxLines: 1,
     create: function() {
          //alert("Image Description: Create");
     }
     toggle: function() {
          //alert("Image Description: Toggle");
     }
});

6 - Nokia WRT Browser Compatibility

▴	S60 3.1	S60 3.2	S60 5.0
Image Description	YES	YES	YES

LightBox

Hkaliste — Wed, 18 Nov 2009 15:02:18 GMT

Inheritance

Nokia.Widget
    | - Nokia.LightBox

1 - Description

The generic Note is a customisable panel popup. This component should be used as a confirmation note or an information note. The generic Note component must be considered as a container to HTML, more specifically text or image content with a size restriction.

2 - Visual Design

3 - Component Dependencies

3.1 CSS

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">

3.2 Javascript

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

4 - Functional Specifications/Requirements

4.1 - Options

element: 'selector'
- jQuery selector or the DOM reference to become the container of the component.
animation: boolean
- Defines whether showing and hiding the component has animation effects.
autoOpen: boolean
- Defines whether the component is displayed after creation.
height: int
- Defines the component height.
width: int
- Defines the component width.
buttonCose: boolean
- Defines the component to be be created in info mode, with only a Close button in the top-right corner of the component.
applyRoundedCorners: boolean
- Defines rounded corners in the lightbox container.

4.2 - Events - Callbacks

create: function()
- Scope: [this.element]
destroy: function()
- Scope: [this.element]
hide: function()
- Scope: [this.element]
show: function()
- Scope: [this.element]

4.3 - Methods

destroy: function()
- Destroys the component.
- return [void]
close: function()
- Closes the component.
- return [void]
open: function()
- Opens the component.
- return [void]

4.4 - Default options

autoOpen: false
overflow: true
height: 28
width: 28
applyRoundedCorners: true

5 - Component Demo

5.1 HTML

<div id="lightbox01" class="ui-widget-header ui-state-default">
     <h1>Lightbox Example</h1>
     <p>Lorem <strong>ipsum dolor</strong> sit amet. </p>
</div>

5.2 Javascript

window.dialog1 = new Nokia.LightBox({
     element: '#lightbox01',
     height: '80%',
     width: '80%',
     buttons: {
          "Yes": function() {
               alert('yes');
          },
          "No": function() {
               this.close();
          }
     },
     create: function() {
          //alert("Lightbox 01: Create.");
     },
     show: function() {
          //alert("Lightbox 01: Show.");
     }
});

6 - Nokia WRT Browser Compatibility

▴	S60 3.1	S60 3.2	S60 5.0
LightBox	NO	YES	YES

Radio Button

Hkaliste — Wed, 18 Nov 2009 15:14:28 GMT

Inheritance

Nokia.Widget
    |- Nokia.OptionBox
        |- Nokia.RadioBox

1 - Description

The Radio Button component enables the user to make a single selection within a group of vertically stacked, mutually exclusive radio buttoned text labels.

2 - Visual Design

3 - Component Dependencies

3.1 CSS

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">

3.2 Javascript

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

4 - Functional Specifications/Requirements

4.1 - Options

wrapper: String
- Wrapper element for the component.

4.2 - Events - Callbacks

create: function()
- Scope: [this.element]
check: function(event)
- Scope: [this.element]
clearAll: function(event)
- Scope: [this.element]

4.3 - Methods

check: function(event)
- Performs a check in a specific item.
- return [void]
clearAll: function()
- Clears all items in the component. This method is used to set the component in its initial state.
- return [void]

4.4 - Default options

wrapper: 'div'
disableLabelSelection: true

5 - Component Demo

5.1 HTML

<div id="optiongroup"></div>
<input type="radio" name="radio" value="" id="radio1" />

5.2 Javascript

var radio1 = new Nokia.RadioBox({
     element: '#radio1',
     label: 'testing radio 1',
     wrapper: 'div',
     create: function() {
          //alert('Radiobox: Create');
     },
     check: function(event) {
          //alert('Radiobox: Check', this, event);
     },
     uncheck: function(event) {
          //alert('Radiobox: Uncheck', this, event);
     },
     push: function(event) {
          //alert('Radiobox: Push', this, event);
     },
     clear: function(event) {
          //alert('Radiobox: Clear', this, event);
     }
});

var optionGroup = new Nokia.OptionGroup({
     element: '#optiongroup',
     title: 'Option Group 1'
});

optionGroup.addItem(radio1);

6 - Nokia WRT Browser Compatibility

▴	S60 3.1	S60 3.2	S60 5.0
Radio Button	NO	YES	YES

Busy Indicator

Hkaliste — Wed, 18 Nov 2009 14:42:30 GMT

Inheritance

Nokia.Widget
    |- Nokia.Busy

1 - Description

An animation that lets the user know that the system is busy working on a user request. The Busy Indicator component is used when an operation is expected to take more than 1 second, but the system is not able to predict exactly how long it will take.

2 - Visual Design

3 - Component Dependencies

3.1 CSS

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">

3.2 Javascript

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

4 - Functional Specifications/Requirements

4.1 - Options

element: 'selector'
- jQuery selector or the DOM reference to become the container of the component.
autoOpen: boolean
- Defines whether the component will be showed on creation or not.
image: string
- The busy indication image path.
height: int
- Defines the component height.
width: int
- Defines the component width.

4.2 - Events - Callbacks

create: function()
- Scope: [this.element]
destroy: function(event)
- Scope: [this.element]
hide: function(event)
- Scope: [this.element]
show: function(event)
- Scope: [this.element]

4.3 - Methods

destroy: function()
- Destroys the busy component.
- return [int]
hide: function(value)
- Hides the busy component.
- return [void]

show: function()
- Shows the busy component.
- return [int]

4.4- Default options

autoOpen: true,
overflow: true,
height: 108,
width: 108,
loaderText: false

5 - Component Demo

5.1 HTML

<div id="busy01"> Div 01 </div>

5.2 Javascript

window.busy1 = new Nokia.Busy({
     element: '#busy01',
     image: 'themes/nokia/images/busyindicator.gif',
     height: 107,
     width: 108,
     autoOpen: false,
     create: function() {
          //alert("Busy: Create.");
     },
     show: function() {
          //alert("Busy: Show.");
     }
});

6 - Nokia WRT Browser Compatibility

▴	S60 3.1	S60 3.2	S60 5.0
Accordion	YES	YES	YES

Date

Hkaliste — Wed, 18 Nov 2009 14:52:07 GMT

Inheritance

Nokia.Widget
    | - Nokia.Date

1 - Description

The most popular use of this component is a form where one of the fields is a date. Such forms may ask for a birth date, friends' birthdays, or even a date for an appointment. The Date component will display three fields, day, month, and year. The developer can choose the order of the fields. The user will input the date in the fields.

2 - Visual Design

3 - Component Dependencies

3.1 CSS

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">

3.2 Javascript

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

4 - Functional Specifications/Requirements

4.1 - Options

element: 'selector'
- jQuery selector or the DOM reference to become the container of the component.
format: String
- Defines the date format used by the component.
title: String
- Defines the title used by the component.
yearRange: int
- Defines the range of years used by the component.
i18n: String
- Defines the internationalisation.
setDateDelay: int
- Defines the time used in component interaction.
roundedCorners: boolean
- Defines whether the component has rounded corners.
active: Class
- Defines the CSS class used when active.
monthNames: Object[]
- A list of month names.
monthNamesShort: Object[]
- A list of month names in short mode.
dayNames: Object[]
- A list of day names.
dayNamesShort: Object[]
- A list of day names in short mode.

4.2 - Events - Callbacks

create: function()
- Scope: [this.element]
setDay: function(day)
- Scope: [this.element]
setMonth: function(month)
- Scope: [this.element]
setYear: function(year)
- Scope: [this.element]
setDate: function(date)
- Scope: [this.element]

4.3 - Methods

getDate: function()
- Returns the component date.
- return [jQuery collection]
formatDate: function(format, date)
- Formats the date according to a specific format.
- return [jQuery collection]
setDay: function(day)
- Sets the day property.
- return [void]
setMonth: function(month)
- Sets the month property.
- return [void]
setYear: function(year)
- Sets the year property.
- return [int]
setDate: function(date)
- Sets the date property.
- return [void]

4.4- Default options

element: 'body',
format: 'dd/mm/yy',
title: 'Pick a date',
yearRange: 10,
i18n: ,
setDateDelay: 800,

5 - Component Demo

5.1 HTML

<div id="datepicker"></div>

5.2 Javascript

var datepicker = new Nokia.DatePicker({
     i18n: 'pt-BR',
     element: '#datepicker',
     yearRange: 5,
     roundedCorners: true,
     create: function() {
          //alert('Datepicker: created', this);
     },
     setDay: function(day) {
          //alert('Datepicker: setDay', this, day);
     },
     setMonth: function(month) {
          //alert('Datepicker: setMonth', this, month);
     },
     setYear: function(year) {
          //alert('Datepicker: setYear', this, year);
     },
     setDate: function(date) {
          //alert('Datepicker: setDate', this, date);
     }
};

6 - Nokia WRT Browser Compatibility:

▴	S60 3.1	S60 3.2	S60 5.0
Date	NO	YES	YES

Option Box

Hkaliste — Wed, 18 Nov 2009 15:46:08 GMT

Inheritance

Nokia.Widget
    |- Nokia.OptionBox

1 - Description

This is the basic class for Checkbox and Radio Button Components.

2 - Visual Design

Not Applicable for this component.

3 - Component Dependencies

3.1 CSS

Not Applicable for this component.

3.2 Javascript

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

4 - Functional Specifications/Requirements

4.1 - Options

checked: boolean
- Defines if the component will be created in checked state.
disableLabelSelection: boolean
- Defines that the component label will be not selectable.
label: String
- Defines the Label for the component.
wrapper: String
- Wrapper element for the component.

4.2 - Events - Callbacks

check: function()
- Scope: [this.element]
unckeck: function()
- Scope: [this.element]

4.3 - Methods

isChecked: function()
- Checks if component is in checked state.
- return [void]
check: function(event)
- Performs check.
- return [void]
unckeck: function(event)
- Performs uncheck.
- return [void]

4.4 - Default options

wrapper: 'div',
disableLabelSelection: true,
checked: false

5 - Component Demo

5.1 HTML

Not Applicable for this component.

5.2 Javascript

Not Applicable for this component.

6 - Nokia WRT Browser Compatibility

Not Applicable for this component.

Scroll

Vdharankar — Wed, 18 Nov 2009 17:57:36 GMT

Inheritance

Nokia.Widget
    |- Nokia.Scroll

1 - Description

The Scroll component is used as a visual feedback to indicate the existence of more content beyond the screen.

2 - Visual Design

3 - Component Dependencies

3.1 CSS

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">

3.2 Javascript

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

4 - Functional Specifications/Requirements

4.1 - Options:

scrollBar: boolean
- Defines whether a traditional scrollbar is used by the component.
showArrows: boolean
- Defines whether arrows are used by the component.
bottomImage: boolean
- Defines whether the bottom image indication is used.
duration: boolean
- Defines the duration of scroll activity.
increase
- Defines the increase of scroll activity. This option is used in scroll speed calculation.

4.2 - Events - Callbacks

create: function()
- Scope: [this.element]
scroll: function()
- Scope: [this.element]

4.3 - Methods:

scroll: function(direction, callback)
- Apply scroll on a specific direction
- Return nothing

4.4 - Default options

increase: 100,
duration: 200,
scrollBar: true,
showArrows: false,
bottomImage: true

5 - Component Demo

5.1 HTML

<empty>

5.2 Javascript

var scroll = new Nokia.Scroll({
     scrollBar: true,
     showArrows: false,
     increase: 250,
     create: function() { 
          //alert('Scroll: Created'); 
     },
     scroll: function() {
          //alert('Scroll: Scroll'); 
     }
});

6 - Nokia WRT Browser Compatibility

▴	S60 3.1	S60 3.2	S60 5.0
Scroll	YES	YES	YES

Transition List

Hkaliste — Wed, 18 Nov 2009 15:42:15 GMT

1 - Description

Transition List can be used as an alternative to show the sub-items of a list. Keep the list navigation path in the title area as the following figure depicts. This list navigation path can be used to return to a previous list.

2 - Visual Design

3 - Component Dependencies

3.1 CSS

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">

3.2 Javascript

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

4 - Functional Specifications/Requirements

4.1 - Options

element: 'selector'
- jQuery selector or the DOM reference to become the container of the component.
title: string
- Defines the component title.
visible: boolean
- Defines the visible state for the component.
maximized: boolean
- Defines that component will be created in maximized mode.

4.2 - Events - Callbacks

create: function()
- Scope: [this.element]
show: function(openerTransitionList)
- Scope: [this.element]
hide: function()
- Scope: [this.element]
addItem: function(event, item)
- Scope: [this.element]
removeItem: function(event, item)
- Scope: [this.element]

4.3 - Methods

addItem: function(item)
- Adds a new item in the component.
- return [void]
removeItem: function(item)
- Removes a specific item from the component.
- return [void]
show: function(openerTransitionList)
- Shows the component.
- return [void]
hide: function()
- Hides the component.
- return [Object]

4.4 - Default options

title: ",
maximized: true,
visible: false

5 - Component Demo

5.1 HTML

<div id="library"></div>
<div id="entertainment"></div>
<div id="health"></div>

5.2 Javascript

bookStore = new Nokia.TransitionList({
     element: '#library',
     title: 'Book Store',
     visible: true,
     create: function() {
          console.log("create");
     },
     show: function(openerTransitionList) {
          console.log("show", openerTransitionList);
      },
     hide: function() {
          console.log("hide list1.");
     },
     addItem: function(event, item) {
          console.log("addItem", item);
     },
     removeItem: function(event, item) {
          console.log("removeItem", item);
     }
 });

var entertainment = new Nokia.TransitionList({
     title: 'Entertainment',
     element: '#entertainment'
});
var health = new Nokia.TransitionList({
     title: 'Health',
     element: '#health'
});

bookStore.addItem(
     new Nokia.TransitionListItem({
          label: 'Entertainment',
          linkedList: window.entertainment,
          click: function() {}
     })
);
bookStore.addItem(
     new Nokia.TransitionListItem({
          label: 'Romance',
          linkedList: window.romance,
          click: function() {}
     })
);

window.entertainment.addItem(
     new Nokia.TransitionListItem({
          label: 'Book 1',
          icon: 'ui-icon-note',
          click: function() {
               alert('Book 1');
          }
      })
);
window.entertainment.addItem(
     new Nokia.TransitionListItem({
          label: 'Book 2',
          icon: 'ui-icon-note',
          click: function() {
               alert('Book 2');
          }
     })
);
window.entertainment.addItem(
     new Nokia.TransitionListItem({
          label: 'Back to list',
          icon: 'ui-icon-triangle-1-w',
          linkedList: window.bookStore,
          click: function() {}
     })
);

window.romance.addItem(
     new Nokia.TransitionListItem({
          label: 'Book 1',
          icon: 'ui-icon-note',
          click: function() {
               alert('Book 1');
          }
     })
);
window.romance.addItem(
     new Nokia.TransitionListItem({
          label: 'Book 2',
          icon: 'ui-icon-note',
          click: function() {
              alert('Book 2');
          }
     })
);
window.romance.addItem(
     new Nokia.TransitionListItem({
     label: 'Back to list',
     icon: 'ui-icon-triangle-1-w',
     linkedList: window.bookStore,
          click: function() {}
     })
);

6 - Nokia WRT Browser Compatibility

▴	S60 3.1	S60 3.2	S60 5.0
Transition List	NO	YES	YES

Transition

Hkaliste — Wed, 18 Nov 2009 15:38:57 GMT

1 - Description

Transition uses fade in and fade out effects to change the displayed subject.

2 - Visual Design

3 - Component Dependencies

3.1 CSS

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">

3.2 Javascript

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

4 - Functional Specifications/Requirements

4.1 - Options

nextLabel: String
- Defines the label used in next element indication.
prevLabel: String
- Defines the label used in previous element indication.
maximize: boolean
- Defines whether the component is created as maximised.
Icons
- Icons to use for "more elements". We recommend using the icons native to the jQuery UI CSS Framework, manipulated by jQuery UI ThemeRoller.
content
- TO DO

4.2 - Events - Callbacks

create: function()
- Scope: [this.element]
show: function(openerTransitionBox)
- Scope: [this.element]
hide: function()
- Scope: [this.element]

4.3 - Methods

setNextTransitionBox: function(transitionBox)
- Defines the next view for a specific element.
- return [void]
setPrevTransitionBox: function(transitionBox)
- Defines the previous view for a specific element.
- return [void]

4.4 - Default options

nextLabel: 'Next',
prevLabel: 'Prev',
maximized: true,
icons: { prev: 'ui-icon-circle-arrow-w', next: 'ui-icon-circle-arrow-e' }

5 - Component Demo

5.1 HTML

<div id="library"></div>
<div id="entertainment"></div>
<div id="health"></div>

5.2 Javascript

var bookStore = new Nokia.TransitionBox({
     element: '#library',
     title: 'Book Store',
     visible: true,
     content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
     create: function() {
          console.log("create");
     },
     show: function(openerTransitionBox) {
          console.log("show", openerTransitionBox);
     },
     hide: function() {
          console.log("hide list1.");
     }
});

var entertainment = new Nokia.TransitionBox({
     title: 'Entertainment',
     element: '#entertainment',
     content: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
});

var health = new Nokia.TransitionBox({
     title: 'Health',
     element: '#health',
     content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
});

bookStore.setPrevTransitionBox();
bookStore.setNextTransitionBox(window.entertainment);

entertainment.setPrevTransitionBox(window.bookStore);
entertainment.setNextTransitionBox(window.health);

health.setPrevTransitionBox(window.entertainment);
health.setNextTransitionBox();

6 - Nokia WRT Browser Compatibility

▴	S60 3.1	S60 3.2	S60 5.0
Transition	NO	YES	YES

How to draw controls on bitmap

Jimgilmour1 — Sun, 08 Nov 2009 18:23:34 GMT

ID		Creation date	November 8, 2009
Platform	Symbian	Tested on devices	S60 Emulator
Category	Symbian C++	Subcategory	S60 5th

Keywords (APIs, classes, methods, functions): CWindowToBitmapMappingGc CCoeControl CFbsBitmap SetCustomGc CWsScreenDevice CFbsBitmapDevice CFbsBitGc

Overview

By default a control will draw itself on the screen by the system default Gc, but in some cases developers need it to draw itself on a bitmap, for example when implementing transition effect of view switching both views' screen shots are needed. The article shows how to force some controls (derived directly or indirectly from CCoeControl) to draw them self on a specified bitmap instead of screen.

Solution

The CCoeControl::SetGc() or CCoeControl::SetCustomGc() can be used to redirect the control's drawing to a custom Gc, but the functions accept a pointer to a window gc only, that means a bitmap gc can no be used directly. The CWindowToBitmapMappingGc introduced in Symbian OS v7.0 can be used to resolve the problem, because it can map all the operations on a window gc to a bitmap gc.

// .mmp
...
// begin by chen
LIBRARY            egul.lib // CWindowToBitmapMappingGc
LIBRARY            bitgdi.lib // CFbsBitmapDevice
LIBRARY            imageconversion.lib // CImageEncoder
// end by chen
...

// .cpp
...
// begin by chen
#include <gulgcmap.h> // CWindowToBitmapMappingGc
#include <ImageConversion.h> // CImageEncoder
// end by chen
...
TBool CGoodbyeHellAppUi::HandleDummyDrawNowMenuItemSelectedL( TInt aCommand )
    {
    // TODO: implement selected event handler
// begin by chen
    RFs& fs = iCoeEnv->FsSession();
    CCoeControl* control = iGoodbyeHellContainer; // the control to be drawn
    CWsScreenDevice* wsScreenDevice = iCoeEnv->ScreenDevice(); 
    CFbsBitmap* bitmap = new(ELeave) CFbsBitmap; // the bitmap on which the control to be drawn
    CleanupStack::PushL(bitmap);
    TInt err = bitmap->Create(control->Size(), wsScreenDevice->DisplayMode());
    User::LeaveIfError(err);
        CFbsBitmapDevice* bitDevice = CFbsBitmapDevice::NewL(bitmap);
        CleanupStack::PushL(bitDevice);
            CFbsBitGc* bitGc = NULL;
            err = bitDevice->CreateContext(bitGc);
            User::LeaveIfError(err);
            CleanupStack::PushL(bitGc);
                CWindowToBitmapMappingGc* w2bGc = CWindowToBitmapMappingGc::NewL(*wsScreenDevice, *bitGc);
                CleanupStack::PushL(w2bGc);
                    control->SetCustomGc(w2bGc); // set GC to the one we created
                    control->DrawNow(); // then draw the control (now on the bitmap we created)
                    control->SetCustomGc(NULL); // reset the GC 
 
                    // in this example we'd like to save the bitmap to a .bmp file
                    // so that we can easily check it out
                    _LIT(KFileName, "c:\\data\\control.bmp");
                    _LIT8(KMIME, "image/bmp");
                    CImageEncoder* encoder = CImageEncoder::FileNewL(fs, KFileName, KMIME, CImageEncoder::EOptionAlwaysThread);
                    CleanupStack::PushL(encoder);
                        TRequestStatus status = KRequestPending;
                        encoder->Convert(&status, *bitmap);
                        User::WaitForRequest(status);
                        User::LeaveIfError(status.Int());
                    CleanupStack::PopAndDestroy(encoder);
 
                CleanupStack::PopAndDestroy(w2bGc);
            CleanupStack::PopAndDestroy(bitGc);
        CleanupStack::PopAndDestroy(bitDevice);
    CleanupStack::PopAndDestroy(bitmap);
// end by chen
    return ETrue;
    }
...

More details about how to draw controls on bitmap please refer to the full example.

Source Code

Full example:

GoodbyeHell(DrawControlsOnBitmap).zip

Screenshot:

The bitmap (the wiki doesn't accept .bmp file so I had to convert it to a .png file):

Forum Nokia Wiki - Recent changes [en]

How to create a new Component for the Guarana UI Library

Contents

Introduction

Component files Structure

The Guarana UI Build processes

Setup the Component source files

Create an empty Web Runtime project

Setup the Component skeleton structure

Build Guarana UI and move resources

Writing the Component code

The Component JavaScript skeleton

Define the Component DOM structure

The Component's CSS classes

Initializing the Component

Create the DOM structure

Add some interactivity to the Component

Using the component

Finalize the Component

Links and Resources

KIS001490 - HTTP Filter doesn't receive events during a DM session

Description

How to reproduce

Solution

TSS001489 - Send data using RTP/RTCP API

Overview

Description

Solution

Example Application

KIS001488 - Feature Discovery returns invalid value for keyboard support on Nokia 5800 XpressMusic

Description

Solution

KIJ001487 - Scrollbar track tap may crash eSWT MIDlet with ListView

Overview

Description

Solution

KIJ001486 - SortedList with FILTER style not working in eSWT MIDlets

Description

How to reproduce

Solution

KIJ001485 - MultiPageDialog in eSWT MIDlets causes application exit problems

Description

Solution

Incorrect Machine UID documented for Nokia 6730

Description

How to reproduce

Solution

Reference

Porting iPhone web app to WRT - a porting example

Contents

Introduction

Porting steps

Create a new project

Transfer remote website content into local static content

Edit the Info.plist file

Edit HTML files and file paths to fit local context

Remove references to external resources

Test the first working project

Make the application scalable to different screen sizes

Add horoscope-related functionality with JavaScript

Create Options menu

Conclusions

First conclusion

Second conclusion

iPhone web app/WRT widget co-development tips

A small WRT widget acts as a launcher

Optimising the UI

Using device-specific JavaScript APIs in WRT

Final conclusion

Porting iPhone web app to WRT on Nokia devices

Contents

Introduction

General considerations

Compatible technologies

Replacement technologies

Client-side storage with HTML 5 features

Canvas vector drawing

Viewport metadata

Icon for home page

Touch events