How to deal with callbacks in nested component.

[laycookie]

Hello, I need to modify some data on form submission. The form itself is a component located inside a MainWindow however I don't want to define all the callbacks in the MainWindow component as they will just be way too many of them at a certain point. This is my current code, is there any way I can improve it?

import { VerticalBox, TextEdit, Button, LineEdit } from "std-widgets.slint";

component LoginForm {
    in property <string> service;
    out property <string> token: "";
    callback add_token(string);

    VerticalBox {
        Text {
            text: root.service;
        }
        LineEdit {
            text: root.token;
            placeholder-text: "Token";
        }
        Button {
            text: "Login";
            clicked => { root.add_token(root.token) }
        }
    }
}

enum Pages {
    Login,
    Chat,
}

export component MainWindow inherits Window {
    in-out property <Pages> current_page: Pages.Login;

    if (current_page == Pages.Login): LoginForm {
        width: root.width > 512px ? 512px : root.width / 2;
        service: "Discord";
    } if (current_page == Pages.Chat): Text { 
		text: "test";
	}

}

    let ui = MainWindow::new().unwrap();
    ui.form.add_token(|token| {}); // Does not work as of now.

[ogoffart]

Two ways:

1. forward the callback to the root:

export component MainWindow inherits Window {
    callback add_token(string);
    in-out property <Pages> current_page: Pages.Login;

    if (current_page == Pages.Login): LoginForm {
        add_token(str) => { root.add_token(str); }
//...

2. Or alternatively, use a global:

export global LoginFormLogic {
    callback add_token(string);
}

component LoginForm {
    in property <string> service;
    out property <string> token: "";
    
    VerticalBox {
        Text {
            text: root.service;
        }
        LineEdit {
            text: root.token;
            placeholder-text: "Token";
        }
        Button {
            text: "Login";
            clicked => { LoginFormLogic.add_token(root.token) }
        }
    }
}

And then you can connect to the global in the Rust code.

I hope this helps.