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="Introduction to the WRTKit" /> |
|
9 <meta scheme="URI" name="DC.Relation" content="WRTKit_Overview_of_the_WRTKit-GUID-14c414f6-a220-40b6-8614-df13141495ab.html" /> |
|
10 <meta content="XHTML" name="DC.Format" /> |
|
11 <meta content="GUID-DCF05457-F800-4F05-B284-A4E24AB8BE79" name="DC.Identifier" /> |
|
12 <meta content="en" name="DC.Language" /> |
|
13 <link href="commonltr.css" type="text/css" rel="stylesheet" /> |
|
14 <title> |
|
15 Introduction to the WRTKit</title> |
|
16 </head> |
|
17 <body id="GUID-DCF05457-F800-4F05-B284-A4E24AB8BE79"><a name="GUID-DCF05457-F800-4F05-B284-A4E24AB8BE79"><!-- --></a> |
|
18 |
|
19 |
|
20 |
|
21 <h1 class="topictitle1"> |
|
22 Introduction to the WRTKit</h1> |
|
23 |
|
24 <div> |
|
25 |
|
26 <p> |
|
27 |
|
28 The S60 Web Runtime allows developers to use familiar web technologies like |
|
29 HTML, CSS and JavaScript to create applications called "widgets" very easily. |
|
30 But because widgets are based on web technologies they look and behave more like |
|
31 web pages than S60 applications by default, which is not always desirable. |
|
32 </p> |
|
33 |
|
34 <p> |
|
35 |
|
36 Web pages use a document metaphor where content can be laid out arbitrarily. |
|
37 Interaction with the web page is based on using a mouse or other similar device |
|
38 to place a pointer arrow on elements on the web page and activating them by |
|
39 pressing a button. When the pointer is over some user interface element it is |
|
40 said to be "hovering". The element that the pointer is hovering over is often |
|
41 displayed in a distinct style to show that it could be activated if the mouse |
|
42 button was pressed. |
|
43 </p> |
|
44 |
|
45 <p> |
|
46 |
|
47 Mobile device applications, on the other hand, have limitations that make this |
|
48 methapor less than ideal. The screen is small so discipline is needed to lay out |
|
49 user interface elements in a way that is easy to understand for the user. The |
|
50 physical controls on a mobile device are also not very suitable for moving |
|
51 around a pointer arrow on the screen. Instead of having a pointer to select |
|
52 elements the concept of "focus" is used. One of the elements on the screen is |
|
53 considered selected and this selection can be moved between the user interface |
|
54 elements using a 4-way controller. The element that is selected is said to be |
|
55 "focused". Like for hovering, the focused element is displayed with a distinct |
|
56 style to set it apart from other elements. This interaction method is called |
|
57 "tab navigation" due to the fact that the tab key was originally used to move |
|
58 the focus on PC computers. |
|
59 </p> |
|
60 |
|
61 <p> |
|
62 |
|
63 The S60 Web Runtime supports both the pointer-based and tab-based interaction |
|
64 modes so that you can choose the one that fits your widget best. But while |
|
65 simple user interfaces are easy to implement in both modes, more sophisticated |
|
66 application-like user interfaces can be quite tricky. Hover and focus must be |
|
67 handled correctly and the hover and focus states must be displayed consistently |
|
68 throughout the user interface. Different screen sizes as well as screen resizes |
|
69 and rotations must be taken into account. User interface controls like buttons, |
|
70 checkboxes and scrollbars must be able to take on a look that fits the overall |
|
71 visual theme of the widget, for example that of a commercial brand. |
|
72 </p> |
|
73 |
|
74 <p> |
|
75 |
|
76 The WRTKit is a complete library of JavaScript code, CSS style rules and |
|
77 graphical elements that are required to implement the kind of sophisticated, |
|
78 customizable, application-like user interfaces that are described above. It |
|
79 gives widget developers an easy way to create high quality user interfaces |
|
80 without having to worry about the problems that would otherwise plague their |
|
81 widgets. |
|
82 </p> |
|
83 |
|
84 <p> |
|
85 |
|
86 When the WRTKit is used in a widget, complex and fully featured user interfaces |
|
87 can be created with just a few lines of JavaScript code. The WRTKit takes care |
|
88 of generating all the HTML and CSS automatically behind the scenes. What's more, |
|
89 the visual look of the user interfaces created by the WRTKit is controlled |
|
90 entirely using CSS, allowing complete customization without touching any code. |
|
91 WRTKit user interfaces also work in standards-compliant PC web browsers, |
|
92 enabling rapid development and debugging using familiar web development tools. |
|
93 </p> |
|
94 |
|
95 <div class="fignone" id="GUID-DCF05457-F800-4F05-B284-A4E24AB8BE79__GUID-A4ECC4FA-F3CB-4BD3-8B41-501B77168B29"><a name="GUID-DCF05457-F800-4F05-B284-A4E24AB8BE79__GUID-A4ECC4FA-F3CB-4BD3-8B41-501B77168B29"><!-- --></a><span class="figcap">Figure 1. |
|
96 WRTKit-based widget user interface</span> |
|
97 |
|
98 |
|
99 <br /><img src="Travel_Companion_Main_Screenshot_1.png" /><br /> |
|
100 </div> |
|
101 |
|
102 </div> |
|
103 |
|
104 <div> |
|
105 <div class="familylinks"> |
|
106 <div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Overview_of_the_WRTKit-GUID-14c414f6-a220-40b6-8614-df13141495ab.html">Overview of the WRTKit</a></div> |
|
107 </div> |
|
108 </div> |
|
109 |
|
110 </body> |
|
111 </html> |
|