Meego Wiki
Views

SDK/Docs/1.1/Web SDK with WRT

From MeeGo wiki
< SDK | Docs | 1.1
Revision as of 01:58, 27 October 2010 by Bspencer (Talk | contribs)
Jump to: navigation, search


Web Runtime and the Web SDK are provided as preview/beta technology.

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.

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 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?

Web Runtime engine

MeeGo already comes with the web runtime engine installed. You just need to install your WRT application (.wgt file)

Web Runtime IDE

The Nokia Web SDK provides a full development environment with support for creating MeeGo WRT apps.
It includes:

  • the Web Developer Environment: an Eclipse-based integrated development environment (code editor, debugger, packager etc.)
  • the Web SDK Simulator: runs applications in WebKit-based simulator

Download the Nokia Web SDK Technology Preview

PlatformSizeLocation
Windows188MBhttp://tools.nokia.com/wrt/install/1.0/Nokia_Web_SDK_1.0.1.exe
Linux (debian)191MBhttp://tools.nokia.com/wrt/install/1.0/NokiaWebSDK_1.0.1.deb
Linux (rpm*)192MBhttp://wiki.meego.com/SDK/Docs/1.1/Web_Runtime_RPM_for_MeeGo
OSX (pkg)222MBhttp://tools.nokia.com/wrt/install/1.0/NokiaWebSDK_1.0.1.pkg

You can probably do the majority of your development using the included simulator. Eventually you'll also need a MeeGo device to deploy to, either emulated or real. See these instructions.

Documentation / APIs

The majority of the Web Runtime documentation is located on Forum Nokia and includes tutorials about developing widgets. However, the material on that site is focused on developing widgets for Symbian phones (.wgz), rather than MeeGo (.wgt). The reason for this page is to briefly highlight the differences when developing Web Runtime widgets for MeeGo.

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 (NB this is HTML5): 

<!DOCTYPE html>
<html>
  <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

See #Installing and running example widgets for more about running the WRT examples.

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>

Installing and running example widgets

The qt-web-runtime-examples package for MeeGo includes a set of example widgets you can run to get an idea of WRT's capabilities. The package places them in /usr/lib/wrt/examples/demowidgets/, but they must be installed before they can be used.

For example, to install the bouncing ball widget: 

$ widgetinstaller /usr/lib/wrt/examples/demowidgets/Bouncingball.wgt

You can then run it from the Applications zone (there should be an icon for it) or the command line with: 

$ webwidgetrunner /usr/share/applications/CSSBouncingBall.desktop

(The exact location of the .desktop file might require you to do some digging; ls -tlr /usr/share/applications/ can help identify the most recently added desktop file.)

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