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-72DE3EB1-1AF5-4157-8B99-A1C7143DAD2C" xml:lang="en"><title>Navigation |
|
13 using tabs</title><prolog><metadata><keywords/></metadata></prolog><conbody> |
|
14 <p>The Symbian user interface uses the tab metaphor that allows combining |
|
15 several pages of related information into a single state when all of it would |
|
16 not fit into a single screen or list. The user can switch the tabs using the |
|
17 Arrow left and Arrow right keys as indicated in the <xref href="GUID-76FD2A71-E8A3-4C82-9704-3F7F6AD4DFD8.dita">Navi |
|
18 pane</xref>.</p> |
|
19 <fig id="GUID-A8BCDBF4-9FFE-46C7-BDB7-4A3556BB41B5"> |
|
20 <title>Navigation using tabs</title> |
|
21 <image href="GUID-77AD4D8C-08CA-45C4-B5E7-04B4C7958A1A_d0e81736_href.png" scale="70" placement="inline"/> |
|
22 </fig> |
|
23 <p>In this example, state 1-3 uses two tabs to present its information. The |
|
24 user moves between views 1-3a and 1-3b using the Arrow left and Arrow right |
|
25 keys. Note that there is no Back function moving between the tab views; Back |
|
26 from both of them leads to state 1.</p> |
|
27 <p>Tab-controlled views apply the following rules:</p> |
|
28 <ul> |
|
29 <li><p>A list view from which each of the tabbed views can be accessed should |
|
30 precede the tabbed views one level higher. </p></li> |
|
31 <li><p>Moving from one tab view to another has no effect on the function of |
|
32 the Back softkey in these views: from all of them, the Back function leads |
|
33 to the same place, the previous level in the application. In this respect, |
|
34 tabbed views are interpreted as one state in the application. </p></li> |
|
35 <li><p>When a state has tabbed views, one of them is the default view that |
|
36 is opened when the user enters the state from the previous level. </p></li> |
|
37 <li><p>When the user has proceeded from a tabbed view into a deeper hierarchy |
|
38 level, the Back function returns to the same tabbed view where the user came |
|
39 from (which is not necessarily the default view described in the previous |
|
40 bullet). </p></li> |
|
41 <li><p>The possibilities to go forward from tab views may differ from one |
|
42 view to another (although typically they are similar). This means that one |
|
43 tab view may have other functions available to the user than another tab view |
|
44 in the same state.</p></li> |
|
45 </ul> |
|
46 <fig id="GUID-96783EEE-47E3-4896-87A6-3283DFF0B5B9"> |
|
47 <title> Touch interaction model for tabs</title> |
|
48 <image href="GUID-DD263BCA-B660-49A5-BB65-8C45035002BD_d0e81773_href.png" placement="inline"/> |
|
49 </fig> |
|
50 <table id="GUID-5B8DA500-4092-4E1A-A035-308C4D352138-GENID-1-8-1-6-1-1-7-1-5-1-1-5-1-2-7"><title>Default touch |
|
51 events for tabs</title> |
|
52 <tgroup cols="3"> |
|
53 |
|
54 <colspec colname="col1" colwidth="0.80*"/><colspec colname="col2" colwidth="1.01*"/> |
|
55 <colspec colname="col3" colwidth="1.19*"/> |
|
56 <thead> |
|
57 <row> |
|
58 <entry valign="top"><p>User action</p></entry> |
|
59 <entry valign="top"><p>State change</p></entry> |
|
60 <entry valign="top"><p>Feedback</p></entry> |
|
61 </row> |
|
62 </thead> |
|
63 <tbody> |
|
64 <row> |
|
65 |
|
66 <entry><p>Touch down on a tab</p></entry> |
|
67 <entry><p>No change</p></entry> |
|
68 <entry><p>Highlight is shown. </p><p>Tactile: Basic tab effect and audio feedback |
|
69 are provided with touch down event.</p></entry> |
|
70 </row> |
|
71 <row> |
|
72 <entry><p>Touch down and hold on a tab</p></entry> |
|
73 <entry><p>Inactive</p></entry> |
|
74 <entry><p>Tactile: No effect</p></entry> |
|
75 </row> |
|
76 <row> |
|
77 <entry><p>Touch release on a tab</p></entry> |
|
78 <entry><p>Corresponding view is changed.</p><p>Activated tab moves to the |
|
79 middle of the tab view (all the tabs move along) unless it is the first or |
|
80 the last tab in the application.</p></entry> |
|
81 <entry><p>Highlight disappears </p><p>Tactile: Basic tab effect is provided |
|
82 with touch release event.</p></entry> |
|
83 </row> |
|
84 <row> |
|
85 <entry><p>Touch down and move horizontally on tab area and release</p></entry> |
|
86 <entry><p>Previous or next tab is opened</p></entry> |
|
87 <entry><p>Tactile: Basic tab effect and audio feedback are provided with touch |
|
88 down event.</p></entry> |
|
89 </row> |
|
90 </tbody> |
|
91 </tgroup> |
|
92 </table> |
|
93 <section id="GUID-33374D49-BB50-493C-ACD6-46BC454122B7"><title>Using |
|
94 tabs in C++ applications</title><p>The API to use for tabs is the <xref format="html" href="specs/guides/Tabs_API_Specification/Tabs_API_Specification.html" scope="peer">Tabs |
|
95 API</xref>. For implementation information, see <xref format="html" href="specs/guides/Tabs_API_Specification/Tabs_API_Specification.html#Tabs_API_Specification.topic3" scope="peer">Using the Tabs API</xref>.</p></section> |
|
96 </conbody></concept> |
|