implement an 'init' and 'startup' method in mixins and utilize deferr…

…eds for async ops
cmv · Jan 16, 2017 · bcd493e · bcd493e
1 parent 48936ae
commit bcd493e
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 38 deletions.
diff --git a/viewer/js/viewer/_ConfigMixin.js b/viewer/js/viewer/_ConfigMixin.js
@@ -9,6 +9,13 @@ define([
 ) {
 
     return declare(null, {
+        startup: function () {
+            this.inherited(arguments);
+            this.initConfigAsync().then(
+                lang.hitch(this, 'initConfigSuccess'),
+                lang.hitch(this, 'initConfigError')
+            );
+        },
 
         initConfigAsync: function () {
             var returnDeferred = new Deferred();
@@ -30,10 +37,6 @@ define([
 
         initConfigSuccess: function (config) {
             this.config = config;
-
-            // in _WidgetsMixin
-            this.createWidgets(['loading']);
-
             if (config.isDebug) {
                 window.app = this; //dev only
             }
@@ -44,17 +47,7 @@ define([
                 defaultMode: config.defaultMapClickMode
             };
 
-            // in _LayoutMixin
-            this.initLayout();
-
-            // in _WidgetsMixin
-            this.createWidgets(['layout']);
-
-            // in _MapMixin
-            this.initMapAsync().then(
-                lang.hitch(this, 'initMapComplete'),
-                lang.hitch(this, 'initMapError')
-            );
+            this.configDeferred.resolve(config);
         },
 
         initConfigError: function (err) {
@@ -64,4 +57,4 @@ define([
             });
         }
     });
-});
+});
diff --git a/viewer/js/viewer/_ControllerBase.js b/viewer/js/viewer/_ControllerBase.js
@@ -1,21 +1,35 @@
 /*eslint no-console: 0*/
 define([
     'dojo/_base/declare',
-    'dojo/_base/lang'
+    'dojo/_base/lang',
+    'dojo/Deferred'
 ], function (
     declare,
-    lang
+    lang,
+    Deferred
 ) {
     return declare(null, {
+        init: function () {
+
+            // create a set of deferreds that can be resolved by mixins
+            // other mixins can also create deferreds in their relevent constructors
+            this.configDeferred = new Deferred();
 
-        startup: function () {
             this.inherited(arguments);
+        },
 
-            // in _ConfigMixin
-            this.initConfigAsync().then(
-                lang.hitch(this, 'initConfigSuccess'),
-                lang.hitch(this, 'initConfigError')
-            );
+        startup: function () {
+            this.init();
+            this.mapDeferred.then(function () {
+                console.log(' map deferred');
+            });
+            this.configDeferred.then(function () {
+                console.log(' config deferred');
+            });
+            this.layoutDeferred.then(function () {
+                console.log(' layout deferred');
+            });
+            this.inherited(arguments);
         },
 
         //centralized error handler
@@ -54,4 +68,4 @@ define([
             return dest;
         }
     });
-});
+});
diff --git a/viewer/js/viewer/_LayoutMixin.js b/viewer/js/viewer/_LayoutMixin.js
@@ -11,6 +11,8 @@ define([
     'dojo/dom-class',
     'dojo/dom-geometry',
     'dojo/sniff',
+    'dojo/Deferred',
+    'dojo/promise/all',
 
     'put-selector',
 
@@ -33,6 +35,8 @@ define([
     domClass,
     domGeom,
     has,
+    Deferred,
+    promiseAll,
 
     put,
 
@@ -61,6 +65,14 @@ define([
             }
         },
         collapseButtons: {},
+        init: function () {
+            this.inherited(arguments);
+            this.layoutDeferred = new Deferred();
+        },
+        startup: function () {
+            this.inherited(arguments);
+            promiseAll([this.configDeferred]).then(lang.hitch(this, 'initLayout'));
+        },
 
         initLayout: function () {
             this.config.layout = this.config.layout || {};
@@ -69,6 +81,9 @@ define([
             this.addTitles();
             this.detectTouchDevices();
             this.initPanes();
+
+            // resolve the layout deferred
+            this.layoutDeferred.resolve();
         },
 
         // add topics for subscribing and publishing

diff --git a/viewer/js/viewer/_MapMixin.js b/viewer/js/viewer/_MapMixin.js
@@ -5,6 +5,7 @@ define([
     'dojo/dom',
     'dojo/_base/array',
     'dojo/Deferred',
+    'dojo/promise/all',
 
     'esri/map',
 
@@ -17,12 +18,23 @@ define([
     dom,
     array,
     Deferred,
+    promiseAll,
 
     Map
 ) {
 
     return declare(null, {
 
+        init: function () {
+            this.inherited(arguments);
+            this.mapDeferred = new Deferred();
+        },
+
+        startup: function () {
+            this.inherited(arguments);
+            promiseAll([this.configDeferred, this.layoutDeferred]).then(lang.hitch(this, 'initMapAsync'));
+        },
+
         initMapAsync: function () {
             var returnDeferred = new Deferred();
             var returnWarnings = [];
@@ -39,7 +51,7 @@ define([
 
             if (this.config.webMapId) {
                 if (this._initWebMap) {
-                    mapDeferred = this._initWebMap(this.config.webMapId, container, this.config.webMapOptions);
+                    // mapDeferred = this._initWebMap(this.config.webMapId, container, this.config.webMapOptions);
                 } else {
                     returnWarnings.push('The "_WebMapMixin" Controller Mixin is required to use a webmap');
                     mapDeferred.resolve(returnWarnings);
@@ -195,7 +207,7 @@ define([
 
             if (this.map) {
                 // in _WidgetsMixin
-                this.createWidgets(['map', 'layer']);
+                // this.createWidgets(['map', 'layer']);
 
                 this.map.on('resize', function (evt) {
                     var pnt = evt.target.extent.getCenter();
@@ -205,10 +217,11 @@ define([
                 });
 
                 // in _LayoutsMixin
-                this.createPanes();
+                // this.createPanes();
 
                 // in _WidgetsMixin
-                this.createWidgets();
+                // this.createWidgets();
+                this.mapDeferred.resolve(this.map);
             }
 
         },
@@ -234,4 +247,4 @@ define([
             }
         }
     });
-});
+});
diff --git a/viewer/js/viewer/_WebMapMixin.js b/viewer/js/viewer/_WebMapMixin.js
@@ -2,6 +2,7 @@ define([
     'dojo/_base/declare',
     'dojo/_base/lang',
     'dojo/_base/array',
+    'dojo/promise/all',
 
     'esri/arcgis/utils',
     'esri/units',
@@ -12,21 +13,27 @@ define([
     declare,
     lang,
     array,
+    promiseAll,
 
     arcgisUtils,
     units,
 
     i18n
 ) {
     return declare(null, {
+        startup: function () {
+            this.inherited(arguments);
+            promiseAll([this.configDeferred, this.mapDeferred]).then(lang.hitch(this, '_initWebMap'));
+        },
 
-        _initWebMap: function (webMapId, container, webMapOptions) {
-            webMapOptions = webMapOptions || {};
+        _initWebMap: function () {
+            var webMapOptions = this.config.webMapOptions || {};
             if (!webMapOptions.mapOptions && this.config.mapOptions) {
                 webMapOptions.mapOptions = this.config.mapOptions;
             }
+            var container = dom.byId(this.config.layout.map) || 'mapCenter';
 
-            var mapDeferred = arcgisUtils.createMap(webMapId, container, webMapOptions);
+            var mapDeferred = arcgisUtils.createMap(this.config.webMapId, container, webMapOptions);
             mapDeferred.then(lang.hitch(this, function (response) {
                 this.webMap = {
                     clickEventHandle: response.clickEventHandle,
@@ -227,4 +234,4 @@ define([
             }
         }
     });
-});
+});
diff --git a/viewer/js/viewer/_WidgetsMixin.js b/viewer/js/viewer/_WidgetsMixin.js
@@ -34,6 +34,21 @@ define([
 
         widgets: {},
         widgetTypes: ['titlePane', 'contentPane', 'floating', 'domNode', 'invisible', 'map', 'layer', 'layout', 'loading'],
+        init: function () {
+            this.inherited(arguments);
+            this.configDeferred.then(lang.hitch(this, 'createWidgets', ['loading']));
+        },
+        startup: function () {
+            this.inherited(arguments);
+            this.configDeferred.then(lang.hitch(this, function () {
+                if (this.mapDeferred) {
+                    this.mapDeferred.then(lang.hitch(this, 'createWidgets', ['map', 'layer']));
+                }
+                if (this.layoutDeferred) {
+                    this.layoutDeferred.then(lang.hitch(this, 'createWidgets', ['titlePane', 'contentPane', 'floating', 'domNode', 'invisible', 'layout']));
+                }
+            }));
+        },
 
         createWidgets: function (widgetTypes) {
             var widgets = [],
@@ -45,7 +60,7 @@ define([
                     var widget = lang.clone(this.config.widgets[key]);
                     widget.widgetKey = widget.widgetKey || widget.id || key;
                     if (widget.include && (!this.widgets[widget.widgetKey]) && (array.indexOf(widgetTypes, widget.type) >= 0)) {
-                        widget.position = (typeof (widget.position) !== 'undefined') ? widget.position : 10000;
+                        widget.position = (typeof(widget.position) !== 'undefined') ? widget.position : 10000;
                         if ((widget.type === 'titlePane' || widget.type === 'contentPane') && !widget.placeAt) {
                             widget.placeAt = 'left';
                         }
@@ -122,7 +137,7 @@ define([
             }
 
             // 2 ways to use require to accommodate widgets that may have an optional separate configuration file
-            if (typeof (widgetConfig.options) === 'string') {
+            if (typeof(widgetConfig.options) === 'string') {
                 require([widgetConfig.options, widgetConfig.path], lang.hitch(this, 'createWidget', widgetConfig));
             } else {
                 require([widgetConfig.path], lang.hitch(this, 'createWidget', widgetConfig, widgetConfig.options));
@@ -220,7 +235,7 @@ define([
                 options.id = parentId;
             }
             var placeAt = widgetConfig.placeAt;
-            if (typeof (placeAt) === 'string') {
+            if (typeof(placeAt) === 'string') {
                 placeAt = this.panes[placeAt];
             }
             if (!placeAt) {
@@ -261,7 +276,7 @@ define([
             var placeAt = widgetConfig.placeAt;
             if (!placeAt) {
                 placeAt = this.panes.left;
-            } else if (typeof (placeAt) === 'string') {
+            } else if (typeof(placeAt) === 'string') {
                 placeAt = this.panes[placeAt];
             }
             if (placeAt) {