홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
f67722ac 1 parent 7cd48f36

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
Inline Side-by-side
Showing 6 changed files with 158 additions and 125 deletions
......@@ -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>
......
......@@ -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 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) {
// - 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));
......
......@@ -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));
......
......@@ -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();
},
......
/*
* 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));
......@@ -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);
......