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¶

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 a Model we define the data fields to be represented in a database table. It serves as an interface to the database drivers such as SQLite, MySQL, PostgreSQL, etc.

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

from decore_base.uniform.conform_model import *

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

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

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

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.