|
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-11C24609-3B6D-4B44-B003-FB0C07444A9E" xml:lang="en"><title>Scrollbars</title><prolog><metadata><keywords/></metadata></prolog><conbody> |
|
13 <p>With any list, grid or other component that can be scrolled vertically, |
|
14 a scrollbar appears on the right-hand side of the component. The scrollbar |
|
15 is displayed also on pop-up components.</p> |
|
16 <fig id="GUID-1C685A4B-F3EF-4A43-9233-E84C67FD74F4"> |
|
17 <title>Scroll pane with scrollbar</title> |
|
18 <image href="GUID-3382507E-1B21-418C-A908-DD3F688C0672_d0e73223_href.png" placement="inline"/> |
|
19 </fig> |
|
20 <ul> |
|
21 <li><p>The placement of the scroll handle on the scrollbar reflects the position |
|
22 of the focus on the scrolling content.</p></li> |
|
23 <li><p>The size of the scroll handle reflects the number of displayed items |
|
24 relative to the total number of items on the scrolled component.</p></li> |
|
25 <li><p>The scrollbar is displayed even when all items on the component can |
|
26 be displayed in the same view without scrolling. When this is the case, the |
|
27 scroll handle is displayed at the maximum size. The only exception is the |
|
28 Application Shell, where scrollbar is not displayed if all items fit the same |
|
29 view.</p></li> |
|
30 </ul> |
|
31 <section id="GUID-054FE843-7681-40D9-ACA7-47122BC3107B"><title>Scrollbars |
|
32 in Touch UI</title><p>In touch devices based on the Symbian platform, scrollbars |
|
33 (vertical and horizontal) have a touch-enabled scroll box. The hardware keys |
|
34 (Arrow keys) can also be used for scrolling when the scrollbars are visible. |
|
35 The scrolling movement on the screen is smooth.</p><p>For the scrollbar to |
|
36 be more usable with touch, the actual scrollbar area is wider than the visible |
|
37 scrollbar. When the user scrolls, the scrollbar has a related effect to indicate |
|
38 the scrolling. Because the actual area of scrollbar is wider, the items appearing |
|
39 on that area in scrollable list, grids, viewers cannot be touch-enabled, for |
|
40 example,list icons in column D cannot be tapped.</p><table id="GUID-96CBFEBF-601B-4686-85B2-7E634AB1F1B2"> |
|
41 <title>Default control events for scrollbar.</title> |
|
42 <tgroup cols="3"><colspec colname="col1" colwidth="0.80*"/><colspec colname="col2" colwidth="1.01*"/><colspec colname="col3" colwidth="1.19*"/> |
|
43 <thead> |
|
44 <row> |
|
45 <entry valign="top"><p>User action</p></entry> |
|
46 <entry valign="top"><p>State change</p></entry> |
|
47 <entry valign="top"><p>Feedback</p></entry> |
|
48 </row> |
|
49 </thead> |
|
50 <tbody> |
|
51 <row> |
|
52 <entry><p>Touch down on a scrollbar, no thumb</p></entry> |
|
53 <entry><p>Scrolling is activated when there is a scrollbar under the touch |
|
54 event. Scrollbar thumb is moved towards the touch down position on the scroll |
|
55 bar. Scrolling is done for a page at a time.</p></entry> |
|
56 <entry><p>Scrollbar color is changed to indicate that the scrollbar has the |
|
57 control.</p><p>Tactile: <ul> |
|
58 <li>No feedback is provided when touch down on a scrollbar and no thumb is |
|
59 used. </li> |
|
60 <li><p>Sensitive slider effect and audio feedback given when thumb is moved |
|
61 towards the touch down position.</p></li> |
|
62 <li><p>No feedback is provided with touch release.</p></li> |
|
63 </ul> </p></entry> |
|
64 </row> |
|
65 <row> |
|
66 <entry><p>Touch down on a scrollbar thumb</p></entry> |
|
67 <entry><p>Scrollbar thumb can be moved in desired direction. Scrollbar thumb |
|
68 color is changed as an indication to the users that scrolling can be performed.</p></entry> |
|
69 <entry><p>Scrollbar thumb color is changed to indicate scrolling activation.</p><p>Tactile: |
|
70 Sensitive slider effect and audio feedback provided with touch down and release |
|
71 events.</p></entry> |
|
72 </row> |
|
73 <row> |
|
74 <entry><p>Touch down and hold scrollbar, no thumb</p></entry> |
|
75 <entry><p>This action performs a “key repeat”. The scrollbar thumb is moved |
|
76 towards the touch down position</p></entry> |
|
77 <entry><p>Tactile: Sensitive slider effect and audio feedback provided with |
|
78 touch down and with steps.</p></entry> |
|
79 </row> |
|
80 <row> |
|
81 <entry><p>Touch down and move</p></entry> |
|
82 <entry><p>Scrollbar thumb is moved along with the touch event.</p><p>Touch |
|
83 down on scrollbar thumb, dragging and touch release are performed on the scrollbar |
|
84 control area.</p></entry> |
|
85 <entry><p>Tactile: <ul> |
|
86 <li><p>Sensitive slider effect and audio feedback provided with touch down |
|
87 event.</p></li> |
|
88 <li><p>Smooth slider effect provided with the drag event.</p></li> |
|
89 <li><p>Sensitive slider effect provided with touch release.</p></li> |
|
90 </ul> </p></entry> |
|
91 </row> |
|
92 <row> |
|
93 <entry><p>Touch down on scrollbar thumb and move outside the scrollbar control |
|
94 area</p></entry> |
|
95 <entry><p>Scrollbar thumb remains in the position where it was when the finger |
|
96 left the scrollbar control area.</p><p>If the user moves the touch outside |
|
97 the scrollbar control area and back, the thumb will continue to move along |
|
98 with the touch event.</p><p>After touch down on scrollbar thumb, touch is |
|
99 dragged out from the scrollbar control area, without releasing the touch.</p></entry> |
|
100 <entry><p>Tactile: Sensitive slider effect and audio feedback provided with |
|
101 touch down. No feedback is provided if the thumb is not moving. If the thumb |
|
102 moves, smooth slide feedback provided.</p><p><note>If touch release happens |
|
103 outside the scrollbar, no feedback is provided.</note></p></entry> |
|
104 </row> |
|
105 </tbody> |
|
106 </tgroup> |
|
107 </table></section> |
|
108 <section id="GUID-87093F25-CFC3-4D71-A5EF-006C6425C65D"><title>Using |
|
109 scrollbars in C++ applications</title><p>The API to use for creating the scrollbar |
|
110 component is the <xref format="html" href="specs/guides/Scroller_API_Specification/Scroller_API_Specification.html" scope="peer">Scroller API</xref>.</p><p>To use a scrollbar in your application, |
|
111 first create a scrollbar frame using the class <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCEikScrollBarFrame.html" format="application/java-archive"><codeph>CEikScrollbarFrame</codeph></xref>. All scrollbar operations are executed via this scrollbar frame. |
|
112 These operations include creating and destroying the scrollbar, setting its |
|
113 visibility, and adjusting the scrollbar's model. The scrollbar itself can |
|
114 be created using the method <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCEikScrollBarFrame.html#81980f8db36253fc89fb7ebbfa316b4d" format="application/java-archive"><codeph>CreateDoubleSpanScrollBarsL()</codeph></xref> in the class <codeph>CEikScrollBarFrame</codeph>. |
|
115 The class for the scrollbar is <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknDoubleSpanScrollBar.html" format="application/java-archive"><codeph>CAknDoubleSpanScrollBar</codeph></xref>. For implementation information, see <xref format="html" href="specs/guides/Scroller_API_Specification/Scroller_API_Specification.html#Scroller_API_Specification.topic3.1" scope="peer">Creating a scrollbar</xref>.</p><p>Scrollbar models encapsulate |
|
116 the range of integers which a scrollbar can represent, from zero to n, and |
|
117 the current position of the scrollbar thumb within that range. To set the |
|
118 scrollbar model, use the class <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classTAknDoubleSpanScrollBarModel.html" format="application/java-archive"><codeph>TAknDoubleSpanScrollbarModel</codeph></xref>. For information on updating the scrollbar's position and size using |
|
119 the scrollbar model, see <xref format="html" href="specs/guides/Scroller_API_Specification/Scroller_API_Specification.html#Scroller_API_Specification.topic3.2" scope="peer">Updating ArrowHead scrollbar attributes</xref> and <xref format="html" href="specs/guides/Scroller_API_Specification/Scroller_API_Specification.html#Scroller_API_Specification.topic3.3" scope="peer">Updating DoubleSpan scrollbar attributes</xref>.</p><p>You can |
|
120 control the scrollbar visibility using the method <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCEikScrollBarFrame.html#63d2cba6f1261f9c56dd7a98499fceda" format="application/java-archive"><codeph>SetScrollbarVisibilityL()</codeph></xref> in the class <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCEikScrollBarFrame.html" format="application/java-archive"><codeph>CEikScrollbarFrame</codeph></xref>.</p><p>To observed scrollbar events, |
|
121 use the class <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classMEikScrollBarObserver.html" format="application/java-archive"><codeph>MEikScrollbarObserver</codeph></xref>. For implementation information, see <xref format="html" href="specs/guides/Scroller_API_Specification/Scroller_API_Specification.html.dita#specs/guides/Scroller_API_Specification/Scroller_API_Specification.html/Scroller_API_Specification.topic3.4">Observing scrollbar events</xref>.</p></section> |
|
122 </conbody></concept> |