Beginners’ guide to Mobile App development with Nokia WRT – Creating a project and Adding Componenets
Ok, we have the development environment all set up – what’s next? Now, we need to understand how WRT widgets are structured. In general, a widget is designed from few sections in a single html page that we can activate or deactivate in accordance with that we want to do (I know that I’m oversimplifying this, but nonetheless, for most cases it encompasses the general idea).
As I said in the first part of the tutorial, I’m writing a WRT widget for my mini-blogging service called woofim.com. As such, lets start with creating a simple widget that will display the latest photos, videos and text posts on the site.
Creating a new WRT project in Aptana Studio
First we need to create a new project to work with. Open Aptana Studio and select File -> New -> Project. This will open the following window:
Select “New Nokia Web Runtime Widget” – which will show the next screen:
Click NEXT and enter the project name (e.g. woofim) -> NEXT -> NEXT -> Finish. This will create a basic WRT project with the framework for css, javascript and html files.
Next, lets go over the basic structure of the index.html file – open it and it should look like this:
<!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> Sample Widget</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="basic.js"></script>
<link rel="stylesheet" href="basic.css" type="text/css">
<META NAME="Generator" CONTENT="Nokia WRT plug-in for Aptana Studio 2.0.0" />
</head>
<body onLoad="javascript:init();">
</body>
</html>
Let’s focus on 3 important statements marked in red:
- the html imports basic.js which holds the javascript for our widget;
- the html uses basic.css as stylesheet;
- when the body is loaded it will automatically launch the javascript function init() which we will use later on.
As I explained before, Nokia WRT 1.1 supports jQuery which simplifies many Javascript tasks. Therefore, we need also to load the jquery library in our project. You can download the latest version of jquery here or simply visit the jquery site and click download.
After you have downloaded jquery, just copy the file to your project folder (usually under “My Documents/Aptana/ProjectName”). Now we need to tell the html file to load the library when the index.html loads. This is what the following line does:
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
Just add it right before the </head>. Now we have also jquery to our disposal – good.
Now we can start designing the basic widget.
AHMED HUSSEIN said:
I NEED ALL KIND OF PHONE SOFTWARE NOTES PLEASE SEND TO ME THROUGH MY E-MAL ADDRESS
July 21st, 2009 at 6:45 am
Polprav said:
Hello from Russia!
Can I quote a post in your blog with the link to you?
October 15th, 2009 at 2:40 pm