Reference Guide

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