Creating Custom Modules

1510
8
11-07-2013 09:55 PM
GaneshSolai_Sambandam
Regular Contributor
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
0 Kudos
8 Replies
JeffPace
MVP Alum
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);

  }
   });
});
0 Kudos
JeffPace
MVP Alum
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
0 Kudos
GaneshSolai_Sambandam
Regular Contributor
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
0 Kudos
JeffPace
MVP Alum
Sorry,
Need to keep communication on the forum
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
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.
0 Kudos
JeffPace
MVP Alum
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>
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
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.
0 Kudos