Getting started

To illustrate the fast GUI dashboard build with decore Base in Python, we will now create a small UI in the form of a web application together.

The decorated functions are used, first and foremost, to build meta information for later evaluation in the front end of the application and are nothing to be afraid of.

It’s really simple, please follow me!

Installation

First build an empty Python project in your desired directory.

To install decore Base, we run the following command in the root directory of the project. Let’s use the terminal in vscode.

pip install decore-Base

This requires an activated Python environment! To learn more about this, visit Python environments in VS Code.

Preparation

Grade

To get all the necessary paths and settings for our future Python GUI dashboard application, we still need to do the preparation.

Build a new file with the name app.py in the root directory of the project.

To use decore, we first import it into the app.py module.

from decore_base import decore

Then we use the prepare command to create all the necessary auxiliary files in the root directory of the project.

To actually prepare the application, we execute the command python app.py --prepare in the terminal. The path must be in the root directory of the project, i.e. where the app.py is located.

Use

To enable the Python interpreter to process the future base classes, we add the following import.

from bases import *

Normally, a Python main module contains a query that checks whether it is the main module so that we can then call the main function.

Next, we build a line if __name__ == '__main__': in the app.py file.

To build a new “decore” application instance, we use a main() function decorated with @decore.app in the app.py file, just below the line: if __name__ == '__main__':.

from decore_base import decore
from bases import *

if __name__ == '__main__':
    @decore.app(title='My App')
    def main():
        pass

Model

In einem Modell legen wir die Datenfelder fest, in einer Datenbanktabelle repräsentiert werden. Es dient als Schnittstelle zu den Datenbanktreibern wie SQLite, MySQL, PostgreSQL, etc.

We now build the file first_model.py in the models directory and add the following code:

Warning

It is not necessary to create a Model for each Base, but each Model to be used must have a Base, which must be imported via the file __init__.py. This is the only way to evaluate and display rellations between the models in the frontend.

Grade

To avoid possible circular imports, we create the model classes in a separate models directory in our project root directory. The models directory was built using the python app.py --prepare command executed previously.

from decore_base.uniform.conform_model import *

class First_model(Conform_model):
   firstname = CharField(verbose_name='First Name')
   lastname = CharField(verbose_name='Last Name')

Grade

In the example shown here, we import the Conform_model class from the uniform library and extend it with the first name and last name fields.

The models in decore Base are based on the great Peewee ORM. To learn more about Peewee, visit Peewee ORM.

Warning

When importing, please note that we import everything (*) from the conform_model namespace in order to obtain the field classes as well.

Base

The base classes serve the decore application as a carrier element for the view components, maintain the data model and are therefore also the data source for the evaluation in the front end of the dashboard.

Now we need to create a new Python module containing a base class, for example: first_base.py, in the bases directory in our project root directory. The bases directory was created by the python app.py --prepare command executed previously.

from decore_base import decore
from models.first_model import First_model

@decore.base(title='First Base', icon='mdi-home', model=First_model)
class First_base:
   pass

Grade

To use the previously built Model, we import it into the Base class and pass it to the model parameter.

Warning

In order for the Python interpreter to be able to process the base classes, we have to import them into the __init__.py file in the bases directory. The order of the individual imports also determines the order in decore Front.

We edit the __init__.py file and insert the following code:

from .first_base import First_base

View

Views are used by the decore application to present the data records in the front end of the web application.

With the View decorator, we can now create a View component and mount it under the previously created base class.

We now edit the first_base.py file again and extend the code as follows:

1
2
3
4
5
6
7
8
from decore_base import decore
from models.first_model import First_model

@decore.base(title='First Base', icon='mdi-home', model=First_model)
class First_base:
   @decore.view(title='First View', icon='mdi-home', type='table', fields=[First_model.firstname, First_model.lastname])
   def first_view():
      pass

Dialog

Dialogs are the supporting elements for widgets in the front end of the web application. They can be added to views but also to subordinate widgets and control the visibility and display style of child elements. Dialogs are also given control over the sending functions of the widgets.

In our case, we build a dialog to create a new person with first name and last name.

Here we go … the file first_base.py again and extend the code as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
from decore_base import decore
from models.first_model import First_model

@decore.base(title='My First Base', icon='mdi-home', model=First_model)
class First_base:
   @decore.view(title='Person', icon='mdi-account', type='table', fields=[First_model.firstname, First_model.lastname])
   def first_view():
      @decore.dialog(title='Add Person', icon='mdi-plus', type='standard', display='drawer', activator='default-menu')
      def first_dialog():
         pass

Widget

Widgets are components with which we can perform interactions with the individual data set. They can only be added to dialogs and are stackable.

What we need now is an input form to enter the data for the new person.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
from decore_base import decore
from models.first_model import First_model

@decore.base(title='My First Base', icon='mdi-home', model=First_model)
class First_base:
   @decore.view(title='Person', icon='mdi-account', type='table', fields=[First_model.firstname, First_model.lastname])
   def first_view():
      @decore.dialog(title='Add Person', icon='mdi-plus', type='standard', display='drawer', activator='default-menu')
      def first_dialog():
         @decore.widget(title='Add Person Form', icon='mdi-account', type='form', fields=[First_model.firstname, First_model.lastname])
         def first_widget():
            pass

Action

Actions are methods with which the frontend can communicate with decore Base. They can be added to views and widgets and are the only real class methods and are called directly in the Base.

We now need an action to save the new person’s data and extend the code in first_base.py as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
   from decore_base import decore
   from models.first_model import First_model

   @decore.base(title='My First Base', icon='mdi-home', model=First_model)
   class First_base:
      @decore.view(title='Person', icon='mdi-account', type='table', fields=[First_model.firstname, First_model.lastname])
      def first_view():
         @decore.dialog(title='Add Person', icon='mdi-plus', type='standard', display='drawer', activator='default-menu')
         def first_dialog():
            @decore.widget(title='Add Person Form', icon='mdi-account', type='form', fields=[First_model.firstname, First_model.lastname])
            def first_widget():
               @decore.action(title='Save Person', icon='mdi-content-save', type='submit')
               def first_action(self, data):
                  item = First_model(item, **kwargs)
                  item.title = item.firstname + ' ' + item.lastname
                  if item.save():
                     return True, item.title + ' saved successfully'
                  else:
                     return False, 'Error while saving ' + item.title

Grade

To build a dataset with decore Base, we need to create an instance of the Model. In our case First_model. The instance is filled with the data from the form and then saved.

The ID, in the form of a UUID in text format, is generated automatically and does not need to be specified separately.

Warning

The title field must be used each time a data record is created. Otherwise the element will not pass validation. It should also always be unique, i.e. there should be no identical titles in the database.

Run, development and build

Run

To start your application, run python app.py in your project root directory. Use the terminal in vscode.

Open the browser and enter http://localhost:5555.

Development

To develop your application, use your debugger with the profile [dev] decore base development in vscode.

Open the browser and enter http://localhost:5555.

Build

To build your application, run python app.py --build in your project root directory. Use the terminal in vscode.