|
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-BB8B3A11-0BBC-4759-A7F4-A28C9E70573F" xml:lang="en"><title>Touch |
|
13 support for common UI components</title><prolog><metadata><keywords/></metadata></prolog><conbody><table id="GUID-CB1618F8-C658-42A5-BF86-3AA8CDCFF681-GENID-1-6-1-6-1-1-4-2-1-3-1-2-1"> |
|
14 <tgroup cols="3"><colspec colname="col1" colwidth="0.77*"/><colspec colname="col2" colwidth="1.54*"/><colspec colname="col3" colwidth="0.69*"/> |
|
15 <thead> |
|
16 <row> |
|
17 <entry><p>Component</p></entry> |
|
18 <entry><p>Example image</p></entry> |
|
19 <entry><p>Touch support</p></entry> |
|
20 </row> |
|
21 </thead> |
|
22 <tbody> |
|
23 <row> |
|
24 <entry><p><xref href="GUID-5B9F25B5-5FE1-4E38-BC8D-A0273F458C36.dita">Discreet |
|
25 pop-up menu</xref></p></entry> |
|
26 <entry><fig id="GUID-4FBB5E9D-A58B-4043-BFF1-27DEADD5A411"> |
|
27 <image href="GUID-F0BC230B-CAEC-452D-8FF4-20803C63B07C_d0e46010_href.png" placement="inline"/> |
|
28 </fig></entry> |
|
29 <entry><p>Touch down keeps the pop-up visible. Touch release either dismisses |
|
30 the pop-up or activates the application-specific functionality. Most commonly, |
|
31 it activates the application.</p></entry> |
|
32 </row> |
|
33 <row> |
|
34 <entry><p><xref href="GUID-C4E728B4-3E84-49A4-83CB-DF146420D78A.dita">Stylus pop-up |
|
35 menu</xref></p></entry> |
|
36 <entry><fig id="GUID-F042CCE6-26B3-4BC0-B9C2-80E5B36730F2-GENID-1-6-1-6-1-1-4-2-1-3-1-2-1-1-5-2-2-1"> |
|
37 <image href="GUID-AA4FF598-36A0-4F3B-B440-14052C01EED8_d0e46028_href.png" scale="27" placement="inline"/> |
|
38 </fig></entry> |
|
39 <entry><p>A single tap moves the focus and activates the item.</p></entry> |
|
40 </row> |
|
41 <row> |
|
42 <entry><p><xref href="GUID-EB212C35-5416-4CA7-8091-61B45D78E220.dita">Toolbar</xref></p></entry> |
|
43 <entry><fig id="GUID-785BE9BB-451F-44BA-A061-35D613D87E61-GENID-1-6-1-6-1-1-4-2-1-3-1-2-1-1-5-3-2-1"> |
|
44 <image href="GUID-0CD826C3-9DD9-46DD-A5A6-9093B8772993_d0e46046_href.png" scale="27" placement="inline"/> |
|
45 </fig></entry> |
|
46 <entry><p>Focusable or non-focusable. A single tap moves the focus and activates |
|
47 the item (emulates a selection key press).</p></entry> |
|
48 </row> |
|
49 <row> |
|
50 <entry><p>Choice list</p></entry> |
|
51 <entry><fig id="GUID-DAC03F73-EF8E-40C7-8AB2-FB8680AD1188"> |
|
52 <image href="GUID-FD52DFC5-03CD-4C7A-B118-0D5C90D99F1A_d0e46063_href.png" scale="27" placement="inline"/> |
|
53 </fig></entry> |
|
54 <entry><p/></entry> |
|
55 </row> |
|
56 <row> |
|
57 <entry><p><xref href="GUID-1AA32C40-CDE0-4627-A634-7C07BB1ED67B.dita">Forms</xref></p></entry> |
|
58 <entry><fig id="GUID-0329DFE0-EC57-41D3-A3A8-E016A88EB9AD-GENID-1-6-1-6-1-1-4-2-1-3-1-2-1-1-5-5-2-1"> |
|
59 <image href="GUID-85873CBE-6077-4917-B2B0-5D00C6647CC8_d0e46080_href.png" scale="25" placement="inline"/> |
|
60 </fig></entry> |
|
61 <entry><p>In the view state (i.e., a normal two-row list item), one tap moves |
|
62 focus. A second tap on a focused item activates it (emulates a selection key |
|
63 press). </p><p>In the edit state, one tap moves the focus and launches a touch |
|
64 input window. Within a focused item, the functionality is as for a text field.</p></entry> |
|
65 </row> |
|
66 <row> |
|
67 <entry><p><xref href="GUID-A5756C5F-9C93-4949-8B60-03DCA1BAF683.dita">Form items</xref></p><ul> |
|
68 <li><p>Text field</p></li> |
|
69 <li><p>Pop-up field</p></li> |
|
70 <li><p>Slider</p></li> |
|
71 </ul></entry> |
|
72 <entry><fig id="GUID-07C6A080-2E8E-47D7-84FA-F659EC137F73"> |
|
73 <image href="GUID-DC4E42CA-2A65-44D7-8DBE-386F60F998A0_d0e46114_href.png" scale="23" placement="inline"/> |
|
74 </fig></entry> |
|
75 <entry><p>Same as for equivalent setting items</p></entry> |
|
76 </row> |
|
77 <row> |
|
78 <entry><p><xref href="GUID-40F5B725-A5D7-487F-BF5D-A616F768F40D.dita">Grouped soft |
|
79 notification</xref>, <xref href="GUID-13DEE42F-3EAB-4EB7-9CE1-C4930BCACE01.dita">List |
|
80 query</xref>, <xref href="GUID-434F2412-59A1-4BCB-885D-5E708EAA6AB6.dita">Grid |
|
81 query</xref></p></entry> |
|
82 <entry><fig id="GUID-53B1D1D1-CE34-4271-9AEA-57A9EE81EDA7-GENID-1-6-1-6-1-1-4-2-1-3-1-2-1-1-5-7-2-1"> |
|
83 <image href="GUID-A432469D-F594-4A94-8889-142AB39A795D_d0e46138_href.png" scale="25" placement="inline"/> |
|
84 </fig></entry> |
|
85 <entry><p>A single tap moves the focus and activates the item (emulates a |
|
86 selection key press).</p></entry> |
|
87 </row> |
|
88 <row> |
|
89 <entry><p>Left/Right arrows in the <xref href="GUID-76FD2A71-E8A3-4C82-9704-3F7F6AD4DFD8.dita">Navi |
|
90 pane</xref></p></entry> |
|
91 <entry><fig id="GUID-13EFAD4E-B334-4B64-85B0-C5EE3294FD97-GENID-1-6-1-6-1-1-4-2-1-3-1-2-1-1-5-8-2-1"> |
|
92 <image href="GUID-76901D63-BDA2-4DCA-A66C-7BAFD7E211EB_d0e46157_href.png" scale="23" placement="inline"/> |
|
93 </fig></entry> |
|
94 <entry><p>A non-focusable item. One tap to activate.</p></entry> |
|
95 </row> |
|
96 <row> |
|
97 <entry><p><xref href="GUID-ED784025-4E65-4BE9-ADA8-A13427B6EA30.dita">Markable |
|
98 list</xref></p><p><xref href="GUID-0822B030-E776-4BD5-B9C9-23D3821BCE1F.dita">Selection |
|
99 list</xref></p></entry> |
|
100 <entry><fig id="GUID-D0A31598-850F-41C7-BAB7-EB131975A95D-GENID-1-6-1-6-1-1-4-2-1-3-1-2-1-1-5-9-2-1"> |
|
101 <image href="GUID-CA4C11C4-CDD3-4154-B401-B37A88676322_d0e46178_href.png" scale="20" placement="inline"/> |
|
102 </fig></entry> |
|
103 <entry><p>One tap moves the focus. A second tap on a focused item activates |
|
104 it (emulates a selection key press). </p></entry> |
|
105 </row> |
|
106 <row> |
|
107 <entry><p>Menu list (e.g., <xref href="GUID-BFEEECCA-190B-4DDE-8A04-4FE918BE8690.dita">Options |
|
108 menu</xref> and submenus)</p></entry> |
|
109 <entry><fig id="GUID-9130451A-B2CF-4D0C-A673-1FDBE6143E2A-GENID-1-6-1-6-1-1-4-2-1-3-1-2-1-1-5-10-2-1"> |
|
110 <image href="GUID-C14D29C2-EDE6-4AB2-A346-668591B7ED3C_d0e46198_href.png" scale="25" placement="inline"/> |
|
111 </fig></entry> |
|
112 <entry><p>A single tap moves the focus and activates the item (emulates a |
|
113 selection key press).</p></entry> |
|
114 </row> |
|
115 <row> |
|
116 <entry><p><xref href="GUID-0E695106-4139-4335-A11F-BD04418DD583.dita">Multi-selection |
|
117 list</xref></p></entry> |
|
118 <entry><fig id="GUID-4D2CEDA3-7797-41EE-AD2B-0822284E2066-GENID-1-6-1-6-1-1-4-2-1-3-1-2-1-1-5-11-2-1"> |
|
119 <image href="GUID-6A28C9DE-6EAC-4F39-921A-083198C89004_d0e46216_href.png" scale="23" placement="inline"/> |
|
120 </fig></entry> |
|
121 <entry><p>One tap moves the focus and marks/unmarks the item. </p></entry> |
|
122 </row> |
|
123 <row> |
|
124 <entry><p><xref href="GUID-E7EFAD50-3323-49A6-A5D9-95B95F0FBF0E.dita">Preview pop-up</xref></p></entry> |
|
125 <entry><fig id="GUID-24E4E456-920A-4708-A8F0-C285A30A75A0"> |
|
126 <image href="GUID-AA4FF598-36A0-4F3B-B440-14052C01EED8_d0e46234_href.png" scale="27" placement="inline"/> |
|
127 </fig></entry> |
|
128 <entry/> |
|
129 </row> |
|
130 <row> |
|
131 <entry><p>Scroll pane</p><p>For more |
|
132 information, see <xref href="GUID-11C24609-3B6D-4B44-B003-FB0C07444A9E.dita">Scroll |
|
133 pane</xref>.</p></entry> |
|
134 <entry><fig id="GUID-7EE54852-05A5-40B4-9EFD-B94E8941EB8F"> |
|
135 <image href="GUID-F8A7F4CB-011C-425D-83B4-13BD67AA21B7_d0e46254_href.png" scale="27" placement="inline"/> |
|
136 </fig></entry> |
|
137 <entry/> |
|
138 </row> |
|
139 <row> |
|
140 <entry><p><b>Setting items</b></p></entry> |
|
141 <entry/> |
|
142 <entry/> |
|
143 </row> |
|
144 <row> |
|
145 <entry><p>Pop-up setting</p></entry> |
|
146 <entry><fig id="GUID-D8DF403D-D02A-4398-B885-44184DB811F3"> |
|
147 <image href="GUID-A0FF8339-E322-4D22-A800-E90467E5C952_d0e46281_href.png" scale="23" placement="inline"/> |
|
148 </fig></entry> |
|
149 <entry><p>A single tap moves the focus and activates the item (emulates a |
|
150 selection key press).</p></entry> |
|
151 </row> |
|
152 <row> |
|
153 <entry><p>Multi-selection list setting</p></entry> |
|
154 <entry><fig id="GUID-B447B5A0-E786-449F-95EA-696265862662"> |
|
155 <image href="GUID-7E69FAA4-2198-4428-BD26-96C4020E2077_d0e46298_href.png" scale="18" placement="inline"/> |
|
156 </fig></entry> |
|
157 <entry><p>The functionality is for a multi-selection list.</p></entry> |
|
158 </row> |
|
159 <row> |
|
160 <entry><p>Text setting</p></entry> |
|
161 <entry><fig id="GUID-23648A4B-D511-43FA-9CAF-8B73AC93A709"> |
|
162 <image href="GUID-AA9552C9-6223-459C-A8F9-770ECFCEFBDD_d0e46315_href.png" scale="18" placement="inline"/> |
|
163 </fig></entry> |
|
164 <entry><p>The cursor can be moved with the text field. Dragging selects a |
|
165 block of text.</p></entry> |
|
166 </row> |
|
167 <row> |
|
168 <entry><p>Slider setting</p></entry> |
|
169 <entry><fig id="GUID-63CEA696-D7FD-4348-A50C-722C566229BA"> |
|
170 <image href="GUID-967E277E-67FC-4F98-B775-06C9BFC09926_d0e46332_href.png" scale="23" placement="inline"/> |
|
171 </fig></entry> |
|
172 <entry><p>The slider thumb is draggable.</p></entry> |
|
173 </row> |
|
174 <row> |
|
175 <entry><p><xref href="GUID-F149726A-CC79-42A1-8A25-E15AC14ABE9A.dita">Setting list</xref></p></entry> |
|
176 <entry><fig id="GUID-A7120F4F-0B07-4E33-B109-9760F16B22E6-GENID-1-6-1-6-1-1-4-2-1-3-1-2-1-1-5-19-2-1"> |
|
177 <image href="GUID-51AB13C3-755C-45CD-841D-1CDF45338A2F_d0e46350_href.png" scale="23" placement="inline"/> |
|
178 </fig></entry> |
|
179 <entry><p>One tap moves the focus. A second tap on a focused item activates |
|
180 it (emulates a selection key press).</p></entry> |
|
181 </row> |
|
182 <row> |
|
183 <entry><p>Softkeys (left and right) in the <xref href="GUID-8B137691-7C9E-4085-BFFE-4CFE4A64A091.dita">Control |
|
184 pane</xref></p><note>There is no middle softkey label in Touch UI</note></entry> |
|
185 <entry><fig id="GUID-0DE5F819-8841-4AFE-A0EE-897A106CFA17-GENID-1-6-1-6-1-1-4-2-1-3-1-2-1-1-5-20-2-1"> |
|
186 <image href="GUID-82ECE53F-FF7B-4DFB-874D-24487E6BB5BD_d0e46371_href.png" scale="23" placement="inline"/> |
|
187 </fig></entry> |
|
188 <entry><p>A non-focusable item.</p></entry> |
|
189 </row> |
|
190 <row> |
|
191 <entry><p>Tabs in the <xref href="GUID-76FD2A71-E8A3-4C82-9704-3F7F6AD4DFD8.dita">Navi |
|
192 pane</xref></p></entry> |
|
193 <entry><fig id="GUID-F16305FA-14A3-4252-A1D8-A30E078D5CD2-GENID-1-6-1-6-1-1-4-2-1-3-1-2-1-1-5-21-2-1"> |
|
194 <image href="GUID-0B647098-CCD8-4E9C-A07F-9A9E2346CA23_d0e46390_href.png" scale="23" placement="inline"/> |
|
195 </fig></entry> |
|
196 <entry><p>A non-focusable item. One tap to activate.</p></entry> |
|
197 </row> |
|
198 <row> |
|
199 <entry><p><xref href="GUID-771AF721-E2D7-41C8-BF97-5BD30D1A28AD.dita">Status pane</xref></p> |
|
200 <ul> |
|
201 <li> <p><xref href="GUID-66EFFCF5-581A-4EE7-B784-8087A1081B6D.dita">Title |
|
202 pane</xref></p> </li> |
|
203 <li> <p><xref href="GUID-76FD2A71-E8A3-4C82-9704-3F7F6AD4DFD8.dita">Navi |
|
204 pane</xref></p> </li> |
|
205 <li> <p><xref href="GUID-A947B5A8-9138-4FA2-B8D8-2850AEB2F38C.dita">Battery |
|
206 pane</xref></p> </li> |
|
207 <li> <p><xref href="GUID-314B1556-5CB5-4BCC-93C0-B22DB849D2D5.dita">Universal |
|
208 indicator pane</xref></p> </li> |
|
209 <li> <p><xref href="GUID-DF3F2FD0-FF68-4CEF-843F-CBC9E84F3A7F.dita">Signal |
|
210 pane</xref></p> </li> |
|
211 </ul></entry> |
|
212 <entry><fig id="GUID-DB24556D-1254-425A-B5ED-2C76E50B7735-GENID-1-6-1-6-1-1-4-2-1-3-1-2-1-1-5-22-2-1"> |
|
213 <image href="GUID-22BE45B9-7788-41B5-9E81-E0420CB956C7_d0e46446_href.png" scale="23" placement="inline"/> |
|
214 </fig></entry> |
|
215 <entry><p>Non-focusable items. A single tap activates the functionality if |
|
216 the sub-pane has one (the signal and battery panes are inactive).</p></entry> |
|
217 </row> |
|
218 <row> |
|
219 <entry><p><xref href="GUID-60B979FB-43BD-480E-8E17-1D3DA2002CB1.dita"><b>Slider |
|
220 pop-up</b></xref></p><ul> |
|
221 <li><p><xref href="CB163645-CB5E-4DB5-9830-B97D12FDCBF5.dita">Volume Controller</xref></p></li> |
|
222 </ul></entry> |
|
223 <entry><fig id="GUID-EB3D6B8C-D64E-4814-BA38-882CE2103BD1"> |
|
224 <image href="GUID-21F0026B-58EF-4E19-834D-C3C08BB89CB1_d0e46472_href.png" placement="inline"/> |
|
225 </fig></entry> |
|
226 <entry><p>Draggable slider thumb. Icons can set as tappable. </p><ul> |
|
227 <li><p>Volume slider thumb is draggable, and muting can be done directly by |
|
228 tapping the speaker icon.</p></li> |
|
229 </ul></entry> |
|
230 </row> |
|
231 <row> |
|
232 <entry><p><xref href="GUID-EC98E7E0-872D-467D-BDC8-6471F6165705.dita">Universal |
|
233 indicator pop-up</xref></p></entry> |
|
234 <entry><fig id="GUID-01050257-59D4-4224-8756-22F9524B94AB"> |
|
235 <image href="GUID-8C0900A8-1783-4C34-9ABD-27DC92D0AD4A_d0e46496_href.png" placement="inline"/> |
|
236 </fig></entry> |
|
237 <entry><p>Tapping the link performs the application-specific functionality. |
|
238 Most commonly, opens the application. Tapping the description text without |
|
239 the link functionality is inactive.</p></entry> |
|
240 </row> |
|
241 </tbody> |
|
242 </tgroup> |
|
243 </table></conbody></concept> |