SDN Controller Programming Guide

166
view.lion('key-button'), '', function () {
v.setContent($('<span/>').
addClass('hm-message-style').append('Hello World'));
}));
}
// 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-switches', {
load: load
});
}(SKI));
Now create a script that adds a menu entry to the navigation panel so the hm-switches view is
accessible from the SDN Controller’s GUI. Create the file hm-ui/src/main/webapp/js/hm-nav.js
with the content from the following hm-nav.js listing. Use hm-nav.js to add as many entries in the
navigation panel as the application needs; there is just one JavaScript file dealing with the
navigation panel.
hm-nav.js:
// JSLint directive...
/*global $: false, SKI: false */
(function (api) {
'use strict';
var f = api.fn, // general functions API
nav = api.nav; // navigation model API
f.trace('including hm-nav.js');
// Adds the "Health Monitor" (key-cat-hm) category to the
// navigation panel and adds a "Switches" (key-nav-switches)
// sub-menu pointing to hm-switches.js view.
nav.insertCategoryAfter('c-tasks', 'key-cat-hm', [
nav.item('key-nav-switches', 'hm-switches', 'square')
]);
}(SKI));
Except for “Hello World”, plan text is not used in the previous two listing. In order to display text in
the views define properties files which contain text identified by keys. This allows for localizing the
applications; see GUI on page 52 for details on how the localization infrastructure works on the
SKI framework.
Next, create the properties files to define the text that the previous two listing reference by their
key. Create one properties file for each view.