Skip navigation
All Places > Esri Technical Support > Blog > Authors DCarroll-esristaff
Have you ever created a web application with the ArcGIS API for JavaScript? You may have noticed there are a variety of approaches to event-driven programming: the newer On Style events, the legacy Connect Style events, and events that are plugged directly into the body of an HTML page. Unless you are faced with adopting a legacy application that mixes patterns, it is a good idea to implement one event programming style: On Style.

The On Style events follow the Dojo framework's most recent programming pattern, which I recommend to anyone using JavaScript API version 3.6 or higher. Here is a handy place to read more about working with events in the JavaScript API.



To further understand the On Style events, Figure 1 is a full example using the JavaScript API. The code below uses Dojo's dojo/on module, and as you can see, it makes programming with events easier. A developer could simply switch out the "click" for a different event action such as a "dblclick," a mouse selector, or an event from the JavaScript API.Figure 1
<html>
<head>
<title>Events</title>
<script src="http://js.arcgis.com/3.10"></script>
<script>
require(["dojo/on","dojo/domReady!"], function(on){
  var target = dojo.byId("target-id");
  on(target, "click", function(event){
    alert("test event!");
  });
});
</script>
</head>
<body>
<span id="target-id">Click me!</>
<body>
</html>

live version of Figure 1 here


To take it further, let us look at other event patterns so we can begin taking measures to refactor our applications to use On Style events. Doing so will make transitioning to Dojo 2.0 easier and help extend the shelf life of an application.

Figure 2 shows events wired up directly in the body of the HTML page, and Figure 3 shows the onClick event assigned inside the header of the application. Both of these examples are old and are not recommended (see: Why is using onClick() in HTML a bad practice?). Developers using these two patterns may incur browser compatibility issues and challenges when implementing AMD patterns.Figure 2
<html>
<head>
<title>Events</title>
<script type="text/javascript">
function demoClickEvent(evt){
     console.log(evt.id);
     alert('test event!');
}
</script>
</head>
<body>
<span id="target-id" onclick="demoClickEvent(this)">Click me!</span>
</body>
</html>

live version of Figure 2 here

Figure 3
<html>
<head>
<title>Events</title>
<script type="text/javascript">
window.onload=function(){
    var target = document.getElementById("target-id");
    target.addEventListener('click', function(){
        alert('test event!');
    }, false);
};
</script>
</head>
<body>
<span id="target-id">Click me!</span>
</body>
</html>

live version of Figure 3 here


Refactoring the above code with On Style event patterns may look a bit different until you are familiar with the syntax. However, I highly recommend using On Style events as shown in Figure 1.

Now, let us take a quick look at legacy Connect Style events. These are similar to On Style events but were not implemented with Dojo’s AMD pattern for several years. Thus, it is common to see Connect Style event code like Figure 4.Figure 4

[code language="JavaScript"]
var node = dojo.byId("target-id");
var handle = dojo.connect(node, "onclick", myFunction);
[/code]

Figure 4's approach is also not recommended because Dojo 2.0 will not support the legacy Connect Style of event handling. Even the more modern Connect Style code, which uses the AMD approach, is slated for deprecation. If you want to see what the Connect Style AMD code looks like, review this Dojo Foundation Documentation.

In summary, I highly recommend that developers move to On Style event programming. Reviewing the other event style options in this post will hopefully help developers know what to look for to make upgrading to On Style Events easier.
Doug C. and Noah S. - Support SDK Team
DCarroll-geotrigger-300x296.pngWe are pleased to announce support for Esri’s new Geotrigger Service and have a great team ready to help developers push out useful information to people based on their locations. With more ease than ever, messages can be pushed out to mobile devices without ever clicking a button. If you are a mobile developer, do consider getting behind Esri's Geotrigger Service release, which includes the Geotrigger SDK for Android and Geotrigger SDK for iOS.

In readying our staff, we tested a new interactive training method. We blended the new dojo-style lessons coming out of Esri Training with a series of mini internal hackathons. The conditions were: make something, think together, work as a team, and basically code 'til your fingers hurt. The goal was simple - ready ourselves to help developers incorporate Geotrigger events in their apps.

Learning Day 1


Five support team members gathered around comfortable chairs brainstorming an application idea. The application we decided upon through consensus was a self-guided tour application of the Esri campus. Since time was of the essence (18 hours to deliver something), we eliminated doing Disney and other major theme parks to keep things simple. The rest of the day involved provisioning our development environments (getting the required iOS and Android pieces in place) and reading the Esri Geotrigger Service Guide.

Learning Day 2

Andrew W. scanned social media from our Geotrigger Service developer team. He read through the PDX blog, Twitter feeds from @EsriPDX, and anything he could find on GitHub to give the team a boost. Andrew focused on Android and trained using Eclipse and Android Studio.Noah S. also skimmed the feeds while reading Apple's help documentation on how to provision a profile to use push notifications. For Noah and I, the goal of the iOS app was to keep things simple. Initialize Geotrigger events in the main class implementing Application Delegate. Open a splash screen which implemented UIViewController and then segue into a UIWebView containing a Web Map of our campus. Essentially, while looking at the campus map, we wanted app users to receive informative messages about where they were on campus.Jason H. was our Esri’s Learning Center coach on Day 2. Jason has been instrumental in getting dojo training techniques off the ground. His central role (alongside doing his share of the coding) was to make sure everyone collaborated. Essentially, with five SDK developers training together, only two machines were used to build the self-guided tour app. Paired together, working together, working in teams - we talked out loud, scribbled across the white board, unraveled challenges, spoke code, pecked on the same keyboard and provided an endless stream of encouragement - even when times got tough.

Learning Day 3


Learning Day 3 led to many breakthroughs involving the core fundamentals. Major concepts like Tags, Triggers and Devices had set in. Conditions like ‘leave’ and ‘enter’ and tracking profiles like ‘fine’, ‘adaptive’ and ‘rough’ became a part of our vocabulary. We also had time to experiment with non-geographic messaging (possible via ArcGIS Online) and sent this message by Benjamin Franklin which inspired our training event.
"Tell me and I forget, teach me and I may remember, involve me and I learn."

We also spent a significant amount of time annotating the steps we took on Day 3. The list of challenges we encountered became the official training topics used in follow-up Geotrigger Service trainings. Best of all, we completed what we set out to do and finished our self-guided tour of Esri's campus.

In summary, everyone in Support and Development are excited about this release. We have a great team ready to support any questions people may have regarding the Geotrigger Service and their supporting SDKs, and we want to make every ArcGIS developer successful. In addition, our project-based learning approach is something we are going to continue to refine in Support Services. If anyone has similar training methodologies in their workplace or is ever interested in attending an Esri-sponsored hackathon or Meetup, let us know!
Doug C. - Advocacy Lead

Filter Blog

By date: By tag: