tree: bdd0c37258fe5b2b5f1297887a92d5ca7000f014 [path history] [tgz]
  1. BUILD.rename
  2. README.md
  3. app/
  4. pom.xml
  5. web/
tools/package/archetypes/ui2/src/main/resources/archetype-resources/README.md

UI2 Sample application

This application, created from the ONOS UI2 archetype can be deployed as a [standalone application](#Standalone Application outside of ONOS) outside of ONOS

To create a GUI within ONOS please see onos/web/gui2/README.md

There are 2 main parts to this app:

  • An ONOS OSGi Java bundle that is packaged as an ONOS OAR file, and can be deployed in to a running ONOS system
  • An Angular Web project - built with Angular CLI through NPM in Maven

${symbol_h2} Standalone Application outside of ONOS In the standalone scenario this library can continue to be built with Maven like:

  • mvn clean install

The app/BUILD, web/${artifactId}/BUILD and any BUILD.bazel files can be discarded or ignored because they are only for building with Bazel. They do allow the project to be converted to Bazel pretty easily though.

The ONOS OAR application may be installed with

onos-app localhost install! app/target/${artifactId}-app-1.0-SNAPSHOT.oar

Development

The GUI can be built locally with the Angular CLI command nghttps://cli.angular.io/

You might already have this installed - see https://docs.onosproject.org/onos-gui/docs/prerequisites/

ng serve

And you should be able to open it in your browser at http://localhost:4200

${symbol_h2} Application embedded within ONOS To embed the application inside ONOS (permanently add it to the ONOS code base) move the application folder in to the ~/onos/apps directory (ensuring its name does not clash with anything already there).

For the GUI only the src folder should be copied over - all else can be discarded. The WORKSPACE and other support files will be accessed from the root of ~/onos

App structure

The application demonstrates some major concepts:

  • The use of Angular concepts like Modules, Components, Service

  • The top level component - contains the "Fetch Data" button and the connection to the server backend through a WebSocket

  • Passing a number in the request

  • Receiving a JSON object in reply

  • Reuse of items from the gui2-fw-lib - with LogService, WebSocketService and IconComponent

  • The use of a child component (WelcomeComponent) in 3 different ways

    • The passing of Inputs to this component
    • The passing of an Event out when the component is clicked
  • The embedding of SVG content in to the web page

  • The use of TypeScript (as opposed to JavaScript or ECMAScript directly) to ensure type safety