Toolbar

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 Options menu.

+Toolbar + +

A tooltip i.e. an information pop-up containing information regarding +each button must be shown.

Following toolbar button types can be used:

Command button offering direct action (functions/view access) +like Send or New contact with a button press feedback. Related +tooltip indicates the function of the button. Command button may have a long +press functionality included such as Fast forward.
On/Off button can be used for active/inactive type of functions +such as Loudspeaker or Font italics. 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.
Mode toggle button can be used for switching between several +modes as in Flash. Button icon graphic and tooltip change and should +indicate the current status.

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, e.g. depending on focused item in the view or currently +available services. Application may change the buttons according to product +concept.

The order of the toolbar buttons in different orientations +is according to the reading direction e.g. 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.

+Appearance order of toolbar functions + + + +Function type +Description + + + + +Call +Call initiation related functions + + +Reply +Replying to a message + + +Send +For sending the content in focus + + +Create new +For creating a new message, note, folder, contact or some other item + + +View switching +For functions such as Go-to or View mode switching + + +Editing +For switching to editing mode + + +Opening extension +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 e.g. Insert -extension for inserting image, video, presentation +etc. + + +Delete +Deleting the item in focus + + +More -extension +For opening the toolbar extension “More” in case the functions within +the extension are various kinds and cannot be grouped. + + + +

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.

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.

+Toolbar button states: example of On/Off type of button + +

Floating toolbar

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.

Floating toolbar +owns the focus, thus it can be used only if other content in the view does +not need the focus. I.e. floating toolbar cannot be used with lists and grids.

Opening +and closing the floating toolbar can be done with the Show toolbar / Hide +toolbar command via the Options menu. In this case the toolbar +is open by default.

Floating toolbar can also be designed to be opened +via MSK labeled as Toolbar. For closing the toolbar, +there has to be then a Hide 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. Timeout can be used for closing the toolbar.

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 e.g. in case only three buttons fit the layout.

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.

Floating toolbar extension

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 Appearance +order of toolbar functions. The button has a default graphic, which +the application can change if needed.

Toolbar extension buttons are +for similar actions as buttons in toolbar i.e. the same types and rules apply +for toolbar extension buttons. Extension should be used for accessing a set +of logically similar options e.g. when selecting content to be inserted to +a message or for adjusting imaging session related values in camera.

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.

Toolbar component in touch UI

In touch UI the toolbar +is either fixed in the layout, or a floating component. Both toolbars cannot +exist in one view.

Toolbars are view specific, thus all views of an +application do not have to have a toolbar.

Selection in touch toolbars +is done with a single tap, and related tooltip is shown with stylus down.

Floating toolbar in touch UI

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.

Floating +toolbar owns the focus also in touch UI, and thus cannot be used in views +that have focus for main pane content.

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 timeout or by selecting a function.

Fixed toolbar in touch UI

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.

Fixed +toolbar does not have a highlight, and thus it can be used in all views (whether +main pane needs the highlight or not).

Fixed toolbar cannot be opened +or closed, but it is always visible. Toolbar can be hidden in case other controls +are also hidden i.e. in full screen views.

+Toolbar in touch UI fixed in the layout + +

Toolbar extension in touch UI

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.

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 e.g. 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.

In case editor field(s) +exists, there is less space for buttons in landscape layout compared to portrait +layout.

Using toolbars in C++ +applications

The APIs to use for creating a toolbar are the Toolbar API for the +toolbar itself and the Generic +button API for the buttons in the toolbar.

For implementation +information, see Enabling +quick access to functions with a toolbar.