restructure

README.md

@@ -6,6 +6,29 @@ The main example here includes the [2D Measurement widget](https://developers.ar
 
 ![Screenshot](https://github.com/gavinr/js-api-widget-wrapper-experience-builder/raw/master/screencast.gif)
 
-### Icon Widget
+([builder interface](https://github.com/gavinr/js-api-widget-wrapper-experience-builder/raw/master/builder-screencast.mp4))
+
+## Quick Start - Download
+
+1. [Download](https://developers.arcgis.com/downloads/apis-and-sdks?product=arcgis-experience-builder) and unzip [Experience Builder Developer Edition](https://developers.arcgis.com/experience-builder/).
+2. Download the latest [release](https://github.com/gavinr/js-api-widget-wrapper-experience-builder/releases) from this repository.
+3. Unzip the downloaded files, and copy the `js-api-widget-wrapper` folder into the `client\your-extensions\widgets\js-api-widget-wrapper` folder of the extracted Experience Builder files.
+
+## Quick Start - Git
+
+1. [Download](https://developers.arcgis.com/downloads/apis-and-sdks?product=arcgis-experience-builder) and unzip [Experience Builder Developer Edition](https://developers.arcgis.com/experience-builder/).
+2. Open a new terminal window and browse to the `client` folder.
+3. `git clone https://github.com/gavinr/js-api-widget-wrapper-experience-builder`
+4. `npm ci`
+5. `npm start`
+6. Start Experience Builder server per the instructions (in a separate terminal, `cd server`, `npm ci`, `npm start`)
+
+## Development
+
+1. Open the `client` folder as a project in VS Code (or similar code editor).
+1. Make sure *both* scripts are running (in the `server` folder and `client`) folder).
+1. Every time you make a change to your widget, it will be re-built with webpack automatically.
+
+## Icon Widget
 
 If you want to include a widget that is primarily placed as an icon over the map (using `view.ui.add()`), like the [Compass widget](https://developers.arcgis.com/javascript/latest/sample-code/widgets-compass-2d/index.html), an example is shown in the [compass branch here](https://github.com/gavinr/js-api-widget-wrapper-experience-builder/tree/compass) ([download zip](https://github.com/gavinr/js-api-widget-wrapper-experience-builder/archive/compass.zip)). This will be a less-common use case for custom widgets, because the out-of-the-box Experience Builder Map Widget allows you to easily enable/disable these types of widgets in the widget settings.

manifest.json

@@ -1,20 +1,6 @@
 {
-  "name": "js-api-widget-wrapper",
-  "label": "JS API Wrapper",
-  "type": "widget",
-  "version": "1.0.0",
-  "dependency": "jimu-arcgis",
-  "exbVersion": "1.0.0-beta.2",
-  "author": "Gavin Rehkemper, Esri",
-  "description": "Example of an Experience Builder widget that can wrap any ArcGIS API for JavaScript widget.",
-  "copyright": "",
-  "license": "http://www.apache.org/licenses/LICENSE-2.0",
-  "properties": {},
-  "supportedLocales": [
-    "en"
-  ],
-  "defaultSize": {
-    "width": 800,
-    "height": 500
-  }
+  "name": "js-api-widget-wrapper-experience-builder",
+  "type": "exb-web-extension-repo",
+  "description": "This is a extension repository that contains the js-api-widget-wrapper widget.",
+  "license": "http://www.apache.org/licenses/LICENSE-2.0"
 }

widgets/js-api-widget-wrapper/config.json

@@ -0,0 +1 @@
+{}

widgets/js-api-widget-wrapper/manifest.json

@@ -0,0 +1,19 @@
+{
+  "name": "js-api-widget-wrapper",
+  "label": "JS API Wrapper",
+  "type": "widget",
+  "version": "1.0.0",
+  "dependency": "jimu-arcgis",
+  "exbVersion": "1.0.0",
+  "author": "Gavin Rehkemper, Esri",
+  "description": "Example of an Experience Builder widget that can wrap any ArcGIS API for JavaScript widget.",
+  "license": "http://www.apache.org/licenses/LICENSE-2.0",
+  "properties": {},
+  "supportedLocales": [
+    "en"
+  ],
+  "defaultSize": {
+    "width": 800,
+    "height": 500
+  }
+}

src/runtime/widget.tsx → widgets/js-api-widget-wrapper/src/runtime/widget.tsx

@@ -36,19 +36,23 @@ export default class Widget extends BaseWidget<AllWidgetProps<IMConfig>, any> {
         jimuMapView: jmv
       });
 
-      // since the widget replaces the container, we must create a new DOM node
-      // so when we destory we will not remove the "ref" DOM node
-      const container = document.createElement("div");
-      this.myRef.current.appendChild(container);
-
-      const distanceMeasurement2D = new DistanceMeasurement2D({
-        view: jmv.view,
-        container: container
-      });
-      // Save reference to the "Current widget" in State so we can destroy later if necessary.
-      this.setState({
-        currentWidget: distanceMeasurement2D
-      });
+      if(this.myRef.current) {
+        // since the widget replaces the container, we must create a new DOM node
+        // so when we destroy we will not remove the "ref" DOM node
+        const container = document.createElement("div");
+        this.myRef.current.appendChild(container);
+
+        const distanceMeasurement2D = new DistanceMeasurement2D({
+          view: jmv.view,
+          container: container
+        });
+        // Save reference to the "Current widget" in State so we can destroy later if necessary.
+        this.setState({
+          currentWidget: distanceMeasurement2D
+        });
+      } else {
+        console.error('could not find this.myRef.current');
+      }
     }
   };
 
@@ -85,8 +89,8 @@ export default class Widget extends BaseWidget<AllWidgetProps<IMConfig>, any> {
         className="widget-js-api-widget-wrapper jimu-widget"
         style={{ overflow: "auto" }}
       >
-        {jmc}
         <div className="here" ref={this.myRef}></div>
+        {jmc}
       </div>
     );
   }