<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (c) 2007-2010 Nokia Corporation and/or its subsidiary(-ies) All rights reserved. -->
<!-- This component and the accompanying materials are made available under the terms of the License 
"Eclipse Public License v1.0" which accompanies this distribution, 
and is available at the URL "http://www.eclipse.org/legal/epl-v10.html". -->
<!-- Initial Contributors:
    Nokia Corporation - initial contribution.
Contributors: 
-->
<!DOCTYPE concept
  PUBLIC "-//OASIS//DTD DITA Concept//EN" "concept.dtd">
<concept id="GUID-EB212C35-5416-4CA7-8091-61B45D78E220" xml:lang="en"><title>Toolbar</title><prolog><metadata><keywords/></metadata></prolog><conbody>
<p>The toolbar offers quick access to some of the key functions in the application
view. All of the functions must also be found from the <uicontrol>Options</uicontrol> menu. </p>
<note> Toolbar buttons are <xref href="GUID-8F6F6C2C-C00E-4412-A880-5EEBF7270265.dita">Generic
buttons</xref> that have touch functionality.</note>
<fig id="GUID-8F4054B9-F6F6-4328-ACFF-459B03398FAC">
<title>Toolbar</title>
<image href="GUID-2A4DED23-D0AB-436A-BCED-F0645FF05726_d0e66217_href.png" placement="inline"/>
</fig>
<p>A tooltip is an information pop-up containing information regarding each
button must be shown.</p>
<p>Following toolbar button types can be used:</p>
<ul>
<li><p><b>Command button</b> offering direct action (functions/view access)
like <i>Send</i> or <i>New contact</i> with a button press feedback. Related
tooltip indicates the function of the button. Command button may have a long
press functionality included such as <i>Fast forward</i>.</p></li>
<li><p><b>ON/OFF button</b> can be used for active/inactive type of functions
such as <i>Loudspeaker</i> or<i> Font italics</i>. Button has related latched
down effect. Button icon graphic and tooltip indicate the function of the
button, and they stay the same regardless of the button state. No long tap
allowed.</p></li>
<li><p><b>Mode toggle button</b> can be used for switching between several
modes as in <i>Flash</i>. Button icon graphic and tooltip change and should
indicate the current status.</p></li>
</ul>
<p>Toolbar buttons are view specific, thus within one application some views
may have toolbar and some do not. It is recommended though to keep the toolbars
as consistent as possible within an application. Changing toolbar buttons
within one view is not allowed, but button can be dimmed in case function
is not available, for example, depending on focused item in the view or currently
available services. Application may change the buttons according to product
concept.</p>
<p>The order of the toolbar buttons in different orientations is according
to the reading direction  the first item is placed topmost when the toolbar
is vertical and leftmost when the toolbar is horizontal in western languages.
The appearance of functions in Toolbar should follow the order presented below.</p>
<table id="GUID-D8D1CBB2-C07E-43EA-80E5-9163865A0B2D"><title>Appearance order
of toolbar functions</title>
<tgroup cols="2"><colspec colname="col1" colwidth="0.46*"/><colspec colname="col2" colwidth="1.54*"/>
<thead>
<row>
<entry>Function type</entry>
<entry>Description</entry>
</row>
</thead>
<tbody>
<row>
<entry>Call</entry>
<entry>Call initiation related functions</entry>
</row>
<row>
<entry>Reply</entry>
<entry>Replying to a message</entry>
</row>
<row>
<entry>Send</entry>
<entry>For sending the content in focus</entry>
</row>
<row>
<entry>Create new</entry>
<entry>For creating a new message, note, folder, contact or some other item</entry>
</row>
<row>
<entry>View switching</entry>
<entry>For functions such as Go-to or View mode switching</entry>
</row>
<row>
<entry>Editing</entry>
<entry>For switching to editing mode</entry>
</row>
<row>
<entry>Opening extension</entry>
<entry>For opening the toolbar extension in case all the functions within
the extension are a collection of options of similar type and can be grouped
under one command, for example, Insert -extension for inserting image, video,
presentation and so on. </entry>
</row>
<row>
<entry>Delete</entry>
<entry>Deleting the item in focus</entry>
</row>
<row>
<entry>More -extension</entry>
<entry>For opening the toolbar extension “More” in case the functions within
the extension are various kinds and cannot be grouped.</entry>
</row>
</tbody>
</tgroup>
</table>
<p>Application specific commands that do not fit into any function type described
above are to be placed between Create new and Opening the extension in the
order list.</p>
<p>The application may decide the initial state of ON/OFF and Mode toggle
button in application launch. They can also be reset or resumed from the previous
session.</p>
<fig id="GUID-2D9D4495-4AA3-4DA8-9AC7-B989189CD2F3">
<title>Toolbar button states: example of ON/OFF type of button</title>
<image href="GUID-9E0C8892-E67F-4DC9-8253-2F65611AD4C6_d0e66389_href.png" scale="50" placement="inline"/>
</fig>
<section id="GUID-EC526E89-570D-4611-A44D-ABDA4918805E"><title>Floating toolbar</title><p>Floating
toolbar is a component for showing the key functions on top of the Main pane
or full screen content. It can be used in non-touch UI, but also in touch
UI.</p><p>Floating toolbar owns the focus, and thus it can be used only if
other content in the view does not need the focus. It means that floating
toolbar cannot be used with lists and grids.</p><p>Opening and closing the
floating toolbar can be done with the <uicontrol>Show toolbar</uicontrol> / <uicontrol>Hide
toolbar</uicontrol> command via the Options menu. In this case the toolbar
is open by default.</p><p>Floating toolbar can also be designed to be opened
via MSK labeled as <uicontrol>Toolbar</uicontrol>. For closing the toolbar,
there has to be then a <uicontrol>Hide</uicontrol> button or the toolbar is
closed after selecting a function. Navigation keys can be used as a shortcut
for opening and closing the toolbar, when not used for anything else in the
view. Time-out can be used for closing the toolbar.</p><p>There can be 3-6
buttons in the floating toolbar depending on used resolution. Thus the most
important functions must be designed to be the first ones in the toolbar;
so that they are visible, for example, in case only three buttons fit the
layout.  </p><p>When the toolbar is open, it owns the Selection key for selecting
the focused toolbar button. Toolbar does not own the right and left softkeys.
The user can move the focus over the toolbar buttons with the Arrow keys (left
and right). The focus loops, and the toolbar itself does not scroll.</p></section>
<section id="GUID-2010D820-45FF-464A-8C11-34A657A566B3"><title>Floating toolbar
extension</title><p>Toolbar button can be reserved for opening a toolbar extension,
where more options can be found. Placement of the extension button within
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,
which the application can change if needed. </p><p>Toolbar extension buttons
are for similar actions as buttons in toolbar, which means the same types
and rules apply for toolbar extension buttons. Extension should be used for
accessing a set of logically similar options, for example, when selecting
content to be inserted to a message or for adjusting imaging session related
values in camera. </p><p>Extension can have 2 – 12 buttons (3x4 in landscape
and 4x3 in portrait). The filling order follows the grid filling rules, thus
for example most important one should be placed as first. In floating toolbar
extension, the last extension button is reserved for closing the toolbar. </p></section>
<section id="GUID-6BFBE3CC-FE17-4F61-98A5-2E14EFEAD1E9"><title>Toolbar component
in touch UI</title><p>In touch UI the toolbar is either fixed in the layout,
or a floating component. Both toolbars cannot exist in one view.</p><p>Toolbars
are view specific, thus all views of an application do not have to have a
toolbar.</p><p>Selection in touch toolbars is done with a single tap, and
related tooltip is shown with stylus down.</p></section>
<section id="GUID-348E53C9-1F1D-42EC-8E0C-635CA18DB9D8"><title>Floating toolbar
in touch UI</title><p>The number of floating toolbar buttons in the nHD (640
x 360 pixels) layout is three. In case floating toolbar is used in full screen,
there can be four buttons. </p><p>Floating toolbar owns the focus also in
touch UI, and thus cannot be used in views that have focus for main pane content.</p><p>Floating
toolbar can be opened and closed as in non-touch UI via the Options menu or
with the Selection key, or it can be opened by tapping the main pane area.
In this case closing is done by tapping the main pane area again, with time-out
or by selecting a function.</p></section>
<section id="GUID-75A2EDF2-10D7-4CCC-A6AA-4B55BA21C46D"><title>Fixed toolbar
in touch UI</title><p>The number of fixed toolbar buttons in the nHD (640
x 360 pixels) layout is three. It reserves own space from the layout and does
not cover the content of main pane area. </p><p>Fixed toolbar does not have
a highlight, and thus it can be used in all views (whether main pane needs
the highlight or not).</p><p>  Fixed toolbar cannot be opened or closed, but
it is always visible. Toolbar can be hidden in case other controls are also
hidden (in full screen views).</p><fig id="GUID-C5A359DF-1C8F-42D3-B86F-79A49EB97D70">
<title>Toolbar in touch UI fixed in the layout</title>
<image href="GUID-05C87497-738B-473C-B5B2-BE46D32225F5_d0e66467_href.png" placement="inline"/>
</fig></section>
<section id="GUID-4BBFEE08-26AA-4F6E-B74A-F82BD75F3E59"><title>Toolbar extension
in touch UI</title><p>As in non-touch UI, toolbars can have extensions also
in touch UI. For floating toolbar in touch UI, the same rules apply as defined
for floating toolbar extension in general. In touch UI, the toolbar extension
can always be closed with the same toolbar button as it was opened, or by
tapping outside the extension area. </p><p>In addition to general extension
rules, the toolbar extension for fixed toolbar has certain specific guidelines.
Besides buttons, the extension of fixed toolbar can include editor fields,
for example, for entering an URL or for the Find function in the browser.
The most important editor field is to be the topmost and has the cursor by
default.</p><note> In case editor field(s) exists, there is less space for
buttons in landscape layout compared to portrait layout.</note></section>
<section id="GUID-C01D7518-956D-41B1-8AD6-540AE70844CD"><title>Using
toolbars in applications</title><p>The APIs to use for creating a toolbar
are the <xref href="GUID-B05B61B8-1217-441F-BAFA-C209C8F123C5.dita">Toolbar API</xref> for
the toolbar itself and the <xref href="GUID-F3EE1000-71A6-4D48-A30B-3D2357BF20FB.dita">Generic
button API</xref> for the buttons in the toolbar.</p><p>For implementation
information, see <xref href="GUID-95CE2206-7AE0-48C0-97A7-4E2082F9F662.dita">Enabling
quick access to functions with a toolbar</xref>.</p></section>
</conbody></concept>