Restructuring GUI code - implementing view life-cycles.
Using sample views for now. Still WIP.
Showing
6 changed files
with
163 additions
and
32 deletions
... | @@ -68,7 +68,10 @@ | ... | @@ -68,7 +68,10 @@ |
68 | 68 | ||
69 | <!-- Initialize the UI...--> | 69 | <!-- Initialize the UI...--> |
70 | <script type="text/javascript"> | 70 | <script type="text/javascript"> |
71 | - var ONOS = $.onos({note: "config, if needed"}); | 71 | + var ONOS = $.onos({ |
72 | + comment: "configuration options", | ||
73 | + trace: false | ||
74 | + }); | ||
72 | </script> | 75 | </script> |
73 | 76 | ||
74 | <!-- Framework module files included here --> | 77 | <!-- Framework module files included here --> |
... | @@ -76,7 +79,8 @@ | ... | @@ -76,7 +79,8 @@ |
76 | 79 | ||
77 | <!-- Contributed (application) views injected here --> | 80 | <!-- Contributed (application) views injected here --> |
78 | <!-- TODO: replace with template marker and inject refs server-side --> | 81 | <!-- TODO: replace with template marker and inject refs server-side --> |
79 | - <script src="temp2.js"></script> | 82 | + <script src="sample2.js"></script> |
83 | + <script src="sampleAlt2.js"></script> | ||
80 | 84 | ||
81 | <!-- finally, build the UI--> | 85 | <!-- finally, build the UI--> |
82 | <script type="text/javascript"> | 86 | <script type="text/javascript"> | ... | ... |
... | @@ -24,6 +24,19 @@ html, body { | ... | @@ -24,6 +24,19 @@ html, body { |
24 | height: 100%; | 24 | height: 100%; |
25 | } | 25 | } |
26 | 26 | ||
27 | +div.onosView { | ||
28 | + display: none; | ||
29 | +} | ||
30 | + | ||
31 | +div.onosView.currentView { | ||
32 | + display: block; | ||
33 | +} | ||
34 | + | ||
35 | +/* | ||
36 | + * ============================================================== | ||
37 | + * END OF NEW ONOS.JS file | ||
38 | + * ============================================================== | ||
39 | + */ | ||
27 | 40 | ||
28 | /* | 41 | /* |
29 | * === DEBUGGING ====== | 42 | * === DEBUGGING ====== | ... | ... |
This diff is collapsed. Click to expand it.
web/gui/src/main/webapp/sample2.js
0 → 100644
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 | + // NOTE: view is a view-token data structure: | ||
37 | + // { | ||
38 | + // vid: 'view-id', | ||
39 | + // nid: 'nav-id', | ||
40 | + // $div: ... // d3 selection of dom view div. | ||
41 | + // } | ||
42 | + | ||
43 | + // gets invoked only the first time the view is loaded | ||
44 | + function preload(view, ctx) { | ||
45 | + svg = view.$div.append('svg'); | ||
46 | + sizeSvg(view); | ||
47 | + } | ||
48 | + | ||
49 | + function reset(view) { | ||
50 | + // clear our svg of all objects | ||
51 | + svg.html(''); | ||
52 | + } | ||
53 | + | ||
54 | + function load(view, ctx) { | ||
55 | + var fill = 'red', | ||
56 | + stroke = 'black', | ||
57 | + ctxText = ctx ? 'Context is "' + ctx + '"' : 'No Context'; | ||
58 | + | ||
59 | + svg.append('circle') | ||
60 | + .attr({ | ||
61 | + cx: view.width() / 2, | ||
62 | + cy: view.height() / 2, | ||
63 | + r: 30 | ||
64 | + }) | ||
65 | + .style({ | ||
66 | + fill: fill, | ||
67 | + stroke: stroke, | ||
68 | + 'stroke-width': 3.5 | ||
69 | + }); | ||
70 | + | ||
71 | + svg.append('text') | ||
72 | + .text(ctxText) | ||
73 | + .attr({ | ||
74 | + x: 20, | ||
75 | + y: '1.5em' | ||
76 | + }) | ||
77 | + .style({ | ||
78 | + fill: 'darkgreen', | ||
79 | + 'font-size': '20pt' | ||
80 | + }); | ||
81 | + } | ||
82 | + | ||
83 | + function resize(view, ctx) { | ||
84 | + sizeSvg(view); | ||
85 | + svg.selectAll('circle') | ||
86 | + .attr({ | ||
87 | + cx: view.width() / 2, | ||
88 | + cy: view.height() / 2 | ||
89 | + }); | ||
90 | + } | ||
91 | + | ||
92 | + // == register views here, with links to lifecycle callbacks | ||
93 | + | ||
94 | + onos.ui.addView('sample', { | ||
95 | + preload: preload, | ||
96 | + reset: reset, | ||
97 | + load: load, | ||
98 | + resize: resize | ||
99 | + }); | ||
100 | + | ||
101 | + | ||
102 | +}(ONOS)); |
... | @@ -15,7 +15,7 @@ | ... | @@ -15,7 +15,7 @@ |
15 | */ | 15 | */ |
16 | 16 | ||
17 | /* | 17 | /* |
18 | - Temporary module file to test the framework integration. | 18 | + Sample module file to illustrate framework integration. |
19 | 19 | ||
20 | @author Simon Hunt | 20 | @author Simon Hunt |
21 | */ | 21 | */ |
... | @@ -23,35 +23,42 @@ | ... | @@ -23,35 +23,42 @@ |
23 | (function (onos) { | 23 | (function (onos) { |
24 | 'use strict'; | 24 | 'use strict'; |
25 | 25 | ||
26 | - var api = onos.api; | 26 | + var svg; |
27 | 27 | ||
28 | - var vid, | ||
29 | - svg; | ||
30 | - | ||
31 | - // == define your functions here..... | ||
32 | 28 | ||
29 | + function sizeSvg(view) { | ||
30 | + svg.attr({ | ||
31 | + width: view.width(), | ||
32 | + height: view.height() | ||
33 | + }); | ||
34 | + } | ||
33 | 35 | ||
34 | - // NOTE: view is a data structure: | 36 | + // NOTE: view is a view-token data structure: |
35 | // { | 37 | // { |
36 | - // id: 'view-id', | 38 | + // vid: 'view-id', |
37 | - // el: ... // d3 selection of dom view div. | 39 | + // nid: 'nav-id', |
40 | + // $div: ... // d3 selection of dom view div. | ||
38 | // } | 41 | // } |
39 | 42 | ||
40 | - function load(view) { | 43 | + // gets invoked only the first time the view is loaded |
41 | - vid = view.id; | 44 | + function preload(view, ctx) { |
42 | - svg = view.el.append('svg') | 45 | + svg = view.$div.append('svg'); |
43 | - .attr({ | 46 | + sizeSvg(view); |
44 | - width: 400, | 47 | + } |
45 | - height: 300 | 48 | + |
46 | - }); | 49 | + function reset(view) { |
50 | + // clear our svg of all objects | ||
51 | + svg.html(''); | ||
52 | + } | ||
47 | 53 | ||
48 | - var fill = (vid === 'temp1') ? 'red' : 'blue', | 54 | + function load(view, ctx) { |
49 | - stroke = (vid === 'temp2') ? 'yellow' : 'black'; | 55 | + var fill = 'blue', |
56 | + stroke = 'grey'; | ||
50 | 57 | ||
51 | svg.append('circle') | 58 | svg.append('circle') |
52 | .attr({ | 59 | .attr({ |
53 | - cx: 200, | 60 | + cx: view.width() / 2, |
54 | - cy: 150, | 61 | + cy: view.height() / 2, |
55 | r: 30 | 62 | r: 30 |
56 | }) | 63 | }) |
57 | .style({ | 64 | .style({ |
... | @@ -61,14 +68,22 @@ | ... | @@ -61,14 +68,22 @@ |
61 | }); | 68 | }); |
62 | } | 69 | } |
63 | 70 | ||
64 | - // == register views here, with links to lifecycle callbacks | 71 | + function resize(view, ctx) { |
65 | - | 72 | + sizeSvg(view); |
66 | - api.addView('temp1', { | 73 | + svg.selectAll('circle') |
67 | - load: load | 74 | + .attr({ |
75 | + cx: view.width() / 2, | ||
76 | + cy: view.height() / 2 | ||
68 | }); | 77 | }); |
78 | + } | ||
79 | + | ||
80 | + // == register views here, with links to lifecycle callbacks | ||
69 | 81 | ||
70 | - api.addView('temp2', { | 82 | + onos.ui.addView('sampleAlt', { |
71 | - load: load | 83 | + preload: preload, |
84 | + reset: reset, | ||
85 | + load: load, | ||
86 | + resize: resize | ||
72 | }); | 87 | }); |
73 | 88 | ||
74 | 89 | ... | ... |
... | @@ -23,9 +23,6 @@ | ... | @@ -23,9 +23,6 @@ |
23 | (function (onos) { | 23 | (function (onos) { |
24 | 'use strict'; | 24 | 'use strict'; |
25 | 25 | ||
26 | - // reference to the framework api | ||
27 | - var api = onos.api; | ||
28 | - | ||
29 | // configuration data | 26 | // configuration data |
30 | var config = { | 27 | var config = { |
31 | useLiveData: true, | 28 | useLiveData: true, |
... | @@ -1213,7 +1210,7 @@ | ... | @@ -1213,7 +1210,7 @@ |
1213 | // ====================================================================== | 1210 | // ====================================================================== |
1214 | // register with the UI framework | 1211 | // register with the UI framework |
1215 | 1212 | ||
1216 | - api.addView('network', { | 1213 | + onos.ui.addView('topo', { |
1217 | load: loadNetworkView | 1214 | load: loadNetworkView |
1218 | }); | 1215 | }); |
1219 | 1216 | ... | ... |
-
Please register or login to post a comment