Simon Hunt

Restructuring GUI code - implementing view life-cycles.

Using sample views for now.
Still WIP.
......@@ -68,7 +68,10 @@
<!-- Initialize the UI...-->
<script type="text/javascript">
var ONOS = $.onos({note: "config, if needed"});
var ONOS = $.onos({
comment: "configuration options",
trace: false
});
</script>
<!-- Framework module files included here -->
......@@ -76,7 +79,8 @@
<!-- Contributed (application) views injected here -->
<!-- TODO: replace with template marker and inject refs server-side -->
<script src="temp2.js"></script>
<script src="sample2.js"></script>
<script src="sampleAlt2.js"></script>
<!-- finally, build the UI-->
<script type="text/javascript">
......
......@@ -24,6 +24,19 @@ html, body {
height: 100%;
}
div.onosView {
display: none;
}
div.onosView.currentView {
display: block;
}
/*
* ==============================================================
* END OF NEW ONOS.JS file
* ==============================================================
*/
/*
* === DEBUGGING ======
......
This diff is collapsed. Click to expand it.
/*
* 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()
});
}
// NOTE: view is a view-token data structure:
// {
// vid: 'view-id',
// nid: 'nav-id',
// $div: ... // d3 selection of dom view div.
// }
// 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 = 'red',
stroke = 'black',
ctxText = ctx ? 'Context is "' + ctx + '"' : 'No Context';
svg.append('circle')
.attr({
cx: view.width() / 2,
cy: view.height() / 2,
r: 30
})
.style({
fill: fill,
stroke: stroke,
'stroke-width': 3.5
});
svg.append('text')
.text(ctxText)
.attr({
x: 20,
y: '1.5em'
})
.style({
fill: 'darkgreen',
'font-size': '20pt'
});
}
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('sample', {
preload: preload,
reset: reset,
load: load,
resize: resize
});
}(ONOS));
......@@ -15,7 +15,7 @@
*/
/*
Temporary module file to test the framework integration.
Sample module file to illustrate framework integration.
@author Simon Hunt
*/
......@@ -23,35 +23,42 @@
(function (onos) {
'use strict';
var api = onos.api;
var svg;
var vid,
svg;
// == define your functions here.....
function sizeSvg(view) {
svg.attr({
width: view.width(),
height: view.height()
});
}
// NOTE: view is a data structure:
// NOTE: view is a view-token data structure:
// {
// id: 'view-id',
// el: ... // d3 selection of dom view div.
// vid: 'view-id',
// nid: 'nav-id',
// $div: ... // d3 selection of dom view div.
// }
function load(view) {
vid = view.id;
svg = view.el.append('svg')
.attr({
width: 400,
height: 300
});
// 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('');
}
var fill = (vid === 'temp1') ? 'red' : 'blue',
stroke = (vid === 'temp2') ? 'yellow' : 'black';
function load(view, ctx) {
var fill = 'blue',
stroke = 'grey';
svg.append('circle')
.attr({
cx: 200,
cy: 150,
cx: view.width() / 2,
cy: view.height() / 2,
r: 30
})
.style({
......@@ -61,14 +68,22 @@
});
}
// == register views here, with links to lifecycle callbacks
api.addView('temp1', {
load: load
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
api.addView('temp2', {
load: load
onos.ui.addView('sampleAlt', {
preload: preload,
reset: reset,
load: load,
resize: resize
});
......
......@@ -23,9 +23,6 @@
(function (onos) {
'use strict';
// reference to the framework api
var api = onos.api;
// configuration data
var config = {
useLiveData: true,
......@@ -1213,7 +1210,7 @@
// ======================================================================
// register with the UI framework
api.addView('network', {
onos.ui.addView('topo', {
load: loadNetworkView
});
......