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, inside a layout region or at the top of the Application Windowapplication level.
An Action action can be rendered as a button or a tool.
...
A tool is used to interact with a particular View 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 action then fires an Eventevent. This could be clicking on the zoomin tool, drawing a box an then the map changes its extent.
A Component component is a rendered piece of HTML code that presents custom features that and Action action cannot. e.g. a combobox with a list of active Entitiesentities, 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 and a toolbar can be split using <item>|</item>
which will split the toolbar/statusbar over multiple lines.
Note |
---|
To be valid xml the |
...
should be escaped, so you |
...
should really use either |
...
|
...
|
...
|
...
|
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
Note |
---|
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. |
Info |
---|
A |
...
the top of the area that it's been added to. To move it to the bottom add a |
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 |
0..* | A place holder for either an Action or Component |
Content
None
...
Examples
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<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 actioncomponent="com.cohga.html.client.actionscomponents.reportAction"/loadingComponent"/> <item>|</item> <!-- put the next items on their own line --> <item action="com.cohga.html.client.actions.gridActionreportAction"/> <item>-></item> <item componentaction="com.cohga.html.client.componentsactions.loadingComponentgridAction"/> </toolbar> |
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
Code Block | ||||||
| ||||||
<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>
|
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<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
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<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>
|
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
Code Block | ||||||
| ||||||
<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>
|
...