<?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>