Toolbars
Description
A toolbar is a set of actions or components that are placed relative to each other. A toolbar can be placed inside any view or at the top of the Application Window.
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 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>. Note that to be valid xml the > in > needs to be escaped, so you'd actually use either <item>></item> or <item><!admin: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>.
Recent updates to the client allow toolbars to be added to a region when setting up the layout, so when you're designing the layout and setting the north, south, east, west or center regions you can now add a toolbar (and statusbar) tag immediately below these tags. One caveat with this is that 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 at the layout level.
Namespace
urn:com.cohga.html.client#1.0
Tags
toolbar
Properties
None
Sub-tags
Name |
Type |
Cardinality |
Description |
item |
0..* |
A place holder for either an Action or Component |
Content
None
Example
<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
<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>
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