홍길동 / 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 @@
<link rel="stylesheet" href="fw/mast/mast.css">
<!-- This is where contributed javascript get injected -->
<!-- INJECTED-JAVASCRIPT -->
<!-- {INJECTED-JAVASCRIPT} -->
<script src="view/sample/sample.js"></script>
<script src="view/topo/topo.js"></script>
<!-- TODO: inject javascript refs server-side -->
<!-- This is where contributed stylesheets get injected -->
<!-- INJECTED-CSS-STYLESHEETS -->
<!-- {INJECTED-CSS-STYLESHEETS} -->
<link rel="stylesheet" href="view/sample/sample.css">
<link rel="stylesheet" href="view/topo/topo.css">
<!-- TODO: inject style-sheet refs server-side -->
</head>
<body class="light" ng-app="onosApp">
......
......@@ -36,3 +36,11 @@ body {
margin: 0;
overflow: hidden;
}
#view {
padding: 6px;
}
#view h2 {
color: #800;
}
......
......@@ -23,12 +23,38 @@
(function () {
'use strict';
angular.module('onosApp', ['onosUtil', 'onosMast'])
.controller('OnosCtrl', ['$log', 'KeyService', 'ThemeService',
function (_$log_, ks, ts) {
var coreDependencies = [
'ngRoute',
'onosUtil',
'onosMast'
];
var viewDependencies = [
// TODO: inject view dependencies server side
// NOTE: 'ov' == 'Onos View'...
// {INJECTED-VIEW-MODULE-DEPENDENCIES}
'ovSample',
'ovTopo',
// NOTE: dummy element allows all previous entries to end with comma
'___dummy___'
];
var dependencies = coreDependencies.concat(viewDependencies);
dependencies.pop(); // remove dummy
angular.module('onosApp', dependencies)
.controller('OnosCtrl', [
'$log', '$route', '$routeParams', '$location',
'KeyService', 'ThemeService',
function (_$log_, $route, $routeParams, $location, ks, ts) {
var $log = _$log_,
self = this;
self.$route = $route;
self.$routeParams = $routeParams;
self.$location = $location;
self.version = '1.1.0';
// initialize onos (main app) controller here...
......@@ -36,6 +62,28 @@
ks.installOn(d3.select('body'));
$log.log('OnosCtrl has been created');
$log.debug('route: ', self.$route);
$log.debug('routeParams: ', self.$routeParams);
$log.debug('location: ', self.$location);
}])
.config(['$routeProvider', function ($routeProvider) {
// TODO: figure out a way of handling contributed views...
$routeProvider
.when('/', {
controller: 'OvSampleCtrl',
controllerAs: 'ctrl',
templateUrl: 'view/sample/sample.html'
})
.when('/topo', {
controller: 'OvTopoCtrl',
controllerAs: 'ctrl',
templateUrl: 'view/topo/topo.html'
})
.otherwise({
redirectTo: '/'
})
}]);
}());
......
# ONOS Sample View
Code and resources for implementing a sample view.
/*
* 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.
*/
/*
ONOS GUI -- Sample View -- CSS file
@author Simon Hunt
*/
#ov-sample .msg {
font-style: italic;
color: darkorange;
}
\ No newline at end of file
<!-- Sample partial HTML -->
<div id="ov-sample">
<h2> A Sample View </h2>
<img class="logo" src="../data/img/onos-logo.png">
<p>
This is a <i>view</i> distinct from the Topology viewer,
to help facilitate development of the navigation model.
</p>
<p>
A message from the controller:
<span class="msg">{{ ctrl.message }}</span>
</p>
<p>
Try visiting the <a href="#/topo">Topology View</a>.
</p>
</div>
/*
* 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.
*/
/*
ONOS GUI -- Sample View Module
@author Simon Hunt
*/
(function () {
'use strict';
angular.module('ovSample', ['onosUtil'])
.controller('OvSampleCtrl', ['$log', function (_$log_) {
var self = this,
$log = _$log_;
self.message = 'Hey there folks!';
$log.log('OvSampleCtrl has been created');
}]);
}());
/*
* 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.
*/
/*
ONOS GUI -- Topology View -- CSS file
@author Simon Hunt
*/
#ov-topo .msg {
font-family: "Bookman", Georgia, "Times New Roman", serif;
font-size: 40pt;
font-weight: bold;
font-style: italic;
color: seagreen;
}
<!-- Topology View partial HTML -->
<div id="ov-topo">
<h2> Topology View </h2>
<p>
This is a place-holder for the topology viewer.
</p>
<div class="msg"> {{ctrl.message}} </div>
</div>
/*
* 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.
*/
/*
ONOS GUI -- Topology View Module
@author Simon Hunt
*/
(function () {
'use strict';
angular.module('ovTopo', ['onosUtil'])
.controller('OvTopoCtrl', ['$log', function (_$log_) {
var self = this,
$log = _$log_;
self.message = 'Topo View Rocks!';
$log.log('OvTopoCtrl has been created');
}]);
}());