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:
${symbol_h2} Standalone Application outside of ONOS In the standalone scenario this library can continue to be built with Maven like:
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
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
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 embedding of SVG content in to the web page
The use of TypeScript (as opposed to JavaScript or ECMAScript directly) to ensure type safety