GUI -- tweaked couple of topo force layout parameters.
- made life-cycle callback parameters consistent; all now get - view (token), ctx, flags.
- updated module templates.
Change-Id: I142650508d3bf8fb42c98528a347500596a5f0b3
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);