Skip to content
This repository has been archived by the owner on Apr 22, 2024. It is now read-only.

Commit

Permalink
Move section "Creating a NApp with UI" to the Web-UI documentation (#…
Browse files Browse the repository at this point in the history 
…1167)

Add section teaching how to create a NApp with UI
on the web UI documentation. In addition, the NApp UI related section
in the `creating_a_napp.rst` file has been moved to the Web-UI documentation.

Co-authored-by: Humberto Diógenes <hdiogenes@gmail.com>
  • Loading branch information
@cmagnobarbosa @hdiogenes
cmagnobarbosa and hdiogenes committed Sep 22, 2020
1 parent a5b6e21 commit ca45907
Show file tree
Hide file tree
Showing 2 changed files with 133 additions and 130 deletions.
133 changes: 5 additions & 128 deletions docs/developer/creating_a_napp.rst
View file
Expand Up @@ -93,6 +93,11 @@ After created, your NApp will have the basic NApp structure.
- **ui**: Folder with components to be displayed in the Kytos UI.
- **ui/README.rst**: A file with a brief description of your NApp components.

User Interface
--------------
You can create a web UI for your NApp using our custom `Vue.js` and
HTML components. To learn more, visit our
`Web Interface documentation <../web-ui/>`_

How to create a rest endpoint for your napp
===========================================
Expand Down Expand Up @@ -492,134 +497,6 @@ categories is displayed.

listened_events


Creating a NApp with UI
=======================

Most of the times, it is necessary for a NApp to interact with the user, for
through a graphical interface (not just REST APIs).

We have developed `vue-js` based components (`Vuejs <https://vuejs.org>`_), so
that you, developer, worry as little as possible about interface. Do not worry,
you don't have to understand how `vue-js` works.

In theory, during the construction of your NApp UI you can write any HTML code
that Kytos will render. However, we strongly recommend that you use the
components we have developed. The so-called ``k-*`` components.


NApp Structure with a UI
------------------------

After create a new NApp (see this `NApp tutorial
<https://tutorials.kytos.io/napps/create_your_napp/>`_) the structure below
will be created.

.. code-block:: sh
<username>
├── __init__.py
└── <napp_name>/
├── __init__.py
├── kytos.json
├── main.py
├── README.rst
├── settings.py
└── ui/
├── k-action-menu/
├── k-info-panel/
├── k-toolbar/
└── README.rst
To add a new components into the kytos UI you must create a new file following
the pattern ``ui/<section>/<file_name>.kytos``, where **<section>** should be
the section name where the new component will be fixed and the **<file_name>**
should be the component name. You are free to choose any file name here.

Sections
--------

* ``k-action-menu``: Add actions and their shortcuts in `k-action-menu`;

* ``k-info-panel``: Show generic information in `k-info-panel`;

* ``k-toolbar``: Create the NApp UI.


Whether you have created a new NApp component into the sections
``k-action-menu``, ``k-toolbar`` and ``k-info-panel`` the NApp structure should
have the following structure.


.. code-block:: sh
<username>/
├── __init__.py
└── <napp_name>/
├── __init__.py
├── kytos.json
├── main.py
├── README.rst
├── settings.py
└── ui/
├── k-action-menu/
│   └── main.kytos
├── k-info-panel/
│   └── main.kytos
├── k-toolbar/
│   └── main.kytos
└── README.rst
When the administrator enables your NApp, Kytos will automatically scan the
``ui/*`` structure to properly export to GUI.

Component Template
------------------

The Kytos component should follow some rules:

#. The component file should have the extension ``.kytos``

#. The component file must have 2 sections:

#. template: This section must be filled with html contents to display your
graphical component.This section should have a html syntax and you can
use the Kytos components.
#. script (optional): This section has javascript code that implements your
component behaviour.

Below an example of a Kytos component (`ui/k-toolbar/main.kytos`), that will be
displayed on our UI.

.. code-block:: html

<template>

<k-toolbar-item icon="desktop" tooltip="My application">
<k-accordion>
<k-accordion-item>
// todo: create a example with some inputs and buttons
</k-accordion-item>
</k-accordion>
</k-toolbar-item>

</template>

<script>
/* All the javascript methods are optional */
module.exports = {
methods: {
// put your javascript methods here
},
}
</script>


You can use any **font-awesome icon**. Kytos ui interface will read that icon
and create a new button into the **k-menu-bar**.

Create your Meta-NApp
=====================

Expand Down
130 changes: 128 additions & 2 deletions docs/developer/web-ui.rst
View file
Expand Up @@ -117,5 +117,131 @@ of Kytos UI. This is another way to trigger actions that you think that is not
suitable for the toolbar, for instance.


Check all UI components in `Kytos UI components section <https://docs.kytos.io/
developer/kytos_ui_components>`_
Check all UI components in `Kytos UI components section <../kytos_ui_components>`_

Creating a NApp with UI
***********************

Most of the times, it is necessary for a NApp to interact with the user, for
through a graphical interface (not just REST APIs).

We have developed `vue-js` based components (`Vuejs <https://vuejs.org>`_), so
that you, developer, worry as little as possible about interface. Do not worry,
you don't have to understand how `vue-js` works.

In theory, during the construction of your NApp UI you can write any HTML code
that Kytos will render. However, we strongly recommend that you use the
components we have developed. The so-called ``k-*`` components.


NApp Structure with a UI
========================

After create a new NApp (see this `NApp tutorial
<https://tutorials.kytos.io/napps/create_your_napp/>`_) the structure below
will be created.

.. code-block:: sh
<username>
├── __init__.py
└── <napp_name>/
├── __init__.py
├── kytos.json
├── main.py
├── README.rst
├── settings.py
└── ui/
├── k-action-menu/
├── k-info-panel/
├── k-toolbar/
└── README.rst
To add a new components into the kytos UI you must create a new file following
the pattern ``ui/<section>/<file_name>.kytos``, where **<section>** should be
the section name where the new component will be fixed and the **<file_name>**
should be the component name. You are free to choose any file name here.

Sections
========

* ``k-action-menu``: Add actions and their shortcuts in `k-action-menu`;

* ``k-info-panel``: Show generic information in `k-info-panel`;

* ``k-toolbar``: Create the NApp UI.


Whether you have created a new NApp component into the sections
``k-action-menu``, ``k-toolbar`` and ``k-info-panel`` the NApp structure should
have the following structure.


.. code-block:: sh
<username>/
├── __init__.py
└── <napp_name>/
├── __init__.py
├── kytos.json
├── main.py
├── README.rst
├── settings.py
└── ui/
├── k-action-menu/
│   └── main.kytos
├── k-info-panel/
│   └── main.kytos
├── k-toolbar/
│   └── main.kytos
└── README.rst
When the administrator enables your NApp, Kytos will automatically scan the
``ui/*`` structure to properly export to GUI.

Component Template
==================

The Kytos component should follow some rules:

#. The component file should have the extension ``.kytos``

#. The component file must have 2 sections:

#. template: This section must be filled with html contents to display your
graphical component.This section should have a html syntax and you can
use the Kytos components.
#. script (optional): This section has javascript code that implements your
component behaviour.

Below an example of a Kytos component (`ui/k-toolbar/main.kytos`), that will be
displayed on our UI.

.. code-block:: html

<template>

<k-toolbar-item icon="desktop" tooltip="My application">
<k-accordion>
<k-accordion-item>
// todo: create a example with some inputs and buttons
</k-accordion-item>
</k-accordion>
</k-toolbar-item>

</template>

<script>
/* All the javascript methods are optional */
module.exports = {
methods: {
// put your javascript methods here
},
}
</script>


You can use any **font-awesome icon**. Kytos ui interface will read that icon
and create a new button into the **k-menu-bar**.

0 comments on commit ca45907

Please sign in to comment.