Have questions? Stuck? Please check our FAQ for some common questions and answers.

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 8 Next »

Overview (note: still WIP)

The ONOS GUI is a single-page web-application with hash-navigation. The GUI system comprises client-side code (a single HTML page, javascript libraries and modules, CSS files, etc.) and server-side code (Java classes that interface to ONOS Server APIs). The GUI web page is served up by a web server running on the ONOS instance.

Client-Side Architecture

The client side code is comprised of:

The main application page
  • index.html
Third party libraries
  • tp/jquery-2.1.1.min.js
  • tp/d3.js (v3.4.12)
  • tp/topojson.v1.min.js

Framework code and supporting modules

  • onos.js
  • onosFlash.js
  • onosFloatPanel.js
  • onosMast.js
  • onosQuickHelp.js
Supporting libraries
  • d3Utils.js
  • geometry.js
  • glyphs.js
Topology view
  • topo.js
View module templates
  • module-div-template.js
  • module-svg-template.js
Sample views
  • sample.js
  • sampleHash.js
  • sampleKeys.js
  • sampleRadio.js

... along with their associated *.css stylesheets. 

The structure of the framework allows for the registration of multiple "views" and the subsequent navigation between them. 

For the first release, however, there is but a single view, the Topology View.

View Registration and Life-Cycle Callbacks

A view registers with the framework via a call to the addView(...) function.

onos.ui.addView('viewId', {
    preload: preload,
    reset: reset,
    load: load,
    unload: unload,
    resize: resize,
    theme: theme
});

The first argument to the function is a short string identifier for the view. 

The second argument to the function is an inline object block with the given keys, whose values are references to callback functions:

preloadThis function is called only once, the first time the view is loaded. It is called after the view's <div> has been added to the DOM.
resetThis function is called just before the view is shown. It can be used to clear stale data from the view.
loadThis function is called when the view is loaded.
unloadThis function is called when the view is unloaded. The view may use this to drop references to cached data, or stop background tasks.
resizeThis function is called when the view has been resized.
themeThis function is called when the user has toggled the theme.

 

 

Topology View

<details of websocket communication with the server>

 

Server-Side Architecture

 <details of web-socket handling, JSON event protocol, etc.>

 

 

 

  • No labels