홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
Committed by Gerrit Code Review
41a8ebd0 2 parents 4d97dfcf f67722ac

Merge "GUI -- tweaked couple of topo force layout parameters. - made life-cycle… 

… callback parameters consistent; all now get - view (token), ctx, flags.  - updated module templates."
Inline Side-by-side
Showing 6 changed files with 158 additions and 125 deletions
...@@ -85,9 +85,12 @@ ...@@ -85,9 +85,12 @@
85 <!-- Framework module files included here --> 85 <!-- Framework module files included here -->
86 <script src="mast2.js"></script> 86 <script src="mast2.js"></script>
87 87
88 - <!-- Sample views; can be dispensed with eventually --> 88 + <!-- View Module Templates; REMOVE THESE LINES, FOR PRODUCTION -->
89 + <script src="module-svg-template.js"></script>
90 + <script src="module-div-template.js"></script>
91 +
92 + <!-- Sample views; REMOVE THESE LINES, FOR PRODUCTION -->
89 <script src="sample2.js"></script> 93 <script src="sample2.js"></script>
90 - <script src="sampleAlt2.js"></script>
91 <script src="sampleRadio.js"></script> 94 <script src="sampleRadio.js"></script>
92 <script src="sampleKeys.js"></script> 95 <script src="sampleKeys.js"></script>
93 <script src="sampleHash.js"></script> 96 <script src="sampleHash.js"></script>
......
...@@ -27,18 +27,24 @@ ...@@ -27,18 +27,24 @@
27 data = [ 'foo', 'bar', 'baz' ]; 27 data = [ 'foo', 'bar', 'baz' ];
28 28
29 // invoked only the first time the view is loaded 29 // invoked only the first time the view is loaded
30 - function preload(view, ctx) { 30 + // - used to initialize the view contents
31 + function preload(view, ctx, flags) {
31 // NOTE: view.$div is a D3 selection of the view's div 32 // NOTE: view.$div is a D3 selection of the view's div
32 list = view.$div.append('ul'); 33 list = view.$div.append('ul');
34 + // ... further code to initialize the SVG view ...
35 +
33 } 36 }
34 37
35 // invoked just prior to loading the view 38 // invoked just prior to loading the view
36 - function reset(view) { 39 + // - used to clear the view of stale data
40 + function reset(view, ctx, flags) {
37 41
38 } 42 }
39 43
40 // invoked when the view is loaded 44 // invoked when the view is loaded
41 - function load(view, ctx) { 45 + // - used to load data into the view,
46 + // when the view is shown
47 + function load(view, ctx, flags) {
42 list.selectAll('li') 48 list.selectAll('li')
43 .data(data) 49 .data(data)
44 .enter() 50 .enter()
...@@ -46,20 +52,56 @@ ...@@ -46,20 +52,56 @@
46 .text(function (d) { return d; }) 52 .text(function (d) { return d; })
47 } 53 }
48 54
55 + // invoked when the view is unloaded
56 + // - used to clean up data that should be removed,
57 + // when the view is hidden
58 + function unload(view, ctx, flags) {
59 +
60 + }
61 +
49 // invoked when the view is resized 62 // invoked when the view is resized
50 - function resize(view, ctx) { 63 + // - used to reconfigure elements to the new view size
64 + function resize(view, ctx, flags) {
65 + var w = view.width(),
66 + h = view.height();
67 +
68 + }
69 +
70 + // invoked when the framework needs to alert the view of an error
71 + // - (EXPERIMENTAL -- not currently used)
72 + function error(view, ctx, flags) {
51 73
52 } 74 }
53 75
76 + // ================================================================
54 // == register the view here, with links to lifecycle callbacks 77 // == register the view here, with links to lifecycle callbacks
55 78
56 - onos.ui.addView('myViewId', { 79 + // A typical setup that initializes the view once, then reacts to
80 + // load and resize events would look like this:
81 +
82 + onos.ui.addView('myDivViewId', {
57 preload: preload, 83 preload: preload,
58 - reset: reset,
59 load: load, 84 load: load,
60 - // unload: unload,
61 - // error: error
62 resize: resize 85 resize: resize
63 }); 86 });
64 87
88 + // A minimum setup that builds the view every time it is loaded
89 + // would look like this:
90 + //
91 + // onos.ui.addView('myViewId', {
92 + // reset: true, // clear view contents on reset
93 + // load: load
94 + // });
95 +
96 + // The complete gamut of callbacks would look like this:
97 + //
98 + // onos.ui.addView('myViewId', {
99 + // preload: preload,
100 + // reset: reset,
101 + // load: load,
102 + // unload: unload,
103 + // resize: resize,
104 + // error: error
105 + // });
106 +
65 }(ONOS)); 107 }(ONOS));
......
...@@ -23,51 +23,115 @@ ...@@ -23,51 +23,115 @@
23 (function (onos) { 23 (function (onos) {
24 'use strict'; 24 'use strict';
25 25
26 - var svg; 26 + var svg,
27 - 27 + data = [ 60 ];
28 - // set the size of the SVG layer to match that of the view
29 - function sizeSvg(view) {
30 - svg.attr({
31 - width: view.width(),
32 - height: view.height()
33 - });
34 - }
35 28
36 // invoked only the first time the view is loaded 29 // invoked only the first time the view is loaded
37 - function preload(view, ctx) { 30 + // - used to initialize the view contents
38 - // NOTE: view.$div is a D3 selection of the view's div 31 + function preload(view, ctx, flags) {
39 svg = view.$div.append('svg'); 32 svg = view.$div.append('svg');
40 - sizeSvg(view); 33 + resize(view);
41 // ... further code to initialize the SVG view ... 34 // ... further code to initialize the SVG view ...
42 35
43 } 36 }
44 37
45 // invoked just prior to loading the view 38 // invoked just prior to loading the view
46 - function reset(view) { 39 + // - used to clear the view of stale data
40 + function reset(view, ctx, flags) {
41 + // e.g. clear svg of all objects...
42 + // svg.html('');
47 43
48 } 44 }
49 45
50 // invoked when the view is loaded 46 // invoked when the view is loaded
51 - function load(view, ctx) { 47 + // - used to load data into the view,
48 + // when the view is shown
49 + function load(view, ctx, flags) {
50 + var w = view.width(),
51 + h = view.height();
52 +
53 + // as an example...
54 + svg.selectAll('circle')
55 + .data(data)
56 + .enter()
57 + .append('circle')
58 + .attr({
59 + cx: w / 2,
60 + cy: h / 2,
61 + r: function (d) { return d; }
62 + })
63 + .style({
64 + fill: 'goldenrod',
65 + stroke: 'black',
66 + 'stroke-width': 3.5,
67 + });
68 + }
69 +
70 + // invoked when the view is unloaded
71 + // - used to clean up data that should be removed,
72 + // when the view is hidden
73 + function unload(view, ctx, flags) {
52 74
53 } 75 }
54 76
55 // invoked when the view is resized 77 // invoked when the view is resized
56 - function resize(view, ctx) { 78 + // - used to reconfigure elements to the new size of the view
57 - sizeSvg(view); 79 + function resize(view, ctx, flags) {
80 + var w = view.width(),
81 + h = view.height();
82 +
83 + // resize svg layer to match new size of view
84 + svg.attr({
85 + width: w,
86 + height: h
87 + });
88 +
89 + // as an example...
90 + svg.selectAll('circle')
91 + .attr({
92 + cx: w / 2,
93 + cy: h / 2
94 + });
95 +
58 // ... further code to handle resize of view ... 96 // ... further code to handle resize of view ...
59 97
60 } 98 }
61 99
100 + // invoked when the framework needs to alert the view of an error
101 + // - (EXPERIMENTAL -- not currently used)
102 + function error(view, ctx, flags) {
103 +
104 + }
105 +
106 + // ================================================================
62 // == register the view here, with links to lifecycle callbacks 107 // == register the view here, with links to lifecycle callbacks
63 108
64 - onos.ui.addView('myViewId', { 109 + // A typical setup that initializes the view once, then reacts to
110 + // load and resize events would look like this:
111 +
112 + onos.ui.addView('mySvgViewId', {
65 preload: preload, 113 preload: preload,
66 - reset: reset,
67 load: load, 114 load: load,
68 - // unload: unload,
69 - // error: error
70 resize: resize 115 resize: resize
71 }); 116 });
72 117
118 + // A minimum setup that builds the view every time it is loaded
119 + // would look like this:
120 + //
121 + // onos.ui.addView('myViewId', {
122 + // reset: true, // clear view contents on reset
123 + // load: load
124 + // });
125 +
126 + // The complete gamut of callbacks would look like this:
127 + //
128 + // onos.ui.addView('myViewId', {
129 + // preload: preload,
130 + // reset: reset,
131 + // load: load,
132 + // unload: unload,
133 + // resize: resize,
134 + // error: error
135 + // });
136 +
73 }(ONOS)); 137 }(ONOS));
......
...@@ -566,6 +566,8 @@ ...@@ -566,6 +566,8 @@
566 } 566 }
567 }, 567 },
568 568
569 + // == Life-cycle functions
570 + // TODO: factor common code out of life-cycle
569 preload: function (ctx, flags) { 571 preload: function (ctx, flags) {
570 var c = ctx || '', 572 var c = ctx || '',
571 fn = isF(this.cb.preload); 573 fn = isF(this.cb.preload);
...@@ -576,12 +578,13 @@ ...@@ -576,12 +578,13 @@
576 } 578 }
577 }, 579 },
578 580
579 - reset: function () { 581 + reset: function (ctx, flags) {
580 - var fn = isF(this.cb.reset); 582 + var c = ctx || '',
583 + fn = isF(this.cb.reset);
581 traceFn('View.reset', this.vid); 584 traceFn('View.reset', this.vid);
582 if (fn) { 585 if (fn) {
583 trace('RESET cb for ' + this.vid); 586 trace('RESET cb for ' + this.vid);
584 - fn(this.token()); 587 + fn(this.token(), c, flags);
585 } else if (this.cb.reset === true) { 588 } else if (this.cb.reset === true) {
586 // boolean true signifies "clear view" 589 // boolean true signifies "clear view"
587 trace(' [true] cleaing view...'); 590 trace(' [true] cleaing view...');
...@@ -600,13 +603,14 @@ ...@@ -600,13 +603,14 @@
600 } 603 }
601 }, 604 },
602 605
603 - unload: function () { 606 + unload: function (ctx, flags) {
604 - var fn = isF(this.cb.unload); 607 + var c = ctx | '',
608 + fn = isF(this.cb.unload);
605 traceFn('View.unload', this.vid); 609 traceFn('View.unload', this.vid);
606 this.$div.classed('currentView', false); 610 this.$div.classed('currentView', false);
607 if (fn) { 611 if (fn) {
608 trace('UNLOAD cb for ' + this.vid); 612 trace('UNLOAD cb for ' + this.vid);
609 - fn(this.token()); 613 + fn(this.token(), c, flags);
610 } 614 }
611 }, 615 },
612 616
...@@ -623,16 +627,17 @@ ...@@ -623,16 +627,17 @@
623 } 627 }
624 }, 628 },
625 629
626 - error: function (ctx) { 630 + error: function (ctx, flags) {
627 var c = ctx || '', 631 var c = ctx || '',
628 fn = isF(this.cb.error); 632 fn = isF(this.cb.error);
629 traceFn('View.error', this.vid + ', ' + c); 633 traceFn('View.error', this.vid + ', ' + c);
630 if (fn) { 634 if (fn) {
631 trace('ERROR cb for ' + this.vid); 635 trace('ERROR cb for ' + this.vid);
632 - fn(this.token(), c); 636 + fn(this.token(), c, flags);
633 } 637 }
634 }, 638 },
635 639
640 + // == Token API functions
636 width: function () { 641 width: function () {
637 return $(this.$div.node()).width(); 642 return $(this.$div.node()).width();
638 }, 643 },
......
1 -/*
2 - * Copyright 2014 Open Networking Laboratory
3 - *
4 - * Licensed under the Apache License, Version 2.0 (the "License");
5 - * you may not use this file except in compliance with the License.
6 - * You may obtain a copy of the License at
7 - *
8 - * http://www.apache.org/licenses/LICENSE-2.0
9 - *
10 - * Unless required by applicable law or agreed to in writing, software
11 - * distributed under the License is distributed on an "AS IS" BASIS,
12 - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 - * See the License for the specific language governing permissions and
14 - * limitations under the License.
15 - */
16 -
17 -/*
18 - Alternate sample module file to illustrate framework integration.
19 -
20 - @author Simon Hunt
21 - */
22 -
23 -(function (onos) {
24 - 'use strict';
25 -
26 - var svg;
27 -
28 -
29 - function sizeSvg(view) {
30 - svg.attr({
31 - width: view.width(),
32 - height: view.height()
33 - });
34 - }
35 -
36 - // gets invoked only the first time the view is loaded
37 - function preload(view, ctx) {
38 - svg = view.$div.append('svg');
39 - sizeSvg(view);
40 - }
41 -
42 - function reset(view) {
43 - // clear our svg of all objects
44 - svg.html('');
45 - }
46 -
47 - function load(view, ctx) {
48 - var fill = 'teal',
49 - stroke = 'black';
50 -
51 - svg.append('circle')
52 - .attr({
53 - cx: view.width() / 2,
54 - cy: view.height() / 2,
55 - r: 30
56 - })
57 - .style({
58 - fill: fill,
59 - stroke: stroke,
60 - 'stroke-width': 1.5,
61 - opacity: 0.5
62 - });
63 - }
64 -
65 - function resize(view, ctx) {
66 - sizeSvg(view);
67 - svg.selectAll('circle')
68 - .attr({
69 - cx: view.width() / 2,
70 - cy: view.height() / 2
71 - });
72 - }
73 -
74 - // == register views here, with links to lifecycle callbacks
75 -
76 - onos.ui.addView('sampleAlt', {
77 - preload: preload,
78 - reset: reset,
79 - load: load,
80 - resize: resize
81 - });
82 -
83 -
84 -}(ONOS));
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
86 linkDistance: { 86 linkDistance: {
87 direct: 100, 87 direct: 100,
88 optical: 120, 88 optical: 120,
89 - hostLink: 20 89 + hostLink: 5
90 }, 90 },
91 linkStrength: { 91 linkStrength: {
92 direct: 1.0, 92 direct: 1.0,
...@@ -958,7 +958,7 @@ ...@@ -958,7 +958,7 @@
958 // ============================== 958 // ==============================
959 // View life-cycle callbacks 959 // View life-cycle callbacks
960 960
961 - function preload(view, ctx) { 961 + function preload(view, ctx, flags) {
962 var w = view.width(), 962 var w = view.width(),
963 h = view.height(), 963 h = view.height(),
964 idBg = view.uid('bg'), 964 idBg = view.uid('bg'),
...@@ -1047,6 +1047,9 @@ ...@@ -1047,6 +1047,9 @@
1047 } 1047 }
1048 1048
1049 function load(view, ctx, flags) { 1049 function load(view, ctx, flags) {
1050 + // resize, in case the window was resized while we were not loaded
1051 + resize(view, ctx, flags);
1052 +
1050 // cache the view token, so network topo functions can access it 1053 // cache the view token, so network topo functions can access it
1051 network.view = view; 1054 network.view = view;
1052 config.useLiveData = !flags.local; 1055 config.useLiveData = !flags.local;
...@@ -1064,7 +1067,7 @@ ...@@ -1064,7 +1067,7 @@
1064 } 1067 }
1065 } 1068 }
1066 1069
1067 - function resize(view, ctx) { 1070 + function resize(view, ctx, flags) {
1068 setSize(svg, view); 1071 setSize(svg, view);
1069 setSize(bgImg, view); 1072 setSize(bgImg, view);
1070 1073
......