Mobiledevworld.com | Mobile Developers Community

I wanted to share 2 tips when developing Nokia Web Run-time apps (WRT) using Aptana studio and the Nokia plugin.

Your preview browser in Aptana matters

One thing I was puzzled is that I couldn’t get widget.preferenceForKey to work on my Aptana (running on a MAC). It seems that there is a problem with widget.preferenceForKey when Safari is configured as the preview app in Aptana Studio -> preferences -> Web Runtime – > preview. It just returns undefined when getting the preference for any key. I switched to Firefox and it solved the problem. Alas, it created a new problem. See next item.

Cross site scripting with Firefox when debugging you app on the Emulator

Unlike Safari, Firefox does not allow cross site scripts and when trying to execute an AJAX call from the widget you get “Access to restricted URI denied”  code: “1012″ error in your Aptana console.

The way to solve it is to add the following statement before you AJAX calls: netscape.security.PrivilegeManager.enablePrivilege(”UniversalBrowserRead”); when running the app in the emulator and removing it from the code before deploying the app on a real phone.

You also need to set ’signed.applets.codebase_principal_support’ to true in about:config, then your script will pass all domain security checks. Don’t forget to remove the line when you’re finished testing.

1 people like this post.

Like 

Being somewhat a fan of Aptana studio which I use for both PHP and Nokia WRT widget development, I was happy to read that Aptana released Studio 1.5.0.

Aptana Studio 1.5.0 is based on a whole new architecture which offers users greater performance and lower memory usage.

Some of the changed in 1.5.0 are:

• Performance, Performance, and Memory Usage – One of the first things you will notice with Aptana Studio 1.5.0 is better performance and less memory consumption.
• Eclipse 3.5 (Galileo) is now the base platform for Aptana Studio.
• 64-Bit Platform Compatibility (32-Bit JVM still required)
• Browse and manage your databases with the new Database Explorer.
• File bugs and enhancement requests from within Studio by going to Help > Aptana Help > Troubleshooting > Submit Aptana Bug or Feedback…
• Updated Windows bundled Multilingual JRE to 1.6.0_13
• Mac version is now Cocoa based.
• JSON Editor and Report where moved from Pro features to community edition.
• More FTP and Synchronization Fixes
• Updated XULrunner 1.8 to XULRunner 1.9
• SFTP – Public Key Authentication
• More Database Fixes
• More FTP and Synching Fixes
• The web server configuration now includes the DocumentRoot property, simplifying the use of some web frameworks.
• Install only the plugins you need with the Install Additional Features wizard, which runs on launch and from the Help menu. Options include, but are not limited to:
  • Ajax library support, including jQuery, Dojo, Ext JS, YUI, and many others
  • Aptana Jaxer v1.0.3 (Release Notes)
  • PHP
  • PyDev
  • Git

Click here to Download Aptana Studio 1.5.0.

0 people like this post.

Like 

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:

1. the html imports basic.js which holds the javascript for our widget;
2. the html uses basic.css as stylesheet;
3. 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.

7 people like this post.

Like