topic Creating Custom Modules in ArcGIS JavaScript Maps SDK Questions

Creating Custom Modules

GaneshSolai_Sambandam — Fri, 08 Nov 2013 05:55:42 GMT

Hi Guys,
When you start building a WEB GIS Mapping project, initially you start off with creating html, css and javascript file and you start to add lot of GIS functions within the javascript file. As your project grows big, you end up in getting large piece of code blocks in one single file, how do you manage your code in AMD style to organize them.

Do you create custom modules to manage them, to break your large files into multiple files. If anyone can provide a sample application to show how you have organized your code chunks using AMD style, would be really appreciated.

Secondly, when you have built your Web GIS mapping application, you normally test your GIS functionality (for eg. say., buffering, geoprocessing workflows) by testing them in your local server against various browser's (chrome, FF, IE) to see whether the code you have written in Javascript file works fine. The way of testing your code by this method is called "Manual testing" in Unit testing framework. Am I right? If not, please correct me?

On top of this Manual testing, does anybody test your code using Automated testing? If so, which one you are using to test this? As a GIS developer, is it essential to know automated testing framework? If you don't know, how to do manual testing, is it a big problem?

Any help from an experienced GIS / software developer, would greatly help to understand me this? I am really confused with this?

Please ............. please ............. help me. Bring me out of this grey area?

Regards
Ganesh

Re: Creating Custom Modules

JeffPace — Sat, 11 Dec 2021 09:56:06 GMT

we absolutely break out our modules.

For example, in index.html, i call a "createAerialDownload" function

    function createAerialDownload(){
                                      var aerialDownload = new org.mymanatee.dijit.AerialDownloadWidget({
                                        map: map
                                    }, 'aerialDownloadDiv');
                                    this.aerialDownload = aerialDownload;
                                    aerialDownload.startup();
                                    on(aerialDownload, "onError", function(error) {
                                        console.log(error);
                                    });
                                }

and then in a seperate file i have my module

require([
    "dijit/Dialog", "dojo/_base/declare", "dojo/parser", "dijit/_WidgetBase", "dijit/_TemplatedMixin",  "dojo/_base/xhr", "dojo/_base/lang",
    "dojo/_base/connect", "dojo/dom", "dijit/registry", "dojo/dom-construct", "dojo/query", "dojo/on","dojo/has", "dojo/dom-style","dojo/io-query","dojo/_base/array","utilities/latlong"
],
        function(Dialog, declare, parser, _Widget, _Templated, xhr, lang,
        connect, dom, registry, domConstruct, query,on, has,domStyle,ioQuery, array, latlong) {
declare("org.mymanatee.dijit.AerialDownloadWidget",[_Widget, _Templated],
   {
    constructor: function(/*Object*/ params) {
  },
  _module: "org.mymanatee.dijit",
    templatePath: require.toUrl("org/mymanatee/dijit/templates/AerialDownloadWidget.html"),
               
    postMixInProperties: function(){
                       this.inherited(arguments);
                },


  postCreate:function()
  {
   this.inherited(arguments);
   parser.parse(this.domNode);
   // Init the loader animation
  
  },
                        
  startup: function(){
   this.inherited(arguments);              
   try {
                        if(!this.configData){
 
                          xhr.get( {
                                       url: "org/mymanatee/dijit/config/AerialDownloadWidget.json",
                                       handleAs: "json",
                                       sync:true,
                                       load: lang.hitch(this, function(responseObject, ioArgs) {
                                           this.configData = responseObject;
                                           this.loadOptions();
      
                                       }),
                                       error:function(error) {
                                            alert('error loading json');
                                       }
                                   });                      
                                }
   }
   catch (err) { console.error(err); }
                        connect.connect(dom.byId("exportAerial"), "click", this, "exportAerial");
  },
                loadOptions:function(){
                     var aerialYears = registry.byId('aerialDownloadYearSelector');
                        array.forEach(this.configData.years, function(y){
                            aerialYears.addOption({label:y.year,value:y.year});
                        });
                      
                           
                                
                },
                        
                exportAerial:function(){
            
           
                    var format = "jpg";
 
                    switch (registry.byId('aerialDownloadFormatSelector').value) {
                    case 'JPG':
                        format = "jpg";
                        break;
                    case 'PNG':
                        format = "png";
                        break;
                    case 'BMP':
                        format = "bmp";
                        break;
                    case 'GIF':
                        format = "gif";
                        break;
                    case 'MrSID':
                        format = "sid";
                        break;
                    default:
                        format = "jpg";
                        break;
                    }

                    var catalog = registry.byId('aerialDownloadYearSelector').value;
                    var filename = (registry.byId('aerialFilenameTextInput').value);
            if(!filename){
                filename = "ManateeCountyAerial"+catalog+"."+format;
            }else{
                filename.split('.')[0];
            }
                 //lowerleft
                 var LL = latlong.convertWebMercAuxtoLL(map.extent.xmin, map.extent.ymin);
                 //upperright
                 var UR = latlong.convertWebMercAuxtoLL(map.extent.xmax, map.extent.ymax);
                
                 //to state plane
                 var LLSP = latlong.convertLLtoSP_TM(LL[0],LL[1]);
                 var URSP = latlong.convertLLtoSP_TM(UR[0],UR[1]);
                 var bbox = LLSP[0]+","+URSP[1]+","+URSP[0]+","+LLSP[1];
      
                 var url = window.location.protocol+"//www.mymanatee.org/lizardtech/iserv/catalogs/"+catalog+"/"
                 +"iserv-catalog-index/cmd/getimage/method/crop/bg/000000/oif/"+format+"/geo/true/rgn/"+bbox+"/lev/0/wid/"+map.width+"/hei/"+map.height+"/outputfilename/test."+format;
                 window.open(url);//                
                },

  shutdown:function()
  {
   this.setMessage();
   this.inherited(arguments);

  }
   });
});

Re: Creating Custom Modules

JeffPace — Fri, 08 Nov 2013 12:29:39 GMT

as for testing, we are still manual at the moment, but would love to get to some automated testing.

We are looking at Selenium at the moment to write tests

Re: Creating Custom Modules

GaneshSolai_Sambandam — Fri, 08 Nov 2013 13:26:52 GMT

Hi Jeff
thank you very much for your valuable feedback. I Just wanted to speak to you over the phone to get some clarification, your help would greatly help me.
Can you I have your mobile no. please. If you feel uncomfortable, you don't need to post your mobile number here, but you can send me to my personal email: ganeshssac@yahoo.com

I will try and give you a call.

Regards
Ganesh

Re: Creating Custom Modules

JeffPace — Fri, 08 Nov 2013 19:15:52 GMT

Sorry,
Need to keep communication on the forum

Re: Creating Custom Modules

RobertScheitlin__GISP — Thu, 23 Jan 2014 15:26:18 GMT

Jeff,

I am a Flex Widget Developer and am starting to get my head wrapped around development in the JS API. Would you mind sharing a few more details with me? Can you post a screenshot of this widget in your app? Can you attach or paste the org/mymanatee/dijit/templates/AerialDownloadWidget.html?
Thanks for your consideration of my request in advance.

Re: Creating Custom Modules

derekswingley1 — Thu, 23 Jan 2014 15:29:47 GMT

Hi Robert,

Please start with these:
https://developers.arcgis.com/en/javascript/jstutorials/intro_javascript_classes.html
https://developers.arcgis.com/en/javascript/jstutorials/intro_custom_dijit.html

Re: Creating Custom Modules

JeffPace — Sat, 11 Dec 2021 09:56:09 GMT

Jeff,

I am a Flex Widget Developer and am starting to get my head wrapped around development in the JS API. Would you mind sharing a few more details with me? Can you post a screenshot of this widget in your app? Can you attach or paste the org/mymanatee/dijit/templates/AerialDownloadWidget.html?
Thanks for your consideration of my request in advance.

AerialDownloadWidget.html

<div class="widgetContent" data-dojo-attach-point="containerNode">
    <div class="widgetPanel" >
        <table>     
            <tr >
                <td><select id="aerialDownloadYearSelector" name="aerialDownloadYearSelector"  data-dojo-type="dijit/form/Select" >
<!--                        <option value="2013" selected></option>-->
                    </select></td><td>Select Year</td>
            </tr>  
             <tr >
                <td><select id="aerialDownloadFormatSelector" name="aerialDownloadFormatSelector"  data-dojo-type="dijit/form/Select" >
                        <option value="JPG" selected="selected">JPG</option>
                        <option value="PNG" >PNG</option>
                        <option value="BMP" >BMP</option>
                        <option value="GIF" >GIF</option>
                        <option value="MrSID" >MrSID</option>
 <!--                        <option value="ZIPPED MrSID">ZIPPED MrSID</option>                        -->
                    </select></td><td>Select Format</td>
            </tr>  
             <tr> 
                <td >Filename:</td>
                <td ><input type="text" id ="aerialFilenameTextInput" name="aerialFilenameTextInput" data-dojo-type="dijit/form/TextBox"></td>
            </tr>
            <tr><td></td><td><button data-dojo-type="dijit/form/Button" id="exportAerial" >Download Aerial</button></td></tr>
            <tr ><td rowspan='3'></td><td></td></tr>
            <tr><td>MrSID files can be viewed in a web browser using the free ExpressView Browser Plug-in from <a href="http://www.lizardtech.com/downloads/category/#plugins" target='_blank'> Lizardtech</a></td></tr>
        </table>
    </div>
</div>

Re: Creating Custom Modules

RobertScheitlin__GISP — Thu, 23 Jan 2014 15:39:16 GMT

Derek, Thanks for the links I skimmed past these a few days ago, and meant to go back and have a read, but forgot. Now I will spend time going through them.

Jeff, Thanks for the info and your support in this forum.