nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Converting to AMD

deleted-user-yA_w_FC9FKe5

So I need some serious help as I've created a new project that seems to be working well but I need to convert it to AMD. I think it is half AMD and half old style. I see this as a huge undertaking on my part as this is still all really new to me but I would like to be up to date. Can someone take a look at this code and help me get started. I'm willing to purchase an alcholic beverage or two to someone who can do this for me. I could pay this dept up at the ESRI conference. I think this would be simple for those of you who code in Javascript all of the time.

http://jsbin.com/tudab/1/

Thanks,

Michael

Vind meer berichten getagd met

Accepted answers

JohnGravois

hi steve,

i've attached a zip file of both legacy and AMD versions of 3 different applications that are a little more complicated than I used for my blog. hope you find reviewing them helpful.

legacyVsAmd_samples.zip

All comments

JohnGravois

sorry guys, i totally botched that one.

realLegacyAMDcomparisonSamples.zip

deleted-user-yA_w_FC9FKe5

Thanks for all of the help. I looked at the zip file as well and noticed Steve was right about only one file truely being a legacy file. I'm almost done with my conversion. One issue with the TOC but I thought that deserved a new thread.

Thanks again.

evtguy

hi steve,

i've attached a zip file of both legacy and AMD versions of 3 different applications that are a little more complicated than I used for my blog. hope you find reviewing them helpful.

Thanks, John, for posting that. A few comments-

Your ZIP file contains three samples but only one (ed_multipleAttrInspector) is actually legacy and AMD. Most likely a copy/paste error but the other two samples are both AMD despite what the file name says.

As for the one sample that does include both, it's helpful but still simplistic and pared down. I'm thinking something more along the lines of the JavaScript Viewer or Finder application template. One of my apps uses the Highchart JS library for charting, another library for date/time manipulation, and another for just general JS related functions. They all have their own Javascript source files. How do I incorporate these into AMD style code?

That's what I mean when I say that the official ESRI samples are on the simplistic side.

Steve

JonathanUihlein

I figured out the problem

        "dijit/layout/TabContainer",
        "esri.dijit.Bookmarks",
        "esri.dijit.LocateButton",
        "esri.dijit.HomeButton"

Need to remove the dots and put slashes. At least I made a little progress today. 😉

John posted this solution earlier in the thread. You may have missed it. The slashes were in red.

Also, from looking at your code, I strongly recommend that you actually sit down and read the documentation.
You are making mistakes that are covered in the very first tutorial.

https://developers.arcgis.com/javascript/jstutorials/intro_firstmap_amd.html

deleted-user-yA_w_FC9FKe5

I figured out the problem

"dijit/layout/TabContainer",
"esri.dijit.Bookmarks",
"esri.dijit.LocateButton",
"esri.dijit.HomeButton"

Need to remove the dots and put slashes. At least I made a little progress today. 😉

deleted-user-yA_w_FC9FKe5

Tried this

     require([
        "esri/map",
        "esri/graphic",
        "esri/tasks/FindTask",
        "esri/tasks/FindParameters",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/Font", 
        "esri/symbols/TextSymbol",
          
        "esri/Color",
        "dojo/on",
        "dojo/dom",
        "dijit/registry",
        "dojo/_base/array",
        "dojo/_base/connect",
        "dojox/grid/DataGrid",
        "dojo/data/ItemFileReadStore",
        "dijit/form/Button",
        "dojo/parser",
          
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!",
  "dojox/widget/TitleGroup",
  "dijit/layout/AccordionContainer",
  "dijit/layout/TabContainer",
  "esri.dijit.Bookmarks",
  "esri.dijit.LocateButton",   
  "esri.dijit.HomeButton"  
      ], function(
        Map, Graphic, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Font, TextSymbol,
        Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser, BorderContainer, ContentPane, domReady, TitleGroup, AccordionContainer, TabContainer, Bookmarks, LocateButton, HomeButton
      ) {      

        
        map = new Map("map", {
        center: [-98.258, 38.236],
        zoom: 4,
        basemap: "streets"
          });


 var geoLocate = new LocateButton({map: map}, "LocateButton");
 var  home = new HomeButton({map: map}, "HomeButton");
    
//var home = new HomeButton({map: map      }, "HomeButton");      
//home.startup();    

        });

JohnGravois

require([" "esri/map",esri/dijit/LocateButton", 
"esri/dijit/HomeButton"
], function (Map, LocateButton, HomeButton){

deleted-user-yA_w_FC9FKe5

Augh erwi7452 that stinks. I could use your help and it would be cool to meet a fellow GIS Javascript person!

Thanks for all of the resonses. I have to agree that this is not very simple and I honestly don't know why it changed. It seemed much easier and simplier to follow using the old code. I stripped out all of the code and was planning to put it back in block by block. However, just getting the freaking map/home/locate buttons to work is frustrating.

What am I doing wrong below?

require([" "esri/map",esri.dijit.LocateButton",
"esri.dijit.HomeButton"
], function (Map, LocateButton, HomeButton){

        map = new Map("map", {
        center: [-98.258, 38.236],
        zoom: 4,
        basemap: "streets"
          });

      var home = new HomeButton({map: map      }, "HomeButton");      home.startup();
        });

JohnGravois

hi steve,

i've attached a zip file of both legacy and AMD versions of 3 different applications that are a little more complicated than I used for my blog. hope you find reviewing them helpful.

legacyVsAmd_samples.zip

evtguy

hi michael,

first, i recommend checking out this blog post.

I know this is ESRI's default response and I will admit that the blog post is helpful. But let's be honest- it's the equivalent to a Hello, World! programming example. I understand the root of what's presented in that blog post but I get completely lost when it comes to applying that to my legacy apps which have 1000s of lines of code spread across multiple JS files.

What *I* would find helpful would be an example of a basic app (but just a tad more robust than any single JS API ESRI sample) that's written in legacy AND AMD format. At least with that, I can have both versions open and study the code side by side to truly understand how to migrate my code to AMD.

Steve

JohnGravois

hi michael,

first, i recommend checking out this blog post.

in general, in order to fully convert your own code to AMD, you would need to remove all of your existing calls to dojo.require() and place all of your application code within a require callback (or several) which loads the same modules. afterward you will then reference what you need using aliases instead of relying on global namespace objects.

for example:

dojo.require("esri.dijit.LocateButton");
..
geoLocate = new esri.dijit.LocateButton({map: map}, "LocateButton");

//becomes
require(["esri/dijit/LocateButton", ...), function(LocateButton, ...) {
  geoLocate = new LocateButton({map: map}, "LocateButton");
}

ErwinSoekianto

I would take up this challenge if I were going to UC this year. 😉

The easiest way to get started is to put everything under script tag inside require([], function(){}
add all the dojo.require and suggested argument alias, https://developers.arcgis.com/javascript/jsapi/argument_aliases.html

then start fixing the code line by line, to use the argument alias of the module instead of the full name

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.