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/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));