Client Toolbars

Owned by Shaun Forbes
Last updated: 10 May, 2019
5 min read

A toolbar is a set of actions or components that are placed relative to each other. A toolbar can be placed inside any view, inside a layout region or at the application level.

An action can be rendered as a button or a tool.

A button is activated when a user clicks on it which fires an event. This could be opening up a window to present an input form, changing the map extent or opening a url with some parameters.

A tool is used to interact with a particular view on the screen. The user click the tool and it becomes active, the user then does some work with the view and the action then fires an event. This could be clicking on the zoomin tool, drawing a box an then the map changes its extent.

A component is a rendered piece of HTML code that presents custom features that and action cannot. e.g. a combobox with a list of active entities, a list of scales, a loading indicator or a scalebar. Components are rendered using javascript and HTML.

A separator can be added to a toolbar by adding <item>-</item>, items can be right aligned by adding <item>-></item> and a toolbar can be split using <item>|</item> which will split the toolbar/statusbar over multiple lines.

To be valid xml the > in -> should be escaped, so you should really use either <item>-&gt;</item> or <item><![CDATA[->]]></item>, but the Weave config file reader is a bit more forgiving and will allow you to use ->, just remember that you may have problems if you try and validate the xml file.

Also, simple text can be added to a toolbar using <item>Label</item>.

The default tool for a map panel must be in the toolbar attached to the map view, it can't be in a toolbar defined in a layout region.

A toolbar will be placed at the top of the area that it's been added to. To move it to the bottom add a statusbar instead, they're exactly the same as a toolbar.

Namespace

urn:com.cohga.html.client#1.0

Tags

toolbar | statusbar

Properties

Name

Type

Required

Description

scale

string

no

'small', 'medium' or 'large', default is 'small'.

Adjusts the size of the buttons in the toolbar/statusbar.

This value can also be set at the top level in a client config to set it for every toolbar/statusbar in the client.

iconAlign

string

no

'top', 'bottom', 'left' or 'right', default is 'left'.

Adjusts the alignment on the images within the buttons in the toolbar/statusbar.

This value can also be set at the top level in a client config to set it for every toolbar/statusbar in the client.

Sub-tags

Name

Type

Cardinality

Description

item

Client Actions

0..*

A place holder for either an Action or Component

Content

None

Examples

A Basic toolbar definition
<toolbar>
    <item action="com.cohga.html.client.actions.zoomInAction"/>
    <item action="com.cohga.html.client.actions.zoomOutAction"/>
    <item>-</item>
    <item action="com.cohga.html.client.map.initialExtentAction"/>
    <item action="com.cohga.html.client.map.fullExtentAction"/>
    <item action="com.cohga.html.client.map.refreshMapAction"/>
    <item>-></item> <!-- move this off to the right -->
    <item component="com.cohga.html.client.components.loadingComponent"/>
    <item>|</item> <!-- put the next items on their own line -->
    <item action="com.cohga.html.client.actions.reportAction"/>
    <item action="com.cohga.html.client.actions.gridAction"/>
</toolbar>
Adding a toolbar to a layout region
<client:config>
    <perspective>
        <layout>
            <west>
                <name>toc</name>
                <type>fit</type>
            <west>
            <center>
                <name>map</toolbar>
                <type>fit</type>
                <toolbar>
                    <item action="com.cohga.dms.ShowSelected"/>
                    <item action="com.cohga.dms.ShowAllSelected"/>
                </toolbar>
            </center>
        </layout>
        ....
    </perspective>
</client:config>
Adding a toolbar to the application
<client:config>
    <toolbar>
        <item action="com.cohga.dms.ShowSelected"/>
        <item action="com.cohga.dms.ShowAllSelected"/>
    </toolbar>
    <perspective>
        <layout>
            <west>
                <name>toc</name>
                <type>fit</type>
            <west>
            <center>
                <name>map</toolbar>
                <type>fit</type>
            </center>
        </layout>
        ....
    </perspective>
</client:config>

Here is the sample of the select tools inside the toogle button

Creating a sub-toolbar
<item action="weave.toggleToolbar">
  <iconCls>icon-selectfeatures</iconCls>
  <toolbar>
    <item action="com.cohga.html.client.map.select.rect.newAction"/>
    <item action="com.cohga.html.client.map.select.rect.addAction"/>
    <item action="com.cohga.html.client.map.select.rect.removeAction"/>
    <item action="com.cohga.html.client.map.select.rect.refineAction"/>
    <item>-</item>
    <item action="com.cohga.html.client.map.select.circle.newAction"/>
    <item action="com.cohga.html.client.map.select.circle.addAction"/>
    <item action="com.cohga.html.client.map.select.circle.removeAction"/>
    <item action="com.cohga.html.client.map.select.circle.refineAction"/>
    <item>-</item>
    <item action="com.cohga.html.client.map.select.polyline.newAction"/>
    <item action="com.cohga.html.client.map.select.polyline.addAction"/>
    <item action="com.cohga.html.client.map.select.polyline.removeAction"/>
    <item action="com.cohga.html.client.map.select.polyline.refineAction"/>
    <itemitem>
    <item action="com.cohga.html.client.map.select.polygon.newAction"/>
    <item action="com.cohga.html.client.map.select.polygon.addAction"/>
    <item action="com.cohga.html.client.map.select.polygon.removeAction"/>
    <item action="com.cohga.html.client.map.select.polygon.refineAction"/>
    <itemitem>
    <item action="com.cohga.html.client.map.select.clearAction"/>
    <item action="com.cohga.html.client.map.select.clearAllAction"/>
    <itemitem>
    <item action="com.cohga.html.client.map.select.zoomAction"/>
    <itemitem>
    <item action="com.cohga.html.client.actions.bufferAction"/>
  </toolbar>
</item>
And maybe a Navigation Group
<item action="weave.toggleToolbar">
  <iconCls>icon-world</iconCls>
  <align>tl-bl</align>
  <pressed>true</pressed>
  <toolbar>
    <item action="weave.previousExtent"/>
    <item action="weave.nextExtent"/>
    <item action="weave.initialExtent"/>
    <item action="weave.fullExtent"/>
    <item action="weave.zoomIn"/>
    <item action="weave.zoomOut"/>
    <item action="weave.pan" isDefault="true"/>
    <item action="weave.refreshMap"/>
  </toolbar>
</item>

Note that the align setting sets the position of the toolbar relative to the button. The first part, tl in this example, is the position point in the toolbar, and the second part, bl in this example, is the position point in the button. So in this example the top left of the toolbar will align with the bottom left of the button.
tl:: The top left corner
t:: The center of the top edge
tr:: The top right corner
l:: The center of the left edge
c:: In the center of the element
r:: The center of the right edge
bl:: The bottom left corner
b:: he center of the bottom edge
br:: The bottom right corner