×
Namespaces

Variants
Actions
(Difference between revisions)

Opera Widget porting example - Hello World!

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Fix categories)
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Add ArticleMetaData)
 
Line 1: Line 1:
 +
{{ArticleMetaData <!-- v1.2 -->
 +
|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/ Qt SDK 1.1.4]) -->
 +
|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 -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20091102
 +
|author= [[User:Andrew.wharton]]
 +
}}
 
[[Category:Symbian Web Runtime]][[Category:How To]][[Category:Porting]]
 
[[Category:Symbian Web Runtime]][[Category:How To]][[Category:Porting]]
 
== Preface ==
 
== Preface ==
 
This is an example of porting an Opera Widget to Nokia WRT using the guide found [[How to port Opera Widgets to Nokia WRT|here]].  The example widget will be an Opera tutorial widget called Hello World!. The tutorial for how to make the widget can be found [http://dev.opera.com/articles/view/creating-your-first-opera-widget/ here].
 
This is an example of porting an Opera Widget to Nokia WRT using the guide found [[How to port Opera Widgets to Nokia WRT|here]].  The example widget will be an Opera tutorial widget called Hello World!. The tutorial for how to make the widget can be found [http://dev.opera.com/articles/view/creating-your-first-opera-widget/ here].
  
[[file:OperaWidgetPortingExamples_HelloWorld_Widget.png]]
+
[[file:OperaWidgetPortingExamples HelloWorld Widget.png]]
  
 
== 1. Download the .zip package ==
 
== 1. Download the .zip package ==
Line 31: Line 53:
  
 
== 4. Packaging ==
 
== 4. Packaging ==
Re-zip the containing Hello World! folder and change the file extension from .zip to .wgz.<br />[[File:OperaWidgetPortingExamples_HelloWorld_Packaged.png]]
+
Re-zip the containing Hello World! folder and change the file extension from .zip to .wgz.<br />[[File:OperaWidgetPortingExamples HelloWorld Packaged.png]]
 
== 5. Deploy ==
 
== 5. Deploy ==
 
Upload the widget to your mobile device and install.
 
Upload the widget to your mobile device and install.
 
[[Media:Hello World! 3675 2.1.zip | Here]] is an example of the ported widget. Remember to change the extension to .wgz before installing.
 
[[Media:Hello World! 3675 2.1.zip | Here]] is an example of the ported widget. Remember to change the extension to .wgz before installing.
 
<!-- Translation --> [[pt:Como portar um Widget do Opera - Hello World!]]
 
<!-- Translation --> [[pt:Como portar um Widget do Opera - Hello World!]]

Latest revision as of 09:37, 25 July 2012

Article Metadata
Article
Created: andrew.wharton (02 Nov 2009)
Last edited: hamishwillee (25 Jul 2012)

Contents

[edit] Preface

This is an example of porting an Opera Widget to Nokia WRT using the guide found here. The example widget will be an Opera tutorial widget called Hello World!. The tutorial for how to make the widget can be found here.

OperaWidgetPortingExamples HelloWorld Widget.png

[edit] 1. Download the .zip package

The Hello World! zip package can be found by following this link.

[edit] 2. Unzip the Hello World widget archive

The archive needs to be unzipped to make modifications to its contents, so go ahead and extract it.

[edit] 3. Create info.plist manifest file

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

Here's how to use the Opera 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. Open the widgets config.xml file and find the <widgetname> element. Copy the text found within the element and paste it into the <DisplayName> element of the info.plist file.
    <key>DisplayName</key>    
    <string>Hello World!</string>
  3. Add the <Identifier> as a random integer 30 digits long.
    <key>Identifier</key>       
    <string>8934075839275039847534890573489057</string>
  4. Add the <MainHTML> as index.html.
    <key>MainHTML</key>
    <string>index.html</string>
  5. Leave <AllowNetworkAccess> as </true>.
    <key>AllowNetworkAccess</key>   
    <true />
  6. Save the file.

[edit] 4. Packaging

Re-zip the containing Hello World! folder and change the file extension from .zip to .wgz.
OperaWidgetPortingExamples HelloWorld Packaged.png

[edit] 5. Deploy

Upload the widget to your mobile device and install. Here is an example of the ported widget. Remember to change the extension to .wgz before installing.

This page was last modified on 25 July 2012, at 09:37.
61 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×