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

Creating Custom Modules

GaneshSolai_Sambandam

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

Vind meer berichten getagd met

Accepted answers

All comments

RobertScheitlin__GISP

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.

JeffPace1

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>

derekswingley1

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

RobertScheitlin__GISP

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.

JeffPace1

Sorry,
Need to keep communication on the forum

GaneshSolai_Sambandam

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

JeffPace1

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

JeffPace1

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

  }
   });
});

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.