From Forum Nokia Wiki

Contents 1 Prerequisites 2 Preface 3 Basic assumption 4 The method 4.1 Manifest file 4.2 Initial file 4.3 Application icon 5 Unzipping the AIR package 6 Create an info.plist manifest file 6.1 Copy the caption 6.2 Copy the identifier 6.3 Copy the initial file name 7 Find, move and rename the icon 8 Zip it 9 Deploy it 10 Comments?

Prerequisites

1. Basic knowledge of XML/html
2. Basic knowledge on using and creating zip files
3. Basic knowledge of folders and file system
4. Know how to get a file from your computer to your s60 device

Preface

There are many different widget technologies and runtimes out there. One common denominator between many of the is the fact that they are, in effect, renamed zip packages containing common web technologies like JavaScript, HTML, xml, Flash etc.

Here I describe how to port a simple Adobe AIR application to the s60 Web Runtime.

Basic assumption

This method assumes, that the content of the AIR application is as such suitable for the mobile and it does not contain any incompatible JavaScript etc. Normally assuming would make an ass out of you and me, but perhaps in this case it's permitted?

The method

A widget packaged in a renamed zip file usually consists of these parts:

Manifest file

A small specially formatted text or xml file describing the contents of the package. Usually at least the following

1. The caption (name) of the application
2. The application icon (not in S60 Web Runtime)
3. Location and name of the initial file
4. Unique identifier

Initial file

An html, xml or Flash file that gets launched when the application is called.

Application icon

A small image used as an icon on the desktop or on a widget area, like Apple dashboard or Widows Sidebar.

Each different widget runtime uses it's own special formatting, although the W3C is trying to formulate a standard. What we wish to do here is to simply reformat the contents of the AIR -package into a close resemblance of a wgz package

Unzipping the AIR package

First we need an AIR package to start with. I have used this one (Thanks, Doug ;o).

Download the .air package onto a folder of your choice in your PC and use an unzipping software (of your choice) to ...unzip it. Remember to retain the folder structure, if such an option is available.

'This is for Windows XP with Winzip: If you have Adobe AIR installed, right-click on the .air file and choose "Open with" and open with Winzip. If you do not have AIR installed, you can just double-click the .air file. Then just select "Extract", create a new folder and unzip the contents by clicking on "extract"'

Ígnore the following slander perpetrated by Winzip at least:

Create an info.plist manifest file

When installing a .wgz file the system looks for a manifest file called info.plist, the AIR equivalent is callen application.xml. Here's how to use AIR data to create the WRT manifest file:

• Open application.xml from \META-INF\AIR
• Open this template for info.plist

Copy the caption

Find this line in application.xml:

<name>funkyCalc</name>

and copy it to info.plist (replace the "XXXXX")

<key>DisplayName</key>    
<string>XXXXX</string>

Copy the identifier

Find this line in application.xml:

<id>com.adobe.example.funkyCalc</id>

and copy it to info.plist (replace the "com.xxx.xxx.xxx")

<key>Identifier</key>       
<string>com.xxx.xxx.xxx</string>

Copy the initial file name

Find this line in application.xml:

<content>libraryeffects/libraryeffects.htm</content>

and copy it to info.plist (replace the "xxx.xxx")

<key>MainHTML</key>
<string>xxx.xxx</string>

Now you must save the info.plist file to the root of the folder containing the rest of the stuff you unzipped from the AIR package.

Find, move and rename the icon

You can find the icon file by reading the following datain the application.xml:

<icon>
  <image48x48>libraryeffects/thumbpng.png</image48x48> 
</icon>

Copy that image to the root of the folder containing the rest of the stuff you unzipped from the AIR package and rename it to icon.png. If there are more than one icon files defined, use the 48pixel version.

Zip it

1. Use your favourite packaging tool to create a [zip] file of the widget you have just ported. The s60 Web Runtime requires that the widget contents are in a folder inside the zip file, not as files in the root of the zip.
2. Rename the newly created *.zip into *.wgz

Deploy it

Now you can use advance technologies like copy-pasting, bluetooth and infrared to upload the widget installation package to your phone. I use bluetooth and when I opened the message the widget installed fine on my E90 with updated firmware.

Comments?

Please use the comment section of this article to contribute or feel free to edit if you must ;)