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 <section><p>The toolbar offers quick access to some of the key functions in

    14 the application view. All of the functions must also be found from the <uicontrol>Options</uicontrol> menu. </p><fig id="GUID-946D2784-A151-4EBA-AC48-13007B12D75B">

    15 <title>Toolbar</title>

    16 <image href="GUID-0CD826C3-9DD9-46DD-A5A6-9093B8772993_d0e60110_href.png" scale="33" placement="inline"/>

    17 </fig><p>A tooltip i.e. an information pop-up containing information regarding

    18 each button must be shown.</p><p>Following toolbar button types can be used:</p><ul>

    19 <li><p><b>Command button</b> offering direct action (functions/view access)

    20 like <i>Send</i> or <i>New contact</i> with a button press feedback. Related

    21 tooltip indicates the function of the button. Command button may have a long

    22 press functionality included such as <i>Fast forward</i>.</p></li>

    23 <li><p><b>On/Off button</b> can be used for active/inactive type of functions

    24 such as <i>Loudspeaker</i> or<i> Font italics</i>. Button has related latched

    25 down effect. Button icon graphic and tooltip indicate the function of the

    26 button, and they stay the same regardless of the button state. No long tap

    27 allowed.</p></li>

    28 <li><p><b>Mode toggle button</b> can be used for switching between several

    29 modes as in <i>Flash</i>. Button icon graphic and tooltip change and should

    30 indicate the current status.</p></li>

    31 </ul><p>Toolbar buttons are view specific, thus within one application some

    32 views may have toolbar and some do not. It is recommended though to keep the

    33 toolbars as consistent as possible within an application. Changing toolbar

    34 buttons within one view is not allowed, but button can be dimmed in case function

    35 is not available, e.g. depending on focused item in the view or currently

    36 available services. Application may change the buttons according to product

    37 concept.</p><p>The order of the toolbar buttons in different orientations

    38 is according to the reading direction e.g. the first item is placed topmost

    39 when the toolbar is vertical and leftmost when the toolbar is horizontal in

    40 western languages. The appearance of functions in Toolbar should follow the

    41 order presented below.</p><table id="GUID-D8D1CBB2-C07E-43EA-80E5-9163865A0B2D">

    42 <title>Appearance order of toolbar functions</title>

    43 <tgroup cols="2"><colspec colname="col1"/><colspec colname="col2"/>

    44 <thead>

    45 <row>

    46 <entry>Function type</entry>

    47 <entry>Description</entry>

    48 </row>

    49 </thead>

    50 <tbody>

    51 <row>

    52 <entry>Call</entry>

    53 <entry>Call initiation related functions</entry>

    54 </row>

    55 <row>

    56 <entry>Reply</entry>

    57 <entry>Replying to a message</entry>

    58 </row>

    59 <row>

    60 <entry>Send</entry>

    61 <entry>For sending the content in focus</entry>

    62 </row>

    63 <row>

    64 <entry>Create new</entry>

    65 <entry>For creating a new message, note, folder, contact or some other item</entry>

    66 </row>

    67 <row>

    68 <entry>View switching</entry>

    69 <entry>For functions such as Go-to or View mode switching</entry>

    70 </row>

    71 <row>

    72 <entry>Editing</entry>

    73 <entry>For switching to editing mode</entry>

    74 </row>

    75 <row>

    76 <entry>Opening extension</entry>

    77 <entry>For opening the toolbar extension in case all the functions within

    78 the extension are a collection of options of similar type and can be grouped

    79 under one command e.g. Insert -extension for inserting image, video, presentation

    80 etc. </entry>

    81 </row>

    82 <row>

    83 <entry>Delete</entry>

    84 <entry>Deleting the item in focus</entry>

    85 </row>

    86 <row>

    87 <entry>More -extension</entry>

    88 <entry>For opening the toolbar extension “More” in case the functions within

    89 the extension are various kinds and cannot be grouped.</entry>

    90 </row>

    91 </tbody>

    92 </tgroup>

    93 </table><p>Application specific commands that do not fit into any function

    94 type described above are to be placed between Create new and Opening the extension

    95 in the order list.</p><p>The application may decide the initial state of On/Off

    96 and Mode toggle button in application launch. They can also be reset or resumed

    97 from the previous session.</p><fig id="GUID-2D9D4495-4AA3-4DA8-9AC7-B989189CD2F3">

    98 <title>Toolbar button states: example of On/Off type of button</title>

    99 <image href="GUID-9E0C8892-E67F-4DC9-8253-2F65611AD4C6_d0e60273_href.png" scale="50" placement="inline"/>

   100 </fig></section>

   101 <section><title>Floating toolbar</title><p>Floating toolbar is a component

   102 for showing the key functions on top of the Main pane or full screen content.

   103 It can be used in non-touch UI, but also in touch UI.</p><p>Floating toolbar

   104 owns the focus, thus it can be used only if other content in the view does

   105 not need the focus. I.e. floating toolbar cannot be used with lists and grids.</p><p>Opening

   106 and closing the floating toolbar can be done with the <uicontrol>Show toolbar</uicontrol> / <uicontrol>Hide

   107 toolbar</uicontrol> command via the Options menu. In this case the toolbar

   108 is open by default.</p><p>Floating toolbar can also be designed to be opened

   109 via MSK labeled as <uicontrol>Toolbar</uicontrol>. For closing the toolbar,

   110 there has to be then a <uicontrol>Hide</uicontrol> button or the toolbar is

   111 closed after selecting a function. Navigation keys can be used as a shortcut

   112 for opening and closing the toolbar, when not used for anything else in the

   113 view. Timeout can be used for closing the toolbar.</p><p>There can be 3-6

   114 buttons in the floating toolbar depending on used resolution. Thus the most

   115 important functions must be designed to be the first ones in the toolbar;

   116 so that they are visible e.g. in case only three buttons fit the layout.  </p><p>When

   117 the toolbar is open, it owns the Selection key for selecting the focused toolbar

   118 button. Toolbar does not own the right and left softkeys. The user can move

   119 the focus over the toolbar buttons with the Arrow keys (left and right). The

   120 focus loops, and the toolbar itself does not scroll.</p></section>

   121 <section><title>Floating toolbar extension</title><p>Toolbar button can be

   122 reserved for opening a toolbar extension, where more options can be found.

   123 Placement of the extension button within toolbar can be found from the appearance

   124 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

   125 order of toolbar functions</xref>. The button has a default graphic, which

   126 the application can change if needed. </p><p>Toolbar extension buttons are

   127 for similar actions as buttons in toolbar i.e. the same types and rules apply

   128 for toolbar extension buttons. Extension should be used for accessing a set

   129 of logically similar options e.g. when selecting content to be inserted to

   130 a message or for adjusting imaging session related values in camera. </p><p>Extension

   131 can have 2 – 12 buttons (3x4 in landscape and 4x3 in portrait). The filling

   132 order follows the grid filling rules, thus for example most important one

   133 should be placed as first. In floating toolbar extension, the last extension

   134 button is reserved for closing the toolbar. </p></section>

   135 <section><title>Toolbar component in touch UI</title><p>In touch UI the toolbar

   136 is either fixed in the layout, or a floating component. Both toolbars cannot

   137 exist in one view.</p><p>Toolbars are view specific, thus all views of an

   138 application do not have to have a toolbar.</p><p>Selection in touch toolbars

   139 is done with a single tap, and related tooltip is shown with stylus down.</p></section>

   140 <section><title>Floating toolbar in touch UI</title><p>The number of floating

   141 toolbar buttons in the nHD (640 x 360 pixels) layout is three. In case floating

   142 toolbar is used in full screen, there can be four buttons. </p><p>Floating

   143 toolbar owns the focus also in touch UI, and thus cannot be used in views

   144 that have focus for main pane content.</p><p>Floating toolbar can be opened

   145 and closed as in non-touch UI via the Options menu or with the Selection key,

   146 or it can be opened by tapping the main pane area. In this case closing is

   147 done by tapping the main pane area again, with timeout or by selecting a function.</p></section>

   148 <section><title>Fixed toolbar in touch UI</title><p>The number of fixed toolbar

   149 buttons in the nHD (640 x 360 pixels) layout is three. It reserves own space

   150 from the layout and does not cover the content of main pane area. </p><p>Fixed

   151 toolbar does not have a highlight, and thus it can be used in all views (whether

   152 main pane needs the highlight or not).</p><p>  Fixed toolbar cannot be opened

   153 or closed, but it is always visible. Toolbar can be hidden in case other controls

   154 are also hidden i.e. in full screen views.</p><fig id="GUID-C5A359DF-1C8F-42D3-B86F-79A49EB97D70">

   155 <title>Toolbar in touch UI fixed in the layout</title>

   156 <image href="GUID-4BB85136-0E46-47BD-83FD-A918DECF7CDD_d0e60351_href.png" scale="50" placement="inline"/>

   157 </fig></section>

   158 <section><title>Toolbar extension in touch UI</title><p>As in non-touch UI,

   159 toolbars can have extensions also in touch UI. For floating toolbar in touch

   160 UI, the same rules apply as defined for floating toolbar extension in general.

   161 In touch UI, the toolbar extension can always be closed with the same toolbar

   162 button as it was opened, or by tapping outside the extension area. </p><p>In

   163 addition to general extension rules, the toolbar extension for

   164 fixed toolbar has certain specific guidelines. Besides buttons, the extension

   165 of fixed toolbar can include editor fields e.g. for entering an URL or for

   166 the Find function in the browser. The most important editor field is to be

   167 the topmost and has the cursor by default.</p><note> In case editor field(s)

   168 exists, there is less space for buttons in landscape layout compared to portrait

   169 layout.</note></section>

   170 <section><title>Using toolbars in C++

   171 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

   172 toolbar itself and the <xref href="GUID-F3EE1000-71A6-4D48-A30B-3D2357BF20FB.dita">Generic

   173 button API</xref> for the buttons in the toolbar.</p><p>For implementation

   174 information, see <xref href="GUID-95CE2206-7AE0-48C0-97A7-4E2082F9F662.dita">Enabling

   175 quick access to functions with a toolbar</xref>.</p></section>

   176 </conbody></concept>