Class adf.Toolbar

Extends adf.Control.

Defined in: Toolbar.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	adf.Toolbar(id, container, mapId, type) adf.Toolbar is the class used to create a Toolbar UI in ADF JavaScript API adf.Toolbar renders a collection of toolitems that can be used with the map, for example to zoom, pan, click, etc.

Field Summary
Field Attributes	Field Name and Description
	divId This is the id of the Toolbar's container DOMElement
	mapId Id of map control that this toolbar is bound to.
	orientation This String determines how the toolbar is rendered on the page A Horizontal Toolbar has 1 Row and many columns A Vertical Toolbar has 1 column and many rows.
<constant>	ORIENTATION_HORIZONTAL This constant value is for the toolbar's horizontal orientation
<constant>	ORIENTATION_VERTICAL This constant value is for the toolbar's vertical orientation
	table Parent table within which toolbar's tool items are rendered
	tableBody Table body within which toolbar's tool items are rendered
	tableId Id to table within which toolbar is rendered.
<constant>	TOOL_ITEM_CONTAINER_ID_PREFIX This Prefix string is as default prefix to all the cells in the toolbar.
	toolItemNames Names of tool items contained in this toolbar
	toolItems List of tool items contained in this toolbar
	type This is a String which is used to identify the type of this toolbar either TEXT,IMAGE, IMAGE_AND_TEXT.

Fields borrowed from class adf.Control:: bounds, divObject, id, updateListenerNames, updateListeners

Method Summary
Method Attributes	Method Name and Description
	addImageSeparator(path, styleClass, style) Add image separator to toolbar.
	addSeparator(text) Adds toolbar separator with argument text
	getNextToolbarCell() Returns the next ToolbarCell in the the Toolbar.
	getToolId(elementId) Based on argument elementId, get id of Toolitem in the Toolbar
	getToolItemContainerId(toolId) Based on argument toolId, get tool item's container cell's id
	init(container) Initializes toolbar control and places it inside the DOM conatiner element
	updateAsync(Xml, eventSources) Postback tag handler function which is responsible for updating toolbar control during postback

Methods borrowed from class adf.Control:: addUpdateListener, removeUpdateListener
Methods borrowed from class adf.PageElement:: hide, resize, show

Class Detail

adf.Toolbar(id, container, mapId, type)

adf.Toolbar is the class used to create a Toolbar UI in ADF JavaScript API adf.Toolbar renders a collection of toolitems that can be used with the map, for example to zoom, pan, click, etc. At any point, one of the toolitems in the toolbar can be set as active adf.Toolbar can be placed either horizontally or vertically on a container element. Three types of toolbars are available out of the box for users, which are derived from this base class

adf.TextToolbar
adf.ImageToolbar
adf.ImageAndTextToolbar

An adf.Toolbar is rendered as a Table with each table cell containing a {@link adf.ToolItem] Example Usage

var textTb = new adf.TextToolbar("textTb", document.getElementById("textTbHere"), "map1");
var pointTI = new adf.MapPoint("Point", "Point", true, false);
textTb.addToolItem(pointTI);
var lineTI = new adf.MapLine("Line", "Line", true);
textTb.addToolItem(lineTI);
var rectTI = new adf.MapRectangle("Rectangle", "Rectangle", true);
textTb.addToolItem(rectTI);
textTb.setToolItemActive(rectTI);

var imageTb = new adf.ImageToolbar("imageTb", document.getElementById("imageTbHere"), "map1");
imageTb.orientation = Math.floor((Math.random()*10) % 2); // Sets 0 (horizontal) or 1 (vertical)
var polylineTI = new adf.MapPolyline("Polyline", "Polyline", true);
polylineTI.defaultImage = "docimages/polyline.gif";
polylineTI.selectedImage = "docimages/polylineD.gif";
polylineTI.hoverImage = "docimages/polylineU.gif";
imageTb.addToolItem(polylineTI);
var polygonTI = new adf.MapPolygon("Polygon", "Polygon", true);
polygonTI.defaultImage = "docimages/polygon.gif";
polygonTI.selectedImage = "docimages/polygonD.gif";
polygonTI.hoverImage = "docimages/polygonU.gif";
imageTb.addToolItem(polygonTI);

Parameters:
{String} id: Toolbar control's id. Maps to the JSF toolbar tag's id attribute
{DOMElement} container: Container within which to render the toolbar
{String} mapId: Id of map control that this toolbar is bound to. Maps to the JSF toolbar tag's mapId attribute
{String} type: The Type of the toolbar instance

Field Detail

{String} divId

This is the id of the Toolbar's container DOMElement

Default Value:: "ToolbarDiv_adf.Toolbar.id"

{String} mapId

Id of map control that this toolbar is bound to. Maps to the JSF toolbar tag's mapId attribute

{String} orientation

This String determines how the toolbar is rendered on the page A Horizontal Toolbar has 1 Row and many columns A Vertical Toolbar has 1 column and many rows. Maps to the JSF toolbar tag's orientation attribute.

<constant> {Number} ORIENTATION_HORIZONTAL

This constant value is for the toolbar's horizontal orientation

Default Value:: 0

<constant> {Number} ORIENTATION_VERTICAL

This constant value is for the toolbar's vertical orientation

Default Value:: 1

{HTMLTableElement} table

Parent table within which toolbar's tool items are rendered

{HTMLTableBodyElement} tableBody

Table body within which toolbar's tool items are rendered

{String} tableId

Id to table within which toolbar is rendered.

Default Value:: "ToolbarTable_adf.Toolbar.id"

<constant> {String} TOOL_ITEM_CONTAINER_ID_PREFIX

This Prefix string is as default prefix to all the cells in the toolbar.

Default Value:: "ToolItemDiv_"

{Array} toolItemNames

Names of tool items contained in this toolbar

{Array} toolItems

List of tool items contained in this toolbar

{String} type

This is a String which is used to identify the type of this toolbar either TEXT,IMAGE, IMAGE_AND_TEXT. Maps to the JSF toolbar tag's toolbarStyle attribute

TEXT
IMAGE
IMAGE_AND_TEXT

Method Detail

addImageSeparator(path, styleClass, style)

Add image separator to toolbar.

Parameters:
{String} path: Path to the separator image "/images/toolbars/header.gif"
{String} styleClass: CSS Style Class name for the image separator
{String} style: CSS based style string "height:10px;width:20px"

addSeparator(text)

Adds toolbar separator with argument text

Parameters:
{String} text

getNextToolbarCell()

Returns the next ToolbarCell in the the Toolbar. This method creates this cell adds it to the toolbar table and returns it.

getToolId(elementId)

Based on argument elementId, get id of Toolitem in the Toolbar

Parameters:
{String} elementId: String of the element that is contained in the ToolItem.

getToolItemContainerId(toolId)

Based on argument toolId, get tool item's container cell's id

Parameters:
{String} toolId: The toolId of the Toolitem in the Toolbar

init(container)

Initializes toolbar control and places it inside the DOM conatiner element

Parameters:
{DOMNode} container: The Container DOM to which this Toolbar is added to

updateAsync(Xml, eventSources)

Postback tag handler function which is responsible for updating toolbar control during postback

Parameters:
{XMLNode} Xml: Response XML Node
{Array} eventSources: Array of event sources

Classes

Class adf.Toolbar