Adding Editor Widget to a Tab

NathalieNeagle · ‎04-10-2012

I can take the editor example and get it working. I can also get it working in my existing application when I just throw it in a ContentPane (IT WORKS) - like this:

<div data-dojo-type="dijit.layout.ContentPane" id="testPane" data-dojo-props="region:'left'">
        <!--div id="panelHeader">
          Default Editor
        </div-->
        <div style="padding:10px;" id="editorDiv">
        </div>
      </div>

But when I try to add it to my custom ContentPane / TabContainer the boarder show up but my feature class symbols (template picker/icons) don't show up...Like This

<div dojotype="dijit.layout.ContentPane" id="rightPane" region="right" splitter="true">
        <div dojotype="dijit.layout.TabContainer">
          <div dojotype="dijit.layout.ContentPane" title="Legend" selected="true">
            Content for the first tab
          </div>
          <div dojotype="dijit.layout.ContentPane" title="Query">
            Content for the second tab
          </div>
          <div dojotype="dijit.layout.ContentPane" title="Editor" >
            <div style="padding:10px;" id="editorDiv">
          </div>
        </div>
      </div>

What I'm I doing wrong...I think it is the code in RED.

Thanks
Nathalie.

KellyHutchins · ‎04-13-2012

Nathalie,

You need to create the editor widget the first time the tab is displayed. You can do this by listening for the tab's onShow event. This event is fired when users click on the tab. When this happens you'll create the editor. Here's a modified version of the sample that demonstrates this. Note that once the tab is clicked once we disconnect the event so the editor doesn't get created more than once.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <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>     </title>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/esri/dijit/css/Popup.css">       <style type="text/css">       html,body {       height:100%;       width:100%;       margin:0;       }        body {       background-color:#FFF;       overflow:hidden;       font-family:"Trebuchet MS";       }        #header {       border:solid 4px #224a54;       color:#000;       font-size:18pt;       text-align:left;       font-weight:700;       height:70px;       margin:2px;       }        #subtitle {       font-size:small;       color:#FFF;       padding-left:20px;       }        #rightPane {       background-color:#FFF;       color:#3f3f3f;       border:solid 2px #224a54;       width:20%;       }        #leftPane {       background-color:#FFF;       color:#3f3f3f;       border:solid 2px #224a54;       width:20%;       margin:5px;       padding:2px;       }        #map {       border:solid 4px #224a54;       -moz-border-radius:4px;       -webkit-border-radius:4px;       border-radius:4px;       margin:5px;       }        #footer {       border:solid 2px #224a54;       background-color:#ecefe4;       color:#3f3f3f;       font-size:10pt;       text-align:center;       height:40px;       margin:2px;       }        .dijitTabInnerDiv {       background-color:#ecefe4;       }        #tabs {       padding:5px;       }     </style>     <script type="text/javascript">       var dojoConfig = {         parseOnLoad: true       };     </script>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8">     </script>     <script type="text/javascript">       dojo.require("dijit.dijit"); // optimize: load dijit layer       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("esri.map");       dojo.require("esri.arcgis.utils");       dojo.require("esri.IdentityManager");       dojo.require("dijit.layout.TabContainer");       dojo.require("esri.dijit.editing.Editor-all");              var map;       var editorSettings;        function init() {                 //snapping is enabled for this sample - change the tooltip to reflect this         esri.bundle.toolbars.draw.start = esri.bundle.toolbars.draw.start +  "<br/>Press <b>CTRL</b> to enable snapping";         esri.bundle.toolbars.draw.addPoint = esri.bundle.toolbars.draw.addPoint +  "<br/>Press <b>CTRL</b> to enable snapping";                     //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to           //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic          //for details on setting up a proxy page.         esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";          //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications         esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");          var extent = new esri.geometry.Extent({           "xmin": -8576501,           "ymin": 4705377,           "xmax": -8574612,           "ymax": 4706867,           "spatialReference": {             "wkid": 102100           }         });                         map = new esri.Map("map", {           extent: extent         });         dojo.connect(map, "onLoad", function() {           //resize the map when the browser resizes           dojo.connect(dijit.byId('map'), 'resize', map,map.resize);         });         dojo.connect(map, "onLayersAddResult", initEditing);         var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");         map.addLayer(basemap);           var operationsPointLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/0", {           mode: esri.layers.FeatureLayer.MODE_ONDEMAND,           outFields: ["*"]         });         var operationsLineLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/1", {           mode: esri.layers.FeatureLayer.MODE_ONDEMAND,           outFields: ["*"]         });         var operationsPolygonLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/2", {           mode: esri.layers.FeatureLayer.MODE_ONDEMAND,           outFields: ["*"]         });           map.addLayers([operationsPointLayer, operationsPolygonLayer, operationsLineLayer]);         map.infoWindow.resize(400, 300);       }        function initEditing(results) {                 var featureLayerInfos = dojo.map(results, function(result) {           return {             'featureLayer': result.layer           };         });          editorSettings = {           map: map,           layerInfos: featureLayerInfos         };                  //when the editor tab is clicked we'll initialize the editor         var showHandler = dojo.connect(dijit.byId('editTab'),'onShow',function(evt){             //disconnect the handler so the editor is only initialized once             dojo.disconnect(showHandler);             var params = {               settings: editorSettings             };                                       var editorWidget = new esri.dijit.editing.Editor(params, 'editorDiv');                           editorWidget.startup();                              });          }        dojo.addOnLoad(init);     </script>   </head>      <body class="claro">     <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"      style="width:100%; height:100%;">       <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">         <div id="title">         </div>       </div>         <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props='region:"left"' id='leftPane'>           <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Tab 1', selected:'true'">             Content for the first tab           </div>           <div id='editTab' data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Edit'">             <div id='editorDiv'></div>           </div>         </div>       <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">       </div>       <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">         <span id="dataSource">         </span>       </div>     </div>   </body>  </html>

View solution in original post

NathalieNeagle · ‎04-11-2012

Getting to the point where I'm guessing I don't know what I'm doing...I'm learning but this seems easy. Any help would be greatly appreciated....see attachments

Thanks

NathalieNeagle · ‎04-12-2012

I need to try and move on to my next task...can someone please respond...be kind and I will give you the credit/points you deserve

Here's basically what I'm trying to do:

Take this web layout example - http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/ags_mapcontain...

then add in the Editor example - http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/ags_mapcontain...

PLEASE SOMEONE show me how to add the editor widget (pick icon list) to Tab 2

Thanks
Desperate Nathalie

NathalieNeagle · ‎04-12-2012

I just figured out my code is fine...well kind of. If my editor tab is the first tab or the default then it works so I guess I need to figure out how to refresh/recall/reload the different tabs when a tab is changed because I don't want this to be my default tab. Any help would be greatly appreciated

 <div dojoType="dijit.layout.ContentPane" id="editorPane" title="Editor" id="editorPane" selected="true">
            <div id="editorDiv"></div>
          </div>

KellyHutchins · ‎04-13-2012

Nathalie,

You need to create the editor widget the first time the tab is displayed. You can do this by listening for the tab's onShow event. This event is fired when users click on the tab. When this happens you'll create the editor. Here's a modified version of the sample that demonstrates this. Note that once the tab is clicked once we disconnect the event so the editor doesn't get created more than once.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <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>     </title>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/esri/dijit/css/Popup.css">       <style type="text/css">       html,body {       height:100%;       width:100%;       margin:0;       }        body {       background-color:#FFF;       overflow:hidden;       font-family:"Trebuchet MS";       }        #header {       border:solid 4px #224a54;       color:#000;       font-size:18pt;       text-align:left;       font-weight:700;       height:70px;       margin:2px;       }        #subtitle {       font-size:small;       color:#FFF;       padding-left:20px;       }        #rightPane {       background-color:#FFF;       color:#3f3f3f;       border:solid 2px #224a54;       width:20%;       }        #leftPane {       background-color:#FFF;       color:#3f3f3f;       border:solid 2px #224a54;       width:20%;       margin:5px;       padding:2px;       }        #map {       border:solid 4px #224a54;       -moz-border-radius:4px;       -webkit-border-radius:4px;       border-radius:4px;       margin:5px;       }        #footer {       border:solid 2px #224a54;       background-color:#ecefe4;       color:#3f3f3f;       font-size:10pt;       text-align:center;       height:40px;       margin:2px;       }        .dijitTabInnerDiv {       background-color:#ecefe4;       }        #tabs {       padding:5px;       }     </style>     <script type="text/javascript">       var dojoConfig = {         parseOnLoad: true       };     </script>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8">     </script>     <script type="text/javascript">       dojo.require("dijit.dijit"); // optimize: load dijit layer       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("esri.map");       dojo.require("esri.arcgis.utils");       dojo.require("esri.IdentityManager");       dojo.require("dijit.layout.TabContainer");       dojo.require("esri.dijit.editing.Editor-all");              var map;       var editorSettings;        function init() {                 //snapping is enabled for this sample - change the tooltip to reflect this         esri.bundle.toolbars.draw.start = esri.bundle.toolbars.draw.start +  "<br/>Press <b>CTRL</b> to enable snapping";         esri.bundle.toolbars.draw.addPoint = esri.bundle.toolbars.draw.addPoint +  "<br/>Press <b>CTRL</b> to enable snapping";                     //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to           //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic          //for details on setting up a proxy page.         esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";          //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications         esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");          var extent = new esri.geometry.Extent({           "xmin": -8576501,           "ymin": 4705377,           "xmax": -8574612,           "ymax": 4706867,           "spatialReference": {             "wkid": 102100           }         });                         map = new esri.Map("map", {           extent: extent         });         dojo.connect(map, "onLoad", function() {           //resize the map when the browser resizes           dojo.connect(dijit.byId('map'), 'resize', map,map.resize);         });         dojo.connect(map, "onLayersAddResult", initEditing);         var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");         map.addLayer(basemap);           var operationsPointLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/0", {           mode: esri.layers.FeatureLayer.MODE_ONDEMAND,           outFields: ["*"]         });         var operationsLineLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/1", {           mode: esri.layers.FeatureLayer.MODE_ONDEMAND,           outFields: ["*"]         });         var operationsPolygonLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/2", {           mode: esri.layers.FeatureLayer.MODE_ONDEMAND,           outFields: ["*"]         });           map.addLayers([operationsPointLayer, operationsPolygonLayer, operationsLineLayer]);         map.infoWindow.resize(400, 300);       }        function initEditing(results) {                 var featureLayerInfos = dojo.map(results, function(result) {           return {             'featureLayer': result.layer           };         });          editorSettings = {           map: map,           layerInfos: featureLayerInfos         };                  //when the editor tab is clicked we'll initialize the editor         var showHandler = dojo.connect(dijit.byId('editTab'),'onShow',function(evt){             //disconnect the handler so the editor is only initialized once             dojo.disconnect(showHandler);             var params = {               settings: editorSettings             };                                       var editorWidget = new esri.dijit.editing.Editor(params, 'editorDiv');                           editorWidget.startup();                              });          }        dojo.addOnLoad(init);     </script>   </head>      <body class="claro">     <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"      style="width:100%; height:100%;">       <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">         <div id="title">         </div>       </div>         <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props='region:"left"' id='leftPane'>           <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Tab 1', selected:'true'">             Content for the first tab           </div>           <div id='editTab' data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Edit'">             <div id='editorDiv'></div>           </div>         </div>       <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">       </div>       <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">         <span id="dataSource">         </span>       </div>     </div>   </body>  </html>

NathalieNeagle · ‎04-16-2012

Thanks Kelly,

That was it...I thought I need to call it but wasn't sure on how...I'm still really new to JS and writing code in general. I was hoping to maybe ask you one more question.

I'm going to have a few other tabs (ex. Legend, Query, Editing, Other) and I would like to separate the code for each tab...so maybe have separate JS files for each one so I can re-use them and so I don't have one huge "layout.js" file. My question is there a easy way to do this...call another JS file within my layout.js file. Could you point me to something that describes this or maybe so me?

Thanks again.

Nathalie.