<?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-BB8B3A11-0BBC-4759-A7F4-A28C9E70573F" xml:lang="en"><title>Touch

support for common UI components</title><prolog><metadata><keywords/></metadata></prolog><conbody><table id="GUID-CB1618F8-C658-42A5-BF86-3AA8CDCFF681-GENID-1-7-1-6-1-1-4-2-1-3-1-2-1">

<tgroup cols="3"><colspec colname="col1" colwidth="0.77*"/><colspec colname="col2" colwidth="1.54*"/><colspec colname="col3" colwidth="0.69*"/>

<thead>

<row>

<entry><p>Component</p></entry>

<entry><p>Example image</p></entry>

<entry><p>Touch support</p></entry>

</row>

</thead>

<tbody>

<row>

<entry><p><xref href="GUID-5B9F25B5-5FE1-4E38-BC8D-A0273F458C36.dita">Discreet

pop-up  menu</xref></p></entry>

<entry><fig id="GUID-4FBB5E9D-A58B-4043-BFF1-27DEADD5A411">

<image href="GUID-F0BC230B-CAEC-452D-8FF4-20803C63B07C_d0e70985_href.png" placement="inline"/>

</fig></entry>

<entry><p>Touch down keeps the pop-up visible. Touch release either dismisses

the pop-up or activates the application-specific functionality. Most commonly,

it activates the application.</p></entry>

</row>

<row>

<entry><p><xref href="GUID-C4E728B4-3E84-49A4-83CB-DF146420D78A.dita">Stylus pop-up

menu</xref></p></entry>

<entry><fig id="GUID-F042CCE6-26B3-4BC0-B9C2-80E5B36730F2-GENID-1-7-1-6-1-1-4-2-1-3-1-2-1-1-5-2-2-1">

<image href="GUID-AA4FF598-36A0-4F3B-B440-14052C01EED8_d0e71003_href.png" scale="27" placement="inline"/>

</fig></entry>

<entry><p>A single tap moves the focus and activates the item.</p></entry>

</row>

<row>

<entry><p><xref href="GUID-EB212C35-5416-4CA7-8091-61B45D78E220.dita">Toolbar</xref></p></entry>

<entry><fig id="GUID-785BE9BB-451F-44BA-A061-35D613D87E61-GENID-1-7-1-6-1-1-4-2-1-3-1-2-1-1-5-3-2-1">

<image href="GUID-0CD826C3-9DD9-46DD-A5A6-9093B8772993_d0e71021_href.png" scale="27" placement="inline"/>

</fig></entry>

<entry><p>Focusable or non-focusable.  A single tap moves the focus and activates

the item (emulates a selection key press).</p></entry>

</row>

<row>

<entry><p>Choice list</p></entry>

<entry><fig id="GUID-DAC03F73-EF8E-40C7-8AB2-FB8680AD1188">

<image href="GUID-FD52DFC5-03CD-4C7A-B118-0D5C90D99F1A_d0e71038_href.png" scale="27" placement="inline"/>

</fig></entry>

<entry><p/></entry>

</row>

<row>

<entry><p><xref href="GUID-1AA32C40-CDE0-4627-A634-7C07BB1ED67B.dita">Forms</xref></p></entry>

<entry><fig id="GUID-0329DFE0-EC57-41D3-A3A8-E016A88EB9AD-GENID-1-7-1-6-1-1-4-2-1-3-1-2-1-1-5-5-2-1">

<image href="GUID-85873CBE-6077-4917-B2B0-5D00C6647CC8_d0e71055_href.png" scale="25" placement="inline"/>

</fig></entry>

<entry><p>In the view state (i.e., a normal two-row list item), one tap moves

focus. A second tap on a focused item activates it (emulates a selection key

press). </p><p>In the edit state, one tap moves the focus and launches a touch

input window. Within a focused item, the functionality is as for a text field.</p></entry>

</row>

<row>

<entry><p><xref href="GUID-A5756C5F-9C93-4949-8B60-03DCA1BAF683.dita">Form items</xref></p><ul>

<li><p>Text field</p></li>

<li><p>Pop-up field</p></li>

<li><p>Slider</p></li>

</ul></entry>

<entry><fig id="GUID-07C6A080-2E8E-47D7-84FA-F659EC137F73">

<image href="GUID-DC4E42CA-2A65-44D7-8DBE-386F60F998A0_d0e71089_href.png" scale="23" placement="inline"/>

</fig></entry>

<entry><p>Same as for equivalent setting items</p></entry>

</row>

<row>

<entry><p><xref href="GUID-40F5B725-A5D7-487F-BF5D-A616F768F40D.dita">Grouped soft

notification</xref>, <xref href="GUID-13DEE42F-3EAB-4EB7-9CE1-C4930BCACE01.dita">List

query</xref>, <xref href="GUID-434F2412-59A1-4BCB-885D-5E708EAA6AB6.dita">Grid

query</xref></p></entry>

<entry><fig id="GUID-53B1D1D1-CE34-4271-9AEA-57A9EE81EDA7-GENID-1-7-1-6-1-1-4-2-1-3-1-2-1-1-5-7-2-1">

<image href="GUID-A432469D-F594-4A94-8889-142AB39A795D_d0e71113_href.png" scale="25" placement="inline"/>

</fig></entry>

<entry><p>A single tap moves the focus and activates the item (emulates a

selection key press).</p></entry>

</row>

<row>

<entry><p>Left/Right arrows in the <xref href="GUID-76FD2A71-E8A3-4C82-9704-3F7F6AD4DFD8.dita">Navi

pane</xref></p></entry>

<entry><fig id="GUID-13EFAD4E-B334-4B64-85B0-C5EE3294FD97-GENID-1-7-1-6-1-1-4-2-1-3-1-2-1-1-5-8-2-1">

<image href="GUID-76901D63-BDA2-4DCA-A66C-7BAFD7E211EB_d0e71132_href.png" scale="23" placement="inline"/>

</fig></entry>

<entry><p>A non-focusable item. One tap to activate.</p></entry>

</row>

<row>

<entry><p><xref href="GUID-ED784025-4E65-4BE9-ADA8-A13427B6EA30.dita">Markable

list</xref></p><p><xref href="GUID-0822B030-E776-4BD5-B9C9-23D3821BCE1F.dita">Selection

list</xref></p></entry>

<entry><fig id="GUID-D0A31598-850F-41C7-BAB7-EB131975A95D-GENID-1-7-1-6-1-1-4-2-1-3-1-2-1-1-5-9-2-1">

<image href="GUID-CA4C11C4-CDD3-4154-B401-B37A88676322_d0e71153_href.png" scale="20" placement="inline"/>

</fig></entry>

<entry><p>One tap moves the focus. A second tap on a focused item activates

it (emulates a selection key press). </p></entry>

</row>

<row>

<entry><p>Menu list (e.g., <xref href="GUID-BFEEECCA-190B-4DDE-8A04-4FE918BE8690.dita">Options

menu</xref> and submenus)</p></entry>

<entry><fig id="GUID-9130451A-B2CF-4D0C-A673-1FDBE6143E2A-GENID-1-7-1-6-1-1-4-2-1-3-1-2-1-1-5-10-2-1">

<image href="GUID-C14D29C2-EDE6-4AB2-A346-668591B7ED3C_d0e71173_href.png" scale="25" placement="inline"/>

</fig></entry>

<entry><p>A single tap moves the focus and activates the item (emulates a

selection key press).</p></entry>

</row>

<row>

<entry><p><xref href="GUID-0E695106-4139-4335-A11F-BD04418DD583.dita">Multi-selection

list</xref></p></entry>

<entry><fig id="GUID-4D2CEDA3-7797-41EE-AD2B-0822284E2066-GENID-1-7-1-6-1-1-4-2-1-3-1-2-1-1-5-11-2-1">

<image href="GUID-6A28C9DE-6EAC-4F39-921A-083198C89004_d0e71191_href.png" scale="23" placement="inline"/>

</fig></entry>

<entry><p>One tap moves the focus and marks/unmarks the item. </p></entry>

</row>

<row>

<entry><p><xref href="GUID-E7EFAD50-3323-49A6-A5D9-95B95F0FBF0E.dita">Preview pop-up</xref></p></entry>

<entry><fig id="GUID-24E4E456-920A-4708-A8F0-C285A30A75A0">

<image href="GUID-AA4FF598-36A0-4F3B-B440-14052C01EED8_d0e71209_href.png" scale="27" placement="inline"/>

</fig></entry>

<entry/>

</row>

<row>

<entry><p>Scroll pane</p><p>For more

information, see <xref href="GUID-11C24609-3B6D-4B44-B003-FB0C07444A9E.dita">Scroll

pane</xref>.</p></entry>

<entry><fig id="GUID-7EE54852-05A5-40B4-9EFD-B94E8941EB8F">

<image href="GUID-F8A7F4CB-011C-425D-83B4-13BD67AA21B7_d0e71229_href.png" scale="27" placement="inline"/>

</fig></entry>

<entry/>

</row>

<row>

<entry><p><b>Setting items</b></p></entry>

<entry/>

<entry/>

</row>

<row>

<entry><p>Pop-up setting</p></entry>

<entry><fig id="GUID-D8DF403D-D02A-4398-B885-44184DB811F3">

<image href="GUID-A0FF8339-E322-4D22-A800-E90467E5C952_d0e71256_href.png" scale="23" placement="inline"/>

</fig></entry>

<entry><p>A single tap moves the focus and activates the item (emulates a

selection key press).</p></entry>

</row>

<row>

<entry><p>Multi-selection list setting</p></entry>

<entry><fig id="GUID-B447B5A0-E786-449F-95EA-696265862662">

<image href="GUID-7E69FAA4-2198-4428-BD26-96C4020E2077_d0e71273_href.png" scale="18" placement="inline"/>

</fig></entry>

<entry><p>The functionality is for a multi-selection list.</p></entry>

</row>

<row>

<entry><p>Text setting</p></entry>

<entry><fig id="GUID-23648A4B-D511-43FA-9CAF-8B73AC93A709">

<image href="GUID-AA9552C9-6223-459C-A8F9-770ECFCEFBDD_d0e71290_href.png" scale="18" placement="inline"/>

</fig></entry>

<entry><p>The cursor can be moved with the text field. Dragging selects a

block of text.</p></entry>

</row>

<row>

<entry><p>Slider setting</p></entry>

<entry><fig id="GUID-63CEA696-D7FD-4348-A50C-722C566229BA">

<image href="GUID-967E277E-67FC-4F98-B775-06C9BFC09926_d0e71307_href.png" scale="23" placement="inline"/>

</fig></entry>

<entry><p>The slider thumb is draggable.</p></entry>

</row>

<row>

<entry><p><xref href="GUID-F149726A-CC79-42A1-8A25-E15AC14ABE9A.dita">Setting list</xref></p></entry>

<entry><fig id="GUID-A7120F4F-0B07-4E33-B109-9760F16B22E6-GENID-1-7-1-6-1-1-4-2-1-3-1-2-1-1-5-19-2-1">

<image href="GUID-51AB13C3-755C-45CD-841D-1CDF45338A2F_d0e71325_href.png" scale="23" placement="inline"/>

</fig></entry>

<entry><p>One tap moves the focus. A second tap on a focused item activates

it (emulates a selection key press).</p></entry>

</row>

<row>

<entry><p>Softkeys (left and right) in the <xref href="GUID-8B137691-7C9E-4085-BFFE-4CFE4A64A091.dita">Control

pane</xref></p><note>There is no middle softkey label in Touch UI</note></entry>

<entry><fig id="GUID-0DE5F819-8841-4AFE-A0EE-897A106CFA17-GENID-1-7-1-6-1-1-4-2-1-3-1-2-1-1-5-20-2-1">

<image href="GUID-82ECE53F-FF7B-4DFB-874D-24487E6BB5BD_d0e71346_href.png" scale="23" placement="inline"/>

</fig></entry>

<entry><p>A non-focusable item.</p></entry>

</row>

<row>

<entry><p>Tabs in the <xref href="GUID-76FD2A71-E8A3-4C82-9704-3F7F6AD4DFD8.dita">Navi

pane</xref></p></entry>

<entry><fig id="GUID-F16305FA-14A3-4252-A1D8-A30E078D5CD2-GENID-1-7-1-6-1-1-4-2-1-3-1-2-1-1-5-21-2-1">

<image href="GUID-0B647098-CCD8-4E9C-A07F-9A9E2346CA23_d0e71365_href.png" scale="23" placement="inline"/>

</fig></entry>

<entry><p>A non-focusable item. One tap to activate.</p></entry>

</row>

<row>

<entry><p><xref href="GUID-771AF721-E2D7-41C8-BF97-5BD30D1A28AD.dita">Status pane</xref></p> 

             <ul>

<li>                   <p><xref href="GUID-66EFFCF5-581A-4EE7-B784-8087A1081B6D.dita">Title

pane</xref></p>                 </li>

<li>                   <p><xref href="GUID-76FD2A71-E8A3-4C82-9704-3F7F6AD4DFD8.dita">Navi

pane</xref></p>                 </li>

<li>                   <p><xref href="GUID-A947B5A8-9138-4FA2-B8D8-2850AEB2F38C.dita">Battery

pane</xref></p>                 </li>

<li>                   <p><xref href="GUID-314B1556-5CB5-4BCC-93C0-B22DB849D2D5.dita">Universal

indicator pane</xref></p>                 </li>

<li>                   <p><xref href="GUID-DF3F2FD0-FF68-4CEF-843F-CBC9E84F3A7F.dita">Signal

pane</xref></p>                 </li>

</ul></entry>

<entry><fig id="GUID-DB24556D-1254-425A-B5ED-2C76E50B7735-GENID-1-7-1-6-1-1-4-2-1-3-1-2-1-1-5-22-2-1">

<image href="GUID-22BE45B9-7788-41B5-9E81-E0420CB956C7_d0e71421_href.png" scale="23" placement="inline"/>

</fig></entry>

<entry><p>Non-focusable items. A single tap activates the functionality if

the sub-pane has one (the signal and battery panes are inactive).</p></entry>

</row>

<row>

<entry><p><xref href="GUID-60B979FB-43BD-480E-8E17-1D3DA2002CB1.dita"><b>Slider

pop-up</b></xref></p><ul>

<li><p><xref href="CB163645-CB5E-4DB5-9830-B97D12FDCBF5.dita">Volume Controller</xref></p></li>

</ul></entry>

<entry><fig id="GUID-EB3D6B8C-D64E-4814-BA38-882CE2103BD1">

<image href="GUID-21F0026B-58EF-4E19-834D-C3C08BB89CB1_d0e71447_href.png" placement="inline"/>

</fig></entry>

<entry><p>Draggable slider thumb. Icons can set as tappable. </p><ul>

<li><p>Volume slider thumb is draggable, and muting can be done directly by

tapping the speaker icon.</p></li>

</ul></entry>

</row>

<row>

<entry><p><xref href="GUID-EC98E7E0-872D-467D-BDC8-6471F6165705.dita">Universal

indicator pop-up</xref></p></entry>

<entry><fig id="GUID-01050257-59D4-4224-8756-22F9524B94AB">

<image href="GUID-8C0900A8-1783-4C34-9ABD-27DC92D0AD4A_d0e71471_href.png" placement="inline"/>

</fig></entry>

<entry><p>Tapping the link performs the application-specific functionality.

Most commonly, opens the application. Tapping the description text without

the link functionality is inactive.</p></entry>

</row>

</tbody>

</tgroup>