×
Namespaces

Variants
Actions
(Difference between revisions)

How to port Bondi Widgets to Symbian Web Runtime

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Bot fixing redirect link)
hamishwillee (Talk | contribs)
m (Bot fixing redirect link)
Line 3: Line 3:
 
There are many different widget technologies and runtimes out there. One common denominator between many of them is the fact that they are, in effect, renamed zip packages containing common web technologies like HTML, CSS and Javascript etc.
 
There are many different widget technologies and runtimes out there. One common denominator between many of them is the fact that they are, in effect, renamed zip packages containing common web technologies like HTML, CSS and Javascript etc.
  
[http://bondi.omtp.org/default.aspxdefault.aspxdefault.aspx Bondi] is an open source industry collaboration for widget and web technologies. The following contains guidelines for porting a Bondi widget to the [[::Category:Web Runtime (WRT)|S60 Web Runtime]].
+
[http://bondi.omtp.org/default.aspxdefault.aspxdefault.aspxdefault.aspx Bondi] is an open source industry collaboration for widget and web technologies. The following contains guidelines for porting a Bondi widget to the [[::Category:Web Runtime (WRT)|S60 Web Runtime]].
  
 
== Target Audience ==
 
== Target Audience ==
Line 48: Line 48:
 
#'''Add the <tt>DisplayName</tt> (mandatory)'''<br />This can be found from the <tt><name></tt> element of the config.xml file.<br /><br />
 
#'''Add the <tt>DisplayName</tt> (mandatory)'''<br />This can be found from the <tt><name></tt> element of the config.xml file.<br /><br />
 
#'''Add the <tt>Identifier</tt> (mandatory)'''<br />The <tt>id</tt> attribute in <tt>config.xml</tt> can be found in the <tt><widget></tt> element.<code><widget xmlns="http://www.w3.org/ns/widgets"  
 
#'''Add the <tt>Identifier</tt> (mandatory)'''<br />The <tt>id</tt> attribute in <tt>config.xml</tt> can be found in the <tt><widget></tt> element.<code><widget xmlns="http://www.w3.org/ns/widgets"  
xmlns:bondi="http://bondi.omtp.org/default.aspxdefault.aspxns/widgets"  
+
xmlns:bondi="http://bondi.omtp.org/default.aspxdefault.aspxdefault.aspxns/widgets"  
id="http://bondi.omtp.org/default.aspxdefault.aspxwidgets/location"
+
id="http://bondi.omtp.org/default.aspxdefault.aspxdefault.aspxwidgets/location"
version="1.0"></code>These can be formatted into the same form as the conventional WRT Identifier, which is the URL in reverse with the widget name appended to the end.<br />eg. http://bondi.omtp.org/default.aspxdefault.aspxwidgets/location → org.omtp.bondi.widgets.location<br /><br />
+
version="1.0"></code>These can be formatted into the same form as the conventional WRT Identifier, which is the URL in reverse with the widget name appended to the end.<br />eg. http://bondi.omtp.org/default.aspxdefault.aspxdefault.aspxwidgets/location → org.omtp.bondi.widgets.location<br /><br />
 
#'''Add the <tt>MainHTML</tt> (mandatory)'''<br />Bondi widget config.xml files contain a <tt><content></tt> element, whose attribute <tt>src</tt> contains the HTML file to be opened by the HTML renderer.  If this element exists, its value should be assigned to the MainHTML key in the info.plist file.<br /><br />If it does not exist, then the default value, index.html should be assigned to the MainHTML key.<br /><br />
 
#'''Add the <tt>MainHTML</tt> (mandatory)'''<br />Bondi widget config.xml files contain a <tt><content></tt> element, whose attribute <tt>src</tt> contains the HTML file to be opened by the HTML renderer.  If this element exists, its value should be assigned to the MainHTML key in the info.plist file.<br /><br />If it does not exist, then the default value, index.html should be assigned to the MainHTML key.<br /><br />
 
#'''<tt>AllowNetworkAccess</tt> (optional)'''<br />If the widget requires network access, add a self closing tag <tt><true /></tt> under <tt>AllowNetworkAccess</tt> element. To deny network access, add a self closing tag <tt><false /></tt> under <tt>AllowNetworkAccess</tt> element. Leaving the element out of <tt>info.plist</tt> completely is the same as having set the element to false.<br /><br />
 
#'''<tt>AllowNetworkAccess</tt> (optional)'''<br />If the widget requires network access, add a self closing tag <tt><true /></tt> under <tt>AllowNetworkAccess</tt> element. To deny network access, add a self closing tag <tt><false /></tt> under <tt>AllowNetworkAccess</tt> element. Leaving the element out of <tt>info.plist</tt> completely is the same as having set the element to false.<br /><br />
Line 94: Line 94:
 
*[http://library.forum.nokia.com/index.jsp?topic=/Web_Developers_Library/GUID-4D13AF3F-4733-44E7-996F-F27A11C9D6BF_cover.html Web Developer's Library 1.7]
 
*[http://library.forum.nokia.com/index.jsp?topic=/Web_Developers_Library/GUID-4D13AF3F-4733-44E7-996F-F27A11C9D6BF_cover.html Web Developer's Library 1.7]
  
*[http://bondi.omtp.org/default.aspxdefault.aspx Bondi home page]
+
*[http://bondi.omtp.org/default.aspxdefault.aspxdefault.aspx Bondi home page]
 
*[http://bondisdk.limofoundation.org/ Bondi SDK - LiMo Foundation]
 
*[http://bondisdk.limofoundation.org/ Bondi SDK - LiMo Foundation]
  
  
 
Note that Bondi references may require login credentials.
 
Note that Bondi references may require login credentials.

Revision as of 10:11, 27 May 2011

Contents

Preface

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

Bondi is an open source industry collaboration for widget and web technologies. The following contains guidelines for porting a Bondi widget to the S60 Web Runtime.

Target Audience

These instructions are targeted for developers who wish to port their own Bondi widgets to Nokia WRT. It is assumed that they know whether a Bondi widget uses built in Bondi objects and if it requires network access.

Technology Compatibility

Web standard technologies

Nokia WRT supports the following technologies:

  • HTML 4.01 Specification, W3C Recommendation 24 December 1999,
  • XHTML Mobile Profiles Specification, XHTML Mobile Profile Version 29-Oct-2001, WAP-277-XHTMLMP-20011029-a
  • CSS Level 2 revision 1 (CSS 2.1), WAP CSS Specification Version 26-Oct-2001, WAP-239-WCSS-20011026-a
  • JavaScript 1.5 (ECMA-262 3rd Edition), ECMAScript Language Specification, 3rd edition (December 1999)
  • The combination of XML, XHTML/HTML, CSS, DOM, and the XMLHttpRequest object to add Ajax capability to a widget


If the widget you wish to port uses technologies that are not in this list, then it will not function as intended without modifications to the source code.

Runtime specific Javascript APIs

If only standard Javascript has been used in the widget, then no additional javascript libraries need to be added to the widget.

However, the Bondi Widget environment provides Javascript APIs that allows widgets to access special functionality. Those functionalities work differently in the Nokia WRT environment. If the built-in Bondi Widget APIs have been used, then additional Javascript libraries need to be added to the widget. Step 4 explains how to do this.

Be aware that the library is only partially supported and as such will have reduced functionality. The following is a list of the supported functionality.

Supported attributes and methods

  • bondi.devicestatus.getPropertyValue({aspect:Battery,property:batteryBeingCharged})
  • bondi.geolocation.getCurrentPosition()


To add more functionality, refer to Extending Bondi wrapper library.

The Method

1. Unzip the Bondi package

Take a Bondi widget and unzip it using the unzipping program of your choice. Remember to retain the folder structure, if possible. Note: file extension may need to be changed to *.zip before being extracted.

2. Create an info.plist manifest file

When installing a *.wgz file the system looks for a manifest file called info.plist. The Bondi Widget equivalent is called config.xml.

Here's how to use the Bondi Widget config.xml data to create the WRT manifest file.

  1. Download and unzip this info.plist template file and save it in the widget's root directory.

  2. Add the DisplayName (mandatory)
    This can be found from the <name> element of the config.xml file.

  3. Add the Identifier (mandatory)
    The id attribute in config.xml can be found in the <widget> element.
    <widget xmlns="http://www.w3.org/ns/widgets" 
    xmlns:bondi="http://bondi.omtp.org/default.aspxdefault.aspxdefault.aspxns/widgets"
    id="http://bondi.omtp.org/default.aspxdefault.aspxdefault.aspxwidgets/location"
    version="1.0">
    These can be formatted into the same form as the conventional WRT Identifier, which is the URL in reverse with the widget name appended to the end.
    eg. http://bondi.omtp.org/default.aspxdefault.aspxdefault.aspxwidgets/location → org.omtp.bondi.widgets.location

  4. Add the MainHTML (mandatory)
    Bondi widget config.xml files contain a <content> element, whose attribute src contains the HTML file to be opened by the HTML renderer. If this element exists, its value should be assigned to the MainHTML key in the info.plist file.

    If it does not exist, then the default value, index.html should be assigned to the MainHTML key.

  5. AllowNetworkAccess (optional)
    If the widget requires network access, add a self closing tag <true /> under AllowNetworkAccess element. To deny network access, add a self closing tag <false /> under AllowNetworkAccess element. Leaving the element out of info.plist completely is the same as having set the element to false.

  6. Version (optional)
    This tag facilitates updating of the widget, allowing it to check if there is a newer version available. The version attribute in config.xml can be found in the <widget> element.

  7. Save the file.

3. Find, Move and Rename the icon

You can find the icon file by following the path in config.xml:

<icon src="thumbnail.png"/>

Copy that image to the root of the widget folder. The icon must be in PNG format and named icon.png.

4. Add Javascript Libraries (optional)

If the widget uses geolocation API, copy files Bondi.txt and Platformservices.txt to the root of the widget folder. Change the extensions from *.txt to *.js.

Add the following lines inside <head> element in main HTML file:

<script type="text/javascript" src="Bondi.js"></script>
<script type="text/javascript" src="Platformservices.js"></script>

If the widget does not use geolocation API, copy only Bondi.txt to the root of the widget folder and change the extension from *.txt to *.js.

Add the following line inside <head> element in main HTML file:

<script type="text/javascript" src="Bondi.js"></script>

5. Rezip and rename

Use a packaging tool to create a *.zip file of the widget folder. 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. Rename the newly created *.zip into *.wgz

6. Deploy

Upload the widget installation package (wgz) to your phone.

Examples

References


Note that Bondi references may require login credentials.

100 page views in the last 30 days.