Java Web ADF 9.2 Clientside JavaScript and CSS Reference

Concepts
Object Model
List of Files
Customizing
Known Issues
References/Documentation Links

Introduction

This document is a comprehensive description of the Javascript and style library accompanying the Java Web ADF 9.2 SP1. These javascript and style objects can be used within a Java Web ADF application to get the desired customization. The flow of such a customized application at design time may be:

A user creates a Java Web ADF based application with a JSF map control on the page
The user customizes the application's look by modifying the style sheet
The user adds Javascript code to listen to updates on the map control
Based on any updates (for example change in map's extent), the Javascript code performs some action to update content on the page

When the application is accessed through a web browser, at runtime:

The JSF controls' state is rendered as an XML document
The XML document is transformed into HTML through XSL
This HTML includes several Javascript functions to render the controls on the browser page
The controls are accessible as objects through Javascript within the running application
When an end user performs an operation on the map and it is updated, the listener function is called
The listener then using information from the map, sends an AJAX request.
Some custom code processes this requests and renders an XML response
The XML response is parsed by a Javascript function and the page appropriately updated

This document covers the Javascript API and the CSS style sheet that can be used by the user to customize their application. It does not cover the JSF controls, any XML documents or the XSL used for transforming the controls to HTML.

This document does cover the usage of clientside AJAX library, namely the AJAX utility functions, but not the server side code to process the request and render the XML response.

How to read this document

Code samples are shown as

code sample in HTML/Javascript/CSS

Object documentation, methods & properties are shown as

type property	Property description with type
type function(type argument)	Function description with return and argument types
type function(type arg[, type optionalArg])	Function arguments within '[' & ']' are optional. If not passed, a default value is assumed

CSS style declerations are shown as

element.className
Describes what element this CSS class is applied to
Default css values
Callback/Listener Function Summary

function void listener(type arg)
          

Prototype
for registered callback or listener functions. Function can be named
appropriately

          

Object Oriented Programming

The Objects provided in this library are Object Oriented (OO). Although Javascript is not a purely OO language, it is OO to the extent Javascript allows. For example, Javascript does not allow protected properties/function, which can be accessed by children, but it does allow public properties/functions, which can then be overridden by the child class.

//define Person Object
function Person() {
this.name = ""; //public property
var age = 1; //private property

this.getAge = function() { //public function, accessing private property
     return age;
}

function aYearOlder() { //private function
    age++;
}
}

//public function, accessing public property
Person.prototype.getName = function() {
return this.name;
}

//define User Object
function User() {
this.inheritsFrom(new Person()); //declare User as a child of Person
this.name = "user";
var useCount = 0;

this.use = function() { //public function, accessing public property & private function
    if (isUsed())
      return this.name + " feels used!";
    else {
      useCount++;
      return this.name + " is not used!";
    }
}

function isUsed() {
    return useCount != 0;
}
}

//test
var myUser = new User();
myUser.name; //returns "user"
myUser.getAge(); //returns 1
myUser.getName(); //returns "user"
myUser.use(); //returns "user is not used!"
myUser.use(); //returns "user feels used!"

//the following will throw errors as they are not accessible
myUser.age; //returns undefined as age is a private variable of Person
myUser.aYearOlder(); //returns TypeError as aYearOlder is a private function of Person
myUser.useCount; //returns undefined as useCount private variable of User
myUser.isUsed(); //return TypeError as isUsed is a private function of User

Asynchronous Javascript and XML (AJAX)

Asynchronous Javascript and XML is a concept of using Javascript to send requests to the server, then parsing the XML response from the server and updating elements on the page based on this response.

To learn more about the XMLHttpRequest Object

Dynamic HTML and XML: The XMLHttpRequest Object

There are several utility functions which can be used to send XMLHttpRequest to the server. These :

View Demo
<html>
...
<body>
    
<form id="myForm" action="...">
<input type="hidden" name="foo" id="foo" value="Request Value" />
      <input type="button" value="Send Request" onclick="sendRequest()" />
      <input type="text" name="val" id="val" value="" />

      <script type="text/javascript" language="Javascript">
      //function to send XMLHttp request
    function sendRequest() {
          var url = EsriUtils.getServerUrl("myForm");
          var params = "my=params&foo=foo&" + EsriUtils.buildRequestParams("myForm");
      var xmlHttp = EsriUtils.sendAjaxRequest(
        url,
            params,
            true,
          function() { processResponse(xmlHttp); }
          );
        }

        //function to process XMLHttp response
        function processResponse(xmlHttp) {
        if (xmlHttp != null && xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            var xml = xmlHttp.responseXML;
            ... parse xml and update elements on page ...
          }
        }
</script>
    </form>
</body>
</html>

Using objects in the library

To create an object in the Java Web ADF Javascript library with default behaviour:

var win = new EsriWindow("win", document.body, ...);

To customize an object:

var win = new EsriWindow("win", null, ...);
win.resizable = false;
win.init(document.body);

EsriControl objects, namely Maps, Tocs, Tasks, Overviews & Toolbars are rendered by the JSF controls on the jsp page. Other objects for example Window, Color chooser, Slider, etc can be used to enhace the same web application, even it doesn't use the JSF control on a page.

When customizing an application using Javascript, the controls should be accessed only through the body onload function. Incorrect usage of Javascript in a jsp fragment:

<html>
...
<a:map id="map1" value="#{mapContext.webMap}" width="250" height="250" ... />
<script type="text/javascript" language="Javascript">
var map = EsriControls.maps["map1"];
//do something with map
</script>
...
</html>

The above usage will throw a javascript error in the running application:

Error: map has no properties
Source File: http://localhost:8080/foo/foo.jsf

The correct usage is to define the customization in a javascript function and calling this function within the body's onload attribute as shown below:

<html>
<body onload="myFunction();">
    ...
    <a:map id="map1" value="#{mapContext.webMap}" width="250" height="250" ... />
<script type="text/javascript" language="Javascript">
function myFunction() {
      var map = EsriControls.maps["map1"];
    //do something with map
      }
    </script>
    ...
</body>
</html>

Callbacks & Listeners

Very simply put, a callback is a function which is called whenever a certain change happens on the object to which the callback is registered. To those from the C/C++ world, it is similar to passing a function pointer.

var action = new EsriDragElementAction(true);
action.activate(box, myCallback);

function myCallback(x, y) {
//do processing
}

Listeners are notified whenever there is a change to the object to which this listener is listening to. A listener is similar to Event Listeners in Java Swing.

var map = EsriControls.maps["map1"];
map.addUpdateListener("myListener", myListener);

function myListener(map) {
//process information when map is updated
}

Both these have a specific format which the caller uses and fixed arguments that are passed to these functions.

Whats the difference between Callbacks & Listeners?
A callback is required by the object which will call it. For example, when using the EsriDragElementAction, a callback function is required and will be called when the action is completed. But a listener is optional. For example, when adding a function as a listener to EsriMap, when the map control changes, if there are any registered listeners, it will call these listeners. If not, the map continues to function as expected.

Object Model

There are many objects in the Javascript library. The following is the object model listing all these objects and their hierarchy.

View Object Model Diagram as PDF

EsriAction

EsriDragElementAction

EsriDrawCircleAction
EsriDrawLineAction
EsriDrawPointAction
EsriDrawPolyShapeAction

EsriDrawPolygonAction
EsriDrawPolylineAction

EsriDrawRectShapeAction

EsriDrawRectangleAction
EsriDrawOvalAction

EsriEditingDrawAction

EsriEditingDrawLineAction
EsriEditingDrawPointAction
EsriEditingDrawPolyShapeAction

EsriKeyInputAction
EsriMouseWheelAction
EsriResizeElementAction

EsriColor
EsriContextMenuItem
EsriControls
EsriEditingUtils
EsriGraphicsElement

EsriNSGraphicsElement
EsriVMLGraphicsElement

EsriMapSource

EsriMapSourceDynamic
EsriMapSourceTile

EsriPageElement

EsriColorChooser
EsriControl

EsriMap
EsriOverview
EsriTask
EsriToc
EsriToolbar

EsriImageToolbar
EsriImageAndTextToolbar
EsriTextToolbar

EsriNavigator

EsriMapNavigator

EsriScaleBar
EsriSlider

EsriMapSlider

EsriWindow

EsriPoint
EsriRectangle
EsriScaleBarRenderer

EsriScaleBarRendererBase

EsriAlternatingScaleBarRenderer
EsriDoubleAlternatingScaleBarRenderer
EsriSingleDivisionScaleBar
EsriSteppedScaleLineRenderer

EsriTask_GPAsyncTaskResultsTimer
EsriTocNode
EsriTocRenderer

EsriTableTocRenderer

EsriToolItem

EsriMapToolItem

EsriEditingToolItem

EsriEditingLine
EsriEditingPoint
EsriEditingPoly

EsriEditingPolygon
EsriEditingPolyline

EsriMapCircle
EsriMapContinuousPan
EsriMapImage
EsriMapKeyNavigation
EsriMapLine
EsriMapMouseWheel
EsriMapOval
EsriMapPan
EsriMapPoint
EsriMapPoly

EsriMapPolygon
EsriMapPolyline

EsriMapRectangle
EsriMapServerAction

EsriUploadUtil
EsriUtils
EsriWindowManager

List of files

The Javascript library are contained in the following files (<webapp>/js directory):

esri_colorchooser.js (Color Chooser)
esri_core.js (Core & Global objects)

esri_graphics_ns.js (Netscape Graphics)
esri_graphics_vml.js (IE-VML Graphics)

esri_map.js (Map)
esri_navigator.js (Navigator)
esri_overview.js (Overview)
esri_scalebar.js (Scale Bar)
esri_slider.js (Slider)
esri_task.js (Task)

esri_task_editing.js (Editing Task)
esri_task_gp.js (GP Task)

esri_toc.js (Toc)
esri_toolbar.js (Toolbar)
esri_upload.js (Upload/Download utility)
esri_window.js (Window)
esri_window_mgr.js (Window Manager)

The clientside library also includes a Cascading Style Sheet (<webapp>/css directory)

esri_styles.css

Core (esri_core.js)

The esri_core.js file must be included only once in your application as it defines globals. If using the JSF controls, this js file is automatically included, thus it is not required to explicitly include.

The esri_core.js defines several core objects that are required by this library. Thus, when creating an application using this Javascript library, the esri_core.js must be included.

Adds functions to some core Javascript objects

Object.inheritsFrom()
Array.indexOf()
String.trim()
String.endsWith()

EsriAction

EsriDrawLineAction
EsriDragElementAction
EsriDrawRectShapeAction

EsriDrawRectangleAction

EsriDrawOvalAction

EsriDrawPointAction
EsriDrawPolyShapeAction

EsriDrawPolylineAction

EsriDrawPolygonAction

EsriDrawCircleAction
EsriMouseWheelAction
EsriResizeElementAction
EsriKeyInputAction

EsriControl
EsriControls
Geometry/Graphics

EsriPoint
EsriRectangle
EsriColor
EsriGraphicsElement

EsriPageElement
EsriToolItem
EsriUtils

Object.inheritsFrom(Object parent)
Added to support inheritence in Javascript Objects. This function allows objects to extend/inherit behaviour from parent objects. Only public properties & functions are inherited.

function Person() {
this.name = ""; //public property
var age = 1; //private property
...
}

function User() {
this.inheritsFrom(new Person());
...
} //User inherits from Person

var user = new User();
user.name = "Foo"; //set & get property
user.age = 10; //returns undefined

Array.indexOf(Object item)
Returns the index of the argument item in the Array. If item is not in Array, -1 is returned.

var arr = new Array("one", "two", "three");
arr.indexOf("two"); //returns 1
arr.indexOf("four"); //returns -1

String.trim()
Trims the leading and trailing spaces from this String and returns the new String.

var str = new String(" Hello ");
str.trim(); //returns "Hello"

String.endsWith(String str)
Returns true if String ends with argument String.

var str = new String("Hello World");
str.endsWith("World"); //returns true
str.endsWith("Hello"); //returns false

EsriPoint
Create a Point Object represented by x and y coordinates.

var point = new EsriPoint(100, 100);
point.x; //returns 100
var newPt = point.offset(50, 20);
point.y; //returns 100
newPt.y; //returns 120
point.reshape(50, 20);
point.toString(); //returns "EsriPoint [x = 50, y = 20]"
var copy = point.offset(0, 0); //returns a new EsriPoint, copy of point

Property Summary

Number x	X coordinate of EsriPoint
Number y	Y coordinate of EsriPoint

Constructor Summary

EsriPoint(Number
x, Number y)

Constructs
a new EsriPoint
Object with argument x & y 

      

Function Summary

boolean equals(EsriPoint pt)	Returns true if x & y coordinates of this point are same as argument pt.
EsriPoint offset(Number offsetX, Number offsetY)	Returns a new EsriPoint Object by offsetting this point's x & y coordinates by argument offsetX & offsetY
void reshape(Number x, Number y)	Reshapes the EsriPoint Object to the argument x & y values.
String toString()	Returns a String representation of this EsriPoint Object

EsriRectangle
Create a Rectangle Object represented by the left, top, width & height.

var rect = new EsriRectangle(10, 110, 100, 200);
rect.left; //returns 10
rect.center; //returns an EsriPoint [x = 60, y = 210]
var newRect = rect.offset(25, 35); //returns a new rectangle with left=35, top=145, width=100, height=200
newRect.left; //returns 35
rect.reshape(1, 5, 10, 20);
rect.left; //returns 1
rect.scale(5).toString(); //returns "EsriRectangle [left = -19, top = -35, width = 50, height = 100]"
var copy = rect.offset(0, 0); //returns a new EsriRectangle, copy of rect

Property Summary

EsriPoint center	Center point of EsriRectangle
Number height	Height of EsriRectangle
Number left	Left coordinate of EsriRectangle
Number top	Top coordinate of EsriRectangle
Number width	Width of EsriRectangle

Constructor Summary

      EsriRectangle(Number left, Number top, Number width, Number height)

      Constructs
a new EsriRectangle
Object with argument left, top, width & height

Function Summary

boolean equals(EsriRectangle rect)	Returns true if left, top, width & height are equal in this and argument rectangle objects
EsriRectangle offset(Number offsetX, Number offsetY)	Returns a new EsriRectangle Object, offset by the argument values offsetX & offsetY
void parseStyle(CSSStyleDeclaration styleString)	Parses style string to populate left, top, width & height of the EsriRectangle object. If no style value is found, defaults to 0
void reshape(Number left, Number top, Number width, Number height)	Reshapes the EsriRectangle Object to the argument left, top, width & height values
EsriRectangle scale(Number factor[, EsriPoint center])	Returns a new EsriRectangle Object scaled by argument factor. If center argument is provided, the scaled EsriRectangle is recentered to this point
String toString()	Returns a String representation of this EsriRectangle
CSSStyleDeclaration toStyle()	Returns style representation of current bounds. (example: "left:8px; top:30px; width:452px; height:149px;")

EsriColor
Creates a Color Object represented by red, green and blue values.

var color = new EsriColor(100, 150, 200);
color.red; //returns 100
color.toHex(); //returns "#6496C8"

var newColor = new EsriColor();
newColor.red; //returns null
newColor.fromHex("#ff00ff");
newColor.red; //returns 255

Property Summary

Number blue	Blue property of EsriColor
Number green	Green property of EsriColor
Number red	Red property of EsriColor

Constructor Summary

EsriColor(Number red, Number green,
Number blue)

Constructs
a new EsriColor Object with red, green and blue arguments.
Red, green & blue must be in the range of 0-255

      

Function Summary

void fromHex(String hex)	Convert HEX color representation to EsriColor Object
EsriColor fromString(String color)	Converts a string in format (r,g,b) to its EsriColor representation
String toHex()	Convert this color Object to its HEX representation
String toString()	Returns a String representation of this EsriColor

EsriGraphicsElement
Creates a Graphics Element which can be used for drawing graphics.

View Demo
<html>
...
<div id="myDiv" style="width:300px; height:300px; border:1px INSET #000000; overflow:hidden; position:relative;"></div>
<script type="text/javascript" language="Javascript">
    function draw() {
      //create GraphicsElement
var graphics = EsriUtils.createGraphicsElement("myGraphics", document.getElementById("myDiv"));

      //set graphics properties & draw
      graphics.drawLine(pt1, pt2);

...
      graphics.drawCircle(center, radius);

      ...
      graphics.drawRectangle(rect);
    }
</script>
</html>

Note : The preferred way to create a GraphicsElement is by using EsriUtils.createGraphicsElement().

Property Summary

String fillColor	Fill color of next graphic	Default is #000 (black)
Number fillOpacity	Fill opacity of next graphic	Default is 0 (transparent)
Object gc	HTMLElement graphics context on which graphics is drawn
String id	Id of the GraphicsElement object
String lineColor	Line color of next graphic	Default is #000 (black)
Number lineOpacity	Line opacity of next graphic	Default is 1 (opaque)
Number lineWidth	Line width of next graphic	Default is 1

Function Summary

void clear()	Clear all graphics
void clearClip()	Clear clipping rectangle
void clip(EsriRectangle rect)	Clip all graphics beyond argument rectangle
void destroy()	Clear graphics and remove gc from its container
void drawCircle(EsriPoint center, Number radius)	Draw circle with argument center and argument radius
void drawImage(String src, Number left, Number top, Number width, Number height)	Draw an image with argument source at argument left & top with argument width and height
void drawLine(EsriPoint point1, EsriPoint point2)	Draw line from argument point1 to argument point2
void drawOval(EsriRectangle bounds)	Draw oval whose bounds are defined by argument bounds rectangle
void drawPoint(EsriPoint point)	Draw argument point
void drawPolygon(EsriPoint[] points)	Draw polygon with argument points
void drawPolyline(EsriPoint[] points)	Draw polyline with argument points
void drawRectangle(EsriRectangle rect)	Draw argument rectangle
void drawText(String text, EsriRectangle bounds, CSSStyleDeclaration fontStyle)	Renders argument text within the graphics. The rectangular bounds and CSS font style are required to apply to rendered text
void hide()	Hide graphics element
void show()	Show graphics element

Please see Known Issues

EsriUtils
This is a collection of utility properties and functions that can be used within any application. EsriUtils is predefined as a global variable for easy use. The EsriUtils object defines several cross browser properties and functions which can be used in place of custom properties and functions. For example:

Use EsriUtils.getXY to get the XY coordinates of an event
Use EsriUtils.setElementStyle to set the position and style of an HTML element instead of HTMLElement.cssText

Property Summary

boolean doPostBack	Enables/Disables whether the page is submitted to the server for a complete refresh or the page is refreshed through AJAX (postback). Default is true
String graphicsType	String name of graphics type supported by browser. (if IE, then "VML", else "NS")
boolean isFF15	true of browser is Firefox 1.5
boolean isIE	true if browser is "microsoft"
boolean isIE7	true of browser is "internet explorer 7"
boolean isNav	true if browser is "netscape"
Number KEY_DOWN	Down cursor keycode. Default is 40
Number KEY_ENTER	Enter key keycode. Default is 13
Number KEY_ESCAPE	Escape key keycode. Default is 27
Number KEY_LEFT	Left cursor keycode. Default is 37
Number KEY_RIGHT	Right cursor keycode. Default is 39
Number KEY_UP	Up cursor keycode. Default is 38
Number leftButton	Mouse Left button. Default is 1
Number mouseWheelUnit	Unit value for each movement of mouse wheel. If IE, then 120, else 3
String navType	String name of browser (IE/Firefox/Opera/Safari/Netscape/Mozilla)
Number rightButton	Right button. If IE, then 2, else 3
String userAgent	Browser's user-agent String

Function Summary

void addFormElement(String formId, String name, String value)	Adds a hidden input field of argument name and value within the form with argument formId
String buildRequestParams(String formId)	Build request parameter string based on valid form elements in form with argument id
void cloneElementStyle(HTMLElement source, HTMLElement target)	Clones the style properties of the source element and sets to the target element
EsriGraphicsElement createGraphicsElement(String id, HTMLElement container)	Creates an EsriGraphicsElement object based on the EsriUtils.graphicsType value and adds it to the argument container
HTMLImage createImage(String src, String width, String ht)	Creates an image object. Depending on whether IE or not, sets the filter to support PNG transparency. The required width and height arguments can be specified as "px", "%", etc. For example "16px", "50%", etc
XmlHttpObject createXmlHttpObject()	Creates and returns a browser specific XMLHttpRequest object
Number fromHex(Hex hex)	Converts argument hexadecimal number to its base 10 number
EsriRectangle getElementBounds(HTMLElement e)	Returns the rectangle bounds of the argument HTMLElement as specified in it's CSSStyleDeclaration
EsriRectangle getElementPageBounds(HTMLElement e)	Returns the rectangle bounds of the argument HTMLElement as rendered in the current document
HTMLElement[] getElementsByClassName(HTMLElement element, String className)	Returns all child elements of argument element who's class name matches the argument className
HTMLElement getEventSource(Event e)	Returns the HTMLElement on which the argument event was performed
String getJSessionId()	Returns the JSESSIONID COOKIE value from the browser
Number getKeyCode(Event e)	Returns the key code for the argument event
Number getMouseButton(MouseEvent e)	Returns which mouse button was clicked in argument event
EsriRectangle getPageBounds()	Returns the size of the current document window
String getServerUrl(String formId)	Returns the url to server as defined in the action attribute of the form with argument formId. If jsessionid is not already in action, it is appended by calling EsriUtils.getJSessionId()
CSSStyleDeclaration getStyleByClassName(String name)	Returns the style class decleration from the page. If style decleration is not found, null is returned. (example : name "#body" returns ["background-color"], name "image.esriMapImage" returns ["position", "border", "margin", "padding"])
Number getStyleValue(String str)	Returns the value (as Number) of a style property
EsriPoint getXY(MouseEvent e)	Returns the point where the argument mouse event was fired
void hideElement(HTMLElement element)	Hide argument element. (set style attribute "display:none")
boolean isLeftButton(MouseEvent e)	Returns true if left mouse button is clicked in argument event
void moveElement(HTMLElement element, Number left, Number top)	Move element to argument left and top position
void removeElementStyle(HTMLElement element, CSSStyleDeclaration styleString)	Removes style properties from element based on list from argument style string. (example: "left:; top:;", removes the left & top style properties from the argument element)
void removeFormElement(String formId, String name)	Removed the form element of argument name from form with argument formId
XmlHttpObject sendAjaxRequest(String url, String params, boolean doGET, function callback[, String contentType])	Send an Asynchronous Javascript & XML request to server at argument url, with argument parameters. If doGet is true, send as GET request else POST request. When processing request, callback argument function. [See AJAX documentation]
void setElementOpacity(HTMLElement element, Number opacity)	Set the argument element's opacity. The opacity must be in the range of 0 to 1
void setElementStyle(HTMLElement element, CSSStyleDeclaration styleString)	Set the argument element's CSSStyleProperties. The argument styleString is in the standard css style string. This is the prefered way for setting an element's style
void setImageSrc(HTMLElement element, String src)	If browser is IE6, then creates a filter and sets AlphaLoader to argument src, else sets the element's source property to the argument src
void showElement(HTMLElement element)	Show argument element (set style attribute "display:block")
void stopEvent(Event e)	Stops the propagation of the argument event
void submitForm(String formId[, boolean async, function callback])	Submits the form with argument formId. If optional flag async is true, the form is submitted using XmlHttp and argument callbackFunction called when request processing is complete. [See AJAX documentation]
void toggleElement(HTMLElement element)	Toggle visibility of argument element
Hex toHex(Number num)	Converts argument number to its hexadecimal representation

EsriPageElement
EsriPageElement is the root object for all visual Javascript objects in this library. [See Object Model].

View Demo

<html>
<script type="text/javascript" language="Javascript">
    var myPE = new EsriPageElement("myPE");
myPE.divObject = document.getElementById("myDiv");
    myPE.divId = "myDiv";
    ...
</script>
...
<div id="myDiv">
    ...
</div>
</html>

Property Summary

EsriRectangle bounds	Page elements' bounds
String divId	Id of HTMLElement represented in this EsriPageElement object
HTMLElement divObject	HTMLElement represented in this EsriPageElement
String id	Id attribute of page elements

Constructor Summary

EsriPageElement(String id[, Number left, Number top, Number width, Number height])

      

Create a
PageElement with argument id and optional left, top, width & height

Function Summary

void hide()	Hide divObject
void resize(Number wd, Number ht)	Resize divObject to argument width & height
void show()	Show divObject

EsriControl
EsriControl is the root element for all controls that are rendered by the server.

Property Summary

String type	Type of control (Map, Overview, Toc, Task & Toolbar)
String[] updateListenerNames	Names of listeners
function[] updateListeners	Array of functions listening to updates on this Object

Constructor Summary

inheritsFrom(EsriPageElement)

      

Function Summary

inheritsFrom(EsriPageElement)
void addUpdateListener(String name, function listener)	Add a listener function identified by argument name to be called when this Object is updated
void removeUpdateListener(String name)	Remove a listener function identified by argument name

Callback/Listener Function Summary

function void listener(EsriControl control)

      

This
listener function is called by the EsriControl and the control itself
is passed as argument to the listener whenever it is updated

      

EsriControls
A global object to store all controls currently rendered on the page.

//get the first map
var map = EsriControls.maps[EsriControls.mapNames[0]];

//get mapId which an overview and task works with
var ov1 = EsriControls.overviews["ov1"];
ov1.mapId;
var task1 = EsriControls.tasks["task1"];
task1.mapId;

//get number of tocs
EsriControls.tocNames.length;

//get toolbar types
for (var i=0;i<EsriControls.toolbarNames.length;i++) {
var toolbar = EsriControls.toolbars[EsriControls.toolbarNames[i]];
toolbar.type;
}

EsriControls is a global which should be used to access all maps, overviews, tasks, tocs & toolbars.

Property Summary

Array mapIds	Ids of all map controls
Array maps	Collection of maps
Array overviewIds	Ids of all overview controls
Array overviews	Collection of overviews
Array taskIds	Ids of all task controls
Array tasks	Collection of tasks
Array tocIds	Ids of all toc controls
Array tocs	Collection of tocs
Array toolbars	Collection of toolbars
Array toolbarIds	Ids of all toolbar controls

Function Summary

void addPostBackTagHandler(String tagName, function callback)	Add callback function to process xml tag with argument tagName
void processPostBack(XMLDocument xml)	Callback function to update all controls on clientside postback
function removePostBackTagHandler(String tagName)	Remove callback function registered to process argument tagName

Callback/Listener Function Summary

function void callback(XMLNode
requestedTagXmlElement, String[]
eventSources)

      

The
processPostBack function calls this callback function, added as a
postback tag handler. The appropriate XML Tag and the list of
event sources are passed to this function

      

EsriAction
An EsriAction Object defines an action/behaviour that can be performed on an HTMLElement. The EsriAction defines a standard set of functions and properties, each extending action must implement and support these properties and functions.

View Demo

<html>
<script>
    function myCallback(from, to) {
      alert("Line starts at : " + from + "\nends at : " + to);
    }

    function init() {
      //create and activate action
    var action = new EsriDrawLineAction();
    action.activate(document.getElementById("myDiv"), myCallback);
    }
</script>
...
<div id="myDiv" style="..."></div>
</html>

Property Summary

String cursor	Cursor of action. Default is "crosshair"
String fillColor	Fill color of action. Default is "#fff"
Number fillOpacity	Fill opacity of action. Default is 0
Number graphicsZIndex	Z-Index of graphics layer created by action. Default is 49
boolean isActive	true if this action is currently active
String lineColor	Line color of action. Default is "#f00"
Number lineOpacity	Line opacity of action. Default is 1
Number lineWidth	Line width of action. Default is 2
String name	Name of this action

Constructor Summary

EsriAction()

      

Creates
an action object

Function Summary

void activate()	Abstract method. The implementation should activate action and register mouse/keyboard/document event listeners
void deactivate()	Abstract method. The implementation should remove event listeners from HTMLElements
void reactivate()	Function with no implementation to reset and reinitialize action

Also see Customizing Actions & ToolItems

EsriDrawLineAction

Property Summary

String name

      

"EsriDrawLineAction"

      

Constructor Summary

EsriDrawLineAction()	An action which can be used to draw a line
inheritsFrom(EsriAction)

Function Summary

void activate(HTMLElement
element, function callback[, function continuousCallback])

Activate
action using argument element and callback function to be called after
action is completed. If optional parameter continuousCallback is
passed, this function is called as the line is being draw by the user

Callback/Listener Function Summary

function void callback(EsriPoint startPt, EsriPoint endPt)	Callback function is called and the start and end points passed as arguments after the user has completed drawing the line
function void continuousCallback(EsriPoint startPt, EsriPoint endPt)	Continuous callback function is called and the start and end points passed as arguments while the user draws the line

EsriDragElementAction

View Demo

<html>
<script>
function myCallback(x, y) {
...
    alert("Box moved by (" + x + ", " + y + ")");
}

function myContCallback(x, y) {
..
    }

function init() {
...
    action = new EsriDragElementAction(true);
action.activate(box, myCallback, myContCallback);
    }

function doMove(x, y) {
      ...
    action.doDrag(x * dist, y * dist);
        action.endDrag(x * dist, y * dist);
        ...
    }
</script>
...
<div ...>
    <div id="box" ...></div>
</div>
<table>
    ...
      <a href="" onclick="return doMove(1, 1);">...</a>
    ...
</table>
</html>

Property Summary

String name

"EsriDragElementAction"

Constructor Summary

EsriDragElementAction([boolean allowDocumentInput])	Creates an action which can be used to move a HTML element. The EsriDragElementAction can also be triggered by calling doDrag & endDrag. Optional arguments include allowDocumentInput which specifies whether document.onmousemove event must also be processed by the action
inheritsFrom(EsriAction)

Function Summary

void activate(HTMLElement element, function callback[, function continuousCallbackFunc])	Activate action using argument element and callback function. Optionally pass continuousCallbackFunc to be called while the action is being performed
void doDrag(Number x, Number y)	Drag element associated with Action by argument x & y distance. Does continuousCallback
void endDrag(Number x, Number y)	End drag associated with Action by argument x & y distance. Does callback

Callback/Listener Function Summary

function void callback(Number x, Number y)	Callback function called once dragging is completed with distance dragged in x & y axes
function void continuousCallback(Number x, Number y)	Continuous callback function must take in x & y distance, element has been moved since the start of the drag action

EsriDrawRectShapeAction

Constructor Summary

EsriDrawRectShapeAction(String shapeType)	Creates an action to draw a rectangular shape. Supported shapeTypes Rectangle Oval
inheritsFrom(EsriAction)

Function Summary

void activate(HTMLElement
element, function callback)

Activate
action using argument element and callback function to be called after
action is complete 

Callback/Listener Function Summary

function void callback(EsriRectangle rect)	Callback function is called after the rectangle is drawn and the rectangle on screen is passed as argument
function void continuousCallback(EsriRectangle rect)	Continuous callback function is called while the rectangle is being drawn and rectangle being drawn is passed as argument

EsriDrawRectangleAction

Property Summary

String name

"EsriDrawRectangleAction"

Constructor Summary

EsriDrawRectangleAction()

      

Creates
an
action to draw a rectangle. Creates and returns new EsriDrawRectShapeAction("Rectangle")
object

EsriDrawOvalAction

Property Summary

String name

"EsriDrawOvalAction"

Constructor Summary

EsriDrawOvalAction()

Creates
an action to draw an oval. Creates and returns new EsriDrawRectShapeAction("Oval")
object

EsriDrawPointAction

Property Summary

String name

"EsriDrawPointAction"

Constructor Summary

EsriDrawPointAction()	Creates an action to draw a point
inheritsFrom(EsriAction)

Function Summary

void activate(HTMLElement
element, function callback)

Activate
action using argument element and callback function to be called after
action is complete 

Callback/Listener Function Summary

function void callback(EsriPoint rect)

Callback
function is called after the point is clicked and its coordinates are
passed as argument 

EsriDrawPolyShapeAction

Constructor Summary

EsriDrawPolyShapeAction(boolean isPolygon)	Creates an action to draw polygon or polyline
inheritsFrom(EsriAction)

Function Summary

void activate(HTMLElement
element, function callback)

Activate
action using argument element and callback function to be called after
action is complete 

Callback/Listener Function Summary

function void callback(EsriPoint[] points)	Callback function is called after the user double clicks on the last point to complete drawing the polygon and the coordinates of points are passed as argument
function void continuousCallback(EsriPoint[] points)	Continuous callback function is called when a user clicks to add a point to the polygon being drawn and the list of points passed as argument

EsriDrawPolygonAction

Property Summary

String name

"EsriDrawPolygonAction"

Constructor Summary

EsriDrawPolygonAction()

Creates
and returns new EsriDrawPolyShapeAction(true)
object

      

EsriDrawPolylineAction

Property Summary

String name

"EsriDrawPolylineAction"

Constructor Summary

EsriDrawPolylineAction()

Creates
and returns new EsriDrawPolyShapeAction(false)
object 

EsriDrawCircleAction

Property Summary

String name

"EsriDrawCircleAction"

Constructor Summary

EsriDrawCircleAction()	Creates an action to draw a circle
inheritsFrom(EsriAction)

Function Summary

void activate(HTMLElement
element, function callback)

Activate
action using argument element and callback function to be called after
action is complete 

Callback/Listener Function Summary

function void callback(EsriPoint point, Number radius)	Callback function is called after the user lifts the mouse after dragging the circle. The center & radius are passed as arguments
function void continuousCallback(EsriPoint point, Number radius)	Continuous callback function is called while the user is drawing the circle, its center & radius are passed as arguments

EsriResizeElementAction

Property Summary

String name

"EsriResizeElementAction"

Constructor Summary

EsriResizeElementAction([boolean allowDocumentInput[, Number minWd, Number minHt, Number maxWd, Number maxHt])	Construct an EsriResizeElementAction object. Optional arguments include whether document.onmousemove event must be tracked. The minimum and maximum width & height can also be set
inheritsFrom(EsriAction)

Function Summary

void activate(HTMLElement
element, function callback[, function continuousCallbackFunc])

Activate
event using argument element and callback function. Optionally if
callContinuously is
true, pass continuousCallbackFunc to be called while the action is
being
performed

Callback/Listener Function Summary

function void callback(EsriRectangle rect)	Callback function is called after the user raises the mouse after resizing the element. The new bounds rectangle is passed as argument
function void continuousCallback(EsriRectangle rect)	Continuous callback function is called while the element is being resized and its rectangle bounds is passed as argument

EsriMouseWheelAction

Property Summary

String name

"EsriMouseWheelAction"

Constructor Summary

EsriMouseWheelAction()	Creates an action to handle mouse wheel scrolling
inheritsFrom(EsriAction)

Function Summary

void activate(HTMLElement
element, function callback)

Activate
action using argument element and callback function to be called after
action is complete 

Callback/Listener Function Summary

function void callback(Number
value)

Callback
function is called after the user has completed scrolling the mouse
wheel. The number of ticks is passed as argument. See also EsriUtils.mouseWheelUnit 

EsriKeyInputAction

Property Summary

String name

"EsriKeyInputAction"

Constructor Summary

EsriKeyInputAction()	Creates an action to listen to keyboard inputs
inheritsFrom(EsriAction)

Function Summary

void activate(HTMLElement
element, function callback[, function continuousCallbackFunc])

Activate
action using argument element and callback function and optional
continuous callback function

      

Callback/Listener Function Summary

function void callback(Number keyCode)	Callback function is called once the user releases the key. The keyCode is passed as argument
function void continuousCallback(Number keyCode)	Continuous callback function is called when a user presses a key on the keyboeard. This key's keycode is passed as argument

EsriToolItem
An EsriToolItem object uses an action to provide user customizable behavior. The tool item can then be used within an EsriToolbar to provide a user interface within a browser. The EsriToolbar manages the state (default/disabled/hover/selected) of the tool item.

Multiple tool items can use the same action to perform different behaviors. For example, the EsriDragElementAction is used by both by EsriMapPan & EsriMapContinuousPan, but the behaviour is different.

View Demo

<html>
<script>
    function init() {
      ...
      var rectTI = new EsriMapRectangle("re", "Draw Rectangle", true);
      var circleTI = new EsriMapCircle("ci", "Draw Circle", true)
      var clearTI = new MyClearGraphicsToolItem();
      ...
    }

    function MyClearGraphicsToolItem() {
      this.inheritsFrom(new EsriToolItem("clear", "Clear Graphics", null, false));
      this.isCommand = true;
      this.activate = function() { EsriControls.maps["map1"].graphics.clear(); }
    }
</script>
</html>

Property Summary

EsriAction action	EsriAction associated with tool item
boolean clientPostBack	Whether tool should submit form using client postback. Default is false
EsriControl control	EsriControl which this tool item works with
String defaultImage	Default image to be used (IMAGE and IMAGE_AND_TEXT toolbar)
CSSStyleDeclaration defaultStyle	Default style of tool item (TEXT toolbar)
String disabledImage	Image to be shown when tool item is disabled (IMAGE or IMAGE_AND_TEXT toolbar)
CSSStyleDeclaration disabledStyle	Style when tool is disabled [TEXT toolbar]
HTMLElement element	HTMLElement on which the action must perform its operations
String hoverImage	Image to be shown on mouse over (IMAGE and IMAGE_AND_TEXT toolbar)
CSSStyleDeclaration hoverStyle	Style of tool item on mouse over (TEXT toolbar)
String id	Unique id of ToolItem
boolean isCommand	Whether tool item is a command. If is a command, the activate & deactivate functions are called in succession. Default is false
boolean isDisabled	Whether tool item is enabled for use, else disabled and not usable. Default is false
boolean isMarker	Whether tool item is a marker (drawn as graphic on screen) or tool (sends coordinates/request to server)
String name	Name as displayed by EsriToolbar (TEXT and IMAGE_AND_TEXT toolbar)
String selectedImage	Image to be shown when tool item is selected (IMAGE and IMAGE_AND_TEXT toolbar)
CSSStyleDeclaration selectedStyle	Style when tool is selected (TEXT toolbar)
boolean showLoading	If working with a map control, whether to show the loading image. Default is true
String toolTip	Tool tip string for mouse over

Constructor Summary

EsriToolItem(String
id, String toolName, EsriAction
action, boolean marker)

      

Create a
EsriToolItem object with argument id, using argument action and true
if client side marker

      

Function Summary

void activate()	Activate tool item. Default is "action.activate(element, postAction)"
void deactivate()	Deactivate tool item. Default is "action.deactivate()"
void postAction()	Callback function for calling back from action

Also see Customizing Actions & ToolItems

Netscape/Default Graphics support (esri_graphics_ns.js)

EsriNSGraphicsElement

Constructor Summary

EsriNSGraphicsElement(String id, HTMLElement container)	Create GraphicsElement implementation for supporting drawing graphics on non-IE browsers
inheritsFrom(EsriGraphicsElement)

VML/IE Graphics support (esri_graphics_vml.js)

EsriVMLGraphicsElement

Constructor Summary

EsriVMLGraphicsElement(String id, HTMLElement container)	Create GraphicsElement implementation for supporting drawing graphics on Microsoft Internet Explorer
inheritsFrom(EsriGraphicsElement)

Map (esri_map.js)

The Map control is the center of most web mapping applications. A working map is rendered through ESRI's Java ADF JSF based web controls. This document does not cover the use of ESRI's JSF controls. See links for more information on JSF controls.

The esri_map.js in addition to defining the map, defines a set of ToolItems for use with the Map and a set of utility objects to add behaviour to the Map.

EsriMap
EsriMapSource

EsriMapSourceDynamic
EsriMapSourceTile

EsriMapNavigator
EsriMapSlider
EsriMapToolItem

EsriMapCircle
EsriMapContinuousPan
EsriMapImage
EsriMapKeyNavigation
EsriMapLine
EsriMapMouseWheel
EsriMapOval
EsriMapPan
EsriMapPoint
EsriMapPoly

EsriMapPolygon
EsriMapPolyline

EsriMapRectangle
EsriMapServerAction

EsriMap
The EsriMap and its properties can be used within a running application as shown

<html>
<body onload="test()">
    ...
    <script type="text/javascript" language="Javascript">
      function test() {
      //access map
var map = EsriControls.maps["myMapId"];

        //using map's property
        var formId = map.formId;
        var serverUrl = EsriUtils.getServerUrl(formId);
      }
    </script>
    ...
</body>
</html>

Property Summary

HTMLElement controlDiv	Div object used to layout map
String controlDivId	Id assigned to controlDiv object. Default is "MapControlDiv_<map id>"
EsriToolItem currentTool	Current tool item currently active on the map control
String currentToolbar	Toolbar of which the current tool is part of
String divId	Id of the div which is rendered as root container of the map control. Default is "MapDiv_<map id>"
String formId	Id of form within which the map's divObject is rendered. This form id is used for: Building request params from form fields Getting url to Web ADF application
EsriGraphicsElement graphics	Clientside graphics element object that can be used for drawing graphics
String graphicsId	Id of map's graphics object. Default is "MapGraphics_<map id>"
Number graphicsZIndex	CSS z-index value of graphics object. Default is 19
Number height	Height of map control. Maps to the JSF map tag's height attribute
HTMLElement imageGrid	Div used as grid to display map images
String imageGridId	Id of image grid div. Default is "MapGridDiv_<map id>"
String id	Id of map control. Maps to the JSF map tag's id attribute.
boolean isFuseGraphics	Whether web graphics is fused as part of the server image, or it must be requested asynchronously. Default is false
EsriMapKeyNavigation keyNavigation	Tool item supporting keyboard navigation on map control. This tool is active by default
String loadingId	Id of loading object. Default is "MapLoading_<map id>"
HTMLElement loadingObject	Loading object displayed when application is processing a request
CSSStyleDeclaration loadingStyle	CSS property for loading object. Default is "position:absolute; top:5px; right:5px;"
String loadingUrl	URL to loading image. Default is "images/loading.gif"
Number loadingZIndex	CSS z-index of loading image. Default is 99
EsriMapSource[] mapSources	Collection of map sources that provide behaviour for interacting with the server to retrieve images, web graphics and process resize & centerAt actions. The map control itself acts as a container for 1...n MapSource objects
String[] mapSourceNames	Names of all map sources, specified while adding to the map control
EsriMapMouseWheel mouseWheelTool	Tool item for supporting zooming in/out using mouse scroll wheel. This tool is active by default Scroll mouse wheel UP to zoom IN Scroll mouse wheel DOWN to zoom OUT
EsriMapContinuousPan panTool	Tool item for supporting continuous pan. This tool is active by default
EsriScaleBar scaleBar	Scalebar displayed on the map control
String scaleBarId	Id of div in which scalebar is rendered. Default is "ScaleBar_<map id>"
HTMLElement scaleBarDiv	Div within which the scalebar is rendered
String[] scaleBarTypes	Class names of scalebar types. Default is ["Alternating"] = "EsriAlternatingScaleBarRenderer" ["SteppedScaleLine"] = "EsriSteppedScaleLineRenderer" ["SingleDivision"] = "EsriSingleDivisionScaleBar" ["DoubleAlternating"] = "EsriDoubleAlternatingScaleBarRenderer"
String[] scaleBarTypeNames	Names of scalebars. Default is [0] = "Alternating" [1] = "SteppedScaleLine" [2] = "SingleDivision" [3] = "DoubleAlternating"
EsriRectangle viewBounds	Visible rectangle area of map in screen coordinates
String webGraphicsId	Id of web graphics image. Default is "MapWebGraphics_<map id>"
Number webGraphicsZIndex	CSS z-index of web graphics image. Default is 20
Number width	Width of map control. Maps to the JSF map tag's width attribute

Constructor Summary

EsriMap(String id, HTMLElement container, String formId[, Number width, Number height])	Contructs an EsriMap object using the argument id, a container to render the map control and the id of the form within which the map object is rendered. The width & height of the map control are optional. If the width & height are not provided, the size of the container is used. If the size of the container is not determined, the map defaults to width & height of 400px
inheritsFrom(EsriControl)

Function Summary

void activateCurrentToolItem()	If the map has a currentToolItem, activate current tool item
void addMapSource(String name, EsriMapSource mapSource)	Add a map source object to the map control. The map source object is responsible for communicating with the server to retrieve image to be displayed on the map.
void addScaleBar(String url, String position, Number width, Number height, Number screenDistance, Number mapDistance, String units[, String type])	Add a scalebar to the map control. Addition of scalebar to the map is specified through the jsf map control. If scalebar type is image, the url is provided by the server. Its position on the map, its width, height, screen distance, map distance & units label are required and specified through the scalebar JSF managed bean Scale bar position is determined through the JSF managed bean attribute If url is null, and no type is specified, an "Alternating" scalebar is used
void clearCurrentToolItem()	If the map has a currentToolItem, clear this tool item
void clearImages()	Clear all images displayed in this map on its imageGrid
EsriToolItem createCurrentToolItem(String id, String elementId, String clientAction, boolean showLoading, boolean doPostback[, String lineColor, Number lineWidth, CSSStyleDecleration/String defaultStyle/Image, CSSStyleDecleration/String hoverStyle/Image, CSSStyleDecleration/String selectedStyle/Image, CSSStyleDecleration/String disabledStyle/Image])	Create, set & return map's current tool item. The current tool item is created using argument id, id of element that action works with, action name, whether to show map's loading image & whether to submit request through AJAX postback. Optional arguments include the line color & width of the action. Also depending on type of toolbar (TEXT/IMAGE/IMAGE_AND_TEXT) the default, hover, selected & disabled style or image is applied to the tool item
void deactivateCurrentToolItem()	Deactivate current tool item such that the action performed by the tool is no longer active
void hideLoading()	Hide loading object
void init(HTMLElement container)	Initialize map control object with argument container as parent HTMLElement within which the divObject is to be rendered
void reactivateCurrentToolItem()	Deactivate & reactivate current tool item
void removeMapSource(String name)	Remove map source of argument name in array of map sources
void resize(Number width, Number height)	Resize map control to argument width & height
void setCurrentToolItem(EsriToolItem toolItem[, String toolbarId])	Deactivate current tool item (if any) and set argument tool item as active tool item on map. Optional argument is id of toolbar this tool item is part of
void setMapImage(String imageUrl)	Set map image to be displayed when map control is initially rendered
void showLoading()	Show loading object
void updateAsync(XMLElement xml, String[] eventSources)	Postback tag handler function which is responsible for updating map control during postback

EsriMapSource
Map fetching functionality is handled by the EsriMapSource objects. The EsriMapSource object represents the abstract functionality for all map sources object. Depending on data source type (dynamic or tile/cache), specific map sources have been created that handle retrieval of map images.

Property Summary

Number column	Initial column of images on imageGrid. Default is 0
boolean doTileCleanUp	Clean up tiles not currently visible in map control. Default is true
String formUrl	Form url to communicate with server
Number imageHeight	Height of image to be added to map's imageGrid
String[] imageList	Ids of images currently added by this map source
Number imageWidth	Width of image to be added to map's imageGrid
Number imageZIndex	CSS z-index of image when to be added to map's imageGrid
EsriMap map	Map control which this map source is added to
Number offsetX	Offset of initial image along x axis. Default is 0
Number offsetY	Offset of initial image along y axis. Default is 0
Number row	Initial row of images on imageGrid. Default is 0
String type	Map source type name
Number zoomStep	Step by which zoom increments/decrements. Default is 1

Constructor Summary

EsriMapSource(String
sourceType)

Creates
a new map source object of argument data source type

Function Summary

void addImage(Number offsetX, Number offsetY, String imageId)	Abstract function which adds images onto the map's image grid. The image added must have argument imageId
void centerAt(Number x, Number y)	Function to set server side map control's center x & y screen coordinates
void changeLevel(Number newLevel)	Change zoom level of map to argument level
void resizeMap(Number width, Number height)	Request map resize to argument width & height. Update images to fit new width & height
void update(EsriMap map)	Update map source
void updateImages(EsriRectangle visibleRect)	Update map images to match visible rectangle
void updateWebGraphics()	Update web graphics for map control

EsriMapSourceDynamic
Map source object to work with dynamic data sources

Property Summary

String type

"dynamic"

      

Constructor Summary

EsriMapSourceDynamic(Number imgWd, Number imgHt)	Create map source object to work with dynamic map sources with argument image width and height
inheritsFrom(EsriMapSource)

Function Summary

void addImage(Number
offsetX, Number offsetY, String imageId[, String url])

Add
image to map control's EsriMap.imageGrid.
Optionally if image url is provided, create and add
image with argument url

      

EsriMapSourceTile
Map source object to work with tile/cache data sources

Property Summary

Number endColumn	Ending column of available tiles
Number endRow	Ending row of available tiles
String fileFormat	Extension of image files to be used as tiles. Used if filesys is true. Default is "png"
boolean filesys	Whether tile/cache images are accessible directly through an http path. Default is false
Number level	Current level of tile/cache
String noDataLabel	Label to be displayed for tile areas beyond start/end rows & columns. Default is "No Data"
Number numLevels	Total number of levels in tile/cache
Number startColumn	Starting column of available tiles
boolean showNoData	Default is true
Number startRow	Starting row of available tiles
String tileUrl	URL to access tiles from server
String type	"tile"

Constructor Summary

EsriMapSourceTile(String tileUrl, Number tileWidth, Number tileHeight, Number numberOfLevels, Number level, Number startColumn, Number endColumn, Number column, Number startRow, Number endRow, Number row, Number offsetX, Number offsetY)

      

Map
source object to work with tile/cache map sources. The arguments
include the url to retrieve tile images. The width & heigt of tile
images. The number of levels, the current level of cache. The starting,
ending & current column and starting, ending & current row at
the top-left of the map control's visible extent. The offset in x &
y direction of the starting tile at the top-left of the map control's
visible extent

      

inheritsFrom(EsriMapSource)

Function Summary

void addImage(Number
offsetX, Number offsetY, String imageId

Add
tile/cache image to map control's EsriMap.imageGrid
      

EsriMapToolItem
All tool items that work with the map control extend this class. The esri_map.js provides a collection of predefined ToolItems which can be used within an application to work with the map control.

Constructor Summary

EsriMapToolItem(String id, String toolName, EsriAction action, boolean isMarker)	Creates a new tool item to operate on the map control with argument id, name & action. The tool item can be a marker or tool
inheritsFrom(EsriToolItem)

Function Summary

void activate()	Activate tool item's action on map control
void deactivate()	Deactivate tool item's action on map control

EsriMapRectangle

Constructor Summary

EsriMapRectangle(String id, String toolName, boolean isMarkerTool)	Creates a new tool item to support drawing a rectangle on the map control. This tool item is used in the web adf's zoom tool
inheritsFrom(EsriMapToolItem)

Function Summary

void postAction(EsriRectangle rect)	Processes completion of action on map control. If marker, draws rectangle on map's graphics else sends coordinates to server
void update()	Updates variables in tool item

Server Params Summary

<map id>_minx	top left x coordinate
<map id>_miny	top left y coordinate
<map id>_maxx	bottom right x coordinate
<map id>_maxy	bottom right y coordinate

EsriMapPan

Property Summary

boolean updateOverview

Whether
to update overview while panning map. Default is false

Constructor Summary

EsriMapPan(String id, String toolName)	Creates a new tool item to support panning of map. This tool item is always a tool and never a marker
inheritsFrom(EsriMapToolItem)

Function Summary

void postAction(Number x, Number y)	On completion of the action, the coordinates of the new center are sent to the server for updating controls on the page
void update()	Updates variables in tool item

Server Params Summary

<map id>_minx	x coordinate of new center
<map id>_miny	y coordinate of new center

EsriMapContinuousPan

Property Summary

boolean updateOverview

Whether
to update overview while panning map. Default is true

Constructor Summary

EsriMapContinuousPan(String id, String toolName)	Similar to the EsriMapPan tool item, this tool item supports panning. On completion of panning, the server is updated asynchronously. All controls, except the map control are updated as part of postback. This tool item is always a tool and never a marker
inheritsFrom(EsriMapToolItem)

Function Summary

void activate()	Overrides EsriMapToolItem.activate and sets the continuous & callback functions of the EsriDragElementAction
void continuousAction(Number x, Number y)	Calls all the map's map sources and requests for images to be added to the map's imageGrid, so that a map is always visible within the map control. If updateOverview is true, the associated overview's box is also updated
void postAction(Number x, Number y)	Updates the server and set's the new center of the map control
void update()	Updates variables in tool item

Server Params Summary

<map id>_minx	x coordinate of new center
<map id>_miny	y coordinate of new center

EsriMapPoint

Constructor Summary

EsriMapPoint(String id, String toolName, boolean isMarkerTool, boolean isPin)	Creates a new tool item to draw a point on the map control
inheritsFrom(EsriMapToolItem)

Function Summary

void postAction(EsriPoint point)	If marker, draws point on map control else sends screen coordinates of point to server
void update()	Updates variables in tool item

Server Params Summary

<map id>_minx	x coordinate of point
<map id>_miny	y coordinate of point

EsriMapLine

Constructor Summary

EsriMapLine(String id, String toolName, boolean isMarkerTool)	Creates a new tool item to draw a line on the map control
inheritsFrom(EsriMapToolItem)

Function Summary

void postAction(EsriPoint from, EsriPoint to)	If marker, draws line on map control, else sends the coordinates of the line to be drawn to the server
void update()	Updates variables in tool item

Server Params Summary

<map
id>_coords 

from.x:from.y|to.x:to.y
coordinates
of line

      

EsriMapPoly

Property Summary

boolean isPgon

      

Property
to identify if tool item is for drawing polygons

Constructor Summary

EsriMapPoly(String id, String toolName, boolean isMarkerTool, boolean isPolygon)	Creates a new tool item to draw a polyline on a map control
inheritsFrom(EsriMapToolItem)

Function Summary

void postAction(EsriPoint[] points)	If marker, draws polyline on map control, else sends coordinates of points on the polyline to the server
void update()	Updates variables in tool item

Server Params Summary

<map_id>_coords
      

pt1.x:pt1.y|pt2.x:pt2.y|...|ptN.x:ptN.y
coordinates of points on the
polyline

      

EsriMapPolyline

Constructor Summary

EsriMapPolyline(String id, String toolName, boolean isMarkerTool) 

Creates
a tool item to draw a polyline on a map control. Creates and returns EsriMapPoly(id, toolName,
isMarkerTool, false) 

EsriMapPolygon

Constructor Summary

EsriMapPolygon(String id, String toolName, boolean isMarkerTool) 

Creates
a tool item to draw a polygon on a map control. Creates and returns EsriMapPoly(id, toolName,
isMarkerTool, true) 

EsriMapCircle

Constructor Summary

EsriMapCircle(String id, String toolName, boolean isMarkerTool)	Draws a circle on the map control
inheritsFrom(EsriMapToolItem)

Function Summary

void postAction(EsriPoint center, Number radius)	If marker, draws a circle on the map control, else sends the coordinates of the center & radius to the server
void update()	Updates variables in tool item

Server Params Summary

<map_id>_coords
      

center.x:center.y:radius

      

EsriMapOval

Constructor Summary

EsriMapOval(String id, String toolName, boolean isMarkerTool)	Draws an oval on the map control
inheritsFrom(EsriMapToolItem)

Function Summary

void postAction(EsriRectangle rect)	If marker, draws oval on map control, else sends the rectangle bounds of the oval to the server
void update()	Updates variables in tool item

Server Params Summary

<map
id>_coords 

rect.center.x:rect.center.y:rect.width:rect.height

      

EsriMapImage

Property Summary

String imageUrl	Url to image to be added to map control. Default is "images/pixel.gif"
Number imageHeight	Height of image. Default is 0
Number imageWidth	Width of image. Default is 0

Constructor Summary

EsriMapImage(String id, String toolName, boolean isMarkerTool)	Draws an image on the map control. This tool item is always a marker and never a tool
inheritsFrom(EsriMapToolItem)

Function Summary

void postAction(EsriPoint point)	Point at which image is to be added
void update()	Updates variables in tool item

EsriMapKeyNavigation

Constructor Summary

EsriMapKeyNavigation(String id, String toolName, Number panSpeed)	The tool item adds support for keyboard navigation to the map control
inheritsFrom(EsriMapToolItem)

Function Summary

void activate()	Overrides EsriMapToolItem.activate and sets the continuous & callback functions of the EsriKeyInput action
void continuousAction(Number keyCode)	Calls map's tool items to perform action
void postAction(Number keyCode)	Calls map's tool items when action is completed
void update()	Updates variables in tool item

Keyboard Support Summary

Esc	Cancel current action
+ (Plus)	Zoom in to map
- (Minus)	Zoom out of map
Cursor Upper-left/Home	Pan upper left
Cursor Up	Pan up
Cursor Upper-right/Page Up	Pan upper right
Cursor Right	Pan right
Cursor Lower-right/Page Down	Pan lower right
Cursor Down	Pan down
Cursor Lower-left/End	Pan lower left
Cursor Left	Pan left

EsriMapMouseWheel

Constructor Summary

EsriMapMouseWheel(String id, String toolName)	Map tool to support map zoom in/out using mouse wheel
inheritsFrom(EsriMapToolItem)

Function Summary

void postAction(Number value)	Iterates and calls the changeLevel function on each EsriMapSource object that is part of the map control that this tool item works with
void update()	Updates variables in tool item

Mouse Wheel Support Summary

Wheel up	Zoom in
Wheel down	Zoom out

EsriMapServerAction

Property Summary

boolean
      isCommand

Since
this tool item is a command, default is true

Constructor Summary

EsriMapServerAction(String id, String toolName[, function onclickFunc])	All actions in toolbars and tasks use this action to call to the server. The on click function can be optionally provided for any validation
inheritsFrom(EsriMapToolItem)

Function Summary

void activate()	Overrides EsriMapToolItem.activate(). If the onclick function is provided when this object is created, this function is first called. If the on click function returns true, the parameters are sent to the server
void update()	Updates variables in tool item

Server Params Summary

<map
id>_value

id

EsriMapNavigator
The EsriMapNavigator is a predefined object with functionality to work with the map control, allowing continuous panning and zooming of map.

Property Summary

Number speedStepDistance

      

Distance
in pixels that each click pans the map by. Default is 10 pixels

Constructor Summary

EsriMapNavigator(String id, HTMLElement container, String mapId[, Number left, Number top])	This object provides functionality to use an EsriNavigator with a map, identified by argument map id. It can be positioned within the argument container at left & top
inheritsFrom(EsriNavigator)

Function Summary

void init(HTMLElement container)

      

Initialize
map navigator within argument container

EsriMapSlider
The EsriMapSlider is a predefined object to allow zooming to preset zoom levels.

Property Summary

boolean callContinuously	Default is false
boolean initValue	Initial level to display on slider
boolean isHorizontal	Default is false
boolean numSegments	Number of segments to be displayed on slider
boolean roundValues	Default is true
boolean showTicks	Default is true

Constructor Summary

EsriMapSlider(String id, HTMLElement container, String mapId, Number numberOfSegments, Number initLevel, [, Number left, Number top])	This object provides functionality to use the EsriSlider with the map control with argument map id.
inheritsFrom(EsriSlider)

Function Summary

void update(EsriMap map)

Update
slider control based on levels information on map

Overview (esri_overview.js)

The overview control can be used in conjunction with the map to display the area of the map that is currently being viewed. See links for more information on JSF controls.

The esri_overview.js defines some additional tool items which are used in the overview control to support additional behaviour

EsriOverview
EsriOverviewPan
EsriOverviewResize

EsriOverview

<html>
   <body onload="test()">
     ...
     <script type="text/javascript" language="Javascript">
       function test() {
       //access overview
   var ov = EsriControls.overviews["myOvId"];

         //alert overview's box
         alert(ov.box);
       }
     </script>
     ...
   </body>
</html>

Property Summary

EsriRectangle box	The box displaying the map's current visible area
String boxFillColor	Fill color of view box. Default is "#000"
Number boxFillOpacity	Opacity of view box. Default is 0
Number boxLineWidth	Width of box's border. Maps to the JSF overview tag's lineWidth attribute. Default is 2
String boxLineColor	Color of box's border. Maps to the JSF overview tag's lineColor attribute. Default is "#f00"
Number boxLineOpacity	Opacity of box's border. Default is 1
Number boxZIndex	CSS z-index of box. Default is 9
boolean clientPostBack	Whether client post back is enabled. Maps to the JSF overview tag's clientPostBack attribute. Default is false
String divId	Id of root div within which the overview is rendered. Default is "OverviewDiv_<id>"
Number height	Height of overview control. Maps to the JSF overview tag's height attribute.
String id	Id of overview control. Maps to the JSF overview tag's id attribute
String imageId	Id of map image displayed in overview. Default is "OverviewImage_<id>"
Image imageObject	Map image displayed in overview
String imageUrl	Url to map image displayed in overview
boolean isContinuousPan	Whether to continuously pan map when user drags overview box. Default is false
String mapId	Id of map control which the overview is bound to. Maps to the JSF overview tag's mapId attribute
Number width	Width of overview. Maps to the JSF overview tag's width attribute

Constructor Summary

EsriOverview(String id, HTMLElement container, String mapId, Number width, Number height)	Creates a new EsriOverview control with argument id, within argument container and displaying the visible extent for map with argument id. The overview's width & height are also passed to the constructor
inheritsFrom(EsriControl)

Function Summary

void init(HTMLElement container)	Initialize overview control within argument container
void setOverviewImage(String url)	Set overview map image
void update(Number left, Number top, Number width, Number height)	Update overview's box with argument bounds
void updateAsync(XMLElement xml, String[] eventSources)	Postback tag handler function which is responsible for updating overview control during postback

EsriOverviewPan

Constructor Summary

EsriOverviewPan(String id, String toolName)	Creates a tool item to support panning of the overview's box. If the EsriOverview's isContinuousPan is true, the updateImages function on all map sources in map control bound to the overview control are called
inheritsFrom(EsriToolItem)

Function Summary

void activate()	Activates tool item and sets EsriDragElementAction's continuousCallBack & callback functions
void continuousAction(Number x, Number y)	Requests for map images as the center x & y of the overview box changes
void postAction(Number x, Number y)	Updates server once overview dragging has finished
void update()	Updates variables in tool item

Server Params Summary

<ov id>_minx	x coordinate of center
<ov id>_miny	y coordinate of center

EsriOverviewResize

Constructor Summary

EsriOverviewResize(String id, String toolName)	Creates a tool item to support resizing of the overview box thus zooming in/out the map
inheritsFrom(EsriToolItem)

Function Summary

void activate()	Activates tool item and sets the callback function for the EsriResizeElementAction
void postAction(EsriRectangle bounds)	Zooms map to argument bounds of the overview

Server Params Summary

<ov id>_minx	top left x coordinate
<ov id>_miny	top left y coordinate
<ov id>_maxx	bottom right x coordinate
<ov id>_maxy	bottom right y coordinate

Toc (esri_toc.js)

The Toc control displays the table of contents of resources, layers and symbols of the data displayed in the map. It is also used in the WebADF to display results of queries performed in the web application. See links for more information on JSF controls.

The esri_toc.js contains all the objects that provide the framework for rendering a toc in the web application.

EsriToc
EsriTocNode
EsriContextMenuItem
EsriTocRenderer

EsriTableTocRenderer

EsriToc

<html>
   <body onload="test()">
     ...
     <script type="text/javascript" language="Javascript">
       function test() {
       //access toc
   var toc = EsriControls.tocs["myTocId"];

         //alert number of toc nodes
         alert(toc.nodes.length);
       }
     </script>
     ...
   </body>
</html>

Property Summary

boolean autoPostBack	Whether every node operation must submit request to server. Maps to the JSF toc tag's autoPostBack attribute. Default is true
boolean clientPostBack	Whether to submit request through postback. Maps to the JSF toc tag's clientPostBack attribute. Default is false
String divId	Root div within which toc control is rendered. Default is "TocDiv_<toc id>"
String id	Id of toc control. Maps to the JSF toc tag's id attribute
String mapId	Id of map control with which this toc control is bound. Maps to the JSF toc tag's mapId attribute
EsriTocNode[] nodes	List of toc nodes rendered in this toc control
String tokenEnd	Ending string identifying a token. Default is "}"
function[] tokenHandlers	List of callback functions to handle tokens. See Tokens section for more details
String[] tokens	List of tokens handled by toc. See Tokens section for more details
String tokenStart	Starting string identifying a token. Default is "${"
EsriTocRenderer renderer	Toc renderer object to render the toc's content. Default is EsriTableTocRenderer

Constructor Summary

EsriToc(String id, HTMLElement container, String mapId[, EsriTocRenderer renderer])	Creates a new toc control with argument id, within argument container and bound to map with argument mapId. A toc renderer may be specified to render the nodes in the toc
inheritsFrom(EsriControl)

Function Summary

void addTocNode(String key, String label, Number level, boolean isShowExpanded, boolean isExpanded, boolean isDataframe, boolean isShowCheckbox, boolean isChecked, boolean isUrl, String imageUrl, boolean isDisabled, boolean isSelected, EsriContextMenuItem[] contextMenuItems)	Adds an EsriTocNode with argument who's state is defined by the arguments
void addTokenHandler(String token, function tokenHandler)	List of token handlers associated with toc. See Tokens section for more details
void checkedNodeOperation(String key, boolean value)	Sends request to server with params for checkbox operation <toc id>_key=value <toc id>_nodeKey=key
void contextMenuOperation(String value, String nodeKey)	Sends context menu operation params to server <toc id>_contextMenuItemValue=value <toc id>_nodeKey=key <tod id>_nodeOperation=operation
void init(HTMLElement container)	Initialize toc control within argument container
void nodeOperation(String key, String operation)	Sends request to server with node operation params <toc id>_nodeKey=key <tod id>_nodeOperation=operation
void updateAsync(XMLElement xml, String[] eventSources)	Postback tag handler function which is responsible for updating toc control during postback

EsriTocNode
This object represents a node that is displayed in the toc control.

Property Summary

EsriContextMenuItem[] contextMenuItems	Collection of context menu items
String imageUrl	Url of image to be displayed in toc node
boolean isChecked	Whether node is checked. Default is false
boolean isDisabled	Whether node is disabled. Default is false
boolean isExpanded	Whether node is expanded or collapsed. Default is false
boolean isSelected	Whether node is the selected. Default is false
boolean isShowChecked	Whether node must render checkbox for turning on/off. Example: Allow turning on/off layer. Default is false
boolean isShowExpanded	Whether node must render image to allow users to expand/collapse node. Example: Allow user to expand/collapse to view child nodes. Default is false
boolean isUrl	Whether the node must be rendered as a link. Default is false
String key	Node key as defined on server
String label	Label displayed on toc node
Number level	Hierarchical level of toc node

Constructor Summary

EsriTocNode(String
key, String label, Number level)

Creates
a new EsriTocNode with argument key, label & level

EsriContextMenuItem
The context menu items are displayed per toc node when the user right clicks on any toc node. Selecting a context menu item performs an action on the server.

Property Summary

String description	Description of context menu item
String label	Label to be displayed for menu item
String value	Value to be sent to server when user selects this context menu item

Constructor Summary

EsriContextMenuItem(String label, String value, String description)

      

Creates
a new context menu item with argument label, value and its description

EsriTocRenderer
This is an abstract class which must be inherited by any object that would like to render nodes in a toc.

Property Summary

EsriToc toc

Toc
control which this renderer is bound to

Function Summary

void init(HTMLElement container)	Initialize toc control within argument html container
void renderNode(EsriTocNode node)	Called when the argument toc node is to be rendered
void reset()	Called when updating toc

EsriTableTocRenderer
This is the default toc renderer implementation in the WebADF. This class renders the toc as a table and each node as a table row/cell within the table.

Property Summary

String collapsedImage	Image to be displayed when node is collaped. Maps to the JSF toc tag's collapsedImage attribute. Default is "images/plus.gif"
String expandedImage	Image to be displayed when node is expanded. Maps to the JSF toc tag's expandedImage attribute. Default is "images/minus.gif"
Number indentWidth	Indent to be added to each node based on EsriTocNode.level. Maps to the JSF toc tag's indentWidth attribute. Default is 10

Constructor Summary

EsriTableTocRenderer()	Creates a new toc renderer which renders the toc control as a table
inheritsFrom(EsriTocRenderer)

Function Summary

void init(HTMLElement container)	Initializes the table within which the toc is to be rendered. Also initializes the token handlers to handler tokens
void renderNode(EsriTocNode node)	Render toc node as table cell within table
void reset()	Clears table content and context menu items

Tokens
Tokens are snippets that are contained as part of the EsriTocNode's label, in the format: '<token start><token><token end>'. These are rendered by the WebADF and the EsriTocRenderer has the choice to render the token or ignore it. See EsriToc.tokenStart & tokenEnd to see the separator. A token handler function has the following signature. These have been added to let the server code be agnostic of the toc rendering.

Callback/Listener Function Summary

HTMLElement callback(String key,
      String label)

The
function returns an HTMLElement to be added while
rendering the toc node/context menu item 

TOC Tokens Summary

The description below lists how the EsriTableTocRenderer handles these tokens.

Token	Handler function	Description
${loading-image}	Image callback(String key, String token)	Adds the "images/loading.gif" image as part of the label of the node
${url(uri)(label)}	HTMLAnchorElement callback(String key, String token)	Renders an <a href="uri">label</a> tag to the toc node
${imgsrc=src}	Image callback(String key, String token)	Adds an <img src="src" /> tag within the toc node
${save-gp-result}	HTMLTableCellElement callback(String key, String token, String label)	Adds a table cell to request saving of GP task result
${show-copyright}	HTMLTableCellElement callback(String key, String token, String label)	Adds a table cell to request and display the data source's copyright information

Toolbar (esri_toolbar.js)

The Toolbar renders a collection of tools that can be used with the map, for example to zoom, pan, click, etc.

The esri_toolbar.js defines 3 types of toolbars, which can be used within an web application

EsriToolbar

EsriTextToolbar
EsriImageToolbar
EsriImageAndTextToolbar

EsriToolbar
The EsriToolbar is an abstract class which defines some properties and functions which are then implemented accordingly in one of the toolbars (EsriTextToolbar, EsriImageToolbar and EsriImageAndTextToolbar). Unlike other controls, the toolbar can be used purely as a Javascript clientside object to lay out tool items in the toolbar, as long as the tool items are markers. EsriToolItem.isMarker = true.

<html>
   <body onload="test()">
     ...
     <script type="text/javascript" language="Javascript">
       function test() {
       //access toolbar
   var toolbar = EsriControls.toolbars["myToolbarId"];

         //alert names of tool items in toolbar
         alert(toolbar.toolItemNames);
       }
     </script>
     ...
   </body>
</html>

Property Summary

String divId	Id of root level div within which this toolbar is rendered. Default is "ToolbarDiv_<toolbar id>"
String id	Toolbar control's id. Maps to the JSF toolbar tag's id attribute
String mapId	Id of map control that this toolbar is bound to. Maps to the JSF toolbar tag's mapId attribute
Number orientation	Horizontal or vertical orientation on toolbar. Maps to the JSF toolbar tag's orientation attribute. Default is ORIENTATION_HORIZONTAL
Number ORIENTATION_HORIZONTAL	Identifier for toolbar's horizontal orientation
Number ORIENTATION_VERTICAL	Identifier for toolbar's vertical orientation
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 is "ToolbarTable_<toolbar id>"
String[] toolItemNames	Names of tool items contained in this toolbar
EsriToolItem[] toolItems	List of tool items contained in this toolbar
String TOOL_ITEM_CONTAINER_ID_PREFIX	Prefix string to identify each tool item's containing cell. Default is "ToolItemDiv_"
String type	Type of toolbar. Maps to the JSF toolbar tag's toolbarStyle attribute TEXT IMAGE IMAGE_AND_TEXT

Constructor Summary

EsriToolbar(String id, HTMLElement container, String mapId, String type)	Called by implementing toolbar classes to set id of toolbar, container within which to render, id of map control the toolbar is bound to and the type of toolbar
inheritsFrom(EsriControl)

Function Summary

void addImageSeparator(String path[, String styleClass, CSSStyleDeclaration style])	Add image separator to toolbar. Arguments include the path to the separator image. Optionally provide style class or style to apply to image
void addSeparator(String text)	Add toolbar separator with argument text
void addToolItem(EsriToolItem toolItem)	Add tool item to toolbar
HTMLTableCellElement getNextToolbarCell()	Creates & returns the next table cell within which the next tool item or separator can be added
String getToolId(String elementId)	Based on argument elementId, get id of tool item
HTMLElement getToolItemContainerId(String toolId)	Based on argument toolId, get tool item's container cell's id
void init(HTMLElement container)	Initialize toolbar control within argument container
void updateAsync(XMLElement xml, String[] eventSources)	Postback tag handler function which is responsible for updating toolbar control during postback

EsriTextToolbar

View Demo

var textTb = new EsriTextToolbar("textTb", document.getElementById("textTbHere"), "map1");
...

Property Summary

String type

"TEXT"

      

Constructor Summary

EsriTextToolbar(String id, HTMLElement container, String mapId)	Creates a simple text based toolbar which can be used in an application
inheritsFrom(EsriToolbar)

Function Summary

void processMouseClick(MouseEvent event)	Process mouse click on tool item cell
void processMouseOut(MouseEvent event)	Process mouse out from tool item cell
void processMouseOver(MouseEvent event)	Process mouse over on tool item cell
void setToolItemActive(String toolId)	Activate tool item with argument toolId
void setToolItemDisabled(String toolId)	Disable tool item with argument toolId
void setToolItemInactive(String toolId)	Deactivate tool item with argument toolId

EsriImageToolbar

View Demo

var imageTb = new EsriImageToolbar("imageTb", document.getElementById("imageTbHere"), "map1");
imageTb.orientation = imageTb.ORIENTATION_VERTICAL;
...

Property Summary

String type

"IMAGE"

      

Constructor Summary

EsriImageToolbar(String id, HTMLElement container, String mapId)	Creates a toolbar with tool items displayed as images
inheritsFrom(EsriToolbar)

Function Summary

void processMouseClick(MouseEvent event)	Process mouse click on tool item cell
void processMouseOut(MouseEvent event)	Process mouse out from tool item cell
void processMouseOver(MouseEvent event)	Process mouse over on tool item cell
void setToolItemActive(String toolId)	Activate tool item with argument toolId
void setToolItemDisabled(String toolId)	Disable tool item with argument toolId
void setToolItemInactive(String toolId)	Deactivate tool item with argument toolId

EsriImageAndTextToolbar

View Demo

var imageAndTextTb = new EsriImageAndTextToolbar("imageAndTextTb", document.getElementById("imageAndTextTbHere"), "map1");
imageAndTextTb.orientation = imageAndTextTb.ORIENTATION_VERTICAL;
imageAndTextTb.textPos = "top";
...

Property Summary

String divAlign	Set content alignment within div. Default is "CENTER"
String imgAlign	Set image alignment within cell. Default is "CENTER"
String textAlign	Set text alignment with cell. Default is "CENTER"
String textPos	Set text position relative to the image. Default is "RIGHT"
String type	"IMAGE_AND_TEXT"

Constructor Summary

EsriImageAndTextToolbar(String id, HTMLElement container, String mapId)	Creates a toolbar with tool items displayed as combination of text & image
inheritsFrom(EsriToolbar)

Function Summary

void processMouseClick(MouseEvent event)	Process mouse click on tool item cell
void processMouseOut(MouseEvent event)	Process mouse out from tool item cell
void processMouseOver(MouseEvent event)	Process mouse over on tool item cell
void setToolItemActive(String toolId)	Activate tool item with argument toolId
void setToolItemDisabled(String toolId)	Disable tool item with argument toolId
void setToolItemInactive(String toolId)	Deactivate tool item with argument toolId

Div/Image/Text/Position Summary

CENTER	Align content in center of div
RIGHT	Align content to right within div
LEFT	Align content to left within div
TOP	Align content to top within div
BOTTOM	Align content to bottom within div

Task (esri_task.js)

A task is primarily a server side control with actions, tools & ui components, with the processing performed mostly on the server. The task object is provided to give users access to the html elements rendered in the task.

<html>
   <body onload="test()">
     ...
     <script type="text/javascript" language="Javascript">
       function test() {
       //access task
   var task = EsriControls.tasks["myTaskId"];

         //alert id of map control bound to this task
         alert(task.mapId);
       }
     </script>
     ...
   </body>
</html>

EsriTask

Property Summary

String id	Id of task control. Maps to the JSF task tag's id attribute
String mapId	Id of map control this task is bound to. Maps to the JSF task tag's mapId attribute

Constructor Summary

EsriTask(String id, String mapId)	Creates a new EsriTask object with argument id & id of map this task is bound to
inheritsFrom(EsriControl)

Function Summary

void updateAsync(XMLElement
xml, String[] eventSources)

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

Editing Task (esri_task_editing.js)

The editing task allows editing of features when using ArcGIS Server Local data source.

The esri_task_editing.js file contains several actions, tool items & utility functions.

EsriEditingDrawAction

EsriEditingDrawLineAction
EsriEditingDrawPointAction
EsriEditingDrawPolyShapeAction

EsriEditingToolItem

EsriEditingLine
EsriEditingPoint
EsriEditingPoly

EsriEditingPolygon
EsriEditingPolyline

EsriEditingUtils

EsriEditingDrawAction

Property Summary

Number clickTolerance	Tolerance in pixels, when user clicks to select feature. Default is 3
String fillColor	Fill color of shape. Default is "#ff0"
String fillOpacity	Fill opacity of shape. Default is 0.25
String lineOpacity	Opacity of line drawn. Default is 0.5
String snapColor	Color to display snapped vertex/edge if snapping is true. Default is "#f90"
Number snapDistance	Distance in pixels to find vertex/edge to snap to. Default is 5
EsriGraphicsElement snapGraphics	Graphics element to draw snapped points while user is selecting/drawing a feature
EsriPoint snappedPoint	Point returned by server as valid snapped point
boolean snapping	Enable functionality to snap to vertex/edge. Default is false
Number snapWidth	Size of snapped point as drawn on screen. Default is 8

Constructor Summary

EsriEditingDrawAction()	Creates a custom action that is extended by all editing draw actions and implement behaviour based on properties in this object
inheritsFrom(EsriAction)

EsriEditingDrawPointAction

Property Summary

String name
      

"EsriEditingDrawPointAction"

      

Constructor Summary

EsriEditingDrawPointAction()	Editing action to draw point
inheritsFrom(EsriEditingDrawAction)

Function Summary

void activate(HTMLElement
element, function callback[, function continuousCallback])

Activate
action using argument element, callback function and optional
continuousCallback function

      

Callback/Listener Function Summary

function void callback(EsriPoint point)	Callback function is called after the user raises the mouse after click to add a point
function void continuousCallback(EsriPoint point)	Continuous callback function is called while the user moves the mouse to click and draw a point

EsriEditingDrawLineAction

Property Summary

String name

"EsriEditingDrawLineAction"

Constructor Summary

EsriEditingDrawLineAction()	Editing action to draw line
inheritsFrom(EsriEditingDrawAction)

Function Summary

void activate(HTMLElement
element, function callback[, function continuousCallback])

Activate
action using argument element, callback function and optional
continuousCallback function 

Callback/Listener Function Summary

function void callback(EsriPoint from, EsriPoint to)	Callback function is called after the user raises the mouse after drawing a line
function void continuousCallback(EsriPoint point)	Continuous callback function is called while the user moves the mouse to click and draw the line

EsriEditingDrawPolyAction

Property Summary

String name

If
isPolygon is true, "EsriEditingDrawPolygonAction" else
"EsriEditingDrawPolylineAction"

      

Constructor Summary

EsriEditingDrawPolyAction(boolean isPolygon)	Editing action to draw polygon or polyline
inheritsFrom(EsriEditingDrawAction)

Function Summary

void activate(HTMLElement
element, function callback[, function continuousCallback])

Activate
action using argument element, callback function and optional
continuousCallback function 

Callback/Listener Function Summary

function void callback(EsriPoint[] point)	Callback function is called after the user raises the mouse after click to add a poly shape
function void continuousCallback(EsriPoint point)	Continuous callback function is called while the user moves the mouse to click and add a point/vertex to the poly shape

EsriEditingToolItem

Property Summary

String taskId

      

Id of
editing task this tool item is bound to

Constructor Summary

EsriEditingToolItem(String id, String toolName, EsriAction action)	Base editing tool item object to be extended by any editing tool items
inheritsFrom(EsriMapToolItem)

Function Summary

void activate()

      

Overrides
      EsriMapToolItem.activate
and
sets the continuousCallback & callback functions

      

EsriEditingPoint

Constructor Summary

EsriEditingPoint(String id, String toolName)	Creates a new editing tool item to draw a point feature
inheritsFrom(EsriEditingToolItem)

Function Summary

void continuousAction(EsriPoint point)	Send asynchronous request to server to find vertex/edge to snap to
void postAction(EsriPoint point)	Sends coordinates to server
void update()	Updates variables in tool item

Server Params Summary

<map id>_minx	x coordinate of point
<map id>_miny	y coordinate of point

EsriEditingLine

Constructor Summary

EsriEditingLine(String id, String toolName)	Creates a new editing tool item to draw a line feature
inheritsFrom(EsriEditingToolItem )

Function Summary

void continuousAction(EsriPoint point)	Send asynchronous request to server to find vertex/edge to snap to
void postAction(EsriPoint from, EsriPoint to)	Sends coordinates to server
void update()	Updates variables in tool item

Server Params Summary

<map
id>_coords 

from.x:from.y|to.x:to.y
coordinates
of line

      

EsriEditingPoly

Constructor Summary

EsriEditingPoly(String id, String toolName, boolean isPolygon)	Creates a new editing tool item to draw a poly feature
inheritsFrom(EsriEditingToolItem )

Function Summary

void continuousAction(EsriPoint point)	Send asynchronous request to server to find vertex/edge to snap to
void postAction(EsriPoint[] points)	Sends coordinates to server
void update()	Updates variables in tool item

Server Params Summary

<map_id>_coords
      

pt1.x:pt1.y|pt2.x:pt2.y|...|ptN.x:ptN.y
coordinates of points on the
polyline

      

EsriEditingPolygon

Constructor Summary

EsriEditingPolygon(String id, String toolName)

      

Creates
and returns new EsriEditingPoly(id,
toolName, true) 

EsriEditingPolyline

Constructor Summary

EsriEditingPolyline(String id, String toolName)

      

Creates
and returns new EsriEditingPoly(id,
toolName, false) 

EsriEditingUtils
A utility class used in the editing task.

Function Summary

void showColorChooser(String title, String fieldId, String buttonId)	Opens and displays a color chooser window with argument title. Id of field to update value. Id of HTMLInput button to set background style color
void snapPointRequestHandler(String taskId, String mapId, EsriPoint point, EsriEditingDrawAction action)	Sends an asynchronous request to server to find vertex/edge to snap to
void snapPointResponseHandler(XMLHttpRequest xmlHttp, String mapId, EsriEditingDrawAction action)	Processes response and displays snapped point/vertex

GP Task (esri_task_gp.js)

The geoprocessing (GP) task allows users to integrate GP into their web application.

The esri_task_gp.js file only contains one object.

EsriTask_GPAsyncTaskResultsTimer

Property Summary

String id	Id of GP task this object is bound to
String tocId	Id of EsriToc to be updated, based on results from pending GP tasks

Constructor Summary

EsriTask_GPAsyncTaskResultsTimer(String id, String tocId[, Number timerSeconds]) 

Creates
an object to send asynchronous requests to server to check for updates
to any pending GP tasks

      

Function Summary

void tagHandler(XMLElement xml, String[] eventSources)

      

Postback
tag handler function which is responsible for updating the timer to
send requests to server

      

Scalebar (esri_scalebar.js)

EsriScaleBar
EsriScaleBarRenderer

EsriScaleBarRendererBase

EsriAlternatingScaleBarRenderer
EsriDoubleAlternatingScaleBarRenderer
EsriSingleDivisionScaleBar
EsriSteppedScaleLineRenderer

EsriScaleBar

Property Summary

HTMLElement controlDiv	Div object used to layout scalebar
String controlDivId	Id of controlDiv. Default is "ScaleBarControlDiv_<id>"
String divId	Id of the div which is rendered as root container of the scalebar. Default is "ScaleBarDiv_<id>"
EsriScaleBarRenderer renderer	Renderer object to render specific type of scalebar

Constructor Summary

EsriScaleBar(String id, HTMLElement container, Number width, Number height[, EsriScaleBarRenderer renderer])	Defines a scalebar object which acts as a container for EsriScaleBarRenderers to render a scalebar
inheritsFrom(EsriPageElement)

Function Summary

void
      init(HTMLElement container)

Initializes
scale bar within argument container

EsriScaleBarRenderer

Property Summary

EsriScaleBar
      scaleBar

Scalebar
object that this renderer is part of

Constructor Summary

EsriScaleBarRenderer()	Base class to be implemented by all objects that render a type of scalebar
void init(HTMLElement container)	Initialize scalebar within argument container

Function Summary

void render(Number
screenDistance, Number
mapDistance, String units)

      

Render
scalebar with argument screen distance, representing argument map
distance in argument distance units

      

EsriScaleBarRendererBase

Property Summary

Number bottom	Bottom of the scalebar's bounds
Number fontSize	Font size to render distance & units. Default is 10
CSSStyleDecleration fontStyle	Style to render distance & units. Default is "font-size:<fontSize>px; font-stretch:narrower"
Number fontWidth	Width of font to render distance & units. Default is 5 (fontSize/2)
EsriGraphicsElement graphics	Graphics element used to draw scalebar
Number height	Height of scalebar
Number lblTop	Top position, in pixels to start rendering label. Default is 5
Number lblWd	Max width in pixels of labels on scalebar. Default is 30
Number width	Width of scalebar
Number zero	Position in pixels along scalebar to render zero, or center of rendered scalebar

Constructor Summary

EsriScaleBarRendererBase()	Base implementation of EsriScaleBarRenderer
inheritsFrom(EsriScaleBarRenderer)

Function Summary

void init(HTMLElement
container, Number width, Number height)

Initialize
scalebar of argument width & height within argument container

EsriAlternatingScaleBarRenderer

Constructor Summary

EsriAlternatingScaleBarRenderer()	Render an alternating scalebar
inheritsFrom(EsriScaleBarRendererBase)

EsriDoubleAlternatingScaleBarRenderer

Constructor Summary

EsriDoubleAlternatingScaleBarRenderer()	Render a double alternating scalebar
inheritsFrom(EsriScaleBarRendererBase)

EsriSingleDivisionScaleBar

Constructor Summary

EsriSingleDivisionScaleBar()	Render a single division scalebar
inheritsFrom(EsriScaleBarRendererBase)

EsriSteppedScaleLineRenderer

Constructor Summary

EsriSteppedScaleLineRenderer()	Render a stepped scale line
inheritsFrom(EsriScaleBarRendererBase)

Upload & Download Utility (esri_upload.js)
The upload & download utility classes are used in conjunction with the Upload (com.esri.adf.web.util.ADFUploadServlet) & Download (com.esri.adf.web.util.ADFDownloadServlet) Servlets. The download.jsp, upload.jsp & uploadSuccess.jsp are included as part of the Web ADF application.

The esri_upload.js file contains a single utility class for uploading and downloading files within the WebADF application that can be called using clientside Javascript.

EsriUploadUtil

Function Summary

void showUploadWindow(String title, function uploadListener[, String uploadPage, String uploadSuccessPage])	Show window with argument title to allow users to upload file into the current web application. On upload success or failure, call argument uploadListener function. Optionally use argument uploadPage and uploadSuccessPage to display status uploadPage default is "upload.jsp" uploadSuccessPage default is "uploadSuccess.jsp"
void processUpload(String filename, String id)	Function called from uploadSuccess.jsp to call uploadListener function with argument filename & id
void showDownloadWindow(String title, String id[, String downloadPage])	Show window with argument title to allow user to download file stored on server. Optionally display argument downloadPage. downloadPage default is "download.jsp"
void closeDownloadWindow()	Close download window

Callback/Listener Function Summary

function uploadListener(String filename, String id)

      

Function
to handle processing once a file has been uploaded. The name of the
uploaded file & its id as stored in the server are passed as
argument. If upload fails, the filename & id are null

      

ColorChooser (esri_colorchooser.js)

The Color Chooser object is a simple tool to allow users to select a color. The selected color is returned to the specified callback function, which then can use this color appropriately.

The esri_colorchooser.js contains only one object

EsriColorChooser

View Demo

<html>
<script>
    function colorChooserCallback(color) {
      ...
    }

    ...
    var cc = new EsriColorChooser("cc", null, colorChooserCallback, randomColor);
cc.callContinuously = true;
    cc.showSelectButton = false;
cc.init(document.body);
    ...
</script>
</html>

Property Summary

boolean callContinuously	Whether to call callback function continuously while user changes color. Default is false
EsriColor currentColor	Current color selected by user
String divId	Id of div within which this object is rendered. Default is "EsriColorChooserDiv_<id>"
String selectLabel	Label to display on select button. Default is "OK"
boolean showCurrentColor	Show current color box. Default is true
boolean showSelectButton	Show selection button. Default is true
boolean showStatus	Show color as status text. Default is true

Constructor Summary

EsriColorChooser(String id, HTMLElement container, function callback[, EsriColor initColor])	Creates a color chooser object with argument id, within argument container and callback function. Optionally an initial color can be set, else default is black (#000)
inheritsFrom(EsriPageElement)

Function Summary

void init(HTMLElement container)	Initialize color chooser within argument container
void setCurrentColor(Number r, Number g, Number b[, boolean updateSliders])	Set current color in color chooser with argument red/blue/green components. Optionally update the sliders with argument color

Callback/Listener Function Summary

function void callback(EsriColor color)

      

The
callback function is called by the color chooser with a color
as argument. The function is called when a user selects a color
or is called continuously if EsriColorChooser.callContinuously
= true

      

Navigator (esri_navigator.js)

A navigator can be used for simple navigation of a map. The simple navigation include panning and zooming.

The esri_navigator.js contains only one object.

EsriNavigator

Property Summary

EsriPoint[] directions	Array of navigation directions
String divId	Id of div within which the navigator is to be rendered. Default is "EsriNavigatorDiv_<id>"
String image_map_move_coords	Coordinate map for moving navigator. Default is "80,80,5"
String image_map_move_shape	Shape of coordinate map for moving navigator. Default is "circle"
String image_map_zoomin_coords	Coordinate map for zoom in using navigator. Default is "80,69,5"
String image_map_zoomin_shape	Shape of coordinate map for zoom in. Default is "circle"
String image_map_zoomout_coords	Coordinate map for zoom out using navigator. Default is "80,91,5"
String image_map_zoomout_shape	Shape of coordinate map for zoom out. Default is "circle"
String image_navigator	Path to image used for displaying navigator. Default is "images/navigator.gif"
Number image_size	Width & height of navigator image. Default is 80

Constructor Summary

EsriNavigator(String id, HTMLElement container, boolean continuousPan, function panCallback, function zoomCallback[, Number left, Number top])	Creates a navigator object with argument id, within argument container and whether callback continuously. The pan and zoom call back functions are also required. Optional left & top offset from top-left of container can be specified
inheritsFrom(EsriPageElement)

Function Summary

void init(HTMLElement
container)

Intialize
navigator within argument container

Navigation Directions Summary

Key	Value	Geographic Direction (North is up)	Screen Direction
NW	EsriPoint(-1, -1)	North-West	Upper-Left
N	EsriPoint(0, -1)	North	Up
NE	EsriPoint(1, -1)	North-East	Upper-Right
E	EsriPoint(1, 0)	East	Right
SE	EsriPoint(1, 1)	South-East	Lower-Right
S	EsriPoint(0, 1)	South	Lower
SW	EsriPoint(-1, 1)	South-West	Lower-Left
W	EsriPoint(-1, 0)	West	Left

Callback/Listener Function Summary

void panCallback(EsriPoint direction, Number distance)	Callback function to process pan function when user pans using the navigator
void zoomCallback(Number inORout)	Callback function to process zoom when user clicks on zoom in/out on the navigator. Arguments are: +1 : zoom in -1 : zoom out

Slider (esri_slider.js)

A Slider object allows users to visually change a value in a range from 0-n. Th

EsriSlider

View Demo

<html>
...
<script>
function myCallback(value) {
      ...
    }

    var slider = new EsriSlider("mySlider", document.getElementById("d"), myCallback);
</script>
</html>

Property Summary

boolean callContinuously	Whether to call callback function while user drags slider and changes the value. Default is false
String divId	Id of div within which this slider is rendered. Default is "SliderDiv_<id>"
Number h_image_height	Height of horizontal slider images. Default is 16
Number h_image_width	Width of horizontal slider images. Default is 12
String imagesDirectory	Directory containing images to be displayed when building slider. Default is "images/slider/"
Number initValue	Initial value of slider. Default is 0
Number isHorizontal	Whether slider is horizontal or vertical. Default is true
Number numSegments	Number of segments displayed in slider. Default is 10
boolean roundValues	Round values or allow double precision numbers. Default is true
boolean showTicks	Show ticks in slider to show round values. Default is true
Number v_image_height	Height of vertical slider images. Default is 12
Number v_image_width	Width of vertical slider images. Default is 16

Constructor Summary

EsriSlider(String id, HTMLElement container, function callback[, Number left, Number top])	Creates a new slider object with argument id, within argument container and argument callback function. Optionally the offset from top-left of container may also be set
inheritsFrom(EsriPageElement)

Function Summary

void init(HTMLElement container)	Initialize slider within argument container
void setValue(Number value[, boolean doUpdate])	Set the value of the slider. Optionally update and call callback function

Callback/Listener Function Summary

function callback(Number
value)

Function
called by EsriSlider when user
changes the value of the slider. If slider's callContinuously property
is set to true, this function is called while the user drags the slider
to change its value

      

Window (esri_window.js)

The window object can be used to pop-up a panel and allow users to interact with content within this window and then close it when it is no longer required. Any EsriPageElement object can be rendered within a window.

The esri_window.js contains only one object

EsriWindow

The EsriWindow is the only EsriPageElement which allows initialization without a parent container

View Demo

<html>
<script type="text/javascript" language="Javascript">
    ...
    var myDivWin = new EsriWindow("myDivWin", "News", myPE);
    myDivWin.init();
    myDivWin.moveTo(25, 150);
    myDivWin.resize(100, 100);
    ...
</script>
</html>

Property Summary

boolean closable	Whether window can be closed. Default is true
boolean closed	Whether window is currently closed. Default is false
String closeImgUrl	Image to display as close button. Default is "images/window/close.gif"
String closeLabel	Tooltip text for close button. Default is "Close"
boolean collapsable	Whether window's content can be collapsed., such that only the title bar is visible. Default is true
boolean collapsed	Whether window is current collapsed. Default is false
String collapseImgUrl	Image to display as collapse button. Default is "images/window/collapse.gif"
String collapseLabel	Tooltip text for collapse button. Default is "Collapse/Expand"
String expandImgUrl	Image to display expand button. Default is "images/window/expand.gif"
boolean fittable	Whether to allow fitting of content within window. Default is true
Number imgGap	Gap between images in title bar. Default is 3
Number imgHeight	Height of images in title bar. Default is 12
Number imgWidth	Width of images in title bar. Default is 20
Number maxHeight	Maximum height that window can resize to. Default is 600
Number maxWidth	Maximum width that window can resize to. Default is 600
Number minHeight	Minimum height that window can resize to. Default is 25
Number minWidth	Minimum width that window can resize to. Default is 200
boolean movable	Whether window can be moved. Default is true
EsriPageElement pageElement	Page element content displayed in this window
boolean resizable	Whether to allow resizing of window
String resizeImgUrl	Image to display resize button. Default is "images/window/resize.gif"
String resizeLabel	Tooltip text for resize button. Default is "Resize Window"
String[] updateListenerNames	Names of listeners
function[] updateListeners	Array of functions listening to updates on this window
EsriWindowManager windowMgr	Window manager that this window is part of

Constructor Summary

EsriWindow(String id, String title, EsriPageElement pageElement[, HTMLElement container])	Creates a new window object with argument id and title. The argument page element is used as content to be displayed within this window. Optionally this window can be created as a child element to the argument container
inheritsFrom(EsriPageElement)

Function Summary

void addUpdateListener(String name, function listener)	Add a listener function which listens to update events on the window
void collapse()	Collapse window, such that only title bar is visible. Sets collapsed to true
void center()	Center window on screen
void expand()	Expand window to show content. Sets collapsed to false
void fit()	Fit content within window
void hide()	Hide window
void init([HTMLElement container)]	Initialize window. Optionally render window as child of argument container
void moveTo(Number left, Number top)	Move window to argument point
void removeUpdateListener(String name)	Remove listener function identified by argument name
void resize(Number width, Number height)	Resize window to argument width & height
void setWindowManager(EsriWindowManager wm)	Set window manager that this window is part of
void show()	Show window
void toBack()	Send window to back
void toFront()	Bring window to front
void toggleCollapse()	Toggle visibility of content of window
void toggleVisibility()	Toggle visibility of window
void update()	Update window state based on its properties

Callback/Listener Function Summary

function listener(EsriWindow window)

      

This
listener function is called when the window is updated. The window
itself
is passed as argument to the listener 

WindowManager (esri_window_mgr.js)

The window manager is used to manage a collection of window object. The window manager object can be used to serialize & restore the state of multiple EsriWindow objects.

The esri_window_mgr.js contains only one object.

EsriWindowManager

Property Summary

String backZIndex	CSS z-index of window that is in the background. Default is 110
HTMLInputElement formField	Form field which is used to store serialized state of windows
String frontZIndex	CSS z-index of window that is in the foreground. Default is 111
EsriWindow[] windows	Collection of windows managed by this object
String[] windowIds	Names of all windows managed by this object

Constructor Summary

EsriWindowManager(String id,
HTMLInputElement formField)

Create
new window manager object to manage one or more windows

Function Summary

String getProperties()	Get serialized state of windows from formField.value
void loadWindowProperties(String windowId[, boolean resize])	Load and update window identified by argument windowId from serialized state. Optionally force resize of window
void makeAllVisible(Number width, Number height)	Show all windows. If any window is outside current bounds, move the window within the argument size
void restoreProperties([boolean resize])	Restore windows from serialized state. Optionally force resize of windows based on serialized state
void saveProperties()	Serialize state of windows as string in formField.value
void setProperties(String properties)	Set state of windows from serialized state
void toFront(String windowId)	Bring window with argument id to front

CSS Styles (esri_styles.css)

The HTMLElements used in the Java Web ADF 9.2 applications use several style attributes. The following is a list of the style classes used.

EsriColorChooser

div.esriColorChooser	Applied to EsriColorChooser.divObject which is the root level div within which the color chooser is rendered	background-color:#fff;
span.esriColorChooserStatusText	Applied to the status label which displays the current color selected by the user	font-family:verdana; font-size:70%; font-weight:lighter; padding-bottom:2px;

EsriImageToolbar

img.esriImageToolbarDefault	Applied to all items in the EsriImageToolbar when they are initialized	border:none; cursor:pointer; margin:1px; padding:1px;
img.esriImageToolbarDisabled	Applied to an item in the EsriImageToolbar when it is disabled	border:none; cursor:pointer; margin:1px; padding:1px;
img.esriImageToolbarHover	Applied to an item in the EsriImageToolbar when the mouse hovers over it	border:1px outset #dbdbe4; cursor:pointer; margin:0px; padding:0px;
img.esriImageToolbarSelected	Applied to an item in the EsriImageToolbar when it is selected/active	border:1px inset #dbdbe4; cursor:pointer; margin:0px; padding:0px;

EsriImageAndTextToolbar

div.esriImageAndTextToolbarDefault	Applied to all items in the EsriImageAndTextToolbar when they are initialized	border:none; cursor:pointer; margin:1px; padding:1px;
div.esriImageAndTextToolbarDisabled	Applied to an item in the EsriImageAndTextToolbar when it is disabled	border:none; cursor:default; margin:1px; padding:1px;
div.esriImageAndTextToolbarHover	Applied to an item in the EsriImageAndTextToolbar when the mouse hovers over it	border:1px outset #dbdbe4; cursor:pointer; margin:1px; padding:0px;
div.esriImageAndTextToolbarSelected	Applied to an item in the EsriImageAndTextToolbar when it is selected/active	border:1px inset #dbdbe4; cursor:pointer; margin:1px; padding:0px;

EsriMap

img.esriLoadingImage

Applied
to EsriMap.loadingObject

position:absolute;
top:5px;
right:5px;

img.esriMapImage

Applied
to every image that is added to the EsriMap.imageGrid
as part of the map displayed in the map control

      

position:absolute;
border:none;
margin:0px;
padding:0px;

table.esriMapNoData

Applied
to table displaying EsriMapSourceTile.noDataLabel

position:absolute;
border:1px solid #eee;
color:#bbb;
margin:0px;
padding:0px;

EsriScaleBar

div.esriScaleBar

Applied
to EsriMap.scaleBarDiv

position:absolute;
bottom:10px;
left:10px;
z-index:99;
padding:0px;
margin:0px;

EsriTextToolbar

div.esriTextToolbarDefault	Applied to all items in the EsriTextToolbar when they are initialized	background-color:#cdcdcd; border:1px solid #aaa; color:#000; cursor:pointer; font-family:verdana; font-size:80%; padding:5px; width:100%;
div.esriTextToolbarDisabled	Applied to an item in the EsriTextToolbar when it is disabled	background-color:#cdcdcd; border:1px solid #aaa; color:#8D8D8D; cursor:pointer; font-family:verdana; font-size:80%; padding:5px; width:100%;
div.esriTextToolbarHover	Applied to an item in the EsriTextToolbar when the mouse hovers over it	background-color:#f3f3cc; border:1px solid #aaa; color:#000; cursor:pointer; font-family:verdana; font-size:80%; padding:5px; width:100%;
div.esriTextToolbarSelected	Applied to an item in the EsriTextToolbar when it is selected/active	background-color:#cce3cc; border:1px solid #aaa; color:#000; cursor:pointer; font-family:verdana; font-size:80%; padding:5px; width:100%;

EsriToc

td.esriTocLabel

      

Applied
to table cell of toc node 

color:#000;
font-family:Arial,Sans-Serif;
font-size:90%;
font-weight:normal;

td.esriTocLabelDisabled

Applied
to table cell of toc node which is disabled

color:#ccc;
font-family:Arial,Sans-Serif;
font-size:90%;
font-weight:normal;

td.esriTocLabelSelected

      

Applied
to table cell of toc node which is selected

color:#000;
font-family:Arial,Sans-Serif;
font-size:90%;
font-weight:bold;

EsriToc.ContextMenu

table.esriContextMenu	Applied to table used to display toc's context menu	border:1px outset #000; background-color:#cdcdcd; margin:0px; width:200px;
td.esriContextMenuItem	Applied to table cell of context menu item	font:menu; padding:1px; background-color:transparent; font-weight:normal; color:#000;
td.esriContextMenuItemActive	Applied to table cell of context menu item when mouse hovers over item	font:menu; padding:1px; background-color:#0a246a; font-weight:bold; color:#fff;

EsriToolbar

div.esriToolbar

      

Applied
to EsriToolbar.divObject

background-color:transparent;

      

EsriWindow

div.esriWindowContent	Applied to EsriWindow.pageElement.divObject	overflow:auto; position:relative; padding:0px; margin:0px;
span.esriWindowTitleText	Applied to text displayed as title in title bar	color:#444; font-family:verdana; font-size:75%; font-weight:bold; padding-left:5px; overflow:hidden;
table.esriWindow	Applied to EsriWindow.divObject	border:1px solid #999; overflow:hidden; margin:0px; padding:0px; background-color:#fff; z-index:110;
table.esriWindowTitleBar	Applied to EsriWindow's title bar	background-color:#c1c1c1; height:16px; margin:0px; padding:0px; border:1px solid #666; overflow:hidden;

Tools

input.esriToolDefault	Applied to EsriToolItems in tasks when they are initialized	border:1px outset #000; background-color:transparent;
input.esriToolDisabled	Applied to EsriToolItem in tasks when it is disabled	border:1px solid transparent; background-color:#ccc; cursor:default;
input.esriToolHover	Applied to EsriToolItem in tasks when the mouse hovers over it	border:1px outset #000; background-color:#fcd279;
input.esriToolSelected	Applied to EsriToolItem in tasks when it is selected/active	border:1px inset #000; background-color:#e59700;

Customizing

Actions & ToolItems

View Demo

function MyDrawStarAction() {
this.inheritsFrom(new EsriAction());

this.activate = function(elem, callbackFunc) {
    ..
}

this.deactivate = function() {
    ..
}
}

function MyToolItemToDrawStar(id, toolName, isMarkerTool) {
this.inheritsFrom(new EsriMapToolItem(id, toolName, new MyDrawStarAction(), isMarkerTool));

this.update = function() {
    ...
}

this.postAction = function(points) {
    ...
}
}

Toc

View Demo

<html>
<script>
    function MyCustomTocRenderer() {
      this.init = function(container) {
        ...
      }

      this.renderNode = function(node) {
        ...
      }
    }

    function init() {
      var defaultToc = new EsriToc(...);
      ...
      var customToc = new EsriToc(..., new MyCustomTocRenderer());
      ...
    }
</script>
...
</html>

Slider

View Demo

<html>
<script>
    function createSlider() {
      slider = new EsriSlider("slider", null, sliderCallback);
      slider.numSegments = ...
      slider.initValue = ...
      slider.isHorizontal = ...
      slider.showTicks = ...
      slider.roundValues = ...
      slider.callContinuously = ...
      slider.init(...);
    }

    function sliderCallback(value) {
      ...
    }
</script>
...
</html>

Known Issues

GraphicsElement

The default implementation uses divs to render the required shape. Thus too many shapes on a graphic can slow down performance.
Line Opacity is not supported in Netscape/Mozilla/Firefox
Fill Opacity is not supported in Netscape, except when drawing a rectangle