Organize widgets in forms, design the textual code

[UlrichGoebel]

Hi,

I intend to build UIs for existing PostgreSQL databases with dozens of tables, each with 5 to 30 columns, some 1-n, n-1 and n-n relations.

The Concept

Roughly speaking each database table will get his own form, which collect the widgets needed. These forms will be displayed in nested TabbedContent and TabPane widgets. So the user can easyly navigate between the forms/tables.

To handle relations, each form can have subforms. So let's say a form handles data from a person, a subform could handle data about roles of the person. The subform concept should work recursively, so even subforms can have subforms. (In practice, this should not be overdone.)

The Main Classes

For that I intend to build a

def class BaseForm()

and two others

class MainForm(BaseForm)
class ChildForm(BaseForm)

The BaseForm should do the main work, the two others differ more or less just in the attributes related to the form hierachy.

We keep in mind an example, let's say a database table tbl_person with columns like id, name, birthday, address, phone, email and so on. Later on we have a form like

form = MainForm(id='form_person')

BaseForm should be responsible for:

• Manage the form hierarchy.
• Add and hold textual widgets as attributes of forms:
  form.addWidget(col_name='name', widget=Input(), type='text', label='Name')
  which ends up in an attribute form.name pointing to the Input widget. Of course there are other widgets allowed like Select, RadioSet, TextArea.
• Take care that Input widgets of type datetime, date, time get suitable validators. These validators are made from textual Validator but do much more: they try to interprete the user input and update the widget value in case of success. (I relized such validators using the python dateparser which makes it possible to enter even "today"...)
• Build a default label widget for each widget, where form.lbl_name points to. If given this label is made from the optional parameter label in the addWidget, which can be a string or even a textual Label widget.
• Hold a type for each widget. These types are text, int, bool, float, decimal, datetime, date, time.
• Provides a standardized interface for all widgets and types. These interface convert the types depending on the type of the widget.

def setValue(col_name, value)       # convert value type into str for textual
def getValue(col_name)           # gives the value in python type depending on type of the widget
def clearValue(col_name)

• Provides an interface to set/get/clear all values of an entire form, passing a matching dictionary or something else comming from the database. So later on we could call form.setValues(dict_of_values) or dict_of_values = form.getValues().
• If required get choices for Select or RadioSet from a model which connect the app/form to a database table.

How the Textual App could look like

A textual app then could look like:

from textual.app import App
from textual.widgets ...

from MyForms import MainForm, ChildForm

class Main(App):
  
    def buildForms(self):
        # here we build all the forms:
        self.formPerson = MainForm('form_person')    # refers to database table tbl_person
        self.formRoleOfPerson = ChildForm('form_role_person')    # refers to database n-n relation
        self.formRole = MainForm('form_roles')    # refers to database table tbl_role
        # ... and then add all the widgets
        self.formPerson.addWidget(col_name='name', widget=Input(), type='text', label='Name')
        self.formPerson.addWidget(col_name='birthday', widget=Input(), type='date', label='Birthday')
        ...
            
    def compose(self):
        self.buildForms()
        # yields the main structure, that means the `TabbedContent`s, `TabPane`s, and inside of that
        yield self.formPerson.lbl_name
        yield self.formPerson.name
        ...
    
if __name__ == "__main__":
    app = Main()
    app.run()

Some remarks

1. The buildForms collect all the work to construct forms and widgets, including the form hierarchy.
2. The buildForms has to be called after the app has initilized itself, therefore it is called at the very beginning of compose. (Thanks to daveps hint here.) An alternative place to call buildForms could be in an event handler on_load, but I don't see any benefit.
3. In the compose I try to reduce the work on the UI structure.
4. So I try to seperate the structure from the content and hold the code clean an readable.

How going on

If anyone has any recommendations for me, I would be delighted. Otherwise I'm also happy to discuss the concept.

If anyone is interested in collaborating on the project, I am interested too. (The main problem could come from my poor english and the fact, that my code until now is written with mostly german identifiers and documentation.)

Best regards
Ulrich