ComboBox binding to global property

[0x6e]

Hello,

I'm looking for advice on how to bind a ComboBox curent-index/currnet-value to a property on a global whilst still allowing the user to make a selection.

In my example, the ComboBox current-value remains bound to the Auth.role-name property whilst the "Elevate" and "De-auth" buttons are clicked. As soon as the user makes a selection using the ComboBox, the binding is broken. Is there a recommended approach to making this kind of binding?

Edit: I would explicitly like to keep the Auth out properties as out properties. The goal is to enforce the use of the public API, rather than let anyone set these properties directly. You cannot make a two-way binding to an out property.

My example code is here: slint-combobox-binding.zip.

import { GridBox, SpinBox, ComboBox, Button, HorizontalBox } from "std-widgets.slint";

@rust-attr(derive(enum_iterator::Sequence))
enum Role {
    Operator,
    Admin,
}

export global Roles {
    out property <[string]> role-names: [@tr("Operator"), @tr("Admin")];

    pure callback to-index(Role) -> int;
    pure callback from-index(int) -> Role;

    pure callback role-name(Role) -> string;
}

export global Auth {
    out property <Role> role: Role.Admin;
    out property <string> role-name: Roles.role-name(self.role);

    public function authenticate-as(role: Role) {
        // Should be a callback to allow the application logic to handle authentication.
        // For now we just accept the new role.
        self.role = role;
    }

    // Simulate authentication timing out
    public function deauth() {
        self.role = Role.Operator;
    }
}

export component AppWindow inherits Window {

    GridBox {
        Row {
            Text {
                text: "Role:";
                vertical-alignment: center;
            }

            ComboBox {
                model: Roles.role-names;
                current-value: Auth.role-name;
                selected(current-value) => {
                    Auth.authenticate-as(Roles.from-index(self.current-index));
                }
            }
        }

        Row {
            Text {
                text: "Auth.role:";
            }

            Text {
                text: Auth.role-name;
            }
        }

        Row {
            HorizontalBox {
                colspan: 2;
                padding: 0;

                Button {
                    text: "Elevate";
                    clicked => {
                        Auth.authenticate-as(Role.Admin);
                    }
                }

                Button {
                    text: "De-auth";
                    clicked => {
                        Auth.deauth();
                    }
                }
            }
        }
    }
}

[Vadoola]

I believe what you are looking for is a two way binding. Here is your code updated (but I haven't tested this)

https://docs.slint.dev/latest/docs/slint/guide/language/concepts/reactivity/#two-way-bindings

#5893

[0x6e]

I explicitly wanted Auth role and role-name as out properties only. The goal is to enforce that they are modified by the Auth logic only, and cannot just be set by anyone.

Thanks for looking though.

[Vadoola]

Ah, perhaps the Slint devs can chime in, but if that's the case I'm not sure (off the top of my head) how to make it work. By having the global properties be out properties, they can't be set from the outside, so the combo box can't update them....

Hmm.. random idea, no clue if it would work. Trying to manually create the two way binding? You are using the combo box selected callback to call the authenticate-as callback and updating the Auth::role value. Could you possibly use a change callback on the Auth::role to update the combobox? Of course that might in turn create a loop...I haven't tried this, you might need to add in some more smarts.

[antis81]

Try two-way-bindings (every "property alias" actually is a two-way-binding - took me a while to get the hang. Really nice feature though)…

auth-select := ComboBox {
    // replace the ":" with "<=>"
    current-value <=> Auth.role-name;
}

Thats basically all you have to do!

[0x6e]

I would explicitly like to keep the Auth out properties as out properties. The goal is to enforce the use of the public API, rather than let anyone set these properties directly. You cannot make a two-way binding to an out property.

[antis81]

I have a very similar use case (but completely different context… 🤣). If Slint would support a generic model for ComboBox (practically just like ListView vs StandardListView already does) this would be easy, but now we have to translate back and forth between string and enum. With Slint 1.12.1 I couldn't find a way to work around this (:cry:). Maybe have a look at #8959 and my feature request for "delegates".

[0x6e]

I think that better handling for enums would also resolve your problem. E.g. if we could:

• iterate on enum values;
• write a match statement for an enum;

then we could write Slint functions that convert between index and enum, and write Slint functions that can provide a translated string model.