...

Tabular views, unsurprisingly, present data in a tabular form. As an example, here is a screenshot of the hosts view...

Image RemovedImage Added

Applications can create (and inject into the GUI) their own view(s) of tabular data. This tutorial will step you through the process ..of creating an application that does just that - injects a tabular view into the ONOS GUI.

Application Set Up

Setting up the application is exactly the same as for the Custom View tutorial, with one minor difference: the choice of archetype in step (2) should be uitab instead of ui:

...

$ onos-create-app uitab org.meowster.app meowster-app

Building and Installing the App

From the top level project directory (the one with the pom.xml file) build the project:

$ mvn clean install

Assuming that you have ONOS running on your local machine, you can install the app from the command line:

$ onos-app localhost install! target/meowster-app-1.0-SNAPSHOT.oar

After refreshing the GUI in your web browser, the navigation menu should have an additional entry:

Image Added

Clicking on this item should navigate to the injected Sample View:

Image Added

Selecting a row in the table should display a "details" panel for that item:

Image Added

The row can be de-selected either by clicking on it again, or by pressing the ESC key.

Pressing the slash ( / ) or backslash ( \ ) key will display the "Quick Help" panel. Press Esc to dismiss:

Image Added

The following sections describe the template files, hopefully providing sufficient context to enable adaptation of the code to implement the needs of your application.

Description of Template Files - Server Side

...

There are three files here:

• sample.html
• sample.js
• sample.css

Note again, the convention is to name these files using the identifier for the view; in this case "sample". 

sample.html

This is an HTML snippet for the sample view, providing the view's structure of the view. Note that this HTML markup is injected into the Web UI by Angular, at the appropriate timethe point where the view becomes "visible" because the user navigated to it.

Let's describe the different parts of the file in sections...

<!-- partial HTML -->
<div id="ov-sample">
 
    ...
 
</div>

The outer <div> element should be given the id of "ov-" + <view identifier>, ("ov" standing for "Onos View"). Thus in this example the id is "ov-sample".

sample.js

blah

sample.css

Stylesheet for the sample view. Again, a number of naming conventions are in use here:

...