|
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-EB212C35-5416-4CA7-8091-61B45D78E220" xml:lang="en"><title>Toolbar</title><prolog><metadata><keywords/></metadata></prolog><conbody> |
|
13 <p>The toolbar offers quick access to some of the key functions in the application |
|
14 view. All of the functions must also be found from the <uicontrol>Options</uicontrol> menu. </p> |
|
15 <fig id="GUID-8F4054B9-F6F6-4328-ACFF-459B03398FAC"> |
|
16 <title>Toolbar</title> |
|
17 <image href="GUID-2A4DED23-D0AB-436A-BCED-F0645FF05726_d0e71460_href.png" placement="inline"/> |
|
18 </fig> |
|
19 <p>A tooltip is an information pop-up containing information regarding each |
|
20 button must be shown.</p> |
|
21 <p>Following toolbar button types can be used:</p> |
|
22 <ul> |
|
23 <li><p><b>Command button</b> offering direct action (functions/view access) |
|
24 like <i>Send</i> or <i>New contact</i> with a button press feedback. Related |
|
25 tooltip indicates the function of the button. Command button may have a long |
|
26 press functionality included such as <i>Fast forward</i>.</p></li> |
|
27 <li><p><b>ON/OFF button</b> can be used for active/inactive type of functions |
|
28 such as <i>Loudspeaker</i> or<i> Font italics</i>. Button has related latched |
|
29 down effect. Button icon graphic and tooltip indicate the function of the |
|
30 button, and they stay the same regardless of the button state. No long tap |
|
31 allowed.</p></li> |
|
32 <li><p><b>Mode toggle button</b> can be used for switching between several |
|
33 modes as in <i>Flash</i>. Button icon graphic and tooltip change and should |
|
34 indicate the current status.</p></li> |
|
35 </ul> |
|
36 <p>Toolbar buttons are view specific, thus within one application some views |
|
37 may have toolbar and some do not. It is recommended though to keep the toolbars |
|
38 as consistent as possible within an application. Changing toolbar buttons |
|
39 within one view is not allowed, but button can be dimmed in case function |
|
40 is not available, for example, depending on focused item in the view or currently |
|
41 available services. Application may change the buttons according to product |
|
42 concept.</p> |
|
43 <p>The order of the toolbar buttons in different orientations is according |
|
44 to the reading direction the first item is placed topmost when the toolbar |
|
45 is vertical and leftmost when the toolbar is horizontal in western languages. |
|
46 The appearance of functions in Toolbar should follow the order presented below.</p> |
|
47 <table id="GUID-D8D1CBB2-C07E-43EA-80E5-9163865A0B2D"><title>Appearance order |
|
48 of toolbar functions</title> |
|
49 <tgroup cols="2"><colspec colname="col1"/><colspec colname="col2"/> |
|
50 <thead> |
|
51 <row> |
|
52 <entry>Function type</entry> |
|
53 <entry>Description</entry> |
|
54 </row> |
|
55 </thead> |
|
56 <tbody> |
|
57 <row> |
|
58 <entry>Call</entry> |
|
59 <entry>Call initiation related functions</entry> |
|
60 </row> |
|
61 <row> |
|
62 <entry>Reply</entry> |
|
63 <entry>Replying to a message</entry> |
|
64 </row> |
|
65 <row> |
|
66 <entry>Send</entry> |
|
67 <entry>For sending the content in focus</entry> |
|
68 </row> |
|
69 <row> |
|
70 <entry>Create new</entry> |
|
71 <entry>For creating a new message, note, folder, contact or some other item</entry> |
|
72 </row> |
|
73 <row> |
|
74 <entry>View switching</entry> |
|
75 <entry>For functions such as Go-to or View mode switching</entry> |
|
76 </row> |
|
77 <row> |
|
78 <entry>Editing</entry> |
|
79 <entry>For switching to editing mode</entry> |
|
80 </row> |
|
81 <row> |
|
82 <entry>Opening extension</entry> |
|
83 <entry>For opening the toolbar extension in case all the functions within |
|
84 the extension are a collection of options of similar type and can be grouped |
|
85 under one command, for example, Insert -extension for inserting image, video, |
|
86 presentation and so on. </entry> |
|
87 </row> |
|
88 <row> |
|
89 <entry>Delete</entry> |
|
90 <entry>Deleting the item in focus</entry> |
|
91 </row> |
|
92 <row> |
|
93 <entry>More -extension</entry> |
|
94 <entry>For opening the toolbar extension “More” in case the functions within |
|
95 the extension are various kinds and cannot be grouped.</entry> |
|
96 </row> |
|
97 </tbody> |
|
98 </tgroup> |
|
99 </table> |
|
100 <p>Application specific commands that do not fit into any function type described |
|
101 above are to be placed between Create new and Opening the extension in the |
|
102 order list.</p> |
|
103 <p>The application may decide the initial state of ON/OFF and Mode toggle |
|
104 button in application launch. They can also be reset or resumed from the previous |
|
105 session.</p> |
|
106 <fig id="GUID-2D9D4495-4AA3-4DA8-9AC7-B989189CD2F3"> |
|
107 <title>Toolbar button states: example of ON/OFF type of button</title> |
|
108 <image href="GUID-9E0C8892-E67F-4DC9-8253-2F65611AD4C6_d0e71631_href.png" scale="50" placement="inline"/> |
|
109 </fig> |
|
110 <section id="GUID-EC526E89-570D-4611-A44D-ABDA4918805E"><title>Floating toolbar</title><p>Floating |
|
111 toolbar is a component for showing the key functions on top of the Main pane |
|
112 or full screen content. It can be used in non-touch UI, but also in touch |
|
113 UI.</p><p>Floating toolbar owns the focus, and thus it can be used only if |
|
114 other content in the view does not need the focus. It means that floating |
|
115 toolbar cannot be used with lists and grids.</p><p>Opening and closing the |
|
116 floating toolbar can be done with the <uicontrol>Show toolbar</uicontrol> / <uicontrol>Hide |
|
117 toolbar</uicontrol> command via the Options menu. In this case the toolbar |
|
118 is open by default.</p><p>Floating toolbar can also be designed to be opened |
|
119 via MSK labeled as <uicontrol>Toolbar</uicontrol>. For closing the toolbar, |
|
120 there has to be then a <uicontrol>Hide</uicontrol> button or the toolbar is |
|
121 closed after selecting a function. Navigation keys can be used as a shortcut |
|
122 for opening and closing the toolbar, when not used for anything else in the |
|
123 view. Time-out can be used for closing the toolbar.</p><p>There |
|
124 can be 3-6 buttons in the floating toolbar depending on used resolution. Thus |
|
125 the most important functions must be designed to be the first ones in the |
|
126 toolbar; so that they are visible, for example, in case only three buttons |
|
127 fit the layout. </p><p>When the toolbar is open, it owns the Selection key |
|
128 for selecting the focused toolbar button. Toolbar does not own the right and |
|
129 left softkeys. The user can move the focus over the toolbar buttons with the |
|
130 Arrow keys (left and right). The focus loops, and the toolbar itself does |
|
131 not scroll.</p></section> |
|
132 <section id="GUID-2010D820-45FF-464A-8C11-34A657A566B3"><title>Floating toolbar |
|
133 extension</title><p>Toolbar button can be reserved for opening a toolbar extension, |
|
134 where more options can be found. Placement of the extension button within |
|
135 toolbar can be found from the appearance order in the table <xref href="GUID-EB212C35-5416-4CA7-8091-61B45D78E220.dita#GUID-EB212C35-5416-4CA7-8091-61B45D78E220/GUID-D8D1CBB2-C07E-43EA-80E5-9163865A0B2D">Appearance order of toolbar functions</xref>. The button has a default graphic, |
|
136 which the application can change if needed. </p><p>Toolbar extension buttons |
|
137 are for similar actions as buttons in toolbar, which means the same types |
|
138 and rules apply for toolbar extension buttons. Extension should be used for |
|
139 accessing a set of logically similar options, for example, when selecting |
|
140 content to be inserted to a message or for adjusting imaging session related |
|
141 values in camera. </p><p>Extension can have 2 – 12 buttons (3x4 in landscape |
|
142 and 4x3 in portrait). The filling order follows the grid filling rules, thus |
|
143 for example most important one should be placed as first. In floating toolbar |
|
144 extension, the last extension button is reserved for closing the toolbar. </p></section> |
|
145 <section id="GUID-6BFBE3CC-FE17-4F61-98A5-2E14EFEAD1E9"><title>Toolbar component |
|
146 in touch UI</title><p>In touch UI the toolbar is either fixed in the layout, |
|
147 or a floating component. Both toolbars cannot exist in one view.</p><p>Toolbars |
|
148 are view specific, thus all views of an application do not have to have a |
|
149 toolbar.</p><p>Selection in touch toolbars is done with a single tap, and |
|
150 related tooltip is shown with stylus down.</p></section> |
|
151 <section id="GUID-348E53C9-1F1D-42EC-8E0C-635CA18DB9D8"><title>Floating toolbar |
|
152 in touch UI</title><p>The number of floating toolbar buttons in the nHD (640 |
|
153 x 360 pixels) layout is three. In case floating toolbar is used in full screen, |
|
154 there can be four buttons. </p><p>Floating toolbar owns the focus also in |
|
155 touch UI, and thus cannot be used in views that have focus for main pane content.</p><p>Floating |
|
156 toolbar can be opened and closed as in non-touch UI via the Options menu or |
|
157 with the Selection key, or it can be opened by tapping the main pane area. |
|
158 In this case closing is done by tapping the main pane area again, with time-out |
|
159 or by selecting a function.</p></section> |
|
160 <section id="GUID-75A2EDF2-10D7-4CCC-A6AA-4B55BA21C46D"><title>Fixed toolbar |
|
161 in touch UI</title><p>The number of fixed toolbar buttons in the nHD (640 |
|
162 x 360 pixels) layout is three. It reserves own space from the layout and does |
|
163 not cover the content of main pane area. </p><p>Fixed toolbar does not have |
|
164 a highlight, and thus it can be used in all views (whether main pane needs |
|
165 the highlight or not).</p><p> Fixed toolbar cannot be opened or closed, but |
|
166 it is always visible. Toolbar can be hidden in case other controls are also |
|
167 hidden (in full screen views).</p><fig id="GUID-C5A359DF-1C8F-42D3-B86F-79A49EB97D70"> |
|
168 <title>Toolbar in touch UI fixed in the layout</title> |
|
169 <image href="GUID-05C87497-738B-473C-B5B2-BE46D32225F5_d0e71711_href.png" placement="inline"/> |
|
170 </fig></section> |
|
171 <section id="GUID-4BBFEE08-26AA-4F6E-B74A-F82BD75F3E59"><title>Toolbar extension |
|
172 in touch UI</title><p>As in non-touch UI, toolbars can have extensions also |
|
173 in touch UI. For floating toolbar in touch UI, the same rules apply as defined |
|
174 for floating toolbar extension in general. In touch UI, the toolbar extension |
|
175 can always be closed with the same toolbar button as it was opened, or by |
|
176 tapping outside the extension area. </p><p>In addition to general extension |
|
177 rules, the toolbar extension for fixed toolbar has certain specific guidelines. |
|
178 Besides buttons, the extension of fixed toolbar can include editor fields, |
|
179 for example, for entering an URL or for the Find function in the browser. |
|
180 The most important editor field is to be the topmost and has the cursor by |
|
181 default.</p><note> In case editor field(s) exists, there is less space for |
|
182 buttons in landscape layout compared to portrait layout.</note></section> |
|
183 <section id="GUID-C01D7518-956D-41B1-8AD6-540AE70844CD"><title>Using |
|
184 toolbars in C++ applications</title><p>The APIs to use for creating a toolbar |
|
185 are the <xref href="GUID-B05B61B8-1217-441F-BAFA-C209C8F123C5.dita">Toolbar API</xref> for |
|
186 the toolbar itself and the <xref href="GUID-F3EE1000-71A6-4D48-A30B-3D2357BF20FB.dita">Generic |
|
187 button API</xref> for the buttons in the toolbar.</p><p>For implementation |
|
188 information, see <xref href="GUID-95CE2206-7AE0-48C0-97A7-4E2082F9F662.dita">Enabling |
|
189 quick access to functions with a toolbar</xref>.</p></section> |
|
190 </conbody></concept> |