topic Re: need help migrating to AMD in ArcGIS JavaScript Maps SDK Questions

need help migrating to AMD

JeffPace — Wed, 21 Aug 2013 16:50:28 GMT

So i have a utilities folder with a common.js that contains a bunch of helper methods. Pre AMD it looked like. NO idea how to migrate to AMD. THANKS!

dojo.provide("utilities.common");

utilities.common.getType = function(value) {
    var type = "config.json";
    switch (value) {
        case "test":
            type = "config-test.json";
            break
        case "landdevelopment":
            type = "config-landdevelopment.json";
            break
        case "utilitiesinfrastructure":
            type = "config-utilitiesinfrastructure.json";
            break
        default:
            type = "config.json";

    }

    return type;
};

utilities.common.getFormattedServiceType = function(value) {
    var type = "Property Locator";
    var newValue = (value.replace(".json", "")).replace('config-', '');
    switch (newValue) {
        case "test":
            type = "Test";
            break
        case "landdevelopment":
            type = "Land Development";
            break
        case "utilitiesinfrastructure":
            type = "Utilities Infrastructure";
            break
        default:
            type = "Property Locator";

    }

    return type;
};

utilities.common.getAllNamedChildDijits = function(id) {
    // Gather all child widgets
    var w = null;
    var children = null;
    widgets = {};
    w = dojo.query("[widgetId]", dojo.byId(id));
    children = w.map(dijit.byNode);
    children.forEach(function(item, idx) {
        if (item.name) {
            widgets[item.name] = item;
        }
    });


    return widgets;

};

Re: need help migrating to AMD

JeffPace — Sun, 12 Dec 2021 02:57:17 GMT

You can pass an object to define() that defines your utility functions. Put this in common.js:

define({
    getType: function(value) {
        var type = "config.json";
        switch (value) {
            case "test":
                type = "config-test.json";
                break
            case "landdevelopment":
                type = "config-landdevelopment.json";
                break
            case "utilitiesinfrastructure":
                type = "config-utilitiesinfrastructure.json";
                break
            default:
                type = "config.json";

        }

        return type;
    },
    getFormattedServiceType: function(value) {
        var type = "Property Locator";
        var newValue = (value.replace(".json", "")).replace('config-', '');
        switch (newValue) {
            case "test":
                type = "Test";
                break
            case "landdevelopment":
                type = "Land Development";
                break
            case "utilitiesinfrastructure":
                type = "Utilities Infrastructure";
                break
            default:
                type = "Property Locator";

        }

        return type;
    },
    getAllNamedChildDijits: function(id) {
        // Gather all child widgets
        var w = null;
        var children = null;
        widgets = {};
        w = dojo.query("[widgetId]", dojo.byId(id));
        children = w.map(dijit.byNode);
        children.forEach(function(item, idx) {
            if (item.name) {
                widgets[item.name] = item;
            }
        });


        return widgets;

    }

});

Put this in load-common.html in the same directory as common.js:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.6/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%; width: 100%; margin: 0; padding: 0; 
      }
    </style>

    <script>
      var dojoConfig = {
        paths: {
          utilities: location.pathname.replace(/\/[^/]+$/, "")
        }
      }
    </script>
    <script src="//js.arcgis.com/3.6/"></script>
    <script>
      var map;
    
      require([
        "esri/map", 
        "utilities/common",
        "dojo/domReady!"
      ], function(
        Map, common
      ) {
        map = new Map("map", {
          basemap: "streets",
          center: [ 19.291, 48.343 ],
          zoom: 4 
        });
        console.log("common", common);
      });
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

appreciate that. I can load it from my index.html as long as i path to it correctly right?

also, what about defining the components properly so in the third function i can use "query" instead of "dojo.query"?

Re: need help migrating to AMD

JasonZou — Sun, 12 Dec 2021 02:57:20 GMT

You put dependencies in the first parameter as an array, and use aliases as the callback function parameters once all the dependencies are loaded. Inside the callback function, you can use the aliases instead.

define(["dojo/dom", "dojo/query"], function(dom, query) {
    getType: function(value) {
        var type = "config.json";
        switch (value) {
            case "test":
                type = "config-test.json";
                break
            case "landdevelopment":
                type = "config-landdevelopment.json";
                break
            case "utilitiesinfrastructure":
                type = "config-utilitiesinfrastructure.json";
                break
            default:
                type = "config.json";

        }

        return type;
    },
    getFormattedServiceType: function(value) {
        var type = "Property Locator";
        var newValue = (value.replace(".json", "")).replace('config-', '');
        switch (newValue) {
            case "test":
                type = "Test";
                break
            case "landdevelopment":
                type = "Land Development";
                break
            case "utilitiesinfrastructure":
                type = "Utilities Infrastructure";
                break
            default:
                type = "Property Locator";

        }

        return type;
    },
    getAllNamedChildDijits: function(id) {
        // Gather all child widgets
        var w = null;
        var children = null;
        widgets = {};
        w = query("[widgetId]", dom.byId(id));
        children = w.map(dijit.byNode);
        children.forEach(function(item, idx) {
            if (item.name) {
                widgets[item.name] = item;
            }
        });


        return widgets;

    }

});

Re: need help migrating to AMD

JeffPace — Thu, 22 Aug 2013 11:44:10 GMT

perfect thank you. Lots of classes to re-write. 🙂

Re: need help migrating to AMD

JasonZou — Thu, 22 Aug 2013 13:18:44 GMT

Jeff, please mark this as answered so other developers may find it helpful for their conversion job. Thanks.

Re: need help migrating to AMD

derekswingley1 — Sun, 12 Dec 2021 02:57:15 GMT

You can pass an object to define() that defines your utility functions. Put this in common.js:

define({
    getType: function(value) {
        var type = "config.json";
        switch (value) {
            case "test":
                type = "config-test.json";
                break
            case "landdevelopment":
                type = "config-landdevelopment.json";
                break
            case "utilitiesinfrastructure":
                type = "config-utilitiesinfrastructure.json";
                break
            default:
                type = "config.json";

        }

        return type;
    },
    getFormattedServiceType: function(value) {
        var type = "Property Locator";
        var newValue = (value.replace(".json", "")).replace('config-', '');
        switch (newValue) {
            case "test":
                type = "Test";
                break
            case "landdevelopment":
                type = "Land Development";
                break
            case "utilitiesinfrastructure":
                type = "Utilities Infrastructure";
                break
            default:
                type = "Property Locator";

        }

        return type;
    },
    getAllNamedChildDijits: function(id) {
        // Gather all child widgets
        var w = null;
        var children = null;
        widgets = {};
        w = dojo.query("[widgetId]", dojo.byId(id));
        children = w.map(dijit.byNode);
        children.forEach(function(item, idx) {
            if (item.name) {
                widgets[item.name] = item;
            }
        });


        return widgets;

    }

});

Put this in load-common.html in the same directory as common.js:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.6/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%; width: 100%; margin: 0; padding: 0; 
      }
    </style>

    <script>
      var dojoConfig = {
        paths: {
          utilities: location.pathname.replace(/\/[^/]+$/, "")
        }
      }
    </script>
    <script src="//js.arcgis.com/3.6/"></script>
    <script>
      var map;
    
      require([
        "esri/map", 
        "utilities/common",
        "dojo/domReady!"
      ], function(
        Map, common
      ) {
        map = new Map("map", {
          basemap: "streets",
          center: [ 19.291, 48.343 ],
          zoom: 4 
        });
        console.log("common", common);
      });
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

Re: need help migrating to AMD

derekswingley1 — Sun, 12 Dec 2021 02:57:22 GMT

appreciate that. I can load it from my index.html as long as i path to it correctly right?

Yep.

also, what about defining the components properly so in the third function i can use "query" instead of "dojo.query"?

My mistake, missed those refs initially.

Do what zj_zou says: load your dependencies using an array of module identifiers for the first arg to define(). Also make sure you return the object you create like so:

define(["dojo/dom", "dojo/query"], function(dom, query) {
    return {
        getType: function(value) {
            var type = "config.json";
            switch (value) {
                case "test":
                    type = "config-test.json";
                    break
                case "landdevelopment":
                    type = "config-landdevelopment.json";
                    break
                case "utilitiesinfrastructure":
                    type = "config-utilitiesinfrastructure.json";
                    break
                default:
                    type = "config.json";

            }

            return type;
        },
        getFormattedServiceType: function(value) {
            var type = "Property Locator";
            var newValue = (value.replace(".json", "")).replace('config-', '');
            switch (newValue) {
                case "test":
                    type = "Test";
                    break
                case "landdevelopment":
                    type = "Land Development";
                    break
                case "utilitiesinfrastructure":
                    type = "Utilities Infrastructure";
                    break
                default:
                    type = "Property Locator";

            }

            return type;
        },
        getAllNamedChildDijits: function(id) {
            // Gather all child widgets
            var w = null;
            var children = null;
            widgets = {};
            w = query("[widgetId]", dom.byId(id));
            children = w.map(dijit.byNode);
            children.forEach(function(item, idx) {
                if (item.name) {
                    widgets[item.name] = item;
                }
            });


            return widgets;

        }
    }
});

Here's a test page that loads and calls two of your functions (I renamed common.js from my previous example to common-deps.js):

 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.6/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%; width: 100%; margin: 0; padding: 0; 
      }
    </style>

    <script>
      var dojoConfig = {
        paths: {
          utilities: location.pathname.replace(/\/[^/]+$/, "")
        }
      }
    </script>
    <script src="//js.arcgis.com/3.6/"></script>
    <script>
      var map;
    
      require([
        "esri/map", 
        // "utilities/common",
        "utilities/common-deps",
        "dojo/domReady!"
      ], function(
        Map, common
      ) {
        map = new Map("map", {
          basemap: "streets",
          center: [ 19.291, 48.343 ],
          zoom: 4 
        });
        console.log("all of common", common);
        console.log("common.getType(\"test\"):", common.getType("test"));
        console.log("common.getAllNamedChildDijits(\"map\"):", common.getAllNamedChildDijits("map"));
      });
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>