diff --git a/web/gui/src/main/webapp/index2.html b/web/gui/src/main/webapp/index2.html
index 9688522..66050c6 100644
--- a/web/gui/src/main/webapp/index2.html
+++ b/web/gui/src/main/webapp/index2.html
@@ -85,9 +85,12 @@
     <!-- Framework module files included here -->
     <script src="mast2.js"></script>
 
-    <!-- Sample views; can be dispensed with eventually -->
+    <!-- View Module Templates; REMOVE THESE LINES, FOR PRODUCTION -->
+    <script src="module-svg-template.js"></script>
+    <script src="module-div-template.js"></script>
+
+    <!-- Sample views; REMOVE THESE LINES, FOR PRODUCTION -->
     <script src="sample2.js"></script>
-    <script src="sampleAlt2.js"></script>
     <script src="sampleRadio.js"></script>
     <script src="sampleKeys.js"></script>
     <script src="sampleHash.js"></script>
diff --git a/web/gui/src/main/webapp/module-div-template.js b/web/gui/src/main/webapp/module-div-template.js
index 09ea569..ec9a76f 100644
--- a/web/gui/src/main/webapp/module-div-template.js
+++ b/web/gui/src/main/webapp/module-div-template.js
@@ -27,18 +27,24 @@
         data = [ 'foo', 'bar', 'baz' ];
 
     // invoked only the first time the view is loaded
-    function preload(view, ctx) {
+    //  - used to initialize the view contents
+    function preload(view, ctx, flags) {
         // NOTE: view.$div is a D3 selection of the view's div
         list = view.$div.append('ul');
+        // ... further code to initialize the SVG view ...
+
     }
 
     // invoked just prior to loading the view
-    function reset(view) {
+    //  - used to clear the view of stale data
+    function reset(view, ctx, flags) {
 
     }
 
     // invoked when the view is loaded
-    function load(view, ctx) {
+    //  - used to load data into the view,
+    //     when the view is shown
+    function load(view, ctx, flags) {
         list.selectAll('li')
             .data(data)
             .enter()
@@ -46,20 +52,56 @@
             .text(function (d) { return d; })
     }
 
-    // invoked when the view is resized
-    function resize(view, ctx) {
+    // invoked when the view is unloaded
+    //  - used to clean up data that should be removed,
+    //     when the view is hidden
+    function unload(view, ctx, flags) {
 
     }
 
+    // invoked when the view is resized
+    //  - used to reconfigure elements to the new view size
+    function resize(view, ctx, flags) {
+        var w = view.width(),
+            h = view.height();
+
+    }
+
+    // invoked when the framework needs to alert the view of an error
+    //  - (EXPERIMENTAL -- not currently used)
+    function error(view, ctx, flags) {
+
+    }
+
+    // ================================================================
     // == register the view here, with links to lifecycle callbacks
 
-    onos.ui.addView('myViewId', {
+    // A typical setup that initializes the view once, then reacts to
+    // load and resize events would look like this:
+
+    onos.ui.addView('myDivViewId', {
         preload: preload,
-        reset: reset,
         load: load,
-        // unload: unload,
-        // error: error
         resize: resize
     });
 
+    // A minimum setup that builds the view every time it is loaded
+    // would look like this:
+    //
+    //  onos.ui.addView('myViewId', {
+    //      reset: true,    // clear view contents on reset
+    //      load: load
+    //  });
+
+    // The complete gamut of callbacks would look like this:
+    //
+    //  onos.ui.addView('myViewId', {
+    //      preload: preload,
+    //      reset: reset,
+    //      load: load,
+    //      unload: unload,
+    //      resize: resize,
+    //      error: error
+    //  });
+
 }(ONOS));
diff --git a/web/gui/src/main/webapp/module-svg-template.js b/web/gui/src/main/webapp/module-svg-template.js
index 66da760..ff7ace4 100644
--- a/web/gui/src/main/webapp/module-svg-template.js
+++ b/web/gui/src/main/webapp/module-svg-template.js
@@ -23,51 +23,115 @@
 (function (onos) {
     'use strict';
 
-    var svg;
-
-    // set the size of the SVG layer to match that of the view
-    function sizeSvg(view) {
-        svg.attr({
-            width: view.width(),
-            height: view.height()
-        });
-    }
+    var svg,
+        data = [ 60 ];
 
     // invoked only the first time the view is loaded
-    function preload(view, ctx) {
-        // NOTE: view.$div is a D3 selection of the view's div
+    //  - used to initialize the view contents
+    function preload(view, ctx, flags) {
         svg = view.$div.append('svg');
-        sizeSvg(view);
+        resize(view);
         // ... further code to initialize the SVG view ...
 
     }
 
     // invoked just prior to loading the view
-    function reset(view) {
+    //  - used to clear the view of stale data
+    function reset(view, ctx, flags) {
+        // e.g. clear svg of all objects...
+        // svg.html('');
 
     }
 
     // invoked when the view is loaded
-    function load(view, ctx) {
+    //  - used to load data into the view,
+    //     when the view is shown
+    function load(view, ctx, flags) {
+        var w = view.width(),
+            h = view.height();
+
+        // as an example...
+        svg.selectAll('circle')
+            .data(data)
+            .enter()
+            .append('circle')
+            .attr({
+                cx: w / 2,
+                cy: h / 2,
+                r: function (d) { return d; }
+            })
+            .style({
+                fill: 'goldenrod',
+                stroke: 'black',
+                'stroke-width': 3.5,
+            });
+    }
+
+    // invoked when the view is unloaded
+    //  - used to clean up data that should be removed,
+    //     when the view is hidden
+    function unload(view, ctx, flags) {
 
     }
 
     // invoked when the view is resized
-    function resize(view, ctx) {
-        sizeSvg(view);
+    //  - used to reconfigure elements to the new size of the view
+    function resize(view, ctx, flags) {
+        var w = view.width(),
+            h = view.height();
+
+        // resize svg layer to match new size of view
+        svg.attr({
+            width: w,
+            height: h
+        });
+
+        // as an example...
+        svg.selectAll('circle')
+            .attr({
+                cx: w / 2,
+                cy: h / 2
+            });
+
         // ... further code to handle resize of view ...
 
     }
 
+    // invoked when the framework needs to alert the view of an error
+    //  - (EXPERIMENTAL -- not currently used)
+    function error(view, ctx, flags) {
+
+    }
+
+    // ================================================================
     // == register the view here, with links to lifecycle callbacks
 
-    onos.ui.addView('myViewId', {
+    // A typical setup that initializes the view once, then reacts to
+    // load and resize events would look like this:
+
+    onos.ui.addView('mySvgViewId', {
         preload: preload,
-        reset: reset,
         load: load,
-        // unload: unload,
-        // error: error
         resize: resize
     });
 
+    // A minimum setup that builds the view every time it is loaded
+    // would look like this:
+    //
+    //  onos.ui.addView('myViewId', {
+    //      reset: true,    // clear view contents on reset
+    //      load: load
+    //  });
+
+    // The complete gamut of callbacks would look like this:
+    //
+    //  onos.ui.addView('myViewId', {
+    //      preload: preload,
+    //      reset: reset,
+    //      load: load,
+    //      unload: unload,
+    //      resize: resize,
+    //      error: error
+    //  });
+
 }(ONOS));
diff --git a/web/gui/src/main/webapp/onos2.js b/web/gui/src/main/webapp/onos2.js
index a0276df..a31b20f 100644
--- a/web/gui/src/main/webapp/onos2.js
+++ b/web/gui/src/main/webapp/onos2.js
@@ -566,6 +566,8 @@
                 }
             },
 
+            // == Life-cycle functions
+            // TODO: factor common code out of life-cycle
             preload: function (ctx, flags) {
                 var c = ctx || '',
                     fn = isF(this.cb.preload);
@@ -576,12 +578,13 @@
                 }
             },
 
-            reset: function () {
-                var fn = isF(this.cb.reset);
+            reset: function (ctx, flags) {
+                var c = ctx || '',
+                    fn = isF(this.cb.reset);
                 traceFn('View.reset', this.vid);
                 if (fn) {
                     trace('RESET cb for ' + this.vid);
-                    fn(this.token());
+                    fn(this.token(), c, flags);
                 } else if (this.cb.reset === true) {
                     // boolean true signifies "clear view"
                     trace('  [true] cleaing view...');
@@ -600,13 +603,14 @@
                 }
             },
 
-            unload: function () {
-                var fn = isF(this.cb.unload);
+            unload: function (ctx, flags) {
+                var c = ctx | '',
+                    fn = isF(this.cb.unload);
                 traceFn('View.unload', this.vid);
                 this.$div.classed('currentView', false);
                 if (fn) {
                     trace('UNLOAD cb for ' + this.vid);
-                    fn(this.token());
+                    fn(this.token(), c, flags);
                 }
             },
 
@@ -623,16 +627,17 @@
                 }
             },
 
-            error: function (ctx) {
+            error: function (ctx, flags) {
                 var c = ctx || '',
                     fn = isF(this.cb.error);
                 traceFn('View.error', this.vid + ', ' + c);
                 if (fn) {
                     trace('ERROR cb for ' + this.vid);
-                    fn(this.token(), c);
+                    fn(this.token(), c, flags);
                 }
             },
 
+            // == Token API functions
             width: function () {
                 return $(this.$div.node()).width();
             },
diff --git a/web/gui/src/main/webapp/sampleAlt2.js b/web/gui/src/main/webapp/sampleAlt2.js
deleted file mode 100644
index 60cbe9d..0000000
--- a/web/gui/src/main/webapp/sampleAlt2.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/*
- * Copyright 2014 Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
- Alternate sample module file to illustrate framework integration.
-
- @author Simon Hunt
- */
-
-(function (onos) {
-    'use strict';
-
-    var svg;
-
-
-    function sizeSvg(view) {
-        svg.attr({
-            width: view.width(),
-            height: view.height()
-        });
-    }
-
-    // gets invoked only the first time the view is loaded
-    function preload(view, ctx) {
-        svg = view.$div.append('svg');
-        sizeSvg(view);
-    }
-
-    function reset(view) {
-        // clear our svg of all objects
-        svg.html('');
-    }
-
-    function load(view, ctx) {
-        var fill = 'teal',
-            stroke = 'black';
-
-        svg.append('circle')
-            .attr({
-                cx: view.width() / 2,
-                cy: view.height() / 2,
-                r: 30
-            })
-            .style({
-                fill: fill,
-                stroke: stroke,
-                'stroke-width': 1.5,
-                opacity: 0.5
-            });
-    }
-
-    function resize(view, ctx) {
-        sizeSvg(view);
-        svg.selectAll('circle')
-            .attr({
-                cx: view.width() / 2,
-                cy: view.height() / 2
-            });
-    }
-
-    // == register views here, with links to lifecycle callbacks
-
-    onos.ui.addView('sampleAlt', {
-        preload: preload,
-        reset: reset,
-        load: load,
-        resize: resize
-    });
-
-
-}(ONOS));
diff --git a/web/gui/src/main/webapp/topo2.js b/web/gui/src/main/webapp/topo2.js
index 5bffcdd..55e463c 100644
--- a/web/gui/src/main/webapp/topo2.js
+++ b/web/gui/src/main/webapp/topo2.js
@@ -86,7 +86,7 @@
             linkDistance: {
                 direct: 100,
                 optical: 120,
-                hostLink: 20
+                hostLink: 5
             },
             linkStrength: {
                 direct: 1.0,
@@ -958,7 +958,7 @@
     // ==============================
     // View life-cycle callbacks
 
-    function preload(view, ctx) {
+    function preload(view, ctx, flags) {
         var w = view.width(),
             h = view.height(),
             idBg = view.uid('bg'),
@@ -1047,6 +1047,9 @@
     }
 
     function load(view, ctx, flags) {
+        // resize, in case the window was resized while we were not loaded
+        resize(view, ctx, flags);
+
         // cache the view token, so network topo functions can access it
         network.view = view;
         config.useLiveData = !flags.local;
@@ -1064,7 +1067,7 @@
         }
     }
 
-    function resize(view, ctx) {
+    function resize(view, ctx, flags) {
         setSize(svg, view);
         setSize(bgImg, view);