Trouble Moving from Legacy to AMD

[WesAskew]

I have been developing simple mapping applications for a couple of years now using legacy code and am in the process of making the transition over to AMD.  However, I seem to be having trouble grasping the concept of the AMD modules and how they relate to overall scope and other functions in the application.  As an example, I have posted the JavaScript code from two simple query applications below, one in legacy, and the other as my attempt at creating the same application in AMD.  The legacy works properly, however the AMD version gives me errors with being able to find the QueryTask.  Could someone take a look and direct me to where I am going wrong?  Or point me to a good resource that explains the best way of learning AMD from legacy code?  I understand the legacy code well but am having a great deal of trouble figuring out the advantage of switching over to AMD.  Thanks in advance.
Legacy:

dojo.require("esri.tasks.query");     dojo.require("esri.map");     var map, countyQuery, countyQueryTask;      function init(){         //set map properties          var startExtent = new esri.geometry.Extent ({"xmin":-9132004.21177897, "ymin":3780378.56383079, "xmax":-8618716.31271849, "ymax":4021468.33460162, "spatialReference":{wkid:102100}});         map = new esri.Map("map",{   center: [-80.94, 33.646],   basemap: "streets",         extent:startExtent,         });     }      function zoomTocounty(county){     map.graphics.clear();   var cntyName = document.getElementById("txtSearch").value;   countyQueryTask = new esri.tasks.QueryTask("MYSERVICEHERE");   countyQuery = new esri.tasks.Query();   countyQuery.returnGeometry = true;   countyQuery.where = "NAME"+'='+"'"+cntyName+"'";   countyQueryTask.execute(countyQuery,ZoomTocountyGeometry)   }        function ZoomTocountyGeometry(featureSet){   if(featureSet.features.length > 0){        var graphic =featureSet.features[0];      var selSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NULL, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,255]), 4.5));     graphic.setSymbol(selSymbol);     map.graphics.add(graphic);    }   }   dojo.addOnLoad(init);

AMD:

var map, countyQuery, countyQueryTask;  require([         "esri/map",          "esri/symbols/SimpleFillSymbol",    "esri/symbols/SimpleLineSymbol",          "esri/renderers/SimpleRenderer",    "esri/graphic",          "esri/Color",    "esri/tasks/query",    "esri/tasks/QueryTask",   "dojo/domReady!"       ],  function(Map, SimpleFillSymbol, SimpleLineSymbol,SimpleRenderer, Graphic, Color, Query, QueryTask) {    map = new Map("map", {           basemap: "streets",           center: [-80.94, 33.646],           zoom: 8,           slider: false         });     });      function zoomTocounty(county){    var cntyName = document.getElementById("txtSearch").value;   map.graphics.clear();   //To query county by name and pass to ZoomTocountyGeometry function   countyQueryTask = new QueryTask("MYSERVICEHERE");   countyQuery = new Query();   countyQuery.returnGeometry = true;   countyQuery.where = "NAME"+'='+"'"+cntyName+"'";   countyQueryTask.execute(countyQuery,ZoomTocountyGeometry)   }        function ZoomTocountyGeometry(featureSet){   if(featureSet.features.length > 0){        var graphic =featureSet.features[0];      var selSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,255]), 4.5));     graphic.setSymbol(selSymbol);     map.graphics.add(graphic);      var timeEvent = setTimeout(map.setExtent(featureSet.features[0].geometry.getExtent().expand(2.5)), 1); //Timing events    }   }

[JakeSkinner · Accepted solution]

Hi Wesley,

You will want to place the zoomToCounty and zoomTocountyGeometry functions within the require/function.  Ex:

 var map, countyQuery, countyQueryTask;    require([         "esri/map", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol",          "esri/renderers/SimpleRenderer", "esri/graphic", "esri/Color",          "esri/tasks/query", "esri/tasks/QueryTask", "dojo/domReady!"       ],    function(         Map, SimpleFillSymbol, SimpleLineSymbol,         SimpleRenderer, Graphic, Color,          Query, QueryTask         ){      map = new Map("map", {           basemap: "streets",           center: [-80.94, 33.646],           zoom: 8,           slider: false         });              function zoomTocounty(county){       var cntyName = document.getElementById("txtSearch").value;       map.graphics.clear();       //To query county by name and pass to ZoomTocountyGeometry function       countyQueryTask = new QueryTask("MYSERVICEHERE");       countyQuery = new Query();       countyQuery.returnGeometry = true;       countyQuery.where = "NAME"+'='+"'"+cntyName+"'";       countyQueryTask.execute(countyQuery,ZoomTocountyGeometry)   }          function ZoomTocountyGeometry(featureSet){       if(featureSet.features.length > 0){                var graphic =featureSet.features[0];            var selSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,255]), 4.5));           graphic.setSymbol(selSymbol);           map.graphics.add(graphic);             var timeEvent = setTimeout(map.setExtent(featureSet.features[0].geometry.getExtent().expand(2.5)), 1); //Timing events         }      }      });

Take a look at the following links for a further explanation of the new AMD:

http://blogs.esri.com/esri/arcgis/2013/10/14/the-abcs-of-amd/

https://developers.arcgis.com/javascript/jshelp/inside_dojo_amd.html

[WesAskew]

Hi Wesley,

You will want to place the zoomToCounty and zoomTocountyGeometry functions within the require/function.  Ex:

 var map, countyQuery, countyQueryTask;
 
 require([
        "esri/map", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", 
        "esri/renderers/SimpleRenderer", "esri/graphic", "esri/Color", 
        "esri/tasks/query", "esri/tasks/QueryTask", "dojo/domReady!"
      ], 
  function(
        Map, SimpleFillSymbol, SimpleLineSymbol,
        SimpleRenderer, Graphic, Color, 
        Query, QueryTask
        ){

    map = new Map("map", {
          basemap: "streets",
          center: [-80.94, 33.646],
          zoom: 8,
          slider: false
        }); 
        
   function zoomTocounty(county){
      var cntyName = document.getElementById("txtSearch").value;
      map.graphics.clear();
      //To query county by name and pass to ZoomTocountyGeometry function
      countyQueryTask = new QueryTask("MYSERVICEHERE");
      countyQuery = new Query();
      countyQuery.returnGeometry = true;
      countyQuery.where = "NAME"+'='+"'"+cntyName+"'";
      countyQueryTask.execute(countyQuery,ZoomTocountyGeometry)
  }
    
    function ZoomTocountyGeometry(featureSet){
      if(featureSet.features.length > 0){     
          var graphic =featureSet.features[0]; 
          var selSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,255]), 4.5));
          graphic.setSymbol(selSymbol);
          map.graphics.add(graphic);  
          var timeEvent = setTimeout(map.setExtent(featureSet.features[0].geometry.getExtent().expand(2.5)), 1); //Timing events
        } 
    }  

  });

Take a look at the following links for a further explanation of the new AMD:

http://blogs.esri.com/esri/arcgis/2013/10/14/the-abcs-of-amd/

https://developers.arcgis.com/javascript/jshelp/inside_dojo_amd.html

Thanks for the response, I will definitely check out the provided resources.  As for the sample code that I posted, when I move functions within the require/function, I can no longer access them from HTML code.  This confuses me even further as when I attempt to access them from dom scripts (ex: 

dom.byId("btnQuery").onclick = zoomToCounty();

), I get different error messages such as "TypeError: Object doesn't support property or method 'execute' ".  When attempting to access them through document scripts (ex:

document.getElementById("btnQuery").onclick = zoomToCounty();

), I get another error message "SCRIPT5007: Unable to get property 'clear' of undefined or null reference". I guess this is where I get hung up with the AMD.  I never had this issue with the legacy code.  Is there something obvious that I am missing?

[JakeSkinner]

It's recommended to reference the 'click' events in your JavaScript using dojo/on module rather than HTML.  Ex:

on(dom.byId("btnQuery"), 'click', zoomToCounty)