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; } } }

Re: Turning Sphagetti codes in to Modular structure

GaneshSolai_Sambandam

Hi GIS folks,
I started building web application using ARCGIS Javascript and slowly started adding new functionality into my web application.

As my coding is getting bigger and bigger into my application, it is getting to stage where it is very difficult to look at my code.

Can anyone please some provide methods / techniques through which we can organize our code in a modular way, so that allows easy debugging.

I do know that we organize our code in a separate Javascript file for each functionality / feature added on to my application, but, just wanted to know, is there a right way of doing / organizing code better.

And, also if you can point me to the right direction with some sample application, will be really appreciated.

Thanks in advance.

Regards
Ganesh

タグ付けされた投稿をもっと見る

Accepted answers

All comments

JonathanUihlein

You'll have to modularize your application by creating DOJO dijits(widgets) or Classes, and including them as packages in your dojoConfig object.

Check out these two tutorials on the subject:
https://developers.arcgis.com/en/javascript/jstutorials/intro_javascript_classes.html
https://developers.arcgis.com/en/javascript/jstutorials/intro_custom_dijit.html

GaneshSolai_Sambandam

HI Jon,
So, do you mean with the AMD style, organizing the codes in modular way wouldn't work.

If this is the case, then, when we build large applications for any organization, how would they organize them to find errors and debug them. It would really be a mess with full of sphageti codes and if the developer has left the organization and any new comer working on this application, will get totally confused.

I don't want to do such kind of mess in my application, and I need your help to organize them in a modular way.

JonathanUihlein

If this is not possible, then how could he able to run his application by referencing them in a separate jsfile.

If you look at his code, you will notice he is using the legacy style of DOJO, while you are using AMD.

AMD is better; DOJO is dropping legacy support in version 2.0 as well.

GaneshSolai_Sambandam

HI Jon
thanks for your help.

But, If you look at Ipeebles reply in relation to this thread, he managed to organize his code in a modular way and he has also used multiple javascript files which are referenced via script tag. He has also uploaded his sample application in which he had one init() function in the main HTML file (which has got all the modules for require block) and the rest of the functions related to his application was referenced in a separate Javascript file.

Ipeebles has used the following script tag to reference in his application
<script type="text/javascript" src="js/editing/EditorCutFeatures.js"></script>
<script type="text/javascript" src="js/editing/EditorDeleteFeatures.js"></script>
<script type="text/javascript" src="js/editing/EditorModifyFeatures.js"></script>
<script type="text/javascript" src="js/editing/EditorTemplatePicker.js"></script>
<script type="text/javascript" src="js/find/FindNeighborhood.js"></script>
<script type="text/javascript" src="js/find/FindEngineeringProject.js"></script>
<script type="text/javascript" src="js/geocoding/FindAddress.js"></script>
<script type="text/javascript" src="js/geocoding/FindStreet.js"></script>

If this is not possible, then how could he able to run his application by referencing them in a separate jsfile.

Any help on this would be really appreciated. I do appreciate you want me to create a class or module to organize them, but, I don't think Ipeebles has done it that way.

JonathanUihlein

Well, if you think about it, having that function in another file, outside of the require block, means it doesn't have access to DOJO and ESRI functions because of scope.

For example, if the following function is in another file, there is no context for what a SimpleMarkerSymbol and a Graphic are. So, logically, this will fail.

 
function showLocation(evt) {

try{
    map.graphics.clear();
    var point = evt.result.feature.geometry;
    var symbol = new SimpleMarkerSymbol().setStyle(
      SimpleMarkerSymbol.STYLE_SQUARE).setColor(
      new Color([255, 0, 0, 0.5])
    );
    var graphic = new Graphic(point, symbol);
    map.graphics.add(graphic);

    map.infoWindow.setTitle("Search Result");
    map.infoWindow.setContent(evt.result.name);
    map.infoWindow.show(evt.result.feature.geometry);

  }catch(e){
  console.log(e);
  }
}

Error Message in console:

ReferenceError: SimpleMarkerSymbol is not defined

If you *really* want to move functions that require DOJO into other files, create a Class, Widget or Module and call it via the DOJO loader.

Check out the following tutorials:
https://developers.arcgis.com/en/javascript/jstutorials/intro_javascript_classes.html
https://developers.arcgis.com/en/javascript/jstutorials/intro_custom_dijit.html

There are also some great articles on the DOJO blog.

Otherwise, keep the function within your require block.

GaneshSolai_Sambandam

Hi Jon
The function showLocation() is referenced with the Script tag on the HTML page as

<script type="text/javascript" src="JS/Geocoding/Geocoder.js"></script>

Can you create a separate Javascript file and see whether the code works. What I was try to do is arranging my codes in a
modular way so that I can quickly go to that function, if any there is issue with that function or if want to add lot more functionality.

As you said, if i add the function showLocation() on the same HTML page, the code works fine and it doesn't work when I try to arrange them using a script reference as stated above.

Regards
Ganesh

JonathanUihlein

Hi ganeshssac

I ran your code locally and it successfully created a point with a red, semi-transparent square.

What is the error message you are receiving in the console?
If no errors are appearing, wrap the problematic code in a try/catch and check again for errors.

GaneshSolai_Sambandam

HI Ipeebles
I started organizing my code using modular way, but unfortunately, I can't figure out, why code isn't working properly.
Can you please look into my code and find why I couldn't able to create to point graphic using geocoder widget.

function showLocation(evt) {
    map.graphics.clear();
    var point = evt.result.feature.geometry;
    var symbol = new SimpleMarkerSymbol().setStyle(
      SimpleMarkerSymbol.STYLE_SQUARE).setColor(
      new Color([255, 0, 0, 0.5])
    );
    var graphic = new Graphic(point, symbol);
    map.graphics.add(graphic);

    map.infoWindow.setTitle("Search Result");
    map.infoWindow.setContent(evt.result.name);
    map.infoWindow.show(evt.result.feature.geometry);

  
}

[HTML] <!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>GeoInfoScape</title>


<link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dojo/resources/dojo.css"/>
<link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dgrid/css/dgrid.css"/>
<link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dgrid/css/skins/tundra.css"/>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css"/>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/soria/soria.css"/>

    <link rel="stylesheet" href="CSS/Layout.css" />

    <style>


    </style>

     <script type="text/javascript" src="JS/Geocoding/Geocoder.js"></script>

    <script>var dojoConfig = { parseOnLoad: true }</script>
<script src="http://js.arcgis.com/3.6/"></script>


<script type="text/javascript">

    // ********************************************
    //          * VARIABLES *
    // ********************************************
    var map; // Map
    var geocoder; // Geocoder Widget

    require([
    "dojo/ready", "dojo/on",
    "esri/map", "esri/config", "esri/dijit/Geocoder", "esri/geometry/screenUtils", "esri/geometry/Extent", "esri/geometry/Point", "esri/geometry/webMercatorUtils", "esri/tasks/locator", "esri/graphic", "esri/SpatialReference",
    "esri/layers/FeatureLayer", "esri/layers/KMLLayer", "esri/tasks/QueryTask", "esri/tasks/query", "esri/tasks/RelationParameters", "esri/tasks/GeometryService", "esri/tasks/BufferParameters",
    "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/PictureMarkerSymbol", "esri/symbols/Font", "esri/symbols/TextSymbol", "esri/InfoTemplate",

    "esri/dijit/BasemapGallery", "esri/arcgis/utils",
     "dojo/_base/array", "dojo/_base/Color",
    "dojo/number", "dojo/parser", "dojo/dom", "dojo/dom-construct", "dojo/query", "dijit/registry",
     "dijit/form/Button", "dijit/form/TextBox", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "dijit/layout/TabContainer", "dijit/Menu", "dijit/TitlePane",
      "dojo/domReady!"],
      function (ready, on, Map, esriConfig, Geocoder, screenUtils, Extent, Point, webMercatorUtils, Locator, Graphic, SpatialReference,
    FeatureLayer, KMLLayer, QueryTask, Query, RelationshipParameters, GeometryService, BufferParameters, SimpleMarkerSymbol, SimpleLineSymbol, PictureMarkerSymbol, Font, TextSymbol, InfoTemplate, BasemapGallery, arcgisUtils, arrayUtils, Color, number, parser, dom, domConstruct, query, registry) {

          var initialExtent = new Extent({ "xmin": -2335145.742961492, "ymin": 6433321.958737379, "xmax": 1656701.6222024914, "ymax": 8248242.758340122, "spatialReference": { "wkid": 102100 } });
          map = new Map("map",
              {
                  extent: initialExtent,
                  basemap: "osm",
                  zoom: 3,
                  sliderPosition: "top-right",
                  sliderStyle: "small"
              });

          // Geocoder Widget
           geocoder = new Geocoder({
              arcgisGeocoder: {
                  placeholder: "Find a place"
              },
              map: map,
          }, dom.byId("Search"));
           geocoder.startup();



       geocoder.on("select", showLocation);


    });

    //*********************************************
    //            FUNCTION INTIALIZE END
    //*********************************************

</script>



</head>
<body class="soria">


   <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false"
         style="width:100%;height:100%;margin:0;">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" >GeoInfoScape

        <div id ="extent"></div>

    </div>

<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" id="leftPane">

        <div data-dojo-type="dijit/layout/AccordionContainer">

            <div data-dojo-type="dijit/layout/ContentPane" title="Extent">
                <div id="xmin"> </div>
                <div id="ymin"> </div>
                <div id="xmax"> </div>
                <div id="ymax"> </div>
            </div>

            <div data-dojo-type="dijit/layout/ContentPane" title="NetworkLayer">
                <div data-dojo-type="dijit/layout/TabContainer" tabStrip="true">
                    <div data-dojo-type="dijit/layout/ContentPane" title="Legend">

                    </div>

                    <div data-dojo-type="dijit/layout/ContentPane" title="Color">

                    </div>

                     <div data-dojo-type="dijit/layout/ContentPane" title="Kavitha">

                    </div>
                </div>

            </div>
            <div data-dojo-type="dijit/layout/ContentPane" title="Search Place">
                <div id="Search1"></div>
            </div>
        </div>

    </div>
      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding:0;">

          <div id="Search"></div>

          <div style="position:absolute; right:50px; top:10px; z-Index:999;">
          <div data-dojo-type="dijit/TitlePane"
               data-dojo-props="title:'Select Basemap', closable:false, open:false">
            <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
            <div id="basemapGallery" ></div></div>
          </div>
        </div>
<div id="btn1" style="position:absolute; left: 300px; top:2px; z-index:999;">
    <div data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'Menu', closable: false, open:false">
<div data-dojo-type="dijit/Menu" id="popup1campus" contextMenuForWindow="false" targetNodeIds="btn1">
<div data-dojo-type="dijit/MenuItem" onClick="alert('Hello world');">Enabled Item</div>
<div data-dojo-type="dijit/MenuItem" disabled="true">Disabled Item</div>
<div data-dojo-type="dijit/MenuSeparator"></div>
<div data-dojo-type="dijit/MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut"
    onClick="doNothing();">Cut</div>
<div data-dojo-type="dijit/MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy"
    onClick="doNothing();">Copy</div>
<div data-dojo-type="dijit/MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste"
    onClick="doNothing();">Paste</div>
</div>
        </div>
    </div>




     </div>
<div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
              <div> This is rightPane</div>

    <form action="">
Search Job: <input id="searchJob" type="text" value="Big Data Scientist" />
              <input id="executeButton" type="button" value="Search" />

        <input id="address" type="text" size="60" value="Shepherds walk, Bradley stoke, Bristol"/>

        <button id="locate" data-dojo-type="dijit/form/Button">Locate</button>

    </form>
    <br />
    <br />

    Buffer Distance (in Kilometers): <input type="text" id="distance" size="5" value="1"/>

    <select id="unit" style="width:100px;">
        <option value="UNIT_STATUTE_MILE"> Miles</option>
         <option value="UNIT_KILOMETER">KILOMETER</option>
         <option value="UNIT_METER">METER</option>
        <option value="UNIT_DEGREE">DEGREE</option>
         <option value="UNIT_FOOT">FEET</option>
    </select>

    <input id="Buffer" type="button" value="Buffer" />

    <div id="info" class="tundra" style="padding: 5px; margin: 5px; background-color: #eee;"></div>

    <div id="loc"> geolocation</div>

       <br />
       <div id="acc">geoaccuracy</div>

          </div>







<div id="footer" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">

          <div id="temp"> Put geolocation coordinates here</div>
    </div>





</body>
</html>
[/HTML]

GaneshSolai_Sambandam

thank you very much for the sample application. I will look into it and will get back to you
.

Thank you very much for the help.

ipeebles

Attached is a sample application that shows a modular structure. The small sample contains navigation tools, drawing, find, geocoding, and a template picker.

NOTE** When you open this application it will be broken. The application is broken because I replaced my map services and references with <machinename>. You will need to use your own map services and adjust the code accordingly. When you are able to add in your own references and map services, the application should work.

SampleApplication.zip

listbox3.JPG

GaneshSolai_Sambandam

HI Ipeebles,
thank you very much for your effort. Take your time and we will wait to see your nice application.

thanks once again.

ipeebles

I haven't forgotten about you guys. I will need to strip some stuff out of the application before attaching it. The application will include drawing, geocoding, editing, printing, and find tasks. Give me until tomorrow and I will attach a sample application.

ipeebles

I will put together a sample application and will attach it as a .zip so both of you can see how it was done.

SunilPalkar

Thanks its very useful for me too.

thanks for sharing this.

However I was facing problem regarding setting proxy stuff (few .js files contains various ArcGIS Server REST links) so did you applied any proxy settings at your side ? It will be appreciate if ESRI JSAPI team provide some guideline regarding modular building..

thanks..

GaneshSolai_Sambandam

Thanks very much ipeebles.

Would you be able to attach your HTML, CSS and the relevant Javascipt files, so that I get know how you did it.

At the moment, I tried organize my code, the way you explained, but I am getting loads of error and I am confused.

So, If you can post some samples files, would be great.

Thanks in advance.

regards
Ganesh

ipeebles

Hi GIS folks,
I started building web application using ARCGIS Javascript and slowly started adding new functionality into my web application.

As my coding is getting bigger and bigger into my application, it is getting to stage where it is very difficult to look at my code.

Can anyone please some provide methods / techniques through which we can organize our code in a modular way, so that allows easy debugging.

I do know that we organize our code in a separate Javascript file for each functionality / feature added on to my application, but, just wanted to know, is there a right way of doing / organizing code better.

And, also if you can point me to the right direction with some sample application, will be really appreciated.

Thanks in advance.

Regards
Ganesh

Ganesh,

The same thing happened to me with my applications. The index.html simply got too big and had too much code. During the past couple of weeks, I started to create a modular based application. What I have done in the index.html is create references that points to javascript files on the within the application on server. Below is a screenshot on what I have done. Is this what you are looking for in terms creating a modular based application?

Here is a sample of the references within the index.html page:

   <script type="text/javascript" src="js/editing/EditorCutFeatures.js"></script>
   <script type="text/javascript" src="js/editing/EditorDeleteFeatures.js"></script>
   <script type="text/javascript" src="js/editing/EditorModifyFeatures.js"></script>
   <script type="text/javascript" src="js/editing/EditorTemplatePicker.js"></script>
   <script type="text/javascript" src="js/find/FindNeighborhood.js"></script>
   <script type="text/javascript" src="js/find/FindEngineeringProject.js"></script>
   <script type="text/javascript" src="js/geocoding/FindAddress.js"></script>
   <script type="text/javascript" src="js/geocoding/FindStreet.js"></script>

The function init for these tools remains in the index.html.

I then created a js file which contains the location of all javascript files. Within the js folder are folders that contain specific functions such as editing, find, and geocoding (see screenshot).

Is this what you are looking for?

Also, I have a screenshot showing the code (editing and find sample) within one of the .js files.

JSFindTask.jpg

JSTemplatePicker.jpg

JSModuleStructure.jpg

Random12.xlsx

CR Tool.xlsx

image.png

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

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