calling dojo 1.7 and esri dojo library

NigelAlford · ‎07-03-2012

I'm trying to call dojo 1.7 and ESRI 3.0. I'm unsure of where this is breaking but I've made a modified version of the "Rename Dojo Namespace" tutorial.

If anyone sees the error the help would be great.

Thanks,

<!DOCTYPE HTML> <html lang="en">     <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />     <!--The viewport meta tag is used to improve the presentation and behavior of the samples        on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>     <title>Multiple Dojo Calls</title>     <!-- Load Dojo 1.7 from Dojo -->     <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"> </script>  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css" media="screen">      <!-- Load 3.0f from ESRI -->     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">     <script type="text/javascript">      djConfig = {         scopeMap: [           [ "dojo", "esriDojo" ],           [ "dijit", "esriDijit" ],           [ "dojox", "esriDojox" ]         ]       };     </script>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>      <script type="text/javascript">      //1.7 doesn't need a DJ config file setup so this section should kick off both pieces of dojo       djConfig = dojo.config;       esriDojo.require("esri.map");    esriDojo.require("esri.virtualearth.VETiledLayer");       require([    "dijit/layout/BorderContainer", "dijit/layout/ContentPane","dijit/layout/AccordionContainer",    "dojo/parser", "dojo/domReady!",    "dojox/layout/FloatingPane",    ]);        var veTileLayer;           function init()     {                 var map = new esri.Map("map");         //Creates the Virtual Earth layer to add to the map         veTileLayer = new esri.virtualearth.VETiledLayer({           bingMapsKey: 'AimF6LphvVcbtQZOyiopeyQT8n-QOTukhwoRZwnzKL1MM0_B1Dfc7ppeKmyPByKp',           mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_ROAD         });         map.addLayer(veTileLayer);     }       dojo.addOnLoad(initDojo);       esriDojo.addOnLoad(init);     </script>    </head>     <body class="claro">   <div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'">    <div class="centerPanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center', splitter: true"">     <div id="map">     <div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane"  title="Zoom-Bar" data-dojo-props="resizable:false, dockable:true"  style="position:absolute;top:5;left:1;width:100px;height:300px;visibility:visible;">     This is the content of the pane!     </div>     </div>    </div>    <div class="edgePanel" style="max-height: px, min-height: 50px;" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top', splitter: true">Header content (top)</div>    <div data-dojo-type="dijit.layout.AccordionContainer" style="width: 25%" data-dojo-props="region: 'left', splitter: true"">     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Legend'">      <ul>       <li> sample title </li>       <li> sample title </li>       <li> sample title </li>       <li> sample title </li>       <li> sample title </li>       <li> sample title </li>      </ul>     </div>     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Your Bookmarks', selected: true">     <ul>       <li> <b>Sample Bookmark</b> </li>       <li> <b>Sample Bookmark</b> </li>       <li> <b>Sample Bookmark</b> </li>       <li> <b>Sample Bookmark</b> </li>       <li> <b>Sample Bookmark</b> </li>       <li> <b>Sample Bookmark</b> </li>      </ul>     </div>    </div>   </div>  </body>   </html>

derekswingley1 · ‎07-05-2012

I made a lot of changes to get your code closer to working. You'll probably still want to tweak some things, but this should get you started:
???you can load the CSS for various dojo, dijit and dojox components from the Esri CDN, see code below
???dojo.require is used to load modules, regardless of the module's namespace, there's no such thing as dojox.require or djit.require
???Accordion, not Accordian
???use dojoConfig.parseOnLoad: true to have Dojo's parser automatically create your dijits
???use a content pane for the map instead of wrapping the map in a content pane
???I put your floating pane outside of all other dijit.layout widgets
???use data-dojo-type and data-dojo-props instead of dojotype and individual property names

 <!DOCTYPE HTML> <html>   <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></title>     <!-- Load stylesheets-->     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dojox/layout/resources/FloatingPane.css">  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dojox/layout/resources/ResizeHandle.css" type="text/css">          <style type="text/css">       html, body {         height: 100%; width: 100%; margin: 0; padding: 0;        }     </style>      <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>     <script type="text/javascript">    // dojo.require("esri.vitualearth.VETiledLayer");    dojo.require("dojo.parser");    dojo.require("dojo.domReady");    dojo.require("esri.map");    dojo.require("dijit.layout.BorderContainer");    dojo.require("dijit.layout.ContentPane");    dojo.require("dijit.layout.AccordionContainer");    dojo.require("dojox.layout.FloatingPane");        var map;    var veTileLayer;           function init()     {                var initialExtent = new esri.geometry.Extent({           "xmin": -9414173.061, "ymin": 3995118.342, "xmax": -9398289.375, "ymax": 4014748.679,     "spatialReference": {"wkid": 102113}});        map = new esri.Map("map", {                 extent: initialExtent             });        veTileLayer = new esri.virtualearth.VETiledLayer      ({           bingMapsKey: 'AimF6LphvVcbtQZOyiopeyQT8n-QOTukhwoRZwnzKL1MM0_B1Dfc7ppeKmyPByKp',           mapStyle: esri.virtualearth.VETiledLayer.ROAD});     map.addLayer(veTileLayer);         dojo.connect(map, 'onLoad', function (map) {dojo.connect(dijit.byId('map'), 'resize', map, map.resize);             });           }             dojo.addOnLoad(init);     </script>  </head>    <body class="claro">     <!-- floating pane -->     <div data-dojo-type="dojox.layout.FloatingPane"           id="dFloatingPane"  title="Zoom-Bar"           data-dojo-props="resizable: false, dockable: true"            style="position:absolute;top:5;left:1;width:100px;height:300px;visibility:visible;">       This is the content of the (floating) pane!     </div>    <div id="appLayout"           data-dojo-type="dijit.layout.BorderContainer"           data-dojo-props="design: 'headline'"          style="width: 100%; height: 100%; margin: 0;">              <!-- top content pane -->    <div class="edgePanel" style="height: 50px;"             data-dojo-type="dijit.layout.ContentPane"             data-dojo-props="region: 'top', splitter: true">Header content (top)       </div>           <!-- center/map content pane -->       <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center', splitter: true"></div>              <!-- right content pane -->       <div data-dojo-type="dijit.layout.ContentPane"             data-dojo-props="region: 'left', splitter: true"            style="width: 25%;">         <div dojoType="dijit.layout.AccordionContainer">           <div dojoType="dijit.layout.ContentPane" title="Legend">             <ul>               <li> sample title </li>               <li> sample title </li>               <li> sample title </li>               <li> sample title </li>               <li> sample title </li>               <li> sample title </li>             </ul>           </div>           <div dojoType="dijit.layout.ContentPane" title="Your Bookmarks" selected: "true">           <ul>               <li> <b>Sample Bookmark</b> </li>               <li> <b>Sample Bookmark</b> </li>               <li> <b>Sample Bookmark</b> </li>               <li> <b>Sample Bookmark</b> </li>               <li> <b>Sample Bookmark</b> </li>               <li> <b>Sample Bookmark</b> </li>             </ul>           </div>         </div>       </div>    </div>  </body> </html>

View solution in original post

JeffPace · ‎07-03-2012

dojo 1.7 is natively in 3.0, why are you calling it seperately?

NigelAlford · ‎07-03-2012

I'm having a hard time using some widgets from 1.7. I'm going to try the naming conversion method and see if that corrects the problem.
Thanks you just confirmed my thoughts

JeffPace · ‎07-03-2012

I had massively difficulties with my widgets going to 3.0

THe main issues I had to solve
1. Calling dojo ready on the dojo.delcare
2. Making sure datastores were set using the .set method (i.e. mydata.set("store", mystore)) and not mydata.store = mystore;
this one was a nightmare to find.

good luck!

NigelAlford · ‎07-03-2012

Jeff,
First, thanks for throwing out great and helpful suggestion I've been extremely lost and slightly confused on this 3.0/1.7 update session. The ESRI documentation calls a lot of different versions, which I completely understand that updating the documentation takes a while.
So I'm not calling in Data stores but I have a structural question. In 1.7 the dojo file/naming structure is changed from "." to "/" does ESRI conform to the new structure?
I've retried with 3.0 by calling the esri api directly and everything is still broken. I've added the domReady as you mentioned, so I'm hoping its something small.

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Renaming with Dojo</title>
    <!-- Load JSAPI 1.6 which includes Dojo 1.4.0 -->
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript">
     djConfig = {
        scopeMap: [
          [ "dojo", "esriDojo" ],
          [ "dijit", "esriDijit" ],
          [ "dojox", "esriDojox" ]
        ]
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>

    <script type="text/javascript">
      esriDojo.require(["esri.map","esri.vitualearth.VETiledLayer", "dojo.parser", "dojo.domReady"]);
   esriDjit.require(["dijit.layout.BorderContainer", "dijit.layout.ContentPane", "dijit.layout.AccordianContainer"]);
   esriDojox.require("dojox.layout.FloatingPane");

      function init() 
   {        
       var extent = new esri.geometry.Extent(-122.93,47.02,-122.86,47.07, new esri.SpatialReference({wkid:4326}));
       var map = new esri.Map("map", {extent:esri.geometry.geographicToWebMercator(extent)});
       veTileLayer = new esri.virtualearth.VETiledLayer
     ({
          bingMapsKey: 'AimF6LphvVcbtQZOyiopeyQT8n-QOTukhwoRZwnzKL1MM0_B1Dfc7ppeKmyPByKp',
          mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL
  });
    map.addLayer(veTileLayer);        
      }      
      esriDojo.addOnLoad(init);
    </script>

</head>

  <body class="claro">
  <div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'">
   <div class="centerPanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center', splitter: true"">
    <div id="map">
    <div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane"  title="Zoom-Bar" data-dojo-props="resizable:false, dockable:true"  style="position:absolute;top:5;left:1;width:100px;height:300px;visibility:visible;">
    This is the content of the pane!
    </div>
    </div>
   </div>
   <div class="edgePanel" style="max-height: px, min-height: 50px;" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top', splitter: true">Header content (top)</div>
   <div data-dojo-type="dijit.layout.AccordionContainer" style="width: 25%" data-dojo-props="region: 'left', splitter: true"">
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Legend'">
     <ul>
      <li> sample title </li>
      <li> sample title </li>
      <li> sample title </li>
      <li> sample title </li>
      <li> sample title </li>
      <li> sample title </li>
     </ul>
    </div>
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Your Bookmarks', selected: true">
    <ul>
      <li> <b>Sample Bookmark</b> </li>
      <li> <b>Sample Bookmark</b> </li>
      <li> <b>Sample Bookmark</b> </li>
      <li> <b>Sample Bookmark</b> </li>
      <li> <b>Sample Bookmark</b> </li>
      <li> <b>Sample Bookmark</b> </li>
     </ul>
    </div>
   </div>
  </div>
 </body>
</html>

derekswingley1 · ‎07-03-2012

scopeMap is not supported with 1.7.

As mentioned previously, you do not need to load dojo 1.7 yourself�?? it's bundled with the API.

Regarding "." vs. "/" in module identifiers, the dot style is still perfectly valid and you'll see that the majority of our samples still use it. That isn't going away until Dojo 2.0. If you're having issues with the new require style of doing things, I would fall back to the older dojo.require style and post specific quesitons along with code to reproduce the issues you're seeing.

NigelAlford · ‎07-05-2012

since scope map is not supported. do I need to modify the namespace?.
ex. "dojo", "esriDojo"

NigelAlford · ‎07-05-2012

I've been updating the code but everything is continuing to break. I've been commenting out sections that were seemingly deprecated or variations from Dojo calls and ESRI calls. hopefully this helps to show where I am and hopefully someone has resolved this already in their code.
A major question I have is with the "region" and "splitter" options used from Dojo. Are they read in ESRI? I'm wondering if these additions are breaking the layout also. I'm unsure of what could be specifically causing the break but I'm open to suggestions and I'm currently wiriting and I am experimenting with anything I can conceive as a potential solution.

<!DOCTYPE HTML>
<html>
  <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>Renaming with Dojo</title>
    <!-- Load stylesheets-->
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">
 <link rel="stylesheet" href="Styles/FloatingPane.css">
 <link rel="stylesheet" href="dojox/layout/resources/ResizeHandle.css" type="text/css">
    <!--<script type="text/javascript">
     djConfig = {
        scopeMap: [
          [ "dojo", "esriDojo" ],
          [ "dijit", "esriDijit" ],
          [ "dojox", "esriDojox" ]
        ]
      };
    </script>-->
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>

    <script type="text/javascript">
      //dojo.require(["esri.map","esri.vitualearth.VETiledLayer", "dojo.parser", "dojo.domReady"]);
   //esriDjit.require(["dijit.layout.BorderContainer", "dijit.layout.ContentPane", "dijit.layout.AccordianContainer"]);
   //dojox.require("dojox.layout.FloatingPane");
   dojo.require("esri.vitualearth.VETiledLayer");
   dojo.require("dojo.parser");
   dojo.require("dojo.domReady");
   dojo.require("esri.map");
   djit.require("dijit.layout.BorderContainer");
   djit.require("dijit.layout.ContentPane");
   djit.require("dijit.layout.AccordianContainer");
   dojox.require("dojox.layout.FloatingPane");
   
   var map;
   var veTileLayer;
   
      function init() 
   {        
       var initialExtent = new esri.geometry.Extent({
          "xmin": -9414173.061, "ymin": 3995118.342, "xmax": -9398289.375, "ymax": 4014748.679,
    "spatialReference": {"wkid": 102113}});
       map = new esri.Map("map", {
                extent: initialExtent
            });
       veTileLayer = new esri.virtualearth.VETiledLayer
     ({
          bingMapsKey: 'AimF6LphvVcbtQZOyiopeyQT8n-QOTukhwoRZwnzKL1MM0_B1Dfc7ppeKmyPByKp',
          mapStyle: esri.virtualearth.VETiledLayer.ROAD});
    map.addLayer(veTileLayer);    
    dojo.connect(map, 'onLoad', function (map) {dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
            });    
      }      
      dojo.addOnLoad(init);
    </script>

</head>

  <body class="claro">
  <div id="appLayout" class="demoLayout" dojoType="dijit.layout.BorderContainer" design= "headline">
   <div class="centerPanel" dojoType="dijit.layout.ContentPane" region= "center" splitter= "true">
    <div id="map">
    <div dojoType="dojox.layout.FloatingPane" id="dFloatingPane"  title="Zoom-Bar" resizable="false" dockable="true"  
    style="position:absolute;top:5;left:1;width:100px;height:300px;visibility:visible;">
    This is the content of the pane!
    </div>
    </div>
   </div>
   <div class="edgePanel" style="max-height: px, min-height: 50px;" dojoType="dijit.layout.ContentPane" region= "top" splitter= "true">Header content (top)</div>
   <div dojoType="dijit.layout.AccordionContainer" style="width: 25%" region= "left", splitter= "true">
    <div dojoType="dijit.layout.ContentPane" title="Legend">
     <ul>
      <li> sample title </li>
      <li> sample title </li>
      <li> sample title </li>
      <li> sample title </li>
      <li> sample title </li>
      <li> sample title </li>
     </ul>
    </div>
    <div dojoType="dijit.layout.ContentPane" title="Your Bookmarks" selected: "true">
    <ul>
      <li> <b>Sample Bookmark</b> </li>
      <li> <b>Sample Bookmark</b> </li>
      <li> <b>Sample Bookmark</b> </li>
      <li> <b>Sample Bookmark</b> </li>
      <li> <b>Sample Bookmark</b> </li>
      <li> <b>Sample Bookmark</b> </li>
     </ul>
    </div>
   </div>
  </div>
 </body>
</html>

derekswingley1 · ‎07-05-2012

I made a lot of changes to get your code closer to working. You'll probably still want to tweak some things, but this should get you started:
???you can load the CSS for various dojo, dijit and dojox components from the Esri CDN, see code below
???dojo.require is used to load modules, regardless of the module's namespace, there's no such thing as dojox.require or djit.require
???Accordion, not Accordian
???use dojoConfig.parseOnLoad: true to have Dojo's parser automatically create your dijits
???use a content pane for the map instead of wrapping the map in a content pane
???I put your floating pane outside of all other dijit.layout widgets
???use data-dojo-type and data-dojo-props instead of dojotype and individual property names

 <!DOCTYPE HTML> <html>   <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></title>     <!-- Load stylesheets-->     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dojox/layout/resources/FloatingPane.css">  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dojox/layout/resources/ResizeHandle.css" type="text/css">          <style type="text/css">       html, body {         height: 100%; width: 100%; margin: 0; padding: 0;        }     </style>      <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>     <script type="text/javascript">    // dojo.require("esri.vitualearth.VETiledLayer");    dojo.require("dojo.parser");    dojo.require("dojo.domReady");    dojo.require("esri.map");    dojo.require("dijit.layout.BorderContainer");    dojo.require("dijit.layout.ContentPane");    dojo.require("dijit.layout.AccordionContainer");    dojo.require("dojox.layout.FloatingPane");        var map;    var veTileLayer;           function init()     {                var initialExtent = new esri.geometry.Extent({           "xmin": -9414173.061, "ymin": 3995118.342, "xmax": -9398289.375, "ymax": 4014748.679,     "spatialReference": {"wkid": 102113}});        map = new esri.Map("map", {                 extent: initialExtent             });        veTileLayer = new esri.virtualearth.VETiledLayer      ({           bingMapsKey: 'AimF6LphvVcbtQZOyiopeyQT8n-QOTukhwoRZwnzKL1MM0_B1Dfc7ppeKmyPByKp',           mapStyle: esri.virtualearth.VETiledLayer.ROAD});     map.addLayer(veTileLayer);         dojo.connect(map, 'onLoad', function (map) {dojo.connect(dijit.byId('map'), 'resize', map, map.resize);             });           }             dojo.addOnLoad(init);     </script>  </head>    <body class="claro">     <!-- floating pane -->     <div data-dojo-type="dojox.layout.FloatingPane"           id="dFloatingPane"  title="Zoom-Bar"           data-dojo-props="resizable: false, dockable: true"            style="position:absolute;top:5;left:1;width:100px;height:300px;visibility:visible;">       This is the content of the (floating) pane!     </div>    <div id="appLayout"           data-dojo-type="dijit.layout.BorderContainer"           data-dojo-props="design: 'headline'"          style="width: 100%; height: 100%; margin: 0;">              <!-- top content pane -->    <div class="edgePanel" style="height: 50px;"             data-dojo-type="dijit.layout.ContentPane"             data-dojo-props="region: 'top', splitter: true">Header content (top)       </div>           <!-- center/map content pane -->       <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center', splitter: true"></div>              <!-- right content pane -->       <div data-dojo-type="dijit.layout.ContentPane"             data-dojo-props="region: 'left', splitter: true"            style="width: 25%;">         <div dojoType="dijit.layout.AccordionContainer">           <div dojoType="dijit.layout.ContentPane" title="Legend">             <ul>               <li> sample title </li>               <li> sample title </li>               <li> sample title </li>               <li> sample title </li>               <li> sample title </li>               <li> sample title </li>             </ul>           </div>           <div dojoType="dijit.layout.ContentPane" title="Your Bookmarks" selected: "true">           <ul>               <li> <b>Sample Bookmark</b> </li>               <li> <b>Sample Bookmark</b> </li>               <li> <b>Sample Bookmark</b> </li>               <li> <b>Sample Bookmark</b> </li>               <li> <b>Sample Bookmark</b> </li>               <li> <b>Sample Bookmark</b> </li>             </ul>           </div>         </div>       </div>    </div>  </body> </html>

NigelAlford · ‎07-05-2012

Resolved. Launched this inside Visual Studio and I modified a few of the div "data-dojo-type" calls.

Thanks