Reference Guide
Table Of Contents
- 1 Introduction
- 2 Establishing Your Test and Development Environments
- 3 Developing Applications
- Introduction
- Authentication
- REST API
- Audit Logging
- Alert Logging
- Configuration
- High Availability
- OpenFlow
- Metrics Framework
- GUI
- SKI Framework - Overview
- SKI Framework - Navigation Tree
- SKI Framework - Hash Navigation
- SKI Framework - View Life-Cycle
- SKI Framework - Live Reference Application
- UI Extension
- Introduction
- Controller Teaming
- Distributed Coordination Service
- Persistence
- Backup and Restore
- Device Driver Framework
- 4 Application Security
- 5 Including Debian Packages with Applications
- 6 Sample Application
- Application Description
- Creating Application Development Workspace
- Application Generator (Automatic Workspace Creation)
- Creating Eclipse Projects
- Updating Project Dependencies
- Building the Application
- Installing the Application
- Application Code
- 7 Testing Applications
- 8 Built-In Applications
- Appendix A
- Appendix B
- Bibliography
Creating Views
The SKI framework uses JavaScript [40] as the underlying technology, thus the views are Dynamic-
HTML based. Start by creating the application’s cascading style sheets [41 ] . Create the file hm-
ui/src/main/webapp/css/hm.css with the content from the following hm.css listing. This example
uses a very simple cascading style sheet, however any style desired can be created and as many
style sheets as needed.
hm.css:
.hm {
background-color: red;
}
Now create a view to display the Open Flow Switches. This example shows a tool bar button that
updates the view’s content with the “Hello World” message when it is pressed (see SKI Framework
- Overview on page 59 to find a SKI reference application that provides examples of SKI widgets).
Create the file hm-ui/src/main/webapp/js/hm.js with the content from the following listing, hm.js.
Create one JavaScript file for each view in the application.
hm.js:
// JSLint directive...
/*global $: false*/
(function (api) {
'use strict';
//framework APIs
var f = api.fn, //general API
def = api.def, //application definition API
v = api.view; //view API
f.trace('including hm.js');
// Create a view with a toolbar button
function load(view) {
v.setToolbar(def.tbButton(view.mkId('btn'),
view.lion('button'), '', function () {
$.get('/sdn/ui/switches/app/rs/hm', function(data) {
v.setContent($('<span/>'). append(data));
});
}));
}
// Adds the view to the framework with ‘hm-switches’ as its name.
// The associated property file must have the same name than as view.
def.addView('hm', {
load: load
});
def.insertViewsAfter('exportLogs',
198