maybe a Toga Markup Language?

[Heus-Sueh]

GTK are creating a markup language Blueprint following QT which already has QML to facilitate the creation of interfaces and readability, have you guys ever thought about creating one too?

I think it would be a very welcome feature and would increase productivity and interest in the project

[freakboy3742]

Yes, the idea of a "Toga markup language" has come up many times in the past.

It wouldn't even be that hard to develop - Toga's layout is, after all, very much modelled on HTML: boxes inside boxes, with style applied to each node. That maps fairly trivially to a markup language.

To date, it hasn't been a priority, mostly because of personal preference. There's clearly an audience that loves the idea of GUI markup languages, but for me, it's Yet Another Markup Language. I know Python. Python is much more powerful and flexible than any markup language. Introducing a new markup language with its own syntax, quirks and limitations instead of just writing Python doesn't strike me as a major source of productivity gain. It also seems more important to me to have a suite of good widgets than a second mechanism for laying out those elements.

That said, it keeps coming up, and there isn't an open ticket describing the request, so I've opened #2293 to track the idea.

[Heus-Sueh]

Thanks for the explanation, I think the idea of ​​a markup language makes the frontend code more readable and easier to write, the traditional method is good but depending on the project the code becomes spaghetti due to the fact that there are boxes within boxes and etc, but I understand that the traditional way ends up being easier if you already know it, but a markup language ends up being attractive for people who are entering this area of ​​GUI programming, I think (I don't know) that there has been an increase in apps made in GTK thanks to Blueprint (the markup language) due to the ease of creating a prototype quickly

[hyuri]

I was initially interested in this as well, but then I realized we really "already have it" but in Python syntax as @freakboy3742 mentioned. The example you gave on #2293 is pretty much what we can already do in Python— but we can do more with Python.

In fact, we can pretty easily break our code down into the 3 different components — layout, styling, and logic — just like we would with HTML + CSS + Code(Python/JavaScript/etc.).

Here's a rough example:

Layout

home.py

import toga

from myapp.pages import common_body
from myapp.stylesheet import main_box,box_padded, label_h1, label_tagline, button_primary


name = "Home"
title = "Welcome to My App!"

def render(app):
    # Define our body
    body = toga.Box(
        style=box_main,
        children=[

            toga.Box(
                style=box_padded,
                children=[

                    # App name label
                    toga.Label(text=app.formal_name, style=label_h1),

                    # Subtext label
                    toga.Label(text="Welcome!", style=label_tagline),

                    # Create a series of buttons programatically, from a dictionary of actions we might have stored in app.actions.home
                    *[toga.Button(text=name, on_press=action) for name, action in app.actions.home.items()],

                    # Ok button
                    toga.Button(id="ok_button", text="Ok", on_press=app.confirm_action, style=button_primary),
                ]
            ),
        ]
    )
    
    # Combine our body with our imported common_body (shared layout that all pages use)
    page = common_body.render(body)

    return page

Styling

stylesheet.py

from toga.style import Pack
from toga.style.pack import COLUMN, ROW, CENTER, TOP, BOTTOM, BOLD


box_main = Pack(
    background_color=background_color,
    direction=COLUMN,
    padding=0,
    flex=1
)

box_padded = Pack(
    direction=COLUMN,
    padding=20,
    flex=1
)

label_h1 = Pack(
    font_size=h1_size,
    font_weight=BOLD,
    color=h1_color,
    text_align=CENTER,
)

button_primary = Pack(
    flex=1,
    color="white",
    background_color="blue",
    padding=20,
)

Then, assuming you have a pages.py that lists all available pages, your app.py can be as simple as:

Logic

app.py

import toga

from myapp import pages

class MyApp(toga.App):
    def setup(self):
        self.main_window = toga.MainWindow(title=self.formal_name)

        self.page = pages.by_name["home"].render(self)

        self.main_window.content = self.page
        self.main_window.show()

    [your other toga/app-specific functions here]

Two things to note:

1. In the page code, notice how we can use a for loop to programatically add multiple widgets in sequence. This is powerful and you don't normally get that with markup without an additional templating system;
2. Also in the page code, notice how I broke the layout down even further with the common layout (shared amongst all pages) abstracted into a separate file called "common_body" that I can simply import and place/use wherever I want. So when I change common_body, all pages that use it are automatically updated. It's like what a templating system like Jinja2 does. We can even build a complex set of widgets in separate files and simply import them into each relevant page, modularizing even more.

So now, after toying around with Toga, I think the markup option is a nice bonus but definitely not necessary. I think we benefit more by focusing on improving Toga, like fixing issues with vertical centering, background images support, making more widgets available, etc.

I think the example above can be improved, especially by using classes and inheritance, but it already provides good separation of layout/styling/code and greatly simplifies creation and maintenance of pages.

I hope to soon post a complete template that showcases the approach above, with other accompanying functionality to make it very easy to use, that can also give newcomers a headstart with BeeWare/Toga. Let me know if that's something useful and I can share it here when it's up.

Note: The code above is a stripped down version of an app I'm building, so I didn't test before posting here, so it might not work without a few tweaks/fix-ups ;)

[freakboy3742]

This is, essentially, the eternal conflict between markup languages and programming languages.

Markup languages are "simple" because they don't have iteration logic, references, and so on; but that also means that "simple" tasks like identifying repeated blocks of content are difficult to represent. So - you either add iteration and variables to your "simple" markup language, or you make your "simple" language more complex until it can represent complex ideas... at which point, you've essentially invented Yet Another Programming Language.

The principal (and, I'd argue, only) advantage of markup languages is that they're well suited to modification by other tools - e.g., in this case a GUI app designer. In that usage, the "complexity" introduced by using Python is counterproductive - you explicitly want a simple-to-parse language like XML or JSON, specifically because they can be unambiguously parsed in a single pass.

However, such a language isn't inherently easier to write until the GUI design tool actually exists. This is why we've been focussing on getting Toga's API feature complete, rather than trying to develop a markup language.

[hyuri]

Ah, I see! Makes sense. Indeed making it easier for GUI designer tools to support targeting Toga would be really helpful.
But yeah, going for Toga API feature completeness is definitely more positively impactful for now.

[Heus-Sueh]

I was initially interested in this as well, but then I realized we really "already have it" but in Python syntax as @freakboy3742 mentioned. The example you gave on #2293 is pretty much what we can already do in Python— but we can do more with Python.

In fact, we can pretty easily break our code down into the 3 different components — layout, styling, and logic — just like we would with HTML + CSS + Code(Python/JavaScript/etc.).

Here's a rough example:

Layout

home.py

import toga

from myapp.pages import common_body
from myapp.stylesheet import main_box,box_padded, label_h1, label_tagline, button_primary


name = "Home"
title = "Welcome to My App!"

def render(app):
    # Define our body
    body = toga.Box(
        style=box_main,
        children=[

            toga.Box(
                style=box_padded,
                children=[

                    # App name label
                    toga.Label(text=app.formal_name, style=label_h1),

                    # Subtext label
                    toga.Label(text="Welcome!", style=label_tagline),

                    # Create a series of buttons programatically, from a dictionary of actions we might have stored in app.actions.home
                    *[toga.Button(text=name, on_press=action) for name, action in app.actions.home.items()],

                    # Ok button
                    toga.Button(id="ok_button", text="Ok", on_press=app.confirm_action, style=button_primary),
                ]
            ),
        ]
    )
    
    # Combine our body with our imported common_body (shared layout that all pages use)
    page = common_body.render(body)

    return page

Styling

stylesheet.py

from toga.style import Pack
from toga.style.pack import COLUMN, ROW, CENTER, TOP, BOTTOM, BOLD


box_main = Pack(
    background_color=background_color,
    direction=COLUMN,
    padding=0,
    flex=1
)

box_padded = Pack(
    direction=COLUMN,
    padding=20,
    flex=1
)

label_h1 = Pack(
    font_size=h1_size,
    font_weight=BOLD,
    color=h1_color,
    text_align=CENTER,
)

button_primary = Pack(
    flex=1,
    color="white",
    background_color="blue",
    padding=20,
)

Then, assuming you have a pages.py that lists all available pages, your app.py can be as simple as:

Logic

app.py

import toga

from myapp import pages

class MyApp(toga.App):
    def setup(self):
        self.main_window = toga.MainWindow(title=self.formal_name)

        self.page = pages.by_name["home"].render(self)

        self.main_window.content = self.page
        self.main_window.show()

    [your other toga/app-specific functions here]

Two things to note:

1. In the page code, notice how we can use a `for` loop to programatically add multiple widgets in sequence. This is powerful and you don't normally get that with markup without an additional templating system;

2. Also in the page code, notice how I broke the layout down even further with the common layout (shared amongst all pages) abstracted into a separate file called "common_body" that I can simply import and place/use wherever I want. So when I change common_body, all pages that use it are automatically updated. It's like what a templating system like Jinja2 does. We can even build a complex set of widgets in separate files and simply import them into each relevant page, modularizing even more.

So now, after toying around with Toga, I think the markup option is a nice bonus but definitely not necessary. I think we benefit more by focusing on improving Toga, like fixing issues with vertical centering, background images support, making more widgets available, etc.

I think the example above can be improved, especially by using classes and inheritance, but it already provides good separation of layout/styling/code and greatly simplifies creation and maintenance of pages.

I hope to soon post a complete template that showcases the approach above, with other accompanying functionality to make it very easy to use, that can also give newcomers a headstart with BeeWare/Toga. Let me know if that's something useful and I can share it here when it's up.

Note: The code above is a stripped down version of an app I'm building, so I didn't test before posting here, so it might not work without a few tweaks/fix-ups ;)

Thanks for the example, after playing a little more with toga, I realized that a markup language is not so necessary, toga is simple and powerful, just like python, when I made this post my only experience with GUI was QT and QML, QT is very complicated by default and QML comes to fix this, but Toga does not have this complexity problem like QT or GTK with some complicated names, parameters and functions

[Heus-Sueh]

@hyuri could you explain this page system that you implemented in your app, I found the way you implemented it interesting and I would like to implement it in my app too