|
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="Creating a widget that uses the WRTKit" /> |
|
9 <meta scheme="URI" name="DC.Relation" content="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html" /> |
|
10 <meta content="XHTML" name="DC.Format" /> |
|
11 <meta content="GUID-8D71EE32-1826-4141-8FB6-76420A5472A4" name="DC.Identifier" /> |
|
12 <meta content="en" name="DC.Language" /> |
|
13 <link href="commonltr.css" type="text/css" rel="stylesheet" /> |
|
14 <title> |
|
15 Creating a widget that uses the WRTKit</title> |
|
16 </head> |
|
17 <body id="GUID-8D71EE32-1826-4141-8FB6-76420A5472A4"><a name="GUID-8D71EE32-1826-4141-8FB6-76420A5472A4"><!-- --></a> |
|
18 |
|
19 |
|
20 |
|
21 <h1 class="topictitle1"> |
|
22 Creating a widget that uses the WRTKit</h1> |
|
23 |
|
24 <div> |
|
25 |
|
26 <p> |
|
27 |
|
28 To create a widget the uses the WRTKit for its user interface, start by copying |
|
29 the WRTKit directory from the Library directory in the WRTKit to the root |
|
30 directory of the widget you are making. The root directory of your widget is |
|
31 the directory where your Info.plist and main HTML file is located. |
|
32 </p> |
|
33 |
|
34 <p> |
|
35 |
|
36 The main HTML file should include a script tag that loads the file |
|
37 WRTKit/WRTKit.js in order to include and initialize the WRTKit library in your |
|
38 widget. The widget typically should have no content at all between its |
|
39 <body> and </body> tags. You also want to include the JavaScript |
|
40 script file where your own widget's code is located, and you want to define some |
|
41 entry point function that gets called when the widget is loaded, e.g. using the |
|
42 onload event that you can define for the body tag. This should result in an HTML |
|
43 file that looks something like this: |
|
44 </p> |
|
45 |
|
46 <pre> |
|
47 |
|
48 <?xml version="1.0" encoding="UTF-8"?> |
|
49 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|
50 <html xmlns="http://www.w3.org/1999/xhtml"> |
|
51 <head> |
|
52 <title></title> |
|
53 <script type="text/javascript" src="WRTKit/WRTKit.js"></script> |
|
54 <script type="text/javascript" src="YourOwnWidgetCode.js"></script> |
|
55 </head> |
|
56 <body onload="init()"> |
|
57 </body> |
|
58 </html> |
|
59 </pre> |
|
60 |
|
61 <p> |
|
62 |
|
63 In this example the code for your own widget is in a file called YourOwnWidgetCode.js |
|
64 and the entry point function that gets called when the widget has loaded all files is |
|
65 called init(). Next, we want to create that function. |
|
66 </p> |
|
67 |
|
68 <p> |
|
69 |
|
70 All widgets that use the WRTKit need to create an instance of the UIManager class, as |
|
71 well as at least one view. Creating the UIManager is a simple matter of instantiating |
|
72 the WRTKit UIManager class. You should retain the reference to that instance in a |
|
73 global variable or some other place that is accessible to the code that will need to |
|
74 use the UIManager's services. To do this, you would first declare the global variable |
|
75 to hold your UIManager instance: |
|
76 </p> |
|
77 |
|
78 <pre> |
|
79 |
|
80 // Reference to the user interface manager. |
|
81 var uiManager; |
|
82 </pre> |
|
83 |
|
84 <p> |
|
85 |
|
86 With the variable declared you can then add the following code to the init() function |
|
87 to create an instance of the UIManager class and retain a reference to that instance |
|
88 in the uiManager variable: |
|
89 </p> |
|
90 |
|
91 <pre> |
|
92 |
|
93 // create the user interface manager |
|
94 uiManager = new UIManager(); |
|
95 </pre> |
|
96 |
|
97 <p> |
|
98 |
|
99 Now that we have a user interface manager instance we can create a new view and set it |
|
100 to the screen. In order to be able to access that view outside the init() function, we |
|
101 should crate a global variable for it just like we did for the UIManager instance: |
|
102 </p> |
|
103 |
|
104 <pre> |
|
105 |
|
106 // Reference to the main view. |
|
107 var mainView; |
|
108 </pre> |
|
109 |
|
110 <p> |
|
111 |
|
112 In this example we will create a ListView that has a unique identifier "example" and |
|
113 a view caption "Example View". The unique identifier can be used to set CSS rules that |
|
114 are targeted to a particular view. It is often not needed and can be specified as null. |
|
115 The view caption is shown at the top of list views and is helpful to show users what |
|
116 the view is for. |
|
117 </p> |
|
118 |
|
119 <pre> |
|
120 |
|
121 // create the main view |
|
122 mainView = new ListView("example", "Example View"); |
|
123 </pre> |
|
124 |
|
125 <p> |
|
126 |
|
127 We are now ready to command the view to the screen: |
|
128 </p> |
|
129 |
|
130 <pre> |
|
131 |
|
132 // show the mainView |
|
133 uiManager.setView(mainView); |
|
134 </pre> |
|
135 |
|
136 <p> |
|
137 |
|
138 The example widget would now be displaying an empty list view with "Example View" in |
|
139 its view caption and would be ready for more functionality. Let's add a button to the |
|
140 view. You would normally do this before the view is shown. Our example button has a |
|
141 unique identifier "exampleButton" and text "Press me!" on the face of the button. |
|
142 </p> |
|
143 |
|
144 <pre> |
|
145 |
|
146 // add a button to the main view |
|
147 var exampleButton = new FormButton("exampleButton", "Press me!"); |
|
148 mainView.addControl(exampleButton); |
|
149 </pre> |
|
150 |
|
151 <p> |
|
152 |
|
153 The main view now contains a button. If we wanted to be informed when the button is |
|
154 pressed we could create a new function and register it as an "event listener". First |
|
155 the callback function definition: |
|
156 </p> |
|
157 |
|
158 <pre> |
|
159 |
|
160 // Callback function that gets called when the example button is pressed. |
|
161 function exampleButtonPressed(event) { |
|
162 // popup a notification dialog when the button is pressed |
|
163 uiManager.showNotification(3000, "info", "You pressed the button!"); |
|
164 } |
|
165 </pre> |
|
166 |
|
167 <p> |
|
168 |
|
169 Now that we have a function to call when the button is pressed we can register the |
|
170 event listener. You should write this code in the init() function, for example right |
|
171 after you created the button: |
|
172 </p> |
|
173 |
|
174 <pre> |
|
175 |
|
176 // add an event listener |
|
177 exampleButton.addEventListener("ActionPerformed", exampleButtonPressed); |
|
178 </pre> |
|
179 |
|
180 <p> |
|
181 |
|
182 The same idea applies even to much more complex user interfaces. You create views and |
|
183 controls, add the controls to the views, command a view to be displayed using the |
|
184 UIManager, and get notified of user actions using event listeners that you can |
|
185 register to the controls. |
|
186 </p> |
|
187 |
|
188 </div> |
|
189 |
|
190 <div> |
|
191 <div class="familylinks"> |
|
192 <div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html">Common WRTKit tasks</a></div> |
|
193 </div> |
|
194 </div> |
|
195 |
|
196 </body> |
|
197 </html> |