Web ADF for the Java platform  

Clientside JavaScript and CSS Reference

 


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:

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

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

Concepts

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

There are several utility functions which can be used to send XMLHttpRequest to the server. These  :
View Demo
<html>
  ...
  <body>
    <!-- define form -->
    <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

List of files

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

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

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.
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: 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