|
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-28A0E021-C702-4AAF-9C64-B60B09B40176" xml:lang="en"><title>Moving |
|
13 in touch UI </title><prolog><metadata><keywords/></metadata></prolog><conbody> |
|
14 <section id="GUID-01538C67-1E1B-48B3-BAF8-D486FC75B855"><title>Dragging and |
|
15 flicking</title> Dragging event is a combination of touch down, move and stop |
|
16 (or touch release). Flicking is a combination of touch down and move (dragging), |
|
17 and touch release with speed. Dragging and flicking are one of the methods |
|
18 to control the content. Dragging and flicking can be disabled per component |
|
19 if required. <note> If dragging and flicking are used, then focus scrolling |
|
20 is not possible. </note><p>Dragging and flicking are used in lists, grids, |
|
21 options menu, editors, viewers and forms. If there is a highlighted text in |
|
22 an editor or viewer, the highlight is always fixed where it was when the movement |
|
23 started. Dragging and flicking can also be performed on the contents which |
|
24 fits to the display. </p><p>When dragging the content over the borders, borders |
|
25 can provide the boundary effect to indicate that user has reached the end |
|
26 of the content.</p><p>Dragging the content reveals empty space. There can |
|
27 be as much empty area visible as user can drag the display. </p><p>Dragging |
|
28 and flicking are names for the touch event combinations described in the following |
|
29 table.</p><table id="GUID-7C61D3D7-8FCB-46AB-B2E9-CE1AC68F86DE"><title>Default |
|
30 dragging and flicking events.</title> |
|
31 <tgroup cols="3"><colspec colname="col1" colwidth="0.80*"/><colspec colname="col2" colwidth="1.01*"/><colspec colname="col3" colwidth="1.19*"/> |
|
32 <thead> |
|
33 <row> |
|
34 <entry valign="top"><p>User action</p></entry> |
|
35 <entry valign="top"><p>State change</p></entry> |
|
36 <entry valign="top"><p>Feedback</p></entry> |
|
37 </row> |
|
38 </thead> |
|
39 <tbody> |
|
40 <row> |
|
41 <entry><p>Touch down</p></entry> |
|
42 <entry><p>Takes hold of position.</p></entry> |
|
43 <entry><p>Highlight is shown on the touched item.</p><p>Tactile: Basic list |
|
44 effect and audio feedback provided with touch-down event.</p></entry> |
|
45 </row> |
|
46 <row> |
|
47 <entry><p>Move (Drag)</p></entry> |
|
48 <entry><p>The content follows the finger.</p><p>The content, control handle |
|
49 or whole canvas follows the finger movement.</p><p>In lists, grids, viewers |
|
50 and editors, only vertical movement is supported. Content views (e.g., Browser) |
|
51 support 360° movement.</p></entry> |
|
52 <entry><p>Highlight disappears.</p><p>Tactile: Sensitive list effect and audio |
|
53 feedback provided whenever a new item appears on the screen. No continuous |
|
54 audio feedback with flick.</p></entry> |
|
55 </row> |
|
56 <row> |
|
57 <entry><p>Stop and touch release</p></entry> |
|
58 <entry><p>The content scrolling stops. With touch release, the content does |
|
59 not move. Nothing is activated.</p></entry> |
|
60 <entry><p>Tactile: Basic list effect and audio feedback provided with touch |
|
61 down event. No feedback is provided with touch release.</p></entry> |
|
62 </row> |
|
63 <row> |
|
64 <entry><p>Touch release with speed after dragging (Flick)</p></entry> |
|
65 <entry><p>Touch release: The content continues its movement with the direction |
|
66 and speed that it had at the moment of touch release. The movement has friction; |
|
67 it slows down and stops. The amount of content that moves before it stops |
|
68 is related to the speed of flick. The highlighted item continues its movement |
|
69 out of the visible display.</p></entry> |
|
70 <entry><p>Tactile: Touch release after move does not provide tactile feedback.</p></entry> |
|
71 </row> |
|
72 <row> |
|
73 <entry><p>Touch down during the scrolling followed by flick</p></entry> |
|
74 <entry><p>Stops the movement.</p><p>If the user makes another flick (touch |
|
75 down + move + touch release with speed) before a very short time-out, the |
|
76 content continues movement at the speed of the second flick.</p><note> Movement |
|
77 has to be stopped before any other activity can occur. Any key press and another |
|
78 active window opening on top of the content (global notes and queries) stops |
|
79 the movement.</note></entry> |
|
80 <entry><p>Highlight appears after time-out.</p><p>Tactile: Basic list effect |
|
81 provided with touch down event if the movement is stopped. No feedback is |
|
82 provided with touch release.</p><note> If the content continues to move, the |
|
83 same move feedback is provided without any extra feedback.</note></entry> |
|
84 </row> |
|
85 <row> |
|
86 <entry><p>Touch down and move out of the content</p></entry> |
|
87 <entry><p>The content follows the finger.</p></entry> |
|
88 <entry><p>Tactile: Sensitive list effect and audio feedback given with touch |
|
89 down event and whenever a new item appears on the screen.</p></entry> |
|
90 </row> |
|
91 <row> |
|
92 <entry><p>Touch down and move in empty area</p></entry> |
|
93 <entry><p>The entire empty area is inactive.</p><p>If there is any content |
|
94 in the component that allows flicking/dragging, and if the user does a touch |
|
95 down and move in the empty area outside the content, the content follows the |
|
96 normal list touch down and move functionality.</p></entry> |
|
97 <entry><p>Tactile: For the completely empty area, no feedback provided.</p><p>For |
|
98 the component where there is content, moving the empty list follows normal |
|
99 drag/flick feedback. There is no feedback for the touch down event in the |
|
100 empty area.</p></entry> |
|
101 </row> |
|
102 <row> |
|
103 <entry><p>Touch down and move, and touch release at the start or end of the |
|
104 content.</p></entry> |
|
105 <entry><p>Inactive</p></entry> |
|
106 <entry><p>Tactile: No feedback provided.</p></entry> |
|
107 </row> |
|
108 </tbody> |
|
109 </tgroup> |
|
110 </table></section> |
|
111 <section id="GUID-C330E33C-4FAE-4437-8135-F6B0F7D438D5"><title>Scrollbar</title>In |
|
112 Touch UI, vertical and horizontal scrollbars can be used for scrolling. Scrollbars |
|
113 do not take active focus. <p>Scrollbar consists of the following elements:</p><ul> |
|
114 <li><p><b>Scrollbar area</b> - It is the exact area ’under’ the scrollbar |
|
115 thumb plus the extended usage area. The area changes its color when the scrollbar |
|
116 has the control.</p></li> |
|
117 <li><p><b>Extended usage area</b> - It is the invisible area where the user |
|
118 can touch to be able to scroll.</p></li> |
|
119 <li><p><b>Scrollbar thumb</b> - It is the 'handle' with which the user can |
|
120 scroll the screen.</p></li> |
|
121 <li><p><b>Scrollbar control area</b> - It is the entire main pane area (after |
|
122 the user touches the scrollbar thumb to move, touch away from the scrollbar |
|
123 area, and still be able to control it). </p></li> |
|
124 </ul><table id="GUID-C669FBED-AD48-4054-90B1-0C47EFD1CDDA"><title>Default |
|
125 touch events for scrollbar.</title> |
|
126 <tgroup cols="3"><colspec colname="col1" colwidth="0.80*"/><colspec colname="col2" colwidth="1.01*"/><colspec colname="col3" colwidth="1.19*"/> |
|
127 <thead> |
|
128 <row> |
|
129 <entry valign="top"><p>User action</p></entry> |
|
130 <entry valign="top"><p>State change</p></entry> |
|
131 <entry valign="top"><p>Feedback</p></entry> |
|
132 </row> |
|
133 </thead> |
|
134 <tbody> |
|
135 <row> |
|
136 <entry><p>Touch down on a scrollbar, no thumb</p></entry> |
|
137 <entry><p>Scrolling is activated when there is a scrollbar under the touch |
|
138 event. Scrollbar thumb is moved towards the touch down position on the scroll |
|
139 bar. Scrolling is done for a page at a time.</p></entry> |
|
140 <entry><p>Scrollbar color is changed to indicate that the scrollbar has the |
|
141 control.</p><p>Tactile: <ul> |
|
142 <li>No feedback is provided when touch down on a scrollbar and no thumb is |
|
143 used. </li> |
|
144 <li><p>Sensitive slider effect and audio feedback given when thumb is moved |
|
145 towards the touch down position.</p></li> |
|
146 <li><p>No feedback is provided with touch release.</p></li> |
|
147 </ul> </p></entry> |
|
148 </row> |
|
149 <row> |
|
150 <entry><p>Touch down on a scrollbar thumb</p></entry> |
|
151 <entry><p>Scrollbar thumb can be moved in desired direction. Scrollbar thumb |
|
152 color is changed as an indication to the users that scrolling can be performed.</p></entry> |
|
153 <entry><p>Scrollbar thumb color is changed to indicate scrolling activation.</p><p>Tactile: |
|
154 Sensitive slider effect and audio feedback provided with touch down and release |
|
155 events.</p></entry> |
|
156 </row> |
|
157 <row> |
|
158 <entry><p>Touch down and hold scrollbar, no thumb</p></entry> |
|
159 <entry><p>This action performs a “key repeat”. The scrollbar thumb is moved |
|
160 towards the touch down position</p></entry> |
|
161 <entry><p>Tactile: Sensitive slider effect and audio feedback provided with |
|
162 touch down and with steps.</p></entry> |
|
163 </row> |
|
164 <row> |
|
165 <entry><p>Touch down and move</p></entry> |
|
166 <entry><p>Scrollbar thumb is moved along with the touch event.</p><p>Touch |
|
167 down on scrollbar thumb, dragging and touch release are performed on the scrollbar |
|
168 control area.</p></entry> |
|
169 <entry><p>Tactile: <ul> |
|
170 <li><p>Sensitive slider effect and audio feedback provided with touch down |
|
171 event.</p></li> |
|
172 <li><p>Smooth slider effect provided with the drag event.</p></li> |
|
173 <li><p>Sensitive slider effect provided with touch release.</p></li> |
|
174 </ul> </p></entry> |
|
175 </row> |
|
176 <row> |
|
177 <entry><p>Touch down on scrollbar thumb and move to out of the scrollbar control |
|
178 area</p></entry> |
|
179 <entry><p>Scrollbar thumb remains in the position where it was when the finger |
|
180 left the scrollbar control area.</p><p>If the user moves the touch out of |
|
181 the scrollbar control area and back, the thumb will continue to move along |
|
182 with the touch event.</p><p>After touch down on scrollbar thumb, touch is |
|
183 dragged out from the scrollbar control area, without releasing the touch.</p></entry> |
|
184 <entry><p>Tactile: Sensitive slider effect and audio feedback provided with |
|
185 touch down. No feedback is provided if the thumb is not moving. If the thumb |
|
186 moves, smooth slide feedback provided.</p><p><note> If touch release happens |
|
187 outside the scrollbar, no feedback is provided.</note></p></entry> |
|
188 </row> |
|
189 </tbody> |
|
190 </tgroup> |
|
191 </table></section> |
|
192 <section id="GUID-D556C1B0-9D9A-4219-BFF8-5CDBA10677CA"><title>Moving in hybrid |
|
193 devices</title>Hybrid devices are combinations of touch screen and physical |
|
194 keyboard. If there is detected touch event ongoing, then events initiated |
|
195 from the keyboard are not detected. For example, if there is touch down event |
|
196 detected, then the Navi keys are inactive. Also, if there is an ongoing hardware |
|
197 keyboard event, then the ongoing touch events (active touch event) are disabled. |
|
198 Following hardware keys are always active and key events are detected even |
|
199 if there is ongoing touch event. <ul> |
|
200 <li><p>Control key <i>§KEY_CTRL§</i></p></li> |
|
201 <li><p>Shift key <i>§KEY_SHIFT§</i> </p></li> |
|
202 <li><p>Power key <i>§KEY_POWER§</i></p></li> |
|
203 <li><p>Keylock</p></li> |
|
204 <li><p>Camera key <i>§KEY_CAMERA§</i></p></li> |
|
205 </ul><note>While using the hardware keys, focus moves to a given item before |
|
206 opening it.</note></section> |
|
207 </conbody></concept> |