Question: how to enumerate all components to create the element tree?

[threefoldo]

Hi, we need to find all box and buttons on a Slint window but cannot find effective ways to do that. Any advice?

For examples, the following window has 3 buttons, each button has a text.

export Demo:= Window {
    property <[string]> button_text: ["file", "edit", "help"];
    VerticalLayout {
        tab_bar := HorizontalLayout {
            Button {
                text: button_text[0];
            }
            Button {
                text: button_text[1];
            }
            Button {
                text: button_text[2];
            }
        }
    }
}

How to get something similar to an element tree:

Window
+-- button: x,y,w,h, text;
+-- button: x,y,w,h, text;

Just like the "inspector" tool in Windows.

[ogoffart]

Hi @threefoldo ,

I took the liberty to convert the issue into a discussion, which is better suited for such questions.

Do you mean to get this information in a GUI of your editor? Or programmatically?

If as part of the GUI, this would be the outline view (in vscode for example)
And we are also working on exposing the properties this way.
For example, you can see the outline and the properties tab in https://slint-ui.com/snapshots/master/editor/

[threefoldo]

Thanks for your quick reply. Yes, I want to get all properties and parent-child relations of components inside a window programmatically. The following picture is a screenshot of inspect.exe, which show the element tree of all controls. You can navigate from the root node to any control in the window.

It's similar to the properties and outline tab in slint-editor, however, I found that the editor doesn't query all the information from the root node, i.e., the Window object, but only parse the .slint file. If one component, for example, a non-standard Button, was defined in another .slint file, then the outline will not show its information. That's different from the way of inspect.exe.

Our goal is to create various UI windows programmatically, so we need to know the position and size of all components (including layout, widgets), then the program can decide whether or not to add more widgets, and where to place them.

[ogoffart]

Do you want this information at runtime or at compile time?

Currently, there is no way to get this information with the public API.

Depending on what you want to do, this might be possible using internal API.

Our goal is to create various UI windows programmatically, so we need to know the position and size of all components (including layout, widgets), then the program can decide whether or not to add more widgets, and where to place them

Could you be more specific?

From the example you gave in the first, it seems you are trying to make a menu bar.
But one would tipycally not use button_text[...] but rather

export Demo:= Window {
    property <[string]> button_text: ["file", "edit", "help"];
    tab_bar := HorizontalLayout {
        for t in button_text
            Button {
                text: t;
            }
        }
    }
}

Maybe you're trying to only show menu item if there is enough room for them?

[threefoldo]

The "for-in" expression is better. The above example is only an experiment to programmatically change the text in buttons. I can turn the .slint file into a template, by replacing real value with a variable, like this:
property <[string]> button_text: $button_text;
Then, we can generate many .slint files by replacing the variable and get different UI.

The problem is, after getting these UI, we want to query the x,y and w,h of all buttons. Since the number of buttons and the length of text are not fixed, the size and position of each button in each UI may be different.

[hunger]

5fca344 is a patch I sometimes use (not updated in a while though!) to print a dot file of the item tree in Slint.

That is way more low-level than the tree of elements you are looking for though, I do still find it interesting to look at sometimes :-)

That's an older version of the generated output. The patch dumps text in dot syntax, which you can render to svg, png or whatever using the graphviz package.