Meego Wiki
Views

SDK/Docs/1.1/Web SDK with WRT

From MeeGo wiki
(Difference between revisions)
Jump to: navigation, search
(→What do I need to get started?)
(→Getting the widget package to the device)
Line 161: Line 161:
  $ scp -p 6666 <path to .wgt> meego@127.0.0.1:/<path on target image>
  $ scp -p 6666 <path to .wgt> meego@127.0.0.1:/<path on target image>
-
WDE also has a ''Deploy Web app'' option, but this requires a bluetooth connecction to the target device from the host.
+
WDE also has a ''Deploy Web app'' option, but this requires a bluetooth connection to the target device from the host.
=== Installing the widget ===
=== Installing the widget ===

Revision as of 15:19, 20 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).

Contents

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 to get to 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:

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

You'll also need some kind of MeeGo device to deploy to, either emulated or real. See these instructions.

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.

  1. Start WDE.
  2. From the File menu, select New > Nokia web app (wgt).
  3. Choose Basic web app project and click Next >.
  4. Enter the project name and choose a directory to create the project in.
  5. Enter the widget's display name (how it will be listed on the device).
  6. 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.
  7. Enter 0.0.1 for the version.
  8. Click Next >.
  9. Enter names for the three files which will form the basis of the widget (the defaults are fine for now).
  10. 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:

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

Websdk-simulator.png

Adding JavaScript

Interactivity is added to widgets by writing JavaScript functions and hooking them to the interface. You can add your own functions to the basic.js JavaScript file, automatically created for your project by WDE.

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:

Websdk-simulator-with-js.png

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:

Debugging

WebSDK provides debugging for widgets running inside the simulator.

  1. 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:
    Websdk-debugging-breakpoint.png
  2. 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.
  3. Use the widget in the simulator.
  4. 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:
    Websdk-debugging-debug-perspective.png
  5. 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. It is therefore not possible to deploy Symbian widgets to MeeGo without modification.

The WDE makes it very simple to create a wgt package from a project:

  1. Right-click on the name of your project in the Project Explorer and select Package Web app.
  2. The output file is called <your project name>.wgt; in the case of my example project, helloworld.wgt.

Deploying

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

Getting the widget package to the device

The manual approach is to copy the wgt file to the device. If you have network access to the device, you could push it to the device using ssh or similar; or log in to the device and pull the file over, using a network share, a website, Woof etc.

For example, if you have an emulated MeeGo image, you could push the file to it with: 

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

WDE also has a Deploy Web app option, but this requires a bluetooth connection to the target device from the host.

Installing the widget

Install the qt-web-runtime packages on the target MeeGo device (real or emulated): 

$ zypper install qt-web-runtime

Optionally, install other WRT packages: 

$ 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: 

$ sudo 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.

Running the widget

Run your widget by clicking on its icon in the Applications zone; or, run it from the command line with: 

$ webwidgetrunner <path to .desktop file created in previous step>
Retrieved from "http://wiki.meego.com/SDK/Docs/1.1/Web_SDK_with_WRT"
Personal tools