Views
SDK/Docs/1.1/Web SDK with WRT
(→Adding JavaScript) |
(→Debugging) |
||
| Line 133: | Line 133: | ||
[[File:Websdk-debugging-debug-perspective.png|600px]] | [[File:Websdk-debugging-debug-perspective.png|600px]] | ||
</li> | </li> | ||
| + | <li>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.</li> | ||
</ol> | </ol> | ||
Revision as of 15:59, 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).
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 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: 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 the Nokia Web Developer Environment.
- 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.jsfile 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 the IDE 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 the IDE. The IDE 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
???
Manual steps
Currently the Aptana packager only creates .wgz files (the old Symbian widget format). These will not work with the current Web Runtime engine which requires .wgt files.
TBD: create config.xml explain config options they might want to know about manually zip into wgt format
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 and can be run by clicking on it in the Applications zone. Alternatively, you can run it from the command line:
$ webwidgetrunner <path to .desktop file created in previous step>
Exercising the device APIs
???
caveats about the impossibility of debugging