홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
ef31fb26 1 parent 7256d084

GUI -- Sketched out structure for multi-views; each with own controller, template html and css. 

- routes currently hard-coded... some thought needed to handle views contributed at runtime.

Change-Id: Ied012744d74e46c5072143283364557f9485056c
Inline Side-by-side
Showing 10 changed files with 220 additions and 5 deletions
...@@ -46,11 +46,15 @@ ...@@ -46,11 +46,15 @@
46 <link rel="stylesheet" href="fw/mast/mast.css"> 46 <link rel="stylesheet" href="fw/mast/mast.css">
47 47
48 <!-- This is where contributed javascript get injected --> 48 <!-- This is where contributed javascript get injected -->
49 - <!-- INJECTED-JAVASCRIPT --> 49 + <!-- {INJECTED-JAVASCRIPT} -->
50 + <script src="view/sample/sample.js"></script>
51 + <script src="view/topo/topo.js"></script>
50 <!-- TODO: inject javascript refs server-side --> 52 <!-- TODO: inject javascript refs server-side -->
51 53
52 <!-- This is where contributed stylesheets get injected --> 54 <!-- This is where contributed stylesheets get injected -->
53 - <!-- INJECTED-CSS-STYLESHEETS --> 55 + <!-- {INJECTED-CSS-STYLESHEETS} -->
56 + <link rel="stylesheet" href="view/sample/sample.css">
57 + <link rel="stylesheet" href="view/topo/topo.css">
54 <!-- TODO: inject style-sheet refs server-side --> 58 <!-- TODO: inject style-sheet refs server-side -->
55 </head> 59 </head>
56 <body class="light" ng-app="onosApp"> 60 <body class="light" ng-app="onosApp">
......
...@@ -36,3 +36,11 @@ body { ...@@ -36,3 +36,11 @@ body {
36 margin: 0; 36 margin: 0;
37 overflow: hidden; 37 overflow: hidden;
38 } 38 }
39 +
40 +#view {
41 + padding: 6px;
42 +}
43 +
44 +#view h2 {
45 + color: #800;
46 +}
......
...@@ -23,12 +23,38 @@ ...@@ -23,12 +23,38 @@
23 (function () { 23 (function () {
24 'use strict'; 24 'use strict';
25 25
26 - angular.module('onosApp', ['onosUtil', 'onosMast']) 26 + var coreDependencies = [
27 - .controller('OnosCtrl', ['$log', 'KeyService', 'ThemeService', 27 + 'ngRoute',
28 - function (_$log_, ks, ts) { 28 + 'onosUtil',
29 + 'onosMast'
30 + ];
31 +
32 + var viewDependencies = [
33 + // TODO: inject view dependencies server side
34 + // NOTE: 'ov' == 'Onos View'...
35 + // {INJECTED-VIEW-MODULE-DEPENDENCIES}
36 + 'ovSample',
37 + 'ovTopo',
38 + // NOTE: dummy element allows all previous entries to end with comma
39 + '___dummy___'
40 + ];
41 +
42 + var dependencies = coreDependencies.concat(viewDependencies);
43 + dependencies.pop(); // remove dummy
44 +
45 + angular.module('onosApp', dependencies)
46 +
47 + .controller('OnosCtrl', [
48 + '$log', '$route', '$routeParams', '$location',
49 + 'KeyService', 'ThemeService',
50 +
51 + function (_$log_, $route, $routeParams, $location, ks, ts) {
29 var $log = _$log_, 52 var $log = _$log_,
30 self = this; 53 self = this;
31 54
55 + self.$route = $route;
56 + self.$routeParams = $routeParams;
57 + self.$location = $location;
32 self.version = '1.1.0'; 58 self.version = '1.1.0';
33 59
34 // initialize onos (main app) controller here... 60 // initialize onos (main app) controller here...
...@@ -36,6 +62,28 @@ ...@@ -36,6 +62,28 @@
36 ks.installOn(d3.select('body')); 62 ks.installOn(d3.select('body'));
37 63
38 $log.log('OnosCtrl has been created'); 64 $log.log('OnosCtrl has been created');
65 +
66 + $log.debug('route: ', self.$route);
67 + $log.debug('routeParams: ', self.$routeParams);
68 + $log.debug('location: ', self.$location);
69 + }])
70 +
71 + .config(['$routeProvider', function ($routeProvider) {
72 + // TODO: figure out a way of handling contributed views...
73 + $routeProvider
74 + .when('/', {
75 + controller: 'OvSampleCtrl',
76 + controllerAs: 'ctrl',
77 + templateUrl: 'view/sample/sample.html'
78 + })
79 + .when('/topo', {
80 + controller: 'OvTopoCtrl',
81 + controllerAs: 'ctrl',
82 + templateUrl: 'view/topo/topo.html'
83 + })
84 + .otherwise({
85 + redirectTo: '/'
86 + })
39 }]); 87 }]);
40 88
41 }()); 89 }());
......
1 +# ONOS Sample View
2 +
3 +Code and resources for implementing a sample view.
4 +
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 + ONOS GUI -- Sample View -- CSS file
19 +
20 + @author Simon Hunt
21 + */
22 +
23 +#ov-sample .msg {
24 + font-style: italic;
25 + color: darkorange;
26 +}
...\ No newline at end of file ...\ No newline at end of file
1 +<!-- Sample partial HTML -->
2 +<div id="ov-sample">
3 + <h2> A Sample View </h2>
4 +
5 + <img class="logo" src="../data/img/onos-logo.png">
6 +
7 + <p>
8 + This is a <i>view</i> distinct from the Topology viewer,
9 + to help facilitate development of the navigation model.
10 + </p>
11 + <p>
12 + A message from the controller:
13 + <span class="msg">{{ ctrl.message }}</span>
14 + </p>
15 + <p>
16 + Try visiting the <a href="#/topo">Topology View</a>.
17 + </p>
18 +</div>
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 + ONOS GUI -- Sample View Module
19 +
20 + @author Simon Hunt
21 + */
22 +
23 +(function () {
24 + 'use strict';
25 + angular.module('ovSample', ['onosUtil'])
26 + .controller('OvSampleCtrl', ['$log', function (_$log_) {
27 + var self = this,
28 + $log = _$log_;
29 +
30 + self.message = 'Hey there folks!';
31 +
32 + $log.log('OvSampleCtrl has been created');
33 + }]);
34 +}());
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 + ONOS GUI -- Topology View -- CSS file
19 +
20 + @author Simon Hunt
21 + */
22 +
23 +#ov-topo .msg {
24 + font-family: "Bookman", Georgia, "Times New Roman", serif;
25 + font-size: 40pt;
26 + font-weight: bold;
27 + font-style: italic;
28 + color: seagreen;
29 +}
1 +<!-- Topology View partial HTML -->
2 +<div id="ov-topo">
3 + <h2> Topology View </h2>
4 +
5 + <p>
6 + This is a place-holder for the topology viewer.
7 + </p>
8 +
9 + <div class="msg"> {{ctrl.message}} </div>
10 +</div>
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 + ONOS GUI -- Topology View Module
19 +
20 + @author Simon Hunt
21 + */
22 +
23 +(function () {
24 + 'use strict';
25 + angular.module('ovTopo', ['onosUtil'])
26 + .controller('OvTopoCtrl', ['$log', function (_$log_) {
27 + var self = this,
28 + $log = _$log_;
29 +
30 + self.message = 'Topo View Rocks!';
31 +
32 + $log.log('OvTopoCtrl has been created');
33 + }]);
34 +}());