1 <?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"> |
|
2 <html lang="en" xml:lang="en"> |
|
3 <head> |
|
4 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> |
|
5 <meta name="copyright" content="(C) Copyright 2005" /> |
|
6 <meta name="DC.rights.owner" content="(C) Copyright 2005" /> |
|
7 <meta content="concept" name="DC.Type" /> |
|
8 <meta name="DC.Title" content="Hello World" /> |
|
9 <meta scheme="URI" name="DC.Relation" content="WRTKit_Tutorials-GUID-506c11e3-e6f3-43ec-9495-fcfa638b7e08.html" /> |
|
10 <meta scheme="URI" name="DC.Relation" content="WRTKit_Creating_the_Hello_World_widget-GUID-d638159a-d12b-476c-a74c-99055672b7be.html" /> |
|
11 <meta content="XHTML" name="DC.Format" /> |
|
12 <meta content="GUID-67E0A561-48AC-4938-8F1B-852422B71380" name="DC.Identifier" /> |
|
13 <meta content="en" name="DC.Language" /> |
|
14 <link href="commonltr.css" type="text/css" rel="stylesheet" /> |
|
15 <title> |
|
16 Hello World</title> |
|
17 </head> |
|
18 <body id="GUID-67E0A561-48AC-4938-8F1B-852422B71380"><a name="GUID-67E0A561-48AC-4938-8F1B-852422B71380"><!-- --></a> |
|
19 |
|
20 |
|
21 |
|
22 <h1 class="topictitle1"> |
|
23 Hello World</h1> |
|
24 |
|
25 <div> |
|
26 |
|
27 <p> |
|
28 |
|
29 Whenever you are learning a new programming language or API, the first example |
|
30 you will find is usually called "Hello World" and the WRTKit is no exception. |
|
31 Like most "Hello World" applications this one will be very simple and short, but |
|
32 before we start we'll take a look at what we will need to build the example. |
|
33 </p> |
|
34 |
|
35 <p> |
|
36 |
|
37 The WRTKit already contains all the files that will be created in this tutorial. |
|
38 If you go to the "Examples" directory in the WRTKit SDK you will find a directory |
|
39 called "HelloWorld". This directory contains all the files necessary for the widget |
|
40 and all you have to do to try it out on a handset or S60 emulator is to zip up the |
|
41 directory, rename the file to "HelloWorld.wgz" and follow the usual steps to install |
|
42 a widget on the handset or emulator. |
|
43 </p> |
|
44 |
|
45 <p> |
|
46 |
|
47 The WRTKit Hello World widget is very similar to any other S60 Web Runtime widget. |
|
48 You have an Info.plist file that defines the metadata for the widget, such as its |
|
49 name, version and main HTML file and you have the icon of the widget in a file called |
|
50 Icon.png. The main HTML file for the Hello World widget is called "HelloWorld.html". |
|
51 But it's here that things start to get a little bit different because we're using |
|
52 the WRTKit to create our user interface. |
|
53 </p> |
|
54 |
|
55 <p> |
|
56 |
|
57 If we didn't use the WRTKit then the HelloWorld.html file would probably contain |
|
58 the text "Hello World" between the <body> and </body> tags, and that |
|
59 would be it. But when you use the WRTKit you create your user interface using |
|
60 JavaScript rather than HTML. This might sound scary and difficult at first but it |
|
61 actually saves you a lot of typing and gives you a lot of things for free that |
|
62 you would otherwise have to take care of yourself. Our Hello World widget will be |
|
63 quite a bit fancier than one created with just HTML and it will still be very |
|
64 short and simple. |
|
65 </p> |
|
66 |
|
67 <p> |
|
68 |
|
69 The directory also contains a HelloWorld.js file and a WRTKit directory but we |
|
70 will not talk about those quite yet. |
|
71 </p> |
|
72 |
|
73 <p> |
|
74 |
|
75 Even though we have already created all the files for you, you might want to |
|
76 type in the code yourself. Either way you will need a text editor. Any text editor |
|
77 will do really but it will make your life considerably easier if you have one that |
|
78 is specialized for programming and offers syntax highlighting for HTML, CSS |
|
79 and JavaScript. |
|
80 </p> |
|
81 |
|
82 <p> |
|
83 |
|
84 Finally, you will need a handset or emulator that includes the S60 Web Runtime. |
|
85 You can actually work with the WRTKit even without the S60 Web Runtime because |
|
86 the WRTKit works in a normal standards-compliant web browser such as Firefox. |
|
87 But since a PC computer and web browser is quite different from a mobile device |
|
88 it is still recommended that you test your widget on actual devices in order |
|
89 to get a feel for what the widget will actually look and feel like. For quick |
|
90 tests in a PC web browser though, all you have to do is open up the main HTML file |
|
91 in the browser and things should work without any changes to the code. |
|
92 </p> |
|
93 |
|
94 <p> |
|
95 |
|
96 No other tools or libraries are needed and you're now set to start working on |
|
97 the Hello World widget. |
|
98 </p> |
|
99 |
|
100 </div> |
|
101 |
|
102 <div> |
|
103 <ul class="ullinks"> |
|
104 <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 /> |
|
105 </li> |
|
106 </ul> |
|
107 |
|
108 <div class="familylinks"> |
|
109 <div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Tutorials-GUID-506c11e3-e6f3-43ec-9495-fcfa638b7e08.html">WRTKit Tutorials</a></div> |
|
110 </div> |
|
111 </div> |
|
112 |
|
113 </body> |
|
114 </html> |
|