×
Namespaces

Variants
Actions
(Difference between revisions)

Porting between Symbian Web Runtime and Nokia Asha Web Apps

From Nokia Developer Wiki
Jump to: navigation, search
r60600 (Talk | contribs)
(Created page with "Category:Series 40Category:Web Apps S40 Web App is a zip file actually(.wgt),which is similar to the Symbian Widget(.wgz).They have same file construction and different e...")
 
hamishwillee (Talk | contribs)
m (Hamishwillee - Fix categories)
(14 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Series 40]][[Category:Web Apps]]
+
[[Category:Symbian Web Runtime]][[Category:Series 40 Web Apps]][[Category:Porting]]
S40 Web App is a zip file actually(.wgt),which is similar to the Symbian Widget(.wgz).They have same file construction and different executive mechanism.And the developers can port S60 Widget to S40 Web App conveniently after some little alterations.
+
{{ArticleMetaData
 +
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities=<!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|id= <!-- Article Id (Knowledge base articles only) -->
 +
|language=<!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|review-by=<!-- After re-review: [[User:username]] -->
 +
|review-timestamp=<!-- After re-review: YYYYMMDD -->
 +
|update-by=[[User:isalento]]
 +
|update-timestamp=20111020
 +
|creationdate=20110615
 +
|author=[[User:R60600]]
 +
}}
 +
{{Abstract|This article explains the differences between Symbian Web Runtime and Series 40 Web Apps, and the changes you need to make to port between the two formats.}}
  
'''1.HTML Item size '''
+
== Overview ==
 +
The Symbian Web Runtime (WRT) is the official Web Runtime offering by Nokia for Symbian devices. Series 40 Web Apps are W3C compliant widgets than run on Nokia Series 40 devices.
  
The screen size of S40 device is different from Symbian devices,so the application must chang the width and height of the item in .html or .css file such as text image audio video etc,which will get the best display for UI.
+
The two types of web apps are actually quite similar; they are both constructed from traditional web resources written in html, javascript and CSS, have a registration file, and are packaged in zip files. While the execution model is quite different, from a developer point of view the packaging and programming is much the same. As a result developers can port between the two types with little effort.
  
'''2.Media file size'''
+
== File name ==
 +
Both types of web apps are packaged in a zip file containing much the same files. The main change in this area when porting is to use the correct file extension:
 +
* Series 40 Web App has extension .wgt
 +
* Symbian Web Runtime has extension .wgz
 +
It is also necessary to change the registration file, as discussed below.
  
The resource of S40 device is lower then Symbian devices commonly,in order to run the application faster the developers had better use small media file,which will cost lower system resources.
+
== Widget / Web App manifest file== 
 +
Both Symbian WRT widgets and Series 40 Web Apps need to have a manifest file, which defines the widget properties such as name, identifier and icon. W3C widget manifest file name is config.xml.
 +
* Symbian Web Runtime widget: info.plist 
 +
* Series 40 Web Apps: config.xml
 +
W3C widget manifest file is more versatile than the info.plist that is used in the Symbian WRT. 
 +
Comparison of the common info.plist values and config.xml elements.
 +
 
 +
{| class="wikitable"
 +
|-
 +
! info.plist !! config.xml
 +
|-
 +
| <code xml><key>DisplayName</key>
 +
<string>WidgetName</string> </code>||<code xml><name short="WebAppName">WebAppName</name></code>
 +
|-
 +
| <code xml><key>MainHTML</key>
 +
<string>index.html</string> </code>||<code xml><content src="index.html"/></code>
 +
|-
 +
| <code xml><key>Identifier</key>
 +
<string>com.WidgetName</string></code>||As attribute for the root widget element. <code xml> id="http://webAppName"</code>
 +
|-
 +
| <code xml><key>Version</key>
 +
<string>1.0</string></code>|| As attribute for the root widget element.<code xml>version="1.0"</code>
 +
|-
 +
| <code xml><key>MiniViewEnabled</key>
 +
<true/></code>|| Mini view / Home Screen is not supported in Series 40 Web Apps
 +
|-
 +
| <code xml><key>AllowNetworkAccess</key>
 +
<true/></code>||Not used in Series 40 Web Apps
 +
|-
 +
| Not used in symbian WRT || Used when storing preferences <code xml><preference name="key" value=""/></code>
 +
|-
 +
| Not used in symbian WRT || Must be included in Series 40 Web Apps! <code xml><feature name="nokia://s40.nokia.com/SAWRT/1.0 " required="true"/></code>
 +
|-
 +
| Not used in symbian WRT ||<code xml><author email="foo-bar@foo.org" href="http://foo.org/">Foo Bar Corp</author></code>
 +
|-
 +
| Not used in symbian WRT ||<code xml><license>Copyright Foo Bar Corp, 2011.</license></code>
 +
|-
 +
|}
 +
 
 +
Example:
 +
Info.plist (WRT)
 +
<code xml>
 +
<xmlversion="1.0"encoding="UTF8">
 +
<DOCTYPEplistPUBLIC "//Nokia//DTDPLIST1.0//EN" "http://www.nokia.com/NOKIA_COM_1/DTDs/plist-1.0.dtd"><plist version="1.0">
 +
<dict>
 +
<key>DisplayName</key>
 +
<string>A Widget</string>
 +
<key>Identifier</key>
 +
<string>xxx.xxx.widget</string>
 +
<key>MainHTML</key>
 +
<string>AWidget.html</string>
 +
</dict>
 +
</plist>
 +
</code>
 +
 
 +
config.xml (Series 40 Web App)
 +
<code xml>
 +
<?xml version="1.0" encoding="UTF-8"?>
 +
<widget xmlns="http://www.w3.org/ns/widgets" height="200" id="http://nokia.com/simplemaps" version="0.1.0" viewmodes="windowed fullscreen" width="200">
 +
<name short="AW">A Widget</name>
 +
<icon src="icon.png"/>
 +
<content src="AWidget.html"/>
 +
<description>...</description>
 +
<author email=" mailbox@email.com" href=" http://www.website.com/">
 +
Corporation
 +
</author>
 +
<license>...</license>
 +
</widget>
 +
</code>
 +
 
 +
== Size of UI elements ==
 +
 
 +
The typical screen size of Series 40 device (240 x 320 px) is different from typical Symbian touch devices (640 x 360 px), so the application must change the width and height of some items in {{Icode|html}} or {{Icode|css}} in order to optimise the UI. This includes text, images and videos.
 +
 
 +
Comparison of recommended dimensions of a button on common devices running Symbian WRT and Series 40 Web App.
 +
{| class="wikitable"
 +
|-
 +
! Device !! Physical size !! Pixel size
 +
|-
 +
| Nokia N8-00 (Symbian^3) || 7 x 7 mm|| 60 x 60 px
 +
|-
 +
| Nokia X3-02 (Series 40)|| 6.1 x 6.1 mm || 40 x 40 px
 +
|}
 +
 
 +
 
 +
For more information see [http://www.developer.nokia.com/dp?uri=http%3A%2F%2Fsw.nokia.com%2Fid%2Fd9970380-b320-4644-bfc6-06dcc7ac0815%2FSeries_40_Web_App_UX_Guidelines Series 40 Web App UX Guidelines].
 +
 
 +
== Media file size ==
 +
 
 +
Series 40 devices are typically are less powerful than Symbian devices. In order to run applications at acceptable speeds, it may be necessary to use smaller media files, including images, audio and video.
 +
 
 +
 
 +
== Application structure ==
 +
The most difficult part on porting a Symbian Web Runtime widget to Series 40 Web App is taking mobile web library (MWL) into use in a Web App. Symbian Web Runtime allows JavaScript to be executed on a device and thus you can e.g. switch element contents on the fly without user noticing. The situation is different in the Series 40 Web App, as all of the JavaScript is executed on a proxy server. Using JavaScript to switch elements contents in a Web App will result in a round trip to server and back. This is where MWL comes to help. What you should do is to generate most of the HTML ready in the server side using JavaScript and then use MWL methods to switch CSS properties to hide and show element contents. Methods provided by the MWL are only scripts that are executed on a device in a Series 40 Web Apps. 
 +
== Application icons ==
 +
Series 40 Web Apps have one more icon compared to Symbian WRT widget. They both share the main icon defined in the info.plist or config.xml. This icon is used in the application menus. 
 +
In addition a favicon is needed in Series 40 Web Apps. The favicon is used in Nokia Browser history and favorites listing. The favicon is a 16x16 px pixel image.
 +
To include favicon add following line to index.html head-section:
 +
<code html4strict><link rel="icon" type="image/png" href="favicon.png"/></code>
 +
 
 +
 
 +
==Storing Data==
 +
Series 40 Web Apps supports preferences attribute to store key-value pairs as defined in the [http://www.w3.org/TR/widgets-apis/#the-widget-interface  W3C Widget interface specification].  Preference should be defined in config.xml before using.
 +
 
 +
Config.xml:
 +
<tt> <preference name="key" value=""/> </tt>
 +
 
 +
JavaScript:
 +
<code javascript> 
 +
var val = widget.preferences.getItem("key"); 
 +
widget.preferences.setItem("key","value");
 +
//or alternative way to access preferences 
 +
var val = widget.preferences["key"]; 
 +
widget.preferences["key"] = "value” 
 +
</code>
 +
 
 +
Symbian WRT equivalent would be:
 +
<code javascript> 
 +
var val = widget.preferenceForKey("key"); 
 +
widget.setPreferenceForKey("value", "key");
 +
</code>
 +
 
 +
 
 +
 
 +
== Localization ==
 +
Symbian WRT uses special “xx.lproj” folders for localization purposes. For example \MyWidget\fi.lproj\.
 +
Series 40 Web apps uses supports localization in compliance with the W3C widget specification. Basically it is folder based localization as well, but the folder structure is bit different. In a W3C widget localization folder is placed in the root of the widget folder and must be named “locales” (case sensitive). Localized files are placed inside subfolders of the locales folder. The names of subfolders must comply with values derived from the IANA Language Subtag Registry such as “fr”, ”fi” and “en-US”.  E.g. \locales\fi-Fi\

Revision as of 04:57, 5 July 2012

Article Metadata
Article
Created: r60600 (15 Jun 2011)
Updated: isalento (20 Oct 2011)
Last edited: hamishwillee (05 Jul 2012)

This article explains the differences between Symbian Web Runtime and Series 40 Web Apps, and the changes you need to make to port between the two formats.

Contents

Overview

The Symbian Web Runtime (WRT) is the official Web Runtime offering by Nokia for Symbian devices. Series 40 Web Apps are W3C compliant widgets than run on Nokia Series 40 devices.

The two types of web apps are actually quite similar; they are both constructed from traditional web resources written in html, javascript and CSS, have a registration file, and are packaged in zip files. While the execution model is quite different, from a developer point of view the packaging and programming is much the same. As a result developers can port between the two types with little effort.

File name

Both types of web apps are packaged in a zip file containing much the same files. The main change in this area when porting is to use the correct file extension:

  • Series 40 Web App has extension .wgt
  • Symbian Web Runtime has extension .wgz

It is also necessary to change the registration file, as discussed below.

Widget / Web App manifest file

Both Symbian WRT widgets and Series 40 Web Apps need to have a manifest file, which defines the widget properties such as name, identifier and icon. W3C widget manifest file name is config.xml.

  • Symbian Web Runtime widget: info.plist
  • Series 40 Web Apps: config.xml

W3C widget manifest file is more versatile than the info.plist that is used in the Symbian WRT. Comparison of the common info.plist values and config.xml elements.

info.plist config.xml
<key>DisplayName</key>
<string>WidgetName</string>
<name short="WebAppName">WebAppName</name>
<key>MainHTML</key>
<string>index.html</string>
<content src="index.html"/>
<key>Identifier</key>
<string>com.WidgetName</string>
As attribute for the root widget element.
 id="http://webAppName"
<key>Version</key>
<string>1.0</string>
As attribute for the root widget element.
version="1.0"
<key>MiniViewEnabled</key>
<true/>
Mini view / Home Screen is not supported in Series 40 Web Apps
<key>AllowNetworkAccess</key>
<true/>
Not used in Series 40 Web Apps
Not used in symbian WRT Used when storing preferences
<preference name="key" value=""/>
Not used in symbian WRT Must be included in Series 40 Web Apps!
<feature name="nokia://s40.nokia.com/SAWRT/1.0 " required="true"/>
Not used in symbian WRT
<author email="foo-bar@foo.org" href="http://foo.org/">Foo Bar Corp</author>
Not used in symbian WRT
<license>Copyright Foo Bar Corp, 2011.</license>

Example: Info.plist (WRT)

<xmlversion="1.0"encoding="UTF8">
<DOCTYPEplistPUBLIC "//Nokia//DTDPLIST1.0//EN" "http://www.nokia.com/NOKIA_COM_1/DTDs/plist-1.0.dtd"><plist version="1.0">
<dict>
<key>DisplayName</key>
<string>A Widget</string>
<key>Identifier</key>
<string>xxx.xxx.widget</string>
<key>MainHTML</key>
<string>AWidget.html</string>
</dict>
</plist>

config.xml (Series 40 Web App)

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" height="200" id="http://nokia.com/simplemaps" version="0.1.0" viewmodes="windowed fullscreen" width="200">
<name short="AW">A Widget</name>
<icon src="icon.png"/>
<content src="AWidget.html"/>
<description>...</description>
<author email=" mailbox@email.com" href=" http://www.website.com/">
Corporation
</author>
<license>...</license>
</widget>

Size of UI elements

The typical screen size of Series 40 device (240 x 320 px) is different from typical Symbian touch devices (640 x 360 px), so the application must change the width and height of some items in html or css in order to optimise the UI. This includes text, images and videos.

Comparison of recommended dimensions of a button on common devices running Symbian WRT and Series 40 Web App.

Device Physical size Pixel size
Nokia N8-00 (Symbian^3) 7 x 7 mm 60 x 60 px
Nokia X3-02 (Series 40) 6.1 x 6.1 mm 40 x 40 px


For more information see Series 40 Web App UX Guidelines.

Media file size

Series 40 devices are typically are less powerful than Symbian devices. In order to run applications at acceptable speeds, it may be necessary to use smaller media files, including images, audio and video.


Application structure

The most difficult part on porting a Symbian Web Runtime widget to Series 40 Web App is taking mobile web library (MWL) into use in a Web App. Symbian Web Runtime allows JavaScript to be executed on a device and thus you can e.g. switch element contents on the fly without user noticing. The situation is different in the Series 40 Web App, as all of the JavaScript is executed on a proxy server. Using JavaScript to switch elements contents in a Web App will result in a round trip to server and back. This is where MWL comes to help. What you should do is to generate most of the HTML ready in the server side using JavaScript and then use MWL methods to switch CSS properties to hide and show element contents. Methods provided by the MWL are only scripts that are executed on a device in a Series 40 Web Apps.

Application icons

Series 40 Web Apps have one more icon compared to Symbian WRT widget. They both share the main icon defined in the info.plist or config.xml. This icon is used in the application menus. In addition a favicon is needed in Series 40 Web Apps. The favicon is used in Nokia Browser history and favorites listing. The favicon is a 16x16 px pixel image. To include favicon add following line to index.html head-section:

<link rel="icon" type="image/png" href="favicon.png"/>


Storing Data

Series 40 Web Apps supports preferences attribute to store key-value pairs as defined in the W3C Widget interface specification. Preference should be defined in config.xml before using.

Config.xml: <preference name="key" value=""/>

JavaScript:

var val = widget.preferences.getItem("key");  
widget.preferences.setItem("key","value");
//or alternative way to access preferences
var val = widget.preferences["key"];
widget.preferences["key"] = "value”

Symbian WRT equivalent would be:

var val = widget.preferenceForKey("key");  
widget.setPreferenceForKey("value", "key");


Localization

Symbian WRT uses special “xx.lproj” folders for localization purposes. For example \MyWidget\fi.lproj\. Series 40 Web apps uses supports localization in compliance with the W3C widget specification. Basically it is folder based localization as well, but the folder structure is bit different. In a W3C widget localization folder is placed in the root of the widget folder and must be named “locales” (case sensitive). Localized files are placed inside subfolders of the locales folder. The names of subfolders must comply with values derived from the IANA Language Subtag Registry such as “fr”, ”fi” and “en-US”. E.g. \locales\fi-Fi\

99 page views in the last 30 days.
×