org.symbian.tools.wrttools.doc.WRTKit/html/WRTKit_Hello_World_Tutorial-GUID-67e0a561-48ac-4938-8f1b-852422b71380.html
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="copyright" content="(C) Copyright 2005" />
<meta name="DC.rights.owner" content="(C) Copyright 2005" />
<meta content="concept" name="DC.Type" />
<meta name="DC.Title" content="Hello World" />
<meta scheme="URI" name="DC.Relation" content="WRTKit_Tutorials-GUID-506c11e3-e6f3-43ec-9495-fcfa638b7e08.html" />
<meta scheme="URI" name="DC.Relation" content="WRTKit_Creating_the_Hello_World_widget-GUID-d638159a-d12b-476c-a74c-99055672b7be.html" />
<meta content="XHTML" name="DC.Format" />
<meta content="GUID-67E0A561-48AC-4938-8F1B-852422B71380" name="DC.Identifier" />
<meta content="en" name="DC.Language" />
<link href="commonltr.css" type="text/css" rel="stylesheet" />
<title>
Hello World</title>
</head>
<body id="GUID-67E0A561-48AC-4938-8F1B-852422B71380"><a name="GUID-67E0A561-48AC-4938-8F1B-852422B71380"><!-- --></a>
<h1 class="topictitle1">
Hello World</h1>
<div>
<p>
Whenever you are learning a new programming language or API, the first example
you will find is usually called "Hello World" and the WRTKit is no exception.
Like most "Hello World" applications this one will be very simple and short, but
before we start we'll take a look at what we will need to build the example.
</p>
<p>
The WRTKit already contains all the files that will be created in this tutorial.
If you go to the "Examples" directory in the WRTKit SDK you will find a directory
called "HelloWorld". This directory contains all the files necessary for the widget
and all you have to do to try it out on a handset or S60 emulator is to zip up the
directory, rename the file to "HelloWorld.wgz" and follow the usual steps to install
a widget on the handset or emulator.
</p>
<p>
The WRTKit Hello World widget is very similar to any other S60 Web Runtime widget.
You have an Info.plist file that defines the metadata for the widget, such as its
name, version and main HTML file and you have the icon of the widget in a file called
Icon.png. The main HTML file for the Hello World widget is called "HelloWorld.html".
But it's here that things start to get a little bit different because we're using
the WRTKit to create our user interface.
</p>
<p>
If we didn't use the WRTKit then the HelloWorld.html file would probably contain
the text "Hello World" between the <body> and </body> tags, and that
would be it. But when you use the WRTKit you create your user interface using
JavaScript rather than HTML. This might sound scary and difficult at first but it
actually saves you a lot of typing and gives you a lot of things for free that
you would otherwise have to take care of yourself. Our Hello World widget will be
quite a bit fancier than one created with just HTML and it will still be very
short and simple.
</p>
<p>
The directory also contains a HelloWorld.js file and a WRTKit directory but we
will not talk about those quite yet.
</p>
<p>
Even though we have already created all the files for you, you might want to
type in the code yourself. Either way you will need a text editor. Any text editor
will do really but it will make your life considerably easier if you have one that
is specialized for programming and offers syntax highlighting for HTML, CSS
and JavaScript.
</p>
<p>
Finally, you will need a handset or emulator that includes the S60 Web Runtime.
You can actually work with the WRTKit even without the S60 Web Runtime because
the WRTKit works in a normal standards-compliant web browser such as Firefox.
But since a PC computer and web browser is quite different from a mobile device
it is still recommended that you test your widget on actual devices in order
to get a feel for what the widget will actually look and feel like. For quick
tests in a PC web browser though, all you have to do is open up the main HTML file
in the browser and things should work without any changes to the code.
</p>
<p>
No other tools or libraries are needed and you're now set to start working on
the Hello World widget.
</p>
</div>
<div>
<ul class="ullinks">
<li class="ulchildlink"><strong><a href="WRTKit_Creating_the_Hello_World_widget-GUID-d638159a-d12b-476c-a74c-99055672b7be.html">Creating the Hello World widget</a></strong><br />
</li>
</ul>
<div class="familylinks">
<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Tutorials-GUID-506c11e3-e6f3-43ec-9495-fcfa638b7e08.html">WRTKit Tutorials</a></div>
</div>
</div>
</body>
</html>