|
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="Travel Companion" /> |
|
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_Travel_Companion_planning_the_widget-GUID-891068c7-c802-4da7-8674-8e8292aef7eb.html" /> |
|
11 <meta scheme="URI" name="DC.Relation" content="WRTKit_Travel_Companion_user_interface-GUID-989d17cc-f019-46bb-b6f5-49166e258aca.html" /> |
|
12 <meta scheme="URI" name="DC.Relation" content="WRTKit_Travel_Companion_functionality-GUID-384f2430-3de9-4006-ac8e-86c5774c3a79.html" /> |
|
13 <meta content="XHTML" name="DC.Format" /> |
|
14 <meta content="GUID-BE79BA64-FA03-4968-964E-D7DCC42D7053" name="DC.Identifier" /> |
|
15 <meta content="en" name="DC.Language" /> |
|
16 <link href="commonltr.css" type="text/css" rel="stylesheet" /> |
|
17 <title> |
|
18 Travel Companion</title> |
|
19 </head> |
|
20 <body id="GUID-BE79BA64-FA03-4968-964E-D7DCC42D7053"><a name="GUID-BE79BA64-FA03-4968-964E-D7DCC42D7053"><!-- --></a> |
|
21 |
|
22 |
|
23 |
|
24 <h1 class="topictitle1"> |
|
25 Travel Companion</h1> |
|
26 |
|
27 <div> |
|
28 |
|
29 <p> |
|
30 |
|
31 If you've completed the Hello World and RSS Reader tutorials and feel that you |
|
32 understand them well but still want to learn more, then this tutorial is for you! |
|
33 The Travel Companion widget that we will create in this tutorial is something that |
|
34 would be very useful for anyone who travels a lot. It's a widget that offers many |
|
35 helpful features for travellers: a world clock that allows the user to simultaneously |
|
36 follow the time at home and at the destination, a 5-day weather forecast for the |
|
37 destination city and the current weather for both the home and destination cities, |
|
38 a currency converter, and a summary of the current news headlines. |
|
39 </p> |
|
40 |
|
41 <p> |
|
42 |
|
43 But because this tutorial is about using the WRTKit for developing widget user interfaces |
|
44 we will not implement all the code that is required to actually carry out all the |
|
45 functionality that was described above. Instead we will have a Travel Companion "engine" |
|
46 that will provide all these services for us so that we can focus on the user interface. |
|
47 The engine that we will use (that has been created for this example) is a mock engine, |
|
48 meaning that it mimics what the real Travel Companion engine would do, but actually it |
|
49 just returns hard coded weather forecasts and exchange rates. That's all we need for this |
|
50 tutorial, but after you've created the widget you can modify the engine so that it |
|
51 actually fetches news headlines, currency exchange rates and weather forecasts from |
|
52 various data sources online. There are plenty of free services that you can integrate to. |
|
53 And here's the best part: because we will implement the user interface so that it's |
|
54 cleanly separated from the engine, you won't have to change a single line of the user |
|
55 interface code after you change the engine to use real world data! |
|
56 </p> |
|
57 |
|
58 <p> |
|
59 |
|
60 Our widget will have no less than five views: one main view, three functional views and |
|
61 a settings view. The main view exists purely for navigational purposes. Because the widget |
|
62 is so complex we want to give the user an overview of what's available and an easy way of |
|
63 getting to everything. The three functional views include an information view that gives |
|
64 the user the most important information in a single glance, a currency converter view, |
|
65 and a five day weather forecast view. And finally the settings view lets the user configure |
|
66 the home and local cities, daylight saving time and temperature unit (Celsius or |
|
67 Fahrenheit) to use in the weather forecast. |
|
68 </p> |
|
69 |
|
70 <p> |
|
71 |
|
72 The tutorial will teach several important things. First of all, we'll learn how to |
|
73 create widgets that have multiple views. Second, we'll learn how to separate the code |
|
74 in the widget so that the user interface doesn't need to know anything about how the |
|
75 business logic works, and vice versa. Third, we'll create a navigational view using |
|
76 the NavigationButton control. Fourth, we'll customize the look of the widget to include |
|
77 a logo for our application in the list view caption area. And finally, we'll learn how |
|
78 to update the content in the user interface using a timer. We'll use the timer to keep |
|
79 the world clock, weather forecast and news headlines up to date. This is very important |
|
80 because widgets are often used so that the user starts them and then just keeps them |
|
81 running for days on end. If we didn't refresh the user interface then the information |
|
82 would quickly get old and the user would be forced to do manual refreshes. |
|
83 </p> |
|
84 |
|
85 </div> |
|
86 |
|
87 <div> |
|
88 <ul class="ullinks"> |
|
89 <li class="ulchildlink"><strong><a href="WRTKit_Travel_Companion_planning_the_widget-GUID-891068c7-c802-4da7-8674-8e8292aef7eb.html">Planning the widget</a></strong><br /> |
|
90 </li> |
|
91 <li class="ulchildlink"><strong><a href="WRTKit_Travel_Companion_user_interface-GUID-989d17cc-f019-46bb-b6f5-49166e258aca.html">Travel Companion user interface</a></strong><br /> |
|
92 </li> |
|
93 <li class="ulchildlink"><strong><a href="WRTKit_Travel_Companion_functionality-GUID-384f2430-3de9-4006-ac8e-86c5774c3a79.html">Functionality</a></strong><br /> |
|
94 </li> |
|
95 </ul> |
|
96 |
|
97 <div class="familylinks"> |
|
98 <div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Tutorials-GUID-506c11e3-e6f3-43ec-9495-fcfa638b7e08.html">WRTKit Tutorials</a></div> |
|
99 </div> |
|
100 </div> |
|
101 |
|
102 </body> |
|
103 </html> |