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> and items can be right aligned by adding <item>-></item>.
To be valid xml the > in -> should be escaped, so you should really use either <item>-></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
None
Sub-tags
Name |
Type |
Cardinality |
Description |
item |
0..* |
A place holder for either an Action or Component |
Content
None
Example2
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>
<item action="com.cohga.html.client.actions.reportAction"/>
<item action="com.cohga.html.client.actions.gridAction"/>
<item>-></item>
<item component="com.cohga.html.client.components.loadingComponent"/>
</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>
Creating a sub-toolbar
Here is the sample of the select tools inside the toogle button
<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