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.
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.
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.
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.
The directory also contains a HelloWorld.js file and a WRTKit directory but we will not talk about those quite yet.
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.
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.
No other tools or libraries are needed and you're now set to start working on the Hello World widget.