|
1 <?xml version="1.0" encoding="utf-8"?> |
|
2 <!-- Copyright (c) 2007-2010 Nokia Corporation and/or its subsidiary(-ies) All rights reserved. --> |
|
3 <!-- This component and the accompanying materials are made available under the terms of the License |
|
4 "Eclipse Public License v1.0" which accompanies this distribution, |
|
5 and is available at the URL "http://www.eclipse.org/legal/epl-v10.html". --> |
|
6 <!-- Initial Contributors: |
|
7 Nokia Corporation - initial contribution. |
|
8 Contributors: |
|
9 --> |
|
10 <!DOCTYPE concept |
|
11 PUBLIC "-//OASIS//DTD DITA Concept//EN" "concept.dtd"> |
|
12 <concept id="GUID-CCC5BE18-E90D-4B81-AE6F-333B96E7A3F7" xml:lang="en"><title>Choice |
|
13 list</title><prolog><metadata><keywords/></metadata></prolog><conbody> |
|
14 <p>Choice list is a list type, which allows selection from different choices. |
|
15 Choice list can either be closed (by default) state or opened state. In case |
|
16 the choice list is empty, the opening button is dimmed and is inactive. </p> |
|
17 <p>Choice list displays currently selected value by default in closed state. |
|
18 When the choice list is opened, choice list pop-up displays the list of available |
|
19 options (with currently selected focused). Choice list can contain text, icons |
|
20 or combination of both text and icons. It is recommendation use only text |
|
21 in the choice list. </p> |
|
22 <p>It is possible to dynamically add and remove items in choice list. The |
|
23 user can browse through the list with scroll keys or with the touch event.</p> |
|
24 <fig id="GUID-920BCB9D-4DFB-411D-A730-D34BA84B1FD2"> |
|
25 <title>Example of Choice list</title> |
|
26 <image href="GUID-7A2A9222-7D10-4007-95AB-C9584EC54698_d0e55550_href.png" placement="inline"/> |
|
27 </fig> |
|
28 <table id="GUID-DA80CFA0-061A-4B07-9D4B-7C29DAEC4E2B"><title>Default key events in a choice list</title> |
|
29 <tgroup cols="2"><colspec colname="col1"/><colspec colname="col2"/> |
|
30 <thead> |
|
31 <row> |
|
32 <entry valign="top"><p>Key</p></entry> |
|
33 <entry valign="top"><p>Action</p></entry> |
|
34 </row> |
|
35 </thead> |
|
36 <tbody> |
|
37 <row> |
|
38 <entry><p>Enter</p></entry> |
|
39 <entry><p>Selects the focused item and closes the choice list.</p></entry> |
|
40 </row> |
|
41 <row> |
|
42 <entry><p>Left selection key (<b>Select</b>)</p></entry> |
|
43 <entry><p>Choice list item is selected.</p></entry> |
|
44 </row> |
|
45 <row> |
|
46 <entry><p>Right selection key (<b>Close</b>)</p></entry> |
|
47 <entry><p>Choice list is closed without making a new selection.</p></entry> |
|
48 </row> |
|
49 <row> |
|
50 <entry><p>Arrow left / right keys</p></entry> |
|
51 <entry><p>Closes the choice list, with focused item selected.</p></entry> |
|
52 </row> |
|
53 <row> |
|
54 <entry><p>Arrow up / down keys</p></entry> |
|
55 <entry><p>Scrolls through the choice list. Choice list is looping.</p></entry> |
|
56 </row> |
|
57 </tbody> |
|
58 </tgroup> |
|
59 </table> |
|
60 <p/> |
|
61 <table id="GUID-66274DBC-8690-4AF3-AE29-B2DB9D31E752"><title>Default touch events for choice list interaction in closed state</title> |
|
62 <tgroup cols="3"><colspec colname="col1"/><colspec colname="col2"/><colspec colname="col3"/> |
|
63 <thead> |
|
64 <row> |
|
65 <entry valign="top"><p>User action</p></entry> |
|
66 <entry valign="top"><p>State change</p></entry> |
|
67 <entry valign="top"><p>Feedback</p></entry> |
|
68 </row> |
|
69 </thead> |
|
70 <tbody> |
|
71 <row> |
|
72 <entry><p>Touch down</p></entry> |
|
73 <entry><p>Inactive, tooltip is shown.</p></entry> |
|
74 <entry><p>Tactile: <ul> |
|
75 <li><p>Basic tactile feedback is provided with touch down event.</p></li> |
|
76 <li><p>Basic list effect given with touch down event.</p></li> |
|
77 </ul></p></entry> |
|
78 </row> |
|
79 <row> |
|
80 <entry><p>Touch release</p></entry> |
|
81 <entry><p>Opens the choice list pop-up</p></entry> |
|
82 <entry><p>Tactile: Pop-up open effect is given. If pop-up owns NGA effect |
|
83 and they are ON, then increasing long touch effect is provided with touch |
|
84 release.</p></entry> |
|
85 </row> |
|
86 <row> |
|
87 <entry><p>Touch release</p></entry> |
|
88 <entry><p>Inactive</p></entry> |
|
89 <entry/> |
|
90 </row> |
|
91 <row> |
|
92 <entry><p>Touch down and move out of the list</p></entry> |
|
93 <entry><p>List continues its movement.</p></entry> |
|
94 <entry><p>Basic tactile feedback is provided with touch down event.</p><p>Refer |
|
95 to <xref href="GUID-7C61D3D7-8FCB-46AB-B2E9-CE1AC68F86DE.dita">Dragging and flicking</xref> events.</p></entry> |
|
96 </row> |
|
97 </tbody> |
|
98 </tgroup> |
|
99 </table> |
|
100 <p/> |
|
101 <table id="GUID-E4CBD59F-EE62-4273-83C8-595611C9B302"><title>Default touch events for choice list interaction in opened state</title> |
|
102 <tgroup cols="3"><colspec colname="col1"/><colspec colname="col2"/><colspec colname="col3"/> |
|
103 <thead> |
|
104 <row> |
|
105 <entry valign="top"><p>User action</p></entry> |
|
106 <entry valign="top"><p>State change</p></entry> |
|
107 <entry valign="top"><p>Feedback</p></entry> |
|
108 </row> |
|
109 </thead> |
|
110 <tbody> |
|
111 <row> |
|
112 <entry><p>Touch down and release</p></entry> |
|
113 <entry><p>Touch down moves the focus.</p></entry> |
|
114 <entry><p>Pressed down highlight.</p><p>Tactile: <ul> |
|
115 <li><p>Basic tactile feedback is provided with touch down event. </p></li> |
|
116 <li><p>Basic list effect is provided with touch down event.</p></li> |
|
117 </ul></p></entry> |
|
118 </row> |
|
119 <row> |
|
120 <entry><p>Touch release</p></entry> |
|
121 <entry><p>Selects the focused item and closes the choice list.</p></entry> |
|
122 <entry><p>Tactile: Basic list effect is provided with touch release event.</p></entry> |
|
123 </row> |
|
124 <row> |
|
125 <entry><p>Touch down and move inside the choice list.</p></entry> |
|
126 <entry><p>The whole list moves along with the finger.</p><p>Refer to <xref href="GUID-7C61D3D7-8FCB-46AB-B2E9-CE1AC68F86DE.dita">Dragging and flicking</xref> events</p></entry> |
|
127 <entry><p>Tactile: Basic tactile feedback is provided with touch down event.</p><p>Refer |
|
128 to <xref href="GUID-7C61D3D7-8FCB-46AB-B2E9-CE1AC68F86DE.dita">Dragging and flicking</xref> events.</p></entry> |
|
129 </row> |
|
130 <row> |
|
131 <entry><p>Touch down and move out of the choice list</p></entry> |
|
132 <entry><p>The list continues its movement according to the finger movements |
|
133 outside the pop-up.</p></entry> |
|
134 <entry><p>Tactile: Basic tactile feedback is provided with touch down event.</p><p>Refer |
|
135 to <xref href="GUID-7C61D3D7-8FCB-46AB-B2E9-CE1AC68F86DE.dita">Dragging and flicking</xref> events.</p></entry> |
|
136 </row> |
|
137 <row> |
|
138 <entry><p>Touch down and release outside the opened choice list.</p></entry> |
|
139 <entry><p>Inactive</p></entry> |
|
140 <entry><p>Basic tactile feedback given with touch down event. No advanced |
|
141 tactile feedback.</p></entry> |
|
142 </row> |
|
143 </tbody> |
|
144 </tgroup> |
|
145 </table> |
|
146 <section id="GUID-824E97C2-24CC-4058-B682-EDB71644051C"><title>Using choice |
|
147 list in applications</title> <p>The API to use for choice list is the <xref href="GUID-C29FE12C-C412-40A8-A067-27C63A519D71.dita">Choice list API</xref>. For |
|
148 implementation information, see <xref href="GUID-845F3021-E3ED-4676-916A-75740886DCBD.dita">Providing |
|
149 a vertical list of selectable items</xref>. </p> </section> |
|
150 </conbody></concept> |