Mixing AMD and non-AMD widgets?

[KenBuja]

When using AMD code, is it possible to use the older widgets that were written in the legacy code (using dojo.provide, dojo.require, and dojo.declare)? Or do the widgets also need to be updated to AMD?

If it is possible to use the older widgets, what would the code look like?

[VivekPrasad · Accepted solution]

When using AMD code, is it possible to use the older widgets that were written in the legacy code (using dojo.provide, dojo.require, and dojo.declare)? Or do the widgets also need to be updated to AMD?

If it is possible to use the older widgets, what would the code look like?

Yes, it is possible.

[KenBuja]

I'm using nliu's TOC widget and it's not working when I use AMD. Here's the original code that works:

   <script type="text/javascript">

        dojo.require("agsjs.dijit.TOC");
        dojo.require("esri.arcgis.utils");
        dojo.require("esri.dijit.BasemapGallery");
        //dojo.require("esri.dijit.Popup");
        dojo.require("esri.map");
        dojo.require("dojo.data.ItemFileReadStore");
        //dojo.require("dijit.layout.AccordionContainer");
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dijit.layout.TabContainer");
        dojo.require("dijit.TitlePane");
        dojo.require("dojo.fx"); // needed if use jsapi 3.0
        dojo.require("dojox.grid.DataGrid");

    </script>
    <script type="text/javascript">

        var map;
        var identifyTask, identifyParams;
        var urlSEFCRI = "http://myserver/ArcGIS/rest/services/biogeo/SEFCRI/MapServer"
        var layerSEFCRI;

        var tasks;
        var clickPoint;

        function init() {
            var popup = new esri.dijit.Popup({
                fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]))
            }, dojo.create("div"));

            map = new esri.Map("map", {
                basemap: "oceans",
                showAttribution: false,
                logo: false,
                infoWindow: popup,
                center: [-80.2, 26.67],
                zoom: 11

            });

            loading = dojo.byId("loadingImg");

            layerSEFCRI = new esri.layers.ArcGISDynamicMapServiceLayer(urlSEFCRI, {
                id: 'SEFCRI'
            });
            map.addLayers([layerSEFCRI]); // Suba's edit
            dojo.connect(map, 'onLayersAddResult', function (results) {
                var toc = new agsjs.dijit.TOC({
                    map: map,
                    layerInfos: [{
                        layer: layerSEFCRI,
                        title: "SEFCRI",
                        slider: true
                    }]
                }, 'tocDiv');
                toc.startup();
                layerSEFCRI.setVisibleLayers([0]);
                mapReady(map);

            });
</script>

This AMD version doesn't work.

var map;
var identifyTask, identifyParams;
var urlSEFCRI = "http://myserver/ArcGIS/rest/services/biogeo/SEFCRI/MapServer";
var layerSEFCRI;


require([
    "agsjs/dijit/TOC",

    "dojo/_base/connect",
    "dojo/parser",
    "dojo/ready",

    "esri/map",
    "esri/InfoTemplate",

    "esri/arcgis/utils",

    "esri/dijit/InfoWindow",

    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",

    "dojo/domReady!"

], function (
        TOC,
        connect, parser, ready,
        Map, InfoTemplate,
        InfoWindow) {
    ready(function () {
        //parser.parse();
    });

    map = new Map("map", {
        basemap: "oceans",
        showAttribution: false,
        logo: false,
        //infoWindow: popup,
        center: [-80.2, 26.67],
        zoom: 11
    });
    map.resize();
    loading = dojo.byId("loadingImg");
    layerSEFCRI = new esri.layers.ArcGISDynamicMapServiceLayer(urlSEFCRI, {
        id: 'SEFCRI'
    });
    map.addLayers([layerSEFCRI]);
    connect.connect(map, "onLayerAddResult", function (results) {
        var toc = new TOC({
            map: map,
            layerInfos: [{
                layer: layerSEFCRI,
                title: "SEFCRI",
                slider: true
            }]
        }, 'tocDiv');
        toc.startup();
        console.log("loaded");
        layerSEFCRI.setVisibleLayers([0]);
        mapReady(map);

    });

If I comment out the code in red, the map works as expected (and shows the "loaded" log).

[KenBuja]

This code works properly

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>TOC</title>

    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">

    <style>
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0px;
            font-family: helvetica, arial, sans-serif;
            font-size: 90%;
        }

        #leftPane
        {
            width: 280px;
            overflow: auto;
        }
        /* this line hide layers when out of scale for the inline TOC */
        #scaleDiv .agsTOCOutOfScale
        {
            display: none;
        }
    </style>
    <script type="text/javascript">
        var djConfig = {
            parseOnLoad: true,
            packages: [{
                "name": "agsjs",
                "location": location.pathname.replace(/\/[^/]+$/, "") + '/agsjs'
                //"location": 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.04/xbuild/agsjs' // for xdomain load
            }]
        };
    </script>

    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>

    <script type="text/javascript">
        var map;
        var urlSEFCRI = "http://egisws02.nos.noaa.gov/ArcGIS/rest/services/biogeo/SEFCRI/MapServer"

        require([
           "dojo/_base/connect",
           "dojo/parser",
           "dojo/ready",

           "esri/map",

           "agsjs/dijit/TOC",

            "esri/arcgis/utils",

            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",

            "dojo/domReady!"

        ], function (
        connect, parser, ready,
        Map) {

            ready(function () {
                //parser.parse();
            });

            map = new esri.Map("map", {
                basemap: "oceans",
                showAttribution: false,
                logo: false,
                center: [-80.2, 26.67],
                zoom: 11
            });

            map.resize();

            layerSEFCRI = new esri.layers.ArcGISDynamicMapServiceLayer(urlSEFCRI, {
                id: 'SEFCRI'
            });
            map.addLayers([layerSEFCRI]);
            connect.connect(map, 'onLayersAddResult', function (results) {
                var toc = new agsjs.dijit.TOC({
                    map: map,
                    layerInfos: [{
                        layer: layerSEFCRI,
                        title: "SEFCRI",
                        slider: true
                    }]
                }, 'tocDiv');
                toc.startup();
                console.log("Set TOC");
                layerSEFCRI.setVisibleLayers([0]);
            });
            connect.connect(layerSEFCRI, "onLoad", function () {
                map.setExtent(layerSEFCRI.initialExtent, true);
            });

            var resizeTimer;

            connect.connect(map, 'onLoad', function (theMap) {
                connect.connect(dijit.byId('map'), 'resize', function () { //resize the map if the div is resized
                    clearTimeout(resizeTimer);
                    resizeTimer = setTimeout(function () {
                        map.resize();
                        map.reposition();
                    }, 500);
                });
            });

            dojo.connect(layerSEFCRI, "onLoad", function () {
                map.setExtent(layerSEFCRI.initialExtent, true);
            });

        }
      );

    </script>

</head>
<body class="claro">
    <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">
        <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left" splitter="true">
            <div id="tocDiv">
            </div>
        </div>
        <div id="map" dojotype="dijit.layout.ContentPane" region="center">
        </div>
    </div>
</body>
</html>

[YgorThomaz]

This code works properly

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>TOC</title>

    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">

    <style>
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0px;
            font-family: helvetica, arial, sans-serif;
            font-size: 90%;
        }

        #leftPane
        {
            width: 280px;
            overflow: auto;
        }
        /* this line hide layers when out of scale for the inline TOC */
        #scaleDiv .agsTOCOutOfScale
        {
            display: none;
        }
    </style>
    <script type="text/javascript">
        var djConfig = {
            parseOnLoad: true,
            packages: [{
                "name": "agsjs",
                "location": location.pathname.replace(/\/[^/]+$/, "") + '/agsjs'
                //"location": 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.04/xbuild/agsjs' // for xdomain load
            }]
        };
    </script>

    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>

    <script type="text/javascript">
        var map;
        var urlSEFCRI = "http://egisws02.nos.noaa.gov/ArcGIS/rest/services/biogeo/SEFCRI/MapServer"

        require([
           "dojo/_base/connect",
           "dojo/parser",
           "dojo/ready",

           "esri/map",

           "agsjs/dijit/TOC",

            "esri/arcgis/utils",

            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",

            "dojo/domReady!"

        ], function (
        connect, parser, ready,
        Map) {

            ready(function () {
                //parser.parse();
            });

            map = new esri.Map("map", {
                basemap: "oceans",
                showAttribution: false,
                logo: false,
                center: [-80.2, 26.67],
                zoom: 11
            });

            map.resize();

            layerSEFCRI = new esri.layers.ArcGISDynamicMapServiceLayer(urlSEFCRI, {
                id: 'SEFCRI'
            });
            map.addLayers([layerSEFCRI]);
            connect.connect(map, 'onLayersAddResult', function (results) {
                var toc = new agsjs.dijit.TOC({
                    map: map,
                    layerInfos: [{
                        layer: layerSEFCRI,
                        title: "SEFCRI",
                        slider: true
                    }]
                }, 'tocDiv');
                toc.startup();
                console.log("Set TOC");
                layerSEFCRI.setVisibleLayers([0]);
            });
            connect.connect(layerSEFCRI, "onLoad", function () {
                map.setExtent(layerSEFCRI.initialExtent, true);
            });

            var resizeTimer;

            connect.connect(map, 'onLoad', function (theMap) {
                connect.connect(dijit.byId('map'), 'resize', function () { //resize the map if the div is resized
                    clearTimeout(resizeTimer);
                    resizeTimer = setTimeout(function () {
                        map.resize();
                        map.reposition();
                    }, 500);
                });
            });

            dojo.connect(layerSEFCRI, "onLoad", function () {
                map.setExtent(layerSEFCRI.initialExtent, true);
            });

        }
      );

    </script>

</head>
<body class="claro">
    <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">
        <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left" splitter="true">
            <div id="tocDiv">
            </div>
        </div>
        <div id="map" dojotype="dijit.layout.ContentPane" region="center">
        </div>
    </div>
</body>
</html>

It's works! Why can't we use the code below?

var toc = new TOC({
            map: map,
            layerInfos: [{
                layer: layerSEFCRI,
..

Thanks!