|
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-60B979FB-43BD-480E-8E17-1D3DA2002CB1" xml:lang="en"><title>Slider |
|
13 pop-up</title><prolog><metadata><keywords/></metadata></prolog><conbody> |
|
14 <p>The Slider pop-up component can be used for situations where a value is |
|
15 changed with a slider, for example when changing zoom or volume level. The |
|
16 common Slider pop-up component has a set of elements from which to select |
|
17 and modify the slider in question, for example, value ranges, whether to have |
|
18 current value as text included, or additional icons related to the slider.</p> |
|
19 <p>For application specific slider pop-up the application may define ways |
|
20 to open the pop-up. For common pop-up such as Volume Control, ways to open |
|
21 the pop-up are defined. The Slider pop-up has default time-out after which |
|
22 it disappears, but for good reason this time-out can be overridden by the |
|
23 application. </p> |
|
24 <p>Instead of using the pop-up, the application may define the slider to be |
|
25 always visible (fixed in the layout). If slider is fixed in the layout, the |
|
26 pop-up is not shown.</p> |
|
27 <p>The orientation of the slider pop-up can be either horizontal or vertical. |
|
28 The orientation and location are always the same across applications, unless |
|
29 application uses the slider as fixed in the layout. Value growth direction |
|
30 in Slider is always either up or right depending on the Slider orientation |
|
31 in the UI. </p> |
|
32 <table id="GUID-7A441CF1-6B7B-43EF-9E31-AF45034B49FB"><title>Default touch |
|
33 events for the Slider pop-up</title> |
|
34 <tgroup cols="3"><colspec colname="col1" colwidth="0.80*"/><colspec colname="col2" colwidth="1.01*"/><colspec colname="col3" colwidth="1.19*"/> |
|
35 <thead> |
|
36 <row> |
|
37 <entry valign="top"><p>User action</p></entry> |
|
38 <entry valign="top"><p>State change</p></entry> |
|
39 <entry valign="top"><p>Feedback</p></entry> |
|
40 </row> |
|
41 </thead> |
|
42 <tbody> |
|
43 <row> |
|
44 <entry><p>Touch down (on slider)</p></entry> |
|
45 <entry><p>Slider thumb is moved to the nearest slider step position on the |
|
46 slider. Value is changed accordingly.</p><p>If touch down event is performed |
|
47 in the middle of two slider step positions, the slider thumb is moved towards |
|
48 the greater (larger) value.</p></entry> |
|
49 <entry><p>Tactile: No touch down effect. Sensitive slider effect and audio |
|
50 feedback is provided when the thumb moves.</p></entry> |
|
51 </row> |
|
52 <row> |
|
53 <entry><p>Touch down (on slider thumb)</p></entry> |
|
54 <entry><p>Slider thumb is activated and can be moved.</p></entry> |
|
55 <entry><p>Tactile: Sensitive slider effect is provided with touch down.</p></entry> |
|
56 </row> |
|
57 <row> |
|
58 <entry><p>Touch release</p></entry> |
|
59 <entry><p>No effect</p></entry> |
|
60 <entry><p>Tactile: Sensitive slider effect is provided with the touch release |
|
61 (on slider thumb).</p></entry> |
|
62 </row> |
|
63 <row> |
|
64 <entry><p>Touch down and hold (on slider)</p></entry> |
|
65 <entry><p>Moves the thumb step by step to the place where touched down.</p></entry> |
|
66 <entry><p>Tactile: Hold slider effect is given with long touch on the slider. |
|
67 Effect is bound to the steps. If there are more than 15 steps, then smooth |
|
68 slider effect is given instead.</p></entry> |
|
69 </row> |
|
70 <row> |
|
71 <entry><p>Touch down and hold (on slider thumb)</p></entry> |
|
72 <entry><p>Inactive</p></entry> |
|
73 <entry><p>Tactile: No effect</p></entry> |
|
74 </row> |
|
75 <row> |
|
76 <entry><p>Touch down and move</p></entry> |
|
77 <entry><p>Slider thumb is moved along with the touch event. It moves step |
|
78 by step via its possible positions. Value is changing accordingly. </p><p>If |
|
79 touch release in the middle of two slider step positions, the slider thumb |
|
80 is moved towards the greater (larger) value. </p><p><note>The slider control |
|
81 area is the entire main pane area.</note></p></entry> |
|
82 <entry><p>Tactile: Smooth slider effect is provide when dragging from the |
|
83 thumb. </p><p>Smooth feedback can be increasing and decreasing when there |
|
84 is a meaning to use this kind of feature, for example, in volume and zoom |
|
85 slider.</p></entry> |
|
86 </row> |
|
87 <row> |
|
88 <entry><p>Touch down and cancel (slider thumb)</p></entry> |
|
89 <entry><p>Slider thumb is moved to the nearest slider step position where |
|
90 it was when the touch left the slider control area.</p></entry> |
|
91 <entry><p>Tactile: No feedback is provide with touch release after drag outside.</p></entry> |
|
92 </row> |
|
93 </tbody> |
|
94 </tgroup> |
|
95 </table> |
|
96 <p/> |
|
97 <table id="GUID-905C951F-5C5D-431E-84E9-384EFDBE3192"><title>Default touch |
|
98 events for the Minus / Plus indicators.</title> |
|
99 <tgroup cols="3"><colspec colname="col1" colwidth="0.80*"/><colspec colname="col2" colwidth="1.01*"/><colspec colname="col3" colwidth="1.19*"/> |
|
100 <thead> |
|
101 <row> |
|
102 <entry valign="top"><p>User action</p></entry> |
|
103 <entry valign="top"><p>State change</p></entry> |
|
104 <entry valign="top"><p>Feedback</p></entry> |
|
105 </row> |
|
106 </thead> |
|
107 <tbody> |
|
108 <row> |
|
109 <entry><p>Touch down</p></entry> |
|
110 <entry><p>Slider thumb moves either up or down. Direction depends on which |
|
111 indicator has been touched.</p></entry> |
|
112 <entry><p>Tactile: Sensitive button effect and audio feedback is provided |
|
113 with the touch down event.</p></entry> |
|
114 </row> |
|
115 <row> |
|
116 <entry><p>Touch down and hold (keep touch down)</p></entry> |
|
117 <entry><p>This action performs a “key repeat”, similar to many single touch |
|
118 down and release on the indicator.</p></entry> |
|
119 <entry><p>Tactile: Sensitive button effect provided with steps.</p></entry> |
|
120 </row> |
|
121 <row> |
|
122 <entry><p>Touch release</p></entry> |
|
123 <entry><p>Slider thumb stops in its position</p></entry> |
|
124 <entry><p>Tactile: Sensitive button effect given with touch release event.</p></entry> |
|
125 </row> |
|
126 <row> |
|
127 <entry><p>Touch down and move outside and release the control area</p></entry> |
|
128 <entry><p>Slider’s thumb remains in the position, where it was, before moving |
|
129 out of both pop-up and indicator area.</p></entry> |
|
130 <entry><p>Tactile: No effect</p></entry> |
|
131 </row> |
|
132 </tbody> |
|
133 </tgroup> |
|
134 </table> |
|
135 <section id="GUID-1B1C405D-61EF-4E54-8704-23EA67FEC11A"><title>Using |
|
136 slider pop-ups in C++ applications</title><p>The API to use for the slider |
|
137 pop-up is the Slider API.</p><p>To use a slider pop-up in your application, |
|
138 create an instance of the class <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknSlider.html" format="application/java-archive"><codeph>CAknSlider</codeph></xref>.</p><p>Use the method <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknSlider.html#522ccd7bdb0fac6707734578e2d4ed7b" format="application/java-archive"><codeph>CAknSlider::SetValueL()</codeph></xref> to set the slider handle's position. |
|
139 To set the range of acceptable values, use the method <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknSlider.html#e6e3b16a15f653eb9fc5b207f7852857" format="application/java-archive"><codeph>CAknSlider::SetRange()</codeph></xref>. To set the step size, use |
|
140 the method <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknSlider.html#f72ea3d251c686948dfea1dbcf9be170" format="application/java-archive"><codeph>CAknSlider::SetStepSize()</codeph></xref>.</p><p>To set the texts for the minimum and maximum values, use the |
|
141 methods <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknSlider.html#0359150c9fd3d2390de7c0dd6f7d6063" format="application/java-archive"><codeph>CAknSlider::SetMinimumTextL()</codeph></xref> and <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknSlider.html#882ca8ea40249fd2636748a116370fed" format="application/java-archive"><codeph>CAknSlider::SetMaximumTextL()</codeph></xref>. </p><p>To enable drag events in the slider, use the method <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknSlider.html#a3db99850ff68e4a80071de18befdcd1" format="application/java-archive"><codeph>CAknSlider::EnableDrag()</codeph></xref></p><p>To use a custom graphic in your slider component, use the method <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknSlider.html#6161f69289ee1c7e0f47de8fee21ecee" format="application/java-archive"><codeph>CAknSlider::SetGraphics()</codeph></xref>.</p></section> |
|
142 </conbody></concept> |