Web RunTimeis one of the possibilities that Nokia provides for creating applications for mobile devices. If you’re a web developer, you do not need much of anything else to start developing for Nokia devices using the WRT. It allows you to create widgets for S60 platform is a browser extension allowing you to Webkit browser instances to run as if they were separate applications. And you can still create rich applications using Flash.
Development Tools.
Nokia offers some tools to facilitate development to WRT:
- Nokia Web Developer Environment Standalone.
- Plugin for Aptana Studio.
- Extension for Adobe Dreamweaver.
- Plugin for Microsoft Visual Studio.
It also provides UI Framework and Library as:
- Guarana WRT UI library – A library based on JQuery for Nokia WRT by staff on INdT(Instituto Nokia de Tecnologia) based in Manaus – Brazil.
- Nokia Mobile Web Templates – A set of templates optimized for mobile and to customize how you want.
And there are some API’s to work with the resources of mobile devices.
- Platform Service 2.0 – An API in ActionScript 2.0 and JavaScript to access resources of mobile devices such as accelerometers, etc. geolocation.
- API Bridge – is a component for Nokia devices with Symbian, which allows WRT widgets content, Adobe Flash Lite and Java applications to access device features through a plug-in architecture. Developers can extend the component APIBridge with their own plug-ins.
How does the widgets made with Web RunTime? widgets that are files with extension .wgz which is nothing but a compressed file with the files from your site. Files that are can not miss:
- Info.plist – file responsible for the information of your widget as version, homepage, name etc.
- index.html – in fact, can be any name that is set in the Info.plist as MainHTML.
Create widgets to WRT and Flash Lite
How do you use html to create your widgets with WRT, nothing prevents to use Adobe Flash in the same way as you use normally through the html. Let’s see an example using JavaScript to communicate with Flash through the ExternalInterface class. In this example I will use the Nokia Web Developer Environment Standalone.
- Create a new project of type web apps Symbian-> Basic web app project. Give a name for your project and click next. Basic files are generated for your project.
We will choose the User option to play two videos. We start with the html containing the video options
[XML]
[/XML]
And the html that loads the swf responsible for playing the video:
[XML]
[/XML]
Edit the file basic.js to add the method that will send the video to the swf to be played.
[JAVASCRIPT]
function playVideo()
{
document.getElementById(“playerFlashLite”).playVideo(document.getElementById(“select”).value);
}
[/JAVASCRIPT]
In Flash, create a file type of Flash Lite 3.0 or 3.1. In the library panel, click on the “new video”. Give the name of instance “vd.” In type let selecting “Video (ActionScript-controlled) and add the stage. Add the following code to run Flash video streamed from Flash Media Server:
[ACTIONSCRIPT]
import flash.external.*;
ExternalInterface.addCallback(“playVideo”,this,playVideo);
trace(“init..”);
var nc = new NetConnection();
nc.connect(“rtmp://localhost/videoondemand”);
nc.onStatus = function(info)
{
trace(“Level: ” + info.level + ” Code: ” + info.code);
};
function playVideo(video:String)
{
ns = new NetStream(nc);
vd.attachVideo(ns);
ns.play(video);
ns.connect();
txt.text = video;
ns.onStatus = function(info)
{
trace(“Level: ” + info.level + ” Code: ” + info.code);
};
}
[/ACTIONSCRIPT]
We use static class ExternalInterface that our method within Flash can be called from JavaScript.. Running the emulator from Nokia Web Developer, we have something like this:
Emulador Nokia Web Developer
Emulador Nokia Web Developer
To generate the file .wgz, just click right on the project and “Package Web app” and your application is ready to run on the phone. Tested on Nokia 5230
To learn more:
http://www.forum.nokia.com/Develop/Web/Tools/
http://wiki.forum.nokia.com/index.php/Category:Web_Runtime_%28WRT%29
JQuery Mobile
Adobe Flash Lite
