2 <!-- Copyright (c) 2007-2010 Nokia Corporation and/or its subsidiary(-ies) All rights reserved. --> |
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 |
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, |
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". --> |
5 and is available at the URL "http://www.eclipse.org/legal/epl-v10.html". --> |
6 <!-- Initial Contributors: |
6 <!-- Initial Contributors: |
7 Nokia Corporation - initial contribution. |
7 Nokia Corporation - initial contribution. |
8 Contributors: |
8 Contributors: |
9 --> <!DOCTYPE concept PUBLIC "-//OASIS//DTD DITA Concept//EN" "concept.dtd"><concept id="GUID-76FD2A71-E8A3-4C82-9704-3F7F6AD4DFD8" xml:lang="en"><title>Navi pane</title><prolog><metadata><keywords></keywords></metadata></prolog><conbody> |
9 --> |
|
10 <!DOCTYPE concept |
|
11 PUBLIC "-//OASIS//DTD DITA Concept//EN" "concept.dtd"> |
|
12 <concept id="GUID-76FD2A71-E8A3-4C82-9704-3F7F6AD4DFD8" xml:lang="en"><title>Navi |
|
13 pane</title><prolog><metadata><keywords/></metadata></prolog><conbody> |
10 <p>The principal uses of the Navi pane are to display information about the |
14 <p>The principal uses of the Navi pane are to display information about the |
11 current state and view, and to help the user to navigate in the application.</p> |
15 current state and view, and to help the user to navigate in the application.</p> |
12 <fig id="GUID-1F8587D9-3439-4AD6-8687-3B4D9ADF27AB"> |
16 <fig id="GUID-3E3F8A70-C0EB-4B17-AB6D-7374FBF8B453"> |
13 <title>Navi pane</title> |
17 <title>Navi pane</title> |
14 <image href="GUID-876EE000-01B7-4457-AE9C-CE56E48CFF11_d0e78276_href.png" scale="40" placement="inline"></image> |
18 <image href="GUID-EDBCCC26-BA4D-4318-9F0D-62272FA97BBF_d0e100338_href.png" placement="inline"/> |
15 </fig> |
19 </fig> |
16 <p>Depending on the context, the Navi pane contains elements presented in |
20 <p>Depending on the context, the Navi pane contains elements presented in |
17 the following table.</p> |
21 the following table.</p> |
18 <table id="GUID-8F674003-C512-4E42-BB7E-85A55F93E3BB"><title>Possible Navi |
22 <table id="GUID-8F674003-C512-4E42-BB7E-85A55F93E3BB"><title>Possible Navi |
19 pane content</title> |
23 pane content</title> |
20 <tgroup cols="2"><colspec colname="col1"></colspec><colspec colname="col2"></colspec> |
24 <tgroup cols="2"><colspec colname="col1"/><colspec colname="col2"/> |
21 <thead> |
25 <thead> |
22 <row> |
26 <row> |
23 <entry>Component</entry> |
27 <entry>Component</entry> |
24 <entry>Description</entry> |
28 <entry>Description</entry> |
25 </row> |
29 </row> |
26 </thead> |
30 </thead> |
27 <tbody> |
31 <tbody> |
28 <row> |
32 <row> |
29 <entry><p>Tabs</p><fig id="GUID-2CBA76C9-3918-40C7-889B-BC5181B34955"></fig></entry> |
33 <entry><p>Tabs</p><fig id="GUID-2CBA76C9-3918-40C7-889B-BC5181B34955"/></entry> |
30 <entry><p>Tabs are used to view parallel data views alternatively. Arrow indicators |
34 <entry><p>Tabs are used to view parallel data views alternatively. Arrow indicators |
31 are shown at both ends of the pane when there are further tabs to scroll in |
35 are shown at both ends of the pane when there are further tabs to scroll in |
32 the corresponding direction. Each tab has either a graphic or a text (or both) |
36 the corresponding direction. Each tab has either a graphic or a text (or both) |
33 as a label. The following tab layouts can be used: <ul> |
37 as a label. The following tab layouts can be used: <ul> |
34 <li><p>Two tabs</p></li> |
38 <li><p>Two tabs</p></li> |
37 <li><p>Two long tabs</p></li> |
41 <li><p>Two long tabs</p></li> |
38 <li> <p>Three long tabs (stacked so that only one is fully visible at a time)</p></li> |
42 <li> <p>Three long tabs (stacked so that only one is fully visible at a time)</p></li> |
39 </ul>The currently active tab is highlighted.</p><p>More than four tabs can |
43 </ul>The currently active tab is highlighted.</p><p>More than four tabs can |
40 exist simultaneously. They can be scrolled horizontally. However, as a design |
44 exist simultaneously. They can be scrolled horizontally. However, as a design |
41 guideline, the number of tabs should be kept small (the maximum of six tabs |
45 guideline, the number of tabs should be kept small (the maximum of six tabs |
42 is recommended), and the number should not be dynamic. See <xref href="GUID-72DE3EB1-1AF5-4157-8B99-A1C7143DAD2C.dita"></xref> for |
46 is recommended), and the number should not be dynamic. See <xref href="GUID-72DE3EB1-1AF5-4157-8B99-A1C7143DAD2C.dita">Navigation |
|
47 using tabs</xref> for |
43 a description of the effect of tabs on the navigation within an application.</p></entry> |
48 a description of the effect of tabs on the navigation within an application.</p></entry> |
44 </row> |
49 </row> |
45 <row> |
50 <row> |
46 <entry><p>Navigation text (icon+text)</p><fig id="GUID-B2C30B15-0343-4430-8535-05C8BAAB1B7B"> |
51 <entry><p>Navigation text (icon+text)</p><fig id="GUID-B2C30B15-0343-4430-8535-05C8BAAB1B7B"> |
47 <image href="GUID-6FE79448-5052-46F9-A74E-A128CB367697_d0e78352_href.png" scale="30" placement="inline"></image> |
52 <image href="GUID-6FE79448-5052-46F9-A74E-A128CB367697_d0e100414_href.png" scale="30" placement="inline"/> |
48 </fig></entry> |
53 </fig></entry> |
49 <entry><p>Navigation text is displayed in the <uicontrol>Navi pane</uicontrol> when |
54 <entry><p>Navigation text is displayed in the <uicontrol>Navi pane</uicontrol> when |
50 similar items can be browsed by scrolling horizontally, such as dates in Calendar. |
55 similar items can be browsed by scrolling horizontally, such as dates in Calendar. |
51 Arrow indicators at both ends of the pane indicate the possibility to scroll.</p></entry> |
56 Arrow indicators at both ends of the pane indicate the possibility to scroll.</p></entry> |
52 </row> |
57 </row> |
53 <row> |
58 <row> |
54 <entry><p>Indicators</p><fig id="GUID-89499CD6-C3C5-4BD5-964A-02ADD8A30116"> |
59 <entry><p>Indicators</p><fig id="GUID-89499CD6-C3C5-4BD5-964A-02ADD8A30116"> |
55 <image href="GUID-03A3E872-8183-4F56-976E-A6AF435742C6_d0e78370_href.png" scale="30" placement="inline"></image> |
60 <image href="GUID-03A3E872-8183-4F56-976E-A6AF435742C6_d0e100432_href.png" scale="30" placement="inline"/> |
56 </fig></entry> |
61 </fig></entry> |
57 <entry><p>In editors, the <uicontrol>Navi pane</uicontrol> contains editing |
62 <entry><p>In editors, the <uicontrol>Navi pane</uicontrol> contains editing |
58 indicators. See <xref href="GUID-BA8806CC-BE7C-4927-ACF6-DA0CB6E96AAA.dita">Indicators</xref> for |
63 indicators. See <xref href="GUID-BA8806CC-BE7C-4927-ACF6-DA0CB6E96AAA.dita">Indicators</xref> for |
59 a more detailed description of the <uicontrol>Navi pane</uicontrol> indicators.</p></entry> |
64 a more detailed description of the <uicontrol>Navi pane</uicontrol> indicators.</p></entry> |
60 </row> |
65 </row> |
61 <row> |
66 <row> |
62 <entry><p>Folder structure indication</p><fig id="GUID-274C1478-A141-4705-A6BF-E99703FE714D"> |
67 <entry><p>Folder structure indication</p><fig id="GUID-274C1478-A141-4705-A6BF-E99703FE714D"> |
63 <image href="GUID-257212F5-A414-4F17-A786-DB3168218139_d0e78393_href.png" scale="30" placement="inline"></image> |
68 <image href="GUID-257212F5-A414-4F17-A786-DB3168218139_d0e100455_href.png" scale="30" placement="inline"/> |
64 </fig></entry> |
69 </fig></entry> |
65 <entry><p>Opened subfolders are indicated in the <uicontrol>Navi pane</uicontrol>.</p></entry> |
70 <entry><p>Opened subfolders are indicated in the <uicontrol>Navi pane</uicontrol>.</p></entry> |
66 </row> |
71 </row> |
67 <row> |
72 <row> |
68 <entry><p>Application-specific content</p></entry> |
73 <entry><p>Application-specific content</p></entry> |
69 <entry><p>When none of the above content types is suitable, the <uicontrol>Navi |
74 <entry><p>When none of the above content types is suitable, the <uicontrol>Navi |
70 pane</uicontrol> content can be designed specifically for an application.</p></entry> |
75 pane</uicontrol> content can be designed specifically for an application.</p></entry> |
71 </row> |
76 </row> |
72 <row> |
77 <row> |
|
78 |
73 <entry><p>Empty pane</p><fig id="GUID-85A80F31-F9ED-4ECE-BAF0-5A2083CE578A"> |
79 <entry><p>Empty pane</p><fig id="GUID-85A80F31-F9ED-4ECE-BAF0-5A2083CE578A"> |
74 <image href="GUID-E64A8D76-28AD-4F75-9E92-3290488F85D9_d0e78425_href.png" scale="30" placement="inline"></image> |
80 <image href="GUID-E64A8D76-28AD-4F75-9E92-3290488F85D9_d0e100489_href.png" scale="30" placement="inline"/> |
75 </fig></entry> |
81 </fig></entry> |
76 <entry><p>The <uicontrol>Navi pane</uicontrol> can be empty.</p></entry> |
82 <entry><p>The <uicontrol>Navi pane</uicontrol> can be empty.</p></entry> |
77 </row> |
83 </row> |
78 </tbody> |
84 </tbody> |
79 </tgroup> |
85 </tgroup> |
80 </table> |
86 </table> |
81 <section><title>Using the navi pane in |
87 <p/> |
82 C++ applications</title><p>The API to use for the Navi pane is the Navigation pane API. If you use tabs in the Navi pane, the API for |
88 <table id="GUID-D5CFA14A-79F4-4E9C-A051-6588C7DDAC59"><title>Default touch |
83 controlling the tabs is the Tabs |
89 events for ungrouped soft notification</title> |
84 API.</p><p>For the indicators in the Navi pane, use the Indicators API.</p><p>For implementation information on the Navi pane, |
90 <tgroup cols="3"> |
85 see Using |
91 |
86 the Navigation pane API. For implementation information on tabs, see Using |
92 <colspec colname="col1" colwidth="0.80*"/><colspec colname="col2" colwidth="1.01*"/> |
87 the Tabs API.</p><p>The class <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classMAknNaviDecoratorObserver.html" format="application/java-archive"><codeph>MAknNaviDecoratorObserver</codeph></xref> provides touch support for the tab arrows in the Navi pane. To set |
93 <colspec colname="col3" colwidth="1.19*"/> |
88 the observer, use the method <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknNavigationDecorator.html#660e9ba08945b213aba477b7863873cc" format="application/java-archive"><codeph>CAknNavigationDecorator::SetNaviDecoratorObserver()</codeph></xref>.</p><p>To |
94 <thead> |
89 create a tab group in the Navi pane, use the method <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknNavigationControlContainer.html#93d16329080f21bcd8428db61f177abc" format="application/java-archive"><codeph>CreateTabGroupL()</codeph></xref> in the class <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknNavigationControlContainer.html" format="application/java-archive"><codeph>CAknNavigationControlContainer</codeph></xref>. This is a factory |
95 <row> |
|
96 <entry valign="top"><p>User action</p></entry> |
|
97 <entry valign="top"><p>State change</p></entry> |
|
98 <entry valign="top"><p>Feedback</p></entry> |
|
99 </row> |
|
100 </thead> |
|
101 <tbody> |
|
102 <row> |
|
103 <entry><p>Touch down on navigation text or navigation arrow</p></entry> |
|
104 <entry><p>Application specific</p></entry> |
|
105 <entry><p>Tactile: In case of activity, basic button effect and audio feedback |
|
106 is provided.</p></entry> |
|
107 </row> |
|
108 <row> |
|
109 <entry><p>Touch down and hold on navigation text</p></entry> |
|
110 <entry><p>Inactive</p></entry> |
|
111 <entry><p>Tactile: No effect</p></entry> |
|
112 </row> |
|
113 <row> |
|
114 <entry><p>Touch down and hold on arrows</p></entry> |
|
115 <entry><p>This action performs a “key repeat”, similar to many touch downs |
|
116 and releases on arrow</p></entry> |
|
117 <entry><p>Tactile: Sensitive button effect and audio feedback is provided |
|
118 with key repeat action.</p></entry> |
|
119 </row> |
|
120 <row> |
|
121 <entry><p>Touch release</p></entry> |
|
122 <entry><p>No effect</p></entry> |
|
123 <entry><p>Tactile: No effect</p></entry> |
|
124 </row> |
|
125 </tbody> |
|
126 </tgroup> |
|
127 </table> |
|
128 <section id="GUID-3E478FC5-080A-4EAF-98F4-B0C0F1C8E19D"><title>Using |
|
129 the navi pane in C++ applications</title><p>The API to use for the Navi pane |
|
130 is the <xref format="html" href="specs/guides/Navigation_Pane_API_Specification/Navigation_Pane_API_Specification.html" scope="peer">Navigation pane API</xref>. If you use tabs in the Navi pane, |
|
131 the API for controlling the tabs is the <xref format="html" href="specs/guides/Tabs_API_Specification/Tabs_API_Specification.html" scope="peer">Tabs API</xref>.</p><p>For the indicators in the Navi pane, use |
|
132 the Indicators API.</p><p>For implementation information on the Navi pane, |
|
133 see <xref format="html" href="specs/guides/Navigation_Pane_API_Specification/Navigation_Pane_API_Specification.html#Navigation_Pane_API_Specification.topic3" scope="peer">Using the Navigation pane API</xref>. For implementation information |
|
134 on tabs, 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><p>The class <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classMAknNaviDecoratorObserver.html" format="application/java-archive"><codeph>MAknNaviDecoratorObserver</codeph></xref> provides touch support |
|
135 for the tab arrows in the Navi pane. To set the observer, use the method <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknNavigationDecorator.html#660e9ba08945b213aba477b7863873cc" format="application/java-archive"><codeph>CAknNavigationDecorator::SetNaviDecoratorObserver()</codeph></xref>.</p><p>To create a tab group in the Navi pane, use the |
|
136 method <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknNavigationControlContainer.html#93d16329080f21bcd8428db61f177abc" format="application/java-archive"><codeph>CreateTabGroupL()</codeph></xref> in the class <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknNavigationControlContainer.html" format="application/java-archive"><codeph>CAknNavigationControlContainer</codeph></xref>. This is a factory |
90 method for a pre-implemented navigation pane tab group control.</p></section> |
137 method for a pre-implemented navigation pane tab group control.</p></section> |
91 </conbody></concept> |
138 </conbody></concept> |