From Forum Nokia Wiki

Reviewer Approved

Create WRT widgets with your favourite web authoring tool

Aptana Studio is a popular web development environment that offers integrated language support for HTML, DOM, JavaScript™, and CSS; and embedded development platforms and databases for PHP, Jaxer, Ruby on Rails, and Python. Aptana Studio is available free of charge, while Aptana Studio Pro is a commercial product. Both products are open source software based on the Eclipse framework. The Nokia WRT Plug-in for Aptana Studio provides features that enable the creation, editing, testing, and deployment of WRT widgets from within Aptana Studio or Aptana Studio Pro.

This quick guide introduces the key features of the Aptana WRT Plugin.

Installing the plugin

Download and install Aptana Studio

Download page

Install the WRT plugin

Next, you’ll need Aptana Studio, which you download from the Aptana website. Aptana Studio can be installed on a Microsoft Windows 32- or 64-bit platform, Mac OSX 10.4+, Linux 32-bit with GTK, or 64-bit Linux. Full details of system requirements are provided on the Aptana Studio download page.

Note that only the stand-alone versions of Aptana Studio and Aptana Studio Pro are supported by the Nokia WRT Plug-in. If you are running the Eclipse IDE and using the Aptana Studio Plug-in, then installation of the Nokia WRT Plug-in for Aptana Studio is not supported.

Once Aptana Studio is installed, the Nokia WRT Plug-in can be installed by selecting select Help > My Aptana > Plugins. The Nokia WRT Plug-in will be listed in the Platforms tab and can be installed by clicking Get it. Once installed, Aptana Studio will regularly check for updates to the plug-in.

For more information, read the Nokia WRT Plug-in for Aptana Studio QuickStart Guide »

Let's take a look at the basic features

In addition to supporting importing existing WRT widget code to your Aptana workspace, the WRT plugin provides a couple of templates for getting a jump start in your widget development.

Let's check out the template and import options.

The WRTKit UI framework is included in the plugin bundle and 3 of the sample widget templates highlight usage of this library. The RSS Reader and Flickr examples also demonstrate basic AJAX request and response handling.

I created a “Basic Widget Project” and decided to implement the simple functionality of searching for a map image based on a search string, i.e. utilizing the nice reverse geocoding features of Yahoo! Map Image API (http://developer.yahoo.com/maps/rest/V1/)

Remember to set your widget identifier to something unique.

Project files

After creating the project, you’ll have the widget bundle created for you. The files also include preview frames, including a mock-up of an S60 device and the possibility to switch preview layouts on the fly.

Click open the index.html file, add some code to it and check out the preview view in action.

You can also preview how your widget design looks on different UI layouts. Please note that Aptana by default uses Firefox as the rendering engine and you should always test your creations in a real device or the emulator also.

Debugging

Aptana can be used together with Firebug to provide a powerful debugging environment. Please refer to http://www.aptana.com/docs/index.php/Installing_the_Firebug_extension if you fail to launch the debugging facilities with the steps below.

Right-click wrt_preview_frame.html and select Debug As – JavaScript Web Application

Firefox will be launched with the WRT preview view. Aptana and Firebug debug facilities should be in your disposal.

NOTE: If you fail to utilize AJAX calls while debugging or previewing, you can try circumventing the same origin policy in Firefox with the following steps. This is done at your own risk + The call to Privilege manager cannot be executed in a real S60 device or the emulator.

Add a netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); call to the function issuing your AJAX requests
Type about:config in Firefox address bar and set signed.applets.codebase_principal_support value to true by double-clicking it.
Initialize a debugging session and issue an AJAX call => You should now be prompted about giving the script access to whatever domain you are requesting from.

Packaging and deploying

You can choose to exclude or include specific files from a widget installation package by right-clicking them in the project explorer view.

The widget can be deployed to either an S60 device via Bluetooth or to S60 3rd FP2 or S60 5th Edition emulator.

Once you have deployed to the emulator environment, fire up the emulator and locate the wgz-file from the File Manager application and install it.

The emulator and on-device debugging facilities still, for now, rely on the script logging facilities that can be activated from the S60 Web Browser settings. (General > Java/ECMA script errors)

NOTE: if you use the emulator as you test environment, changes made in Aptana would have to be installed as an update to the previous instance of the widget. One way to speed up development is to sync the changes made in Aptana to the widget's installation folder under %EPOCROOT%\epoc32\winscw\c\private\10282822\%WIDGET_ID% (e.g. C:\S60\devices\S60_5th_Edition_SDK_v0.9\epoc32\winscw\c\private\10282822\com.my.first.widget). This approach allows you to edit the widget code without having to reinstall it for the changes to be visible.

That's all for now. We're planning to provide some more in-depth Aptana instructions in the future.

Community: Wiki

Aptana WRT Plugin Basics