Select to view content in your preferred language

Firing a event or dispatching a event

1269
3
04-23-2013 03:54 AM
ShashankA
Emerging Contributor
Hi,

Can some body suggest or guide on how to dispatch a event from a java script method some thing like dispatchEvent() in the Adobe Flex framework.

Is that possible from the ESRI Java script API or not?

One more thing can we create a custom layer which displays some html content on the map.
I mean I need to create layer to display a html page on the map.
0 Kudos
3 Replies
ReneRubalcava
Esri Frequent Contributor
JavaScript and Actionscript are quite similar in regards of syntax, especially if you ever did some AS2 development.
You can have an element dispatch an event similar to AS3
https://developer.mozilla.org/en-US/docs/DOM/EventTarget.dispatchEvent

Doing the same on regular JS objects (non-dom elements) takes some elbow grease, but Dojo in the JS API provides some very nice utilities to accomplish this.
http://livedocs.dojotoolkit.org/dojo/Evented

If you extend a new class based on dojo/Evented, you get access to some nice event delegation.

The Dojo docs seem to be acting up, but an example would be something like

var MySumClass = declare(['dojo/Evented'], {
  constructor: function(x, y) {
    this.x = x;
    this.y = y;
  }
  dispatch: function() {
    this.emit('myEvent', {
      message: 'This is a test message.',
      result: this.x + this.y
    });
  }
});

var myInstance = new MySumClass(5,10);
myInstance.on('myEvent', function(results) {
  console.log('message', results.message);
  console.log('results', results.result);
});
myInstance.dispatch(); // console logs print at this point


This also gives you the ability to to use dojo/on with dojo/Evented
http://livedocs.dojotoolkit.org/dojo/on

This opens up some cool uses where you can listen for events only once, pause them, remove them and so on.
0 Kudos
ShashankA
Emerging Contributor
JavaScript and Actionscript are quite similar in regards of syntax, especially if you ever did some AS2 development.
You can have an element dispatch an event similar to AS3
https://developer.mozilla.org/en-US/docs/DOM/EventTarget.dispatchEvent

Doing the same on regular JS objects (non-dom elements) takes some elbow grease, but Dojo in the JS API provides some very nice utilities to accomplish this.
http://livedocs.dojotoolkit.org/dojo/Evented

If you extend a new class based on dojo/Evented, you get access to some nice event delegation.

The Dojo docs seem to be acting up, but an example would be something like

var MySumClass = declare(['dojo/Evented'], {
  constructor: function(x, y) {
    this.x = x;
    this.y = y;
  }
  dispatch: function() {
    this.emit('myEvent', {
      message: 'This is a test message.',
      result: this.x + this.y
    });
  }
});

var myInstance = new MySumClass(5,10);
myInstance.on('myEvent', function(results) {
  console.log('message', results.message);
  console.log('results', results.result);
});
myInstance.dispatch(); // console logs print at this point


This also gives you the ability to to use dojo/on with dojo/Evented
http://livedocs.dojotoolkit.org/dojo/on

This opens up some cool uses where you can listen for events only once, pause them, remove them and so on.



Thanks  odoe for giving a quick reply.

By following above approach you suggested we are creating a event on the HTML element not on the map.

I need to dispatch a zoom event on the map from a java script function.

By following the above approach,
     If we add the event handler to the map using dojo.connect(map,"onClcik",handleClickEvent);
      "handleClickEvent" handler will not be invoked when we dispatch the event from the simulateClick().
       we need to add the functionality what we want to do in the else part of the if condition.

On the whole I want to dispatch a "onZoom" event on the map from a java script function and the ESRI api should handle the zoom event as it does normally or by default(zoom's the map at a particular location).
0 Kudos
ShashankA
Emerging Contributor
JavaScript and Actionscript are quite similar in regards of syntax, especially if you ever did some AS2 development.
You can have an element dispatch an event similar to AS3
https://developer.mozilla.org/en-US/docs/DOM/EventTarget.dispatchEvent

Doing the same on regular JS objects (non-dom elements) takes some elbow grease, but Dojo in the JS API provides some very nice utilities to accomplish this.
http://livedocs.dojotoolkit.org/dojo/Evented

If you extend a new class based on dojo/Evented, you get access to some nice event delegation.

The Dojo docs seem to be acting up, but an example would be something like

var MySumClass = declare(['dojo/Evented'], {
  constructor: function(x, y) {
    this.x = x;
    this.y = y;
  }
  dispatch: function() {
    this.emit('myEvent', {
      message: 'This is a test message.',
      result: this.x + this.y
    });
  }
});

var myInstance = new MySumClass(5,10);
myInstance.on('myEvent', function(results) {
  console.log('message', results.message);
  console.log('results', results.result);
});
myInstance.dispatch(); // console logs print at this point


This also gives you the ability to to use dojo/on with dojo/Evented
http://livedocs.dojotoolkit.org/dojo/on

This opens up some cool uses where you can listen for events only once, pause them, remove them and so on.



Thank you  odoe for giving a reply.

I think I did not explain my requirement properly. What I was searching is, dispatching a predefined event of the ESRI map from a java script function.

Scenario is:
       I have function in Java script and I need to dispatch a  "onZoom" event already connect to the ESRI map when the map is    created and invoke the associated handler connected to the zoom event.
0 Kudos