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:https://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:https://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:https://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>
  );
  }