W3C widget

W3C widget configuration and packaging

 

http://www.ibm.com/developerworks/library/wa-w3cwidget/

http://mobile.51cto.com/widget-290074.htm

http://stackoverflow.com/questions/12231045/are-w3c-widgets-dead

W3C widget configuration and packaging

Learn about the candidate specification for W3C widgets

The World Wide Web Consortium (W3C) "Widget Packaging and Configuration" specification is currently in candidate recommendation status. The widgets, which can be used to provide rich Web application elements for mobile devices and Web sites, are an emerging technology to be used with Hypertext Markup Language (HTML). They are packaged as compressed (.zip) files and can be deployed in HTML files with a Multipurpose Internet Mail Extensions (MIME) type of application or widget. This article dives deeper into the specification, exploring how Web application developers can use it and what the benefits are.

PDF (326 KB) | 2 Comments

Nathan A. Good, Senior Consultant and Freelance Developer, Enterprise Frameworks

16 March 2010

Also available in Chinese Russian Japanese Portuguese

  • +Table of contents

W3C widgets overview

The W3C "Widget Packaging and Configuration" specification is an emerging specification for configuring, packaging, and deploying widgets. W3C widgets are components that are made up of HTML, cascading style sheets (CSS), JavaScript files, and other resources such as images. You can use widgets in devices for small applications such as calendars, weather reports, chats, and more.

One advantage of using widgets rather than normal Web applications is that they can be downloaded once and used many times after that, just like non-Web applications that are installed on a device. This allows users to save on bandwidth because the only data they transfer is the data used by the widget and not the widget files themselves.

Widgets often provide a rich user experience, such as interactive calendars and even games. You can use widgets in mobile devices, where the advantage of downloading the widget once and using it over and over can save on data transfer costs.

As of January 2010, the W3C "Widget Packaging and Configuration" specification (see Resources for a link to the full specification) is in candidate recommendation state. This means that the W3C believes the specification is in a stable state and encourages developers to create implementations of the specification.

The goal of the W3C widget specification is to propose a standard method for building and packaging widgets. There are currently many different vendors that have widgets (see Resources), and almost all of them implement their own proprietary application program interface (API) and packaging format.

This article introduces the W3C Packaging and Configuration specification, showing you how you can package HTML, CSS, and JavaScript files into a widget that can be deployed to a device that implements the W3C widget specification. Because this is an emerging specification, the implementation choices for devices that render the widgets are limited. If you want to see the widgets in action, you need to download some extra applications if you don't already have them installed.

To view the W3C widget package in action, you need:

  • Software that implements the W3C widget specification. This article uses Apache Wookie, an Apache Incubator project that is aimed at serving W3C widget content and allowing users to deploy W3C widgets.
  • A utility to create the widget's compressed file archive.
  • The Subversion (SVN) client if you want to download and install Apache Wookie.

Back to top

Related technology: Other widgets and servers

There are many different versions of widgets and gadgets currently on the market, so it's sometimes difficult to understand how the different technologies compare. The fragmentation of the widget technologies can make creating reusable rich user Web components difficult.

You say widget, I say gadget

For the purposes of this article, the terms widget and gadget mean the same thing—small components that can be installed and run locally as if they're applications. This article refers to the widget or gadget in a manner consistent with the item's vendor. For example, W3C calls them widgets, and Google calls them gadgets.

In addition to Microsoft® Windows® Vista gadgets and Apple® widgets, similar technologies include Google Wave gadgets, OpenSocial, and OpenAjax. These technologies have their own APIs and specifications (see Resources).

Google Wave gadgets

Google Wave gadgets are similar in concept to W3C widgets but are targeted for use in Google's Wave Web application. By contrast, W3C widgets are published as a specification by the W3C and are intended to be non-proprietary and used by different vendors.

Google Wave is a Web application that is currently in limited preview for developers and early adopters who want to learn more about the technology. Google Wave is primarily a collaboration tool, providing different abilities in the form of Google Wave gadgets to users. Developers can build gadgets that provide special abilities for Wave users to include in each "wave."

OpenSocial

OpenSocial is an API that allows you to build gadgets that work well in social networking Web applications. The OpenSocial 1.0 specification is currently under review, but versions 0.9 and 0.8.1 are used in containers (Web applications that use the gadgets) such as iGoogle, MySpace, Yahoo, and LinkedIn.

OpenSocial gadgets are based on the Google gadgets framework. The OpenSocial framework includes prewritten JavaScript APIs that you can use to work with people, activities, and persistence.

The adoption for OpenSocial makes it a compelling alternative for building gadgets.

OpenAjax

OpenAjax is "an organization of leading vendors, open source projects, and companies using Asynchronous JavaScript + XML (Ajax) that are dedicated to the successful adoption of open and interoperable Ajax-based Web technologies" (see Resources).

The OpenAjax Hub provides publication and subscribing (pub/sub) technologies that are used in OpenSocial gadgets.

Because widgets built according to the W3C packaging and configuration specifications can use Ajax, OpenAjax can be a good technology to use for building widgets that can have improved interoperability. You can create widgets that use OpenAjax but conform to the W3C widget specification.

Apache Wookie

Apache Wookie is an Apache Software Foundation incubator project that is capable of serving both Google Wave gadgets and W3C widget packages. Apache Wookie is a server application that you can download and install as a Web application or run as a stand-alone server.

Getting the Apache Wookie source is also a good way to view samples of W3C widget source code.

There are no prebuilt Apache Wookie binary distributions available on the official site (see Resources), so to download and run Apache Wookie you need to have SVN installed. To download Apache Wookie, simply use the commands shown in Listing 1.

Listing 1. Downloading Apache Wookie
$ svn co http://svn.apache.org/repos/asf/incubator/wookie/trunk

After downloading Apache Wookie, you can run it as a stand-alone server by typing the commands shown in Listing 2.

Listing 2. Running Apache Wookie in stand-alone mode
$ ant run

The ant command starts the Apache Wookie server in stand-alone mode. After you start the server, you can access the widgets at http://localhost:8080/wookie/.

Back to top

The widget configuration

To start building a widget, first create an empty directory with the widget name, such as myWidget. (For operating systems that allow dots in file names, use myWidget.wgt.) You will put the new widget files in this directory. If you want to create and test new HTML, CSS, and JavaScript files, create this directory in your Web server's document root so you can see how the HTML file works in your browser before packaging the widget.

Each widget package must have a configuration file called config.xml (case-sensitive) directly inside the empty directory that you just created, which is the base directory of the package. The configuration file contains vital information about the widget, such as the name, author, description, license, and more.

An example configuration file is shown in Listing 3.

Listing 3. A sample config.xml file
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
id="http://www.example.com/widgets/HelloWidget"
version="0.1" width="300" height="200">
  <name>HelloWidget</name>
  <description>A very basic widget that says, "Hello"</description>
  <content src="index.html" />
  <icon src="images/icon.png" />
  <access network="false" />
  <author>Nathan A. Good</author>
  <license>This is my license</license>
</widget>

The XML file should be UTF-8 encoded, as shown in the example.

The widget parent element has attributes that specify information about the widget, as shown in Table 1.

Table 1. Attributes for the widget parent element
Attribute nameDescription
id The unique URI that is an identifier for the widget
version The widget's version
width, height The width and height of the widget, respectively, in pixels
viewmodes The view mode for the widget (see Resources)

The XML elements that are used in the configuration are shown in Table 2.

Table 2. Widget configuration elements
Element nameDescription
name The short name of the widget is given in the short attribute, and the long name is given in the text of the XML element
description The description of the widget
author Information about the widget's author
license The license for the widget
icon The relative path of an icon file

With a sample configuration file created, you are now ready to create the start file.

Back to top

The start file

Aside from the config.xml configuration file, the only other file that is required for a valid W3C widget package is at least one start file. If the start file is not specified, the default file is the file that has a name starting with index—usually with an .html, .htm, or .xhtml extension. Other extensions are allowed for different types of widgets, but this article focuses on the standard HTML example.

An example file is shown in Listing 4.

Listing 4. A sample start file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="pragma" content="no-cache" />
  <meta http-equiv="Content-Type" content=
  "text/html; charset=us-ascii" />
  <title>HelloWorld</title>
  <link rel="stylesheet" href="style/common.css" type="text/css" />
</head>
<body>
<h1>Hello World...</h1>
</body>
</html>

The HTML file shown in Listing 4 is like any other well-formed HTML file that can be displayed in a browser. This does allow widgets to be easily designed—you can create them as normal HTML pages. This HTML start file is the file used to render the widget.

Because the widgets are simply HTML that is rendered by a browser, they can include JavaScript files. The use of JavaScript functions allows the widgets to have rich, dynamic content. You can use Ajax to display data dynamically in widgets to users. (See Resources for information about Ajax.)

JavaScript files referenced in the widget's HTML start file should be included in the packaged widget archive.

The sample HTML file for this widget also uses CSS for styling. Similar to the JavaScript files, the CSS files should be included in the compressed file archive that is deployed as a packaged widget.

The W3C specification provides guidelines for localization (l10n). The locale support is folder-based, so you create a directory called locales inside your widget's directory. Inside the locales folder, you can create folders with the locale names (for example, en, fr, de) that include different resources that are appropriate for the locales.

Back to top

Packaging the widget

Widgets are packaged in standard compressed archive files that have the .wgt extension. You should create the compressed file archive for a widget package using the DEFLATE method. The compressed file archive must include the configuration file, the start file, and any resource used by the files, such as JavaScript files, CSS, and images.

To create a widget package, use a command-line compressed file utility to create the compressed file archive as shown in Listing 5.

Listing 5. Creating the compressed file archive
$ cd myWidget
$ zip myWidget.wgt *

You can also use a graphical user interface (GUI) method for creating a compressed file archive of the widget files. After you create the archive, change the extension from .zip to .wgt.

You can organize widget packages in directories to make it easier to work with the package. For instance, consider Figure 1, which displays folders such as images, style, and scripts that you can use to organize the widget package.

Figure 1. The W3C widget package folder structure
A screen shot of the widget package folder structure. There are folders for images, legal, lib, scripts, and style, respectively.

When referencing the resources in the start file, use relative paths as though the files are deployed to a Web server. For instance, use style/common.css to refer to the common.css file in the style folder, even though they're both included in a compressed file archive as the widget package.

You can digitally sign the widget package files for security. See Resources for more information about the W3C specification for digitally signing widget packages.

Back to top

Deploying the widget

Limited implementations

Because the W3C widget specification is emerging and there are so many different proprietary widget specifications, it is difficult to find an implementation for the W3C widget specification that is production quality. Apache Wookie is an example of a W3C widget specification that is in active development. Because it is in active development, it may be unstable. When I was running my tests, there were some updates to the code in SVN that caused Apache Wookie to break for a while, but they were resolved in later updates.

You can deploy the widget using Apache Wookie's Administrative menu. To access Apache Wookie's menu, make sure Wookie is running (type ant run on the command line) and type the location for Apache Wookie in your browser. By default, that location is http://localhost:8080/wookie. Click the Administrative menu link (see Figure 2).

Figure 2. The Administrative menu link
A screen shot of the Wookie menu, showing options for Main menu, Options, View Widget Gallery, and Administration menu.

You are prompted for a username and password. If you haven't changed them from the defaults, the username and password are both java.

Click Add new widget as shown in Figure 3.

Figure 3. Adding a new widget
A screen shot of a widget menu, showing options to View existing widgets, Add new widget, Add new Google Gadget/OpenSocial app, and Remove widget from system.

Click Choose File and browse to your widget archive file. After you select the file, click Publish (see Figure 4).

Figure 4. Choosing the widget archive file
A screen shot of a window entitled 'Select a widget archive (zip) to uplaod.' Then a button to 'Choose file' and a 'Publish' and 'Clear' button underneath.

Apache Wookie then processes your widget archive. When it is finished processing the archive, you can see the widget in the list of widgets and in the widget gallery.

Alternatively, you can use Apache Wookie to deploy the widget without using the administrative utility. To do so, simply copy the widget package to the deployment directory configured in the build.properties file with the key widget.deploy.dir.

The specification for deploying and configuring W3C widgets includes recommendations for how implementations should handle widget archive files. When an implementation such as a browser downloads a package, it treats the widget package as a potential widget package. The browser verifies the integrity of the package, making sure that it is correctly built and that the configuration is complete. If the widget package conforms to the standard, it is treated as a valid widget package.

Back to top

Viewing the sample

Apache Wookie allows you to view widgets in any browser, so you don't need to search for a browser that implements the W3C specification (similar to the Opera browser's implementation of widgets). Ideally, browsers will implement the W3C widget specification so users can take advantage of the benefits of downloading their widgets once and using them over and over.

To view your new widget, make sure Apache Wookie is running and access it from your browser. Click View Widget Gallery and you will see the widget that you deployed listed in the gallery (see Figure 5).

Figure 5. Viewing the widget gallery
A screen shot of the Wookie gallery, showing the current widgets available

Click Demo to see your widget in action.

You can also create a test file that has an iframe element that includes your new widget. Create a simple HTML file as shown in Listing 6.

Listing 6. A simple HTML file to launch the widget
<html>
<head><title>Widget sample</title>
<body>
<iframe src=
"http://localhost:8080/wookie/wservices/wookie.apache.org/widgets/butterfly/index.html
?idkey=sM4aI8pnUUNI2Kfz15aK2h6vIek.eq.&amp;proxy=http://localhost:8080/wookie/proxy
&amp;st=wookie%3AwEQZrCsxTF502%2B6JeeEFlkq1KPgqXKQTllufS6Toez81qb40hPouhYV3apG4on23uVB
kQ5xlLjOXvIKulGqKBZvnKv2pgfEMg7OVzJpdDQt66MfODW6BBJry33ybOyMSc2hKonu7Sp1n1SY6FOFUuRx8VAjED
TuJip8BQ9i6ZXRH9193FT%2F7Ijjz0o1vdR91ofzcFA%3D%3D" width="500" height="400">
</body>
</html>

You will see your widget inside the Web page. I took the URL of the widget from the result of the Instantiate a widget action in Wookie's main menu.

You can view other sample packages that include more complex JavaScript files, CSS, and images in the source that comes with Apache Wookie. After downloading the Apache Wookie source code, look in the widgets subfolder to find the source code for other widgets.

Back to top

Summary

The W3C "Widget Packaging and Configuration" specification is an emerging W3C specification for building widgets that can offer rich user interfaces to users and save on bandwidth.

The W3C widget specification uses open, non-proprietary standards such as HTML, CSS, JavaScript code, and compressed file archive. Because the specification is emerging, there are few implementations for it, but it is a promising specification that could allow standardization of widgets.

Resources

Learn

Get products and technologies

 

 

本文和大家重点学习一下W3CWidget开发的配置文件，W3CWidget开发（以下简称Widget）定义一个由HTML、CSS和JaveScript等标准技术组成的Web应用程序，通常运行于浏览器之外，例如手机的Homescreen上。

W3CWidget开发的配置文件

W3CWidget开发（以下简称Widget）定义一个由HTML、CSS和JaveScript等标准技术组成的Web应用程序，通常运行于浏 览器之外，例如手机的Homescreen上。凡是传统网页上能做的事，Widget都能做，而且不用每次从网上下载，极大的节省了手机上网的费用。当 然，Widget也可以通过诸如Ajax等技术和网站实时交互。对程序开发者而言，Widget则提供了一个“编写一次，到处运行”的机会，而且传统的网 页程序员也能够更加直接的参与本地应用的开发了！

根据标准，Widget被打包成后缀名位.wgt的ZIP包，其根目录下的config.xml文件则是其配置文件，要求文件名小写并以UTF-8进行编码。该文件中，仅有Widget元素及其xmlns属性是必须的，其他均为可选元素。下面是一个最基本的配置文件：

  1. <?xmlversionxmlversion="1.0"encoding="UTF-8"?> 
  2. <WidgetxmlnsWidgetxmlns="http://www.w3.org/ns/Widgets"/> 
  3. <?xmlversionxmlversion="1.0"encoding="UTF-8"?> 
  4. <WidgetxmlnsWidgetxmlns="http://www.w3.org/ns/Widgets"/> 
  5.  

下面是对W3CWidget开发的配置文件中所有可能元素的一个简单介绍。

根元素widget

可以拥有name、description、author、license、icon、content、feature和preference八个可选子元素，支持的属性包括：

id：符合IRI标准的Widget标识。

version：版本号，例如1.0Beta。

viewmode：描述了Widget支持的视觉展现，包括application、floating（默认模式）、fullscreen、mini和all（允许所有模式）。

height和width：在floating模式下有效，在application模式下可由Widget引擎决定。


author元素

描述Widget作者，最多出现一次，支持的属性包括：

href：作者首页或其他相关的IRI标识。

email：作者email地址。


content元素

描述Widget被运行时打开的文件，支持的属性包括：

src：文件路径。

type：文件的MIME类型。

encoding：文件编码格式，默认为UTF-8。

description元素

描述Widget，支持的属性包括：

xml:lang：用于本地化。


feature元素

描述Widget在运行时可能用到的API等组件，可以拥有param元素，支持的属性包括：

name：该feature的IRI标识。

required：该feature是否是运行该Widget所必须的。


icon元素

描述Widget使用的图标，支持的属性包括：

src：图标文件路径。

width和height：图标大小。


license元素

描述该Widget使用的协议，支持的属性包括：

xml:lang：用于本地化。

href：相关协议的链接。


name元素

在诸如应用程序菜单等处显示的Widget名称，支持的属性包括：

xml:lang：用于本地化。

short：名字简写，用于在空间受限的场合下显示。


param元素

用于定义feature所需的参数，支持的属性包括：

name：参数名。

value：参数值。


preference元素

描述Widget初始化时的偏好，支持的属性包括：

name：偏好名称。

value：偏好值。

readonly：该偏好是否只读。

下面是W3CWidget开发中一个合法config.xml文件的例子：

    1. <?xmlversionxmlversion="1.0"encoding="UTF-8"?> 
    2. <WidgetxmlnsWidgetxmlns="http://www.w3.org/ns/Widgets" 
    3. id="http://example.com/sampleWidget" 
    4. version="1.0Beta" 
    5. height="800" 
    6. width="400" 
    7. viewmodes="floating"> 
    8.  
    9. <nameshortnameshort="Sample1.0"> 
    10. SampleW3CWidget  
    11. </name> 
    12. <featurenamefeaturename="http://example.com/sampleFeature"> 
    13. <paramnameparamname="paramName"value="paramValue"/> 
    14. </feature> 
    15. <preferencenamepreferencename="preferenceName" 
    16. value="preferenceValue" 
    17. readonly="false"/> 
    18. <description> 
    19. AdescriptionoftheWidget.  
    20. </description> 
    21. <authorhrefauthorhref="http://example.com/" 
    22. email="author@example.com"> 
    23. Author'sname  
    24. </author> 
    25. <iconsrciconsrc="icons/example.png"mce_src="icons/example.png"/> 
    26. <contentsrccontentsrc="customStartPage.html"mce_src="customStartPage.html"/> 
    27. <license> 
    28. ThelicenseusedbythisWidget  
    29. </license> 
    30. </Widget> 

How to Create Simple W3C Widget
3 Replies    

Here are instructions how you can create a simple W3C widget that runs on Qt Web Runtime (WRT) e.g. on Nokia N900.

Widgets are just ZIP packages containing at least two files: Configuration file (config.xml) and resource files (index.html and other HTML, CSS, JavaScript and image files).

    widget.wgt – zip archive renamed to *.wgt, containing:

        config.xml - configurations
        index.html - content

Configuration file contains information about the widget like name, version, author, icon etc. Example of simple config.xml file:
01    <?xml version="1.0" ?>
02    <widget xmlns="http://www.w3.org/ns/widgets" id="http://www.substanceofcode.com/hellowidget" version="0.1.0">
03      <!-- Name of the widget -->
04      <name>Hello World</name>
05      <!-- Description is shown when installing widget -->
06      <description>Simple hello world widget</description>
07      <!-- Start page for widget -->
08      <content src="index.html" />
09      <!-- Default icon for widget -->
10      <icon src="icon.png" />
11      <!-- Widget author -->
12      <author>Tommi Laukkanen</author>
13    </widget>

Content is good old HTML, CSS, JavaScript etc. files. For example simple HTML page like this:
1    <html>
2      <head>
3        <title>Hello!</title>
4      </head>
5      <body>
6        <h1>Hello W3C Widget World!</h1>
7      </body>
8    </html>

When these two files are packaged into a ZIP archive and renamed to Hello.wgt you can install it on your Nokia N900 just by clicking the file in file browser. When you run the app it’ll look something like this:
Hello World W3C Widget

Widget running on Nokia N900 with Qt Web Runtime

I hope that you find this tutorial helpful and start crafting your own widgets!
- See more at: http://www.substanceofcode.com/2010/08/10/how-to-create-simple-w3c-widget/#sthash.VqmVUGTi.dpuf

How to Create Simple W3C Widget

3 Replies

Here are instructions how you can create a simple W3C widget that runs on Qt Web Runtime (WRT) e.g. on Nokia N900.

Widgets are just ZIP packages containing at least two files: Configuration file (config.xml) and resource files (index.html and other HTML, CSS, JavaScript and image files).

  • widget.wgt – zip archive renamed to *.wgt, containing:
    • config.xml - configurations
    • index.html - content

Configuration file contains information about the widget like name, version, author, icon etc. Example of simple config.xml file:

01 <?xml version="1.0" ?>
02 <widget xmlns="http://www.w3.org/ns/widgets" id="http://www.substanceofcode.com/hellowidget" version="0.1.0">
03   <!-- Name of the widget -->
04   <name>Hello World</name>
05   <!-- Description is shown when installing widget -->
06   <description>Simple hello world widget</description>
07   <!-- Start page for widget -->
08   <content src="index.html" />
09   <!-- Default icon for widget -->
10   <icon src="icon.png" />
11   <!-- Widget author -->
12   <author>Tommi Laukkanen</author>
13 </widget>

Content is good old HTML, CSS, JavaScript etc. files. For example simple HTML page like this:

1 <html>
2   <head>
3     <title>Hello!</title>
4   </head>
5   <body>
6     <h1>Hello W3C Widget World!</h1>
7   </body>
8 </html>

When these two files are packaged into a ZIP archive and renamed to Hello.wgt you can install it on your Nokia N900 just by clicking the file in file browser. When you run the app it’ll look something like this:

Hello World W3C Widget

Widget running on Nokia N900 with Qt Web Runtime

I hope that you find this tutorial helpful and start crafting your own widgets!

- See more at: http://www.substanceofcode.com/2010/08/10/how-to-create-simple-w3c-widget/#sthash.VqmVUGTi.dpuf

How to Create Simple W3C Widget

3 Replies

Here are instructions how you can create a simple W3C widget that runs on Qt Web Runtime (WRT) e.g. on Nokia N900.

Widgets are just ZIP packages containing at least two files: Configuration file (config.xml) and resource files (index.html and other HTML, CSS, JavaScript and image files).

  • widget.wgt – zip archive renamed to *.wgt, containing:
    • config.xml - configurations
    • index.html - content

Configuration file contains information about the widget like name, version, author, icon etc. Example of simple config.xml file:

01 <?xml version="1.0" ?>
02 <widget xmlns="http://www.w3.org/ns/widgets" id="http://www.substanceofcode.com/hellowidget" version="0.1.0">
03   <!-- Name of the widget -->
04   <name>Hello World</name>
05   <!-- Description is shown when installing widget -->
06   <description>Simple hello world widget</description>
07   <!-- Start page for widget -->
08   <content src="index.html" />
09   <!-- Default icon for widget -->
10   <icon src="icon.png" />
11   <!-- Widget author -->
12   <author>Tommi Laukkanen</author>
13 </widget>

Content is good old HTML, CSS, JavaScript etc. files. For example simple HTML page like this:

1 <html>
2   <head>
3     <title>Hello!</title>
4   </head>
5   <body>
6     <h1>Hello W3C Widget World!</h1>
7   </body>
8 </html>

When these two files are packaged into a ZIP archive and renamed to Hello.wgt you can install it on your Nokia N900 just by clicking the file in file browser. When you run the app it’ll look something like this:

Hello World W3C Widget

Widget running on Nokia N900 with Qt Web Runtime

I hope that you find this tutorial helpful and start crafting your own widgets!

- See more at: http://www.substanceofcode.com/2010/08/10/how-to-create-simple-w3c-widget/#sthash.VqmVUGTi.dpuf

How to Create Simple W3C Widget

3 Replies

Here are instructions how you can create a simple W3C widget that runs on Qt Web Runtime (WRT) e.g. on Nokia N900.

Widgets are just ZIP packages containing at least two files: Configuration file (config.xml) and resource files (index.html and other HTML, CSS, JavaScript and image files).

  • widget.wgt – zip archive renamed to *.wgt, containing:
    • config.xml - configurations
    • index.html - content

Configuration file contains information about the widget like name, version, author, icon etc. Example of simple config.xml file:

01 <?xml version="1.0" ?>
02 <widget xmlns="http://www.w3.org/ns/widgets" id="http://www.substanceofcode.com/hellowidget" version="0.1.0">
03   <!-- Name of the widget -->
04   <name>Hello World</name>
05   <!-- Description is shown when installing widget -->
06   <description>Simple hello world widget</description>
07   <!-- Start page for widget -->
08   <content src="index.html" />
09   <!-- Default icon for widget -->
10   <icon src="icon.png" />
11   <!-- Widget author -->
12   <author>Tommi Laukkanen</author>
13 </widget>

Content is good old HTML, CSS, JavaScript etc. files. For example simple HTML page like this:

1 <html>
2   <head>
3     <title>Hello!</title>
4   </head>
5   <body>
6     <h1>Hello W3C Widget World!</h1>
7   </body>
8 </html>

When these two files are packaged into a ZIP archive and renamed to Hello.wgt you can install it on your Nokia N900 just by clicking the file in file browser. When you run the app it’ll look something like this:

Hello World W3C Widget

Widget running on Nokia N900 with Qt Web Runtime

I hope that you find this tutorial helpful and start crafting your own widgets!

- See more at: http://www.substanceofcode.com/2010/08/10/how-to-create-simple-w3c-widget/#sthash.VqmVUGTi.dpuf
posted @ 2014-09-15 10:52  alxe_yu  阅读(331)  评论(0)    收藏  举报