Views

SDK/Docs/1.1/Web SDK with WRT

From MeeGo wiki

(Difference between revisions)

Revision as of 16:19, 18 October 2010

The MeeGo SDK enables Web Runtime (WRT) development for MeeGo. The following is a simple guide to get you going with this exciting, flexible, and highly portable development environment.

WebSDK is currently only supported on Windows, so these instructions are only applicable for that OS right now (2010-10-18).

1 What is Web Runtime?
2 What do I need to get started?
3 First WRT project
- 3.1 Running the simulator
- 3.2 Adding JavaScript
4 Debugging
5 Packaging
6 Deploying
- 6.1 Getting it to the device
- 6.2 Installing and running it
7 Exercising the device APIs

What is Web Runtime?

The MeeGo Web Runtime engine allows web "widgets" to run outside of the browser. A widget is a small application, or applet, that is built using web technologies such as Javascript, HTML, and CSS. These are often run inside a browser as add-ons. With MeeGo WRT these widgets can be installed and behave as stand-alone applications.

What do I need to get started?

The best option for Web Runtime development at the moment is the WebSDK, maintained by Nokia. It is available from http://www.forum.nokia.com/Develop/Web/9hy25fa/ (you'll need to register for an account to get it). You need the Nokia Web SDK Technology Preview, which has support for MeeGo widgets.

The Nokia Forum website includes a good set of tutorials about developing widgets. However, the material on that site is focused on developing widgets for Symbian phones, rather than MeeGo. The reason for this page is to briefly highlight the differences when developing Web Runtime widgets for MeeGo.

Installing Web SDK is very straightforward: run the .exe file you downloaded and follow the prompts. You'll end up with two applications:

Nokia Web Developer Environment (WDE): an Eclipse-based integrated development environment (code editor, debugger, packager etc.)
Nokia Web SDK Simulator: runs applications inside a simulated device, based on WebKit

First WRT project

For the first project, we'll write a very simple "hello world" application which displays a form for a user to enter their name. JavaScript responds to the user's input and displays a personalised greeting, including the user's name.

Start WDE.
From the File menu, select New > Nokia web app (wgt).
Choose Basic web app project and click Next >.
Enter the project name and choose a directory to create the project in.
Enter the widget's display name (how it will be listed on the device).
Enter a unique identifier for your widget; if possible, use your own company or personal domain, with the name of the project appended. For example, I used http://developer.meego.com/elliot/helloworld.
The Enable HomeScreen option is available for Symbian widgets. See http://wiki.forum.nokia.com/index.php/Homescreen_widget_guidelines for more details.
Enter 0.0.1 for the version.
Click Next >.
Enter names for the three files which will form the basis of the widget (the defaults are fine for now).
Click Finish.

Your project should now be visible in the File view, under Projects.

Expand the project and double-click on the index.html page. You should see the source of the HTML file in the main panel.

Add a paragraph inside the <body> tag, for example:

<p>Hello world</p>

Save it.

Running the simulator

To preview the widget in the simulator:

Right-click on the project name in the Project Explorer.
Select Preview Web app from the context menu.
The simulator should start and display your widget, for example:

Adding JavaScript

Interactivity is added to widgets by writing JavaScript functions and hooking them to the interface. A JavaScript file is already included with your project, basic.js. You can add your own functions to this file.

Start by editing the index.html and adding a form with a text entry box and button:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Greet</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script language="javascript" type="text/javascript" src="basic.js"></script>
    <link rel="stylesheet" href="basic.css" type="text/css"/>
  </head>
  <body onload="init();">

    <!-- form to enter a name -->
    <form method="post" action="index.html">
      <p><label for="name">Name</label>: <input type="text" name="name" id="name"/></p>
      <p><input type="button" value="Greet" onclick="greet();"/></p>
    </form>

    <!-- greeting will be displayed inside this paragraph -->
    <p id="greetings"/>

  </body>
</html>

The button's onclick attribute is set to the greet() callback, which we add to basic.js (note I've left the default init() function, which doesn't do anything at present):

function init() {
}

/* get the value from the name input element and display it in a greeting */
function greet() {
  var name = document.getElementById('name').value;

  if (name != '')
    document.getElementById('greetings').innerHTML = "Hello " + name;
}

Open index.html in the simulator tab again. Enter something in the text box and click on the Greet button to call the JavaScript function and display a greeting.

You should see something like this:

Note: you may occasionally need to click on the Reload button in the simulator to load your changes, as it doesn't always pick up when you save a file.

Developing client-side JavaScript applications is beyond the scope of this tutorial, but good places to find out more are:

JavaScript and HTML DOM reference
Introduction to CSS
CSS 2 specification (very readable and useful)

Debugging

WebSDK provides debugging for widgets running inside the simulator.

Add a breakpoint to the basic.js file by double-clicking in the margin next to a line of code. Notice in the screenshot below how a small blue circle is displayed next to the line:
In the Project Explorer, inside the expanded project content, right-click on the index.html file and select Debug As > Web Application. This starts the application in the simulator, and switches WDE into debugging perspective.
If the perspective doesn't change, go to the Window menu and select Open Perspective > Debug.
Use the widget in the simulator.
When you perform an action which will cause the code at the breakpoint to be executed (in this case, clicking the button), the simulator pauses and passes focus back to WDE. WDE may prompt you to confirm the switch to the Debug perspective: tick the Remember my decision box and click Yes, so that the perspective automatically switches in future.
You should now see the Debug perspective, with a cursor at the breakpoint, like this:
When you've finished examining the state of the application, adding expressions etc. (all the usual Eclipse debugging functionality), use the buttons along the top of the Debug view to continue, step etc. through the program.

Packaging

Web Runtime on MeeGo uses the wgt packaging format: it's a zip file with configuration metadata in a config.xml file. The configuration follows the W3C Widget Packaging and Configuration specification.

Symbian uses wgz files, which are similar; however, wgz files contain a directory at the first level inside the archive, with the widget files inside; while wgt files don't have a top-level directory. The two formats also have different configuration files formats.

The WDE makes packaging very simple:

Right-click on the name of your project in the Project Explorer and select Package Web app.
The output file is called

Deploying

Once you have created a .wgt file, transfer it to your device and run it.

Getting it to the device

Example for QEMU:

 scp -p 6666 <path to .wgt> meego@127.0.0.1:/<path on target image>

(See QEMU dev page for tips)

Installing and running it

Install the qt-web-runtime components on the target

$ zypper install qt-web-runtime

Optional:

$ zypper install qt-web-runtime-devel
$ zypper install qt-web-runtime-examples  (installs 10 .wgt files in /usr/lib/wrt/examples/demowidgets/)

Once the Web Runtime components are installed, you are ready to install your new widget:

$ widgetinstaller <path to .wgt file>

This creates a new .desktop file in /usr/share/applications/ for your widget. Your widget will now appear with other applications. Run it by clicking on it in the Applications zone; or, run it from the command line with:

$ webwidgetrunner <path to .desktop file created in previous step>

Exercising the device APIs

???

caveats about the impossibility of debugging

Retrieved from "http://wiki.meego.com/SDK/Docs/1.1/Web_SDK_with_WRT"

Category: Meego-1.1

@@ Line 138: / Line 138: @@
 == Packaging ==
-Web Runtime on MeeGo uses the <code>wgt</code> packaging format: it's a zip file with configuration metadata in a <code>config.xml</code> file. The configuration follows the [http://www.w3.org/TR/widgets/ W3C Widget Packaging and Configuration]] specification.
+Web Runtime on MeeGo uses the <code>wgt</code> packaging format: it's a zip file with configuration metadata in a <code>config.xml</code> file. The configuration follows the [http://www.w3.org/TR/widgets/ W3C Widget Packaging and Configuration] specification.
 Symbian uses <code>wgz</code> files, which are similar; however, <code>wgz</code> files contain a directory at the first level inside the archive, with the widget files inside; while <code>wgt</code> files don't have a top-level directory. The two formats also have different configuration files formats.