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="Selections" /> |
|
9 <meta scheme="URI" name="DC.Relation" content="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html" /> |
|
10 <meta content="XHTML" name="DC.Format" /> |
|
11 <meta content="GUID-23145D13-F2E7-48BE-B24B-BC49754B2919" name="DC.Identifier" /> |
|
12 <meta content="en" name="DC.Language" /> |
|
13 <link href="commonltr.css" type="text/css" rel="stylesheet" /> |
|
14 <title> |
|
15 Selections</title> |
|
16 </head> |
|
17 <body id="GUID-23145D13-F2E7-48BE-B24B-BC49754B2919"><a name="GUID-23145D13-F2E7-48BE-B24B-BC49754B2919"><!-- --></a> |
|
18 |
|
19 |
|
20 |
|
21 <h1 class="topictitle1"> |
|
22 Selections</h1> |
|
23 |
|
24 <div> |
|
25 |
|
26 <p> |
|
27 |
|
28 Selection of one or more options from a set of options is one of the most common |
|
29 use cases in a user interface. The WRTKit supports this use case with two |
|
30 controls, SelectionList and SelectionMenu, each of which can be in either |
|
31 "single selection" or "multiple selection" mode. The two controls differe only |
|
32 in look and interaction but not in their APIs. |
|
33 </p> |
|
34 |
|
35 <p> |
|
36 |
|
37 The SelectionList control shows an expanded list of all of its options in the |
|
38 view. If the control is in single selection mode then each option is presented |
|
39 with a "radio button", of which only one can be selected at a time. This ensures |
|
40 that only one of the options can be selected by the user. If the SelectionList |
|
41 control is in multiple selection mode then each option is presented with a |
|
42 "checkbox". Any amount (including zero) of checkboxes can be checked at time, |
|
43 allowing users to select multiple options. The SelectionList control is a hybrid |
|
44 between the traditional way of showing radio buttons and checkboxes in a web |
|
45 environment and the way that an S60 application shows single and multiple choice |
|
46 selections. The SelectionList is recommeded to be used when the widget is using |
|
47 the pointer navigation mode or when there are only a few options. |
|
48 </p> |
|
49 |
|
50 <div class="fignone" id="GUID-23145D13-F2E7-48BE-B24B-BC49754B2919__GUID-BE87E376-AF72-4533-909F-5ED5A022DE5C"><a name="GUID-23145D13-F2E7-48BE-B24B-BC49754B2919__GUID-BE87E376-AF72-4533-909F-5ED5A022DE5C"><!-- --></a><span class="figcap">Figure 1. |
|
51 SelectionList controls</span> |
|
52 |
|
53 |
|
54 <br /><img src="SelectionList_Controls_Screenshot_1.png" /><br /> |
|
55 </div> |
|
56 |
|
57 <p> |
|
58 |
|
59 The SelectionMenu control is more similar to the way normal S60 applications |
|
60 allow users to make single or multiple choices. The SelectionMenu takes up only |
|
61 minimally of space in its normal state, but when activated it pops up up a list |
|
62 of options with either radio buttons (for single selection) or checkboxes (for |
|
63 multiple selection) that the user can select. The SelectionMenu control is good |
|
64 for the tab navigation mode or if there are many options that would use up lots |
|
65 of space on the screen using the SelectionList control. |
|
66 </p> |
|
67 |
|
68 <div class="fignone" id="GUID-23145D13-F2E7-48BE-B24B-BC49754B2919__GUID-B78AFE71-FE80-4CAB-BF67-79D8D81F744A"><a name="GUID-23145D13-F2E7-48BE-B24B-BC49754B2919__GUID-B78AFE71-FE80-4CAB-BF67-79D8D81F744A"><!-- --></a><span class="figcap">Figure 2. |
|
69 SelectionMenu control</span> |
|
70 |
|
71 |
|
72 <br /><img src="SelectionMenu_Control_Screenshot_1.png" /><br /> |
|
73 </div> |
|
74 |
|
75 <p> |
|
76 |
|
77 Options in the selection controls are specified as an array of JavaScript |
|
78 objects, where each object represents one option. Each option object has two |
|
79 properties: value and text. The value property can be any JavaScript value, |
|
80 including object references and is used to represent the concrete value of the |
|
81 option. The text property is used to display the option in the user interface. |
|
82 The value could for example be a boolean true or false while the |
|
83 text could be "Yes" or "No". |
|
84 </p> |
|
85 |
|
86 <p> |
|
87 |
|
88 The set of currently selected options can be set or retrieved from a selection |
|
89 control using getter and setter methods. For single selection controls the |
|
90 selected option is specified as a single reference to one of the options in the |
|
91 control. For multiple selection the selected options are specified as an array |
|
92 of references to zero or more of the options in the control. Note that the |
|
93 references to the options must refer to the very same options that are in the |
|
94 control - not other instances of the options even if they are identical in value |
|
95 and/or text. |
|
96 </p> |
|
97 |
|
98 <p> |
|
99 |
|
100 Selection controls fire "SelectionChanged" events when the user makes a |
|
101 selection in the control. |
|
102 </p> |
|
103 |
|
104 </div> |
|
105 |
|
106 <div> |
|
107 <div class="familylinks"> |
|
108 <div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html">Developing widgets using the WRTKit</a></div> |
|
109 </div> |
|
110 </div> |
|
111 |
|
112 </body> |
|
113 </html> |
|