<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (c) 2007-2010 Nokia Corporation and/or its subsidiary(-ies) All rights reserved. -->
<!-- This component and the accompanying materials are made available under the terms of the License 
"Eclipse Public License v1.0" which accompanies this distribution, 
and is available at the URL "http://www.eclipse.org/legal/epl-v10.html". -->
<!-- Initial Contributors:
    Nokia Corporation - initial contribution.
Contributors: 
-->
<!DOCTYPE concept
  PUBLIC "-//OASIS//DTD DITA Concept//EN" "concept.dtd">
<concept id="GUID-28A0E021-C702-4AAF-9C64-B60B09B40176" xml:lang="en"><title>Moving
in touch UI </title><prolog><metadata><keywords/></metadata></prolog><conbody>
<section id="GUID-01538C67-1E1B-48B3-BAF8-D486FC75B855"><title>Dragging and
flicking</title> Dragging event is a combination of touch down, move and stop
(or touch release). Flicking is a combination of touch down and move (dragging),
and touch release with speed. Dragging and flicking are one of the methods
to control the content. Dragging and flicking can be disabled per component
if required. <note> If dragging and flicking are used, then focus scrolling
is not possible. </note><p>Dragging and flicking are used in lists, grids,
options menu, editors, viewers and forms. If there is a highlighted text in
an editor or viewer, the highlight is always fixed where it was when the movement
started. Dragging and flicking can also be performed on the contents which
fits to the display. </p><p>When dragging the content over the borders, borders
can provide the boundary effect to indicate that user has reached the end
of the content.</p><p>Dragging the content reveals empty space. There can
be as much empty area visible as user can drag the display. </p><p>Dragging
and flicking are names for the touch event combinations described in the following
table.</p><table id="GUID-7C61D3D7-8FCB-46AB-B2E9-CE1AC68F86DE"><title>Default
dragging and flicking events.</title>
<tgroup cols="3"><colspec colname="col1" colwidth="0.80*"/><colspec colname="col2" colwidth="1.01*"/><colspec colname="col3" colwidth="1.19*"/>
<thead>
<row>
<entry valign="top"><p>User action</p></entry>
<entry valign="top"><p>State change</p></entry>
<entry valign="top"><p>Feedback</p></entry>
</row>
</thead>
<tbody>
<row>
<entry><p>Touch down</p></entry>
<entry><p>Takes hold of position.</p></entry>
<entry><p>Highlight is shown on the touched item.</p><p>Tactile: Basic list
effect and audio feedback provided with touch-down event.</p></entry>
</row>
<row>
<entry><p>Move (Drag)</p></entry>
<entry><p>The content follows the finger.</p><p>The content, control handle
or whole canvas follows the finger movement.</p><p>In lists, grids, viewers
and editors, only vertical movement is supported. Content views (e.g., Browser)
support 360° movement.</p></entry>
<entry><p>Highlight disappears.</p><p>Tactile: Sensitive list effect and audio
feedback provided whenever a new item appears on the screen. No continuous
audio feedback with flick.</p></entry>
</row>
<row>
<entry><p>Stop and touch release</p></entry>
<entry><p>The content scrolling stops. With touch release, the content does
not move. Nothing is activated.</p></entry>
<entry><p>Tactile: Basic list effect and audio feedback provided with touch
down event. No feedback is provided with touch release.</p></entry>
</row>
<row>
<entry><p>Touch release with speed after dragging (Flick)</p></entry>
<entry><p>Touch release: The content continues its movement with the direction
and speed that it had at the moment of touch release. The movement has friction;
it slows down and stops. The amount of content that moves before it stops
is related to the speed of flick. The highlighted item continues its movement
out of the visible display.</p></entry>
<entry><p>Tactile: Touch release after move does not provide tactile feedback.</p></entry>
</row>
<row>
<entry><p>Touch down during the scrolling followed by flick</p></entry>
<entry><p>Stops the movement.</p><p>If the user makes another flick (touch
down + move + touch release with speed) before a very short time-out, the
content continues movement at the speed of the second flick.</p><note> Movement
has to be stopped before any other activity can occur. Any key press and another
active window opening on top of the content (global notes and queries) stops
the movement.</note></entry>
<entry><p>Highlight appears after time-out.</p><p>Tactile: Basic list effect
provided with touch down event if the movement is stopped. No feedback is
provided with touch release.</p><note> If the content continues to move, the
same move feedback is provided without any extra feedback.</note></entry>
</row>
<row>
<entry><p>Touch down and move out of the content</p></entry>
<entry><p>The content follows the finger.</p></entry>
<entry><p>Tactile: Sensitive list effect and audio feedback given with touch
down event and whenever a new item appears on the screen.</p></entry>
</row>
<row>
<entry><p>Touch down and move in empty area</p></entry>
<entry><p>The entire empty area is inactive.</p><p>If there is any content
in the component that allows flicking/dragging, and if the user does a touch
down and move in the empty area outside the content, the content follows the
normal list touch down and move functionality.</p></entry>
<entry><p>Tactile: For the completely empty area, no feedback provided.</p><p>For
the component where there is content, moving the empty list follows normal
drag/flick feedback. There is no feedback for the touch down event in the
empty area.</p></entry>
</row>
<row>
<entry><p>Touch down and move, and touch release at the start or end of the
content.</p></entry>
<entry><p>Inactive</p></entry>
<entry><p>Tactile: No feedback provided.</p></entry>
</row>
</tbody>
</tgroup>
</table></section>
<section id="GUID-C330E33C-4FAE-4437-8135-F6B0F7D438D5"><title>Scrollbar</title>In
Touch UI, vertical and horizontal scrollbars can be used for scrolling. Scrollbars
do not take active focus. <p>Scrollbar consists of the following elements:</p><ul>
<li><p><b>Scrollbar area</b> - It is the exact area ’under’ the scrollbar
thumb plus the extended usage area. The area changes its color when the scrollbar
has the control.</p></li>
<li><p><b>Extended usage area</b> - It is the invisible area where the user
can touch to be able to scroll.</p></li>
<li><p><b>Scrollbar thumb</b> - It is the 'handle' with which the user can
scroll the screen.</p></li>
<li><p><b>Scrollbar control area</b> - It is the entire main pane area (after
the user touches the scrollbar thumb to move, touch away from the scrollbar
area, and still be able to control it). </p></li>
</ul><table id="GUID-C669FBED-AD48-4054-90B1-0C47EFD1CDDA"><title>Default
touch events for scrollbar.</title>
<tgroup cols="3"><colspec colname="col1" colwidth="0.80*"/><colspec colname="col2" colwidth="1.01*"/><colspec colname="col3" colwidth="1.19*"/>
<thead>
<row>
<entry valign="top"><p>User action</p></entry>
<entry valign="top"><p>State change</p></entry>
<entry valign="top"><p>Feedback</p></entry>
</row>
</thead>
<tbody>
<row>
<entry><p>Touch down on a scrollbar, no thumb</p></entry>
<entry><p>Scrolling is activated when there is a scrollbar under the touch
event. Scrollbar thumb is moved towards the touch down position on the scroll
bar. Scrolling is done for a page at a time.</p></entry>
<entry><p>Scrollbar color is changed to indicate that the scrollbar has the
control.</p><p>Tactile: <ul>
<li>No feedback is provided when touch down on a scrollbar and no thumb is
used. </li>
<li><p>Sensitive slider effect and audio feedback given when thumb is moved
towards the touch down position.</p></li>
<li><p>No feedback is provided with touch release.</p></li>
</ul> </p></entry>
</row>
<row>
<entry><p>Touch down on a scrollbar thumb</p></entry>
<entry><p>Scrollbar thumb can be moved in desired direction. Scrollbar thumb
color is changed as an indication to the users that scrolling can be performed.</p></entry>
<entry><p>Scrollbar thumb color is changed to indicate scrolling activation.</p><p>Tactile:
Sensitive slider effect and audio feedback provided with touch down and release
events.</p></entry>
</row>
<row>
<entry><p>Touch down and hold scrollbar, no thumb</p></entry>
<entry><p>This action performs a “key repeat”. The scrollbar thumb is moved
towards the touch down position</p></entry>
<entry><p>Tactile: Sensitive slider effect and audio feedback provided with
touch down and with steps.</p></entry>
</row>
<row>
<entry><p>Touch down and move</p></entry>
<entry><p>Scrollbar thumb is moved along with the touch event.</p><p>Touch
down on scrollbar thumb, dragging and touch release are performed on the scrollbar
control area.</p></entry>
<entry><p>Tactile: <ul>
<li><p>Sensitive slider effect and audio feedback provided with touch down
event.</p></li>
<li><p>Smooth slider effect provided with the drag event.</p></li>
<li><p>Sensitive slider effect provided with touch release.</p></li>
</ul> </p></entry>
</row>
<row>
<entry><p>Touch down on scrollbar thumb and move to out of the scrollbar control
area</p></entry>
<entry><p>Scrollbar thumb remains in the position where it was when the finger
left the scrollbar control area.</p><p>If the user moves the touch out of
the scrollbar control area and back, the thumb will continue to move along
with the touch event.</p><p>After touch down on scrollbar thumb, touch is
dragged out from the scrollbar control area, without releasing the touch.</p></entry>
<entry><p>Tactile: Sensitive slider effect and audio feedback provided with
touch down. No feedback is provided if the thumb is not moving. If the thumb
moves, smooth slide feedback provided.</p><p><note> If touch release happens
outside the scrollbar, no feedback is provided.</note></p></entry>
</row>
</tbody>
</tgroup>
</table></section>
<section id="GUID-D556C1B0-9D9A-4219-BFF8-5CDBA10677CA"><title>Moving in hybrid
devices</title>Hybrid devices are combinations of touch screen and physical
keyboard. If there is detected touch event ongoing, then events initiated
from the keyboard are not detected. For example, if there is touch down event
detected, then the Navi keys are inactive. Also, if there is an ongoing hardware
keyboard event, then the ongoing touch events (active touch event) are disabled.
Following hardware keys are always active and key events are detected even
if there is ongoing touch event. <ul>
<li><p>Control key <i>§KEY_CTRL§</i></p></li>
<li><p>Shift key <i>§KEY_SHIFT§</i> </p></li>
<li><p>Power key <i>§KEY_POWER§</i></p></li>
<li><p>Keylock</p></li>
<li><p>Camera key <i>§KEY_CAMERA§</i></p></li>
</ul><note>While using the hardware keys, focus moves to a given item before
opening it.</note></section>
</conbody></concept>