S60 Web Runtime (WRT) widgets are stand-alone web applications that run on Nokia S60 devices.

Recently, Forum Nokia released plug-ins for Aptana Studio, Adobe Dreamweaver, and Microsoft Visual Studio, making widget development with these popular web-development environment simple and intuitive. If you are familiar with these web development tools, you can develop your Widgets in no time. Starting Nokia widget development is easy: All you need is basic-level programming experience within the area of web development. Knowledge of JavaScript, HTML, CSS, and Ajax will be an advantage and can enable you to create rich internet applications.

Here’s the steps to develop a simple Nokia Widget app using Aptana Studio:

You need Aptana Studio or Aptana Studio Pro 1.2 or later installed on your Microsoft Windows PC or Apple Macintosh computer. The current version can be obtained from the download page on the Aptana website.

Installing the plug-in

The Nokia WRT Plug-in is installed from within Aptana Studio by selecting the My Aptana tab in the editor, then clicking the Plugins icon. The Nokia WRT Plug-in for Aptana Studio is listed under the Platforms tab, and can be installed via the Get It link.

The Nokia WRT Plug-in for Aptana Studio is listed in the Platforms tab.

Once the Search Results dialogue opens, select the item Site providing the Nokia WRT Plug-in for Aptana Studio, and then select Next. The licence agreement is displayed; choose I accept the terms of the license agreement, and then click Next. The Installation dialogue now displays the items that’ll be installed. Click Finish to download the plug-in. Once the download is complete, the Feature Verification dialogue is displayed. Click Install all to start the installation. Finally, restart Aptana Studio once the installation is complete.

Create a new widget project

You’re now ready to create a widget. Select File > New > Project from the Aptana Studio menu. The Select a wizard dialogue, shown below, is now displayed. Expand the Nokia Web Runtime (WRT) item (see Figure 2), select New Nokia Web Runtime Widget, and click Next. (You’ll also see an option to import existing WRT widget projects or widget packages into Aptana Studio.)

Options are available to create new WRT widget projects or import existing ones.

In the Select a type of project dialogue, select RSS Reader Widget Project and click Next. Give your project a name in the New Nokia Widget Project dialogue. You can click Next to display a dialogue that enables you to set the feed URL and indicate that the widget includes a home-screen view; but for this quick start, click Finish and your WRT widget project will be created.

Edit your code

The content of your project can now be seen in the Project tab

The RSS-feed widget project is open in Aptana Studio.

You can now modify the code in the example to access your favourite RSS feed. You do this by editing the feedURL variable in the RSSReader.js JavaScript™ code

Edit the widget’s JavaScript code to customise the RSS feed displayed.

Preview your widget

There are three ways to preview a widget: within Aptana Studio, in an external browser, and, if you’re using a Microsoft Windows PC, in an S60 emulator. Full details of all these options are provided in the Nokia WRT Plug-in for Aptana Studio QuickStart Guide.

To preview the widget within Aptana Studio, open the index.html file and select the Nokia Web Runtime (WRT) tab. It’s possible to preview the widget in the screen resolution and orientation available on various S60 devices. This is done by selecting the Settings cog in the preview window, as shown in Figure 5, to display a list of preview settings options.

The widget preview can be set to match the size and orientation of S60 device screens.

Package your widget

Once the features of the widget have been confirmed and any debugging completed, the widget can be packaged into a *.wgz installation package. To do this, right-click within the project’s tree to open the shortcut menu and select Package Widget. The widget is now packaged and the file placed in the project’s root folder.

Deploy your widget

The plug-in supports the deployment of *.wgz files to S60 devices over a Bluetooth connection or to an S60 emulator (on Windows PCs only). Before this feature can be used, it’s necessary to select a deployment target. To do this, select Window > Preferences from the Aptana Studio menu, then select Web Runtime > Deployment.

In the Deployment pane, click Search to scan for available Bluetooth connections. When scanning is complete, click OK and select a device from the Select Device drop-down list.

Widgets can be deployed to an SDK or a device from within Aptana Studio.

Now, to deploy the widget, open the project’s shortcut menu and select Deploy Widget.

Install your widget

The widget installation package is now in your device’s Messaging Inbox, from where it can be opened. This starts the installation process, which follows the same sequence as installing an application. Once installed, the widget will be in your device’s Installations or similar folder.

The deployed widget is installed and can then be opened from the device’s ‘installation’ folder.