Select to view content in your preferred language

need help migrating to AMD

2087
6
08-21-2013 09:50 AM
JeffPace
MVP Alum
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;

};
0 Kudos
6 Replies
derekswingley1
Deactivated User
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>
0 Kudos
JeffPace
MVP Alum
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"?
0 Kudos
JasonZou
Frequent Contributor
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;

    }

});
0 Kudos
derekswingley1
Deactivated User

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>
0 Kudos
JeffPace
MVP Alum
perfect thank you.  Lots of classes to re-write.  🙂
0 Kudos
JasonZou
Frequent Contributor
Jeff, please mark this as answered so other developers may find it helpful for their conversion job. Thanks.
0 Kudos