Feedback on messages from children

[john-]

I am working through trying to understand options for getting messages from sub-components to my Rust code. I got one option by using callbacks.

Is the this the slint way of doing this?

Approach:

• Exporting a global callback in the sub-component
• In the main.slint I am doing two way binding of that callback
• In the rust code I am referring to the main.slint callback

Note: I am in POC stage and have limited knowledge of rust and slint so may be way off base with what I actually need for my application.

main.rs

// Prevent console window in addition to Slint window in Windows release builds when, e.g., starting the app via file manager. Ignored on other platforms.
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

use std::error::Error;
use std::time::Duration;
use async_std::task;

slint::include_modules!();

fn main() -> Result<(), Box<dyn Error>> {
    let ui = AppWindow::new()?;

    ui.on_function_button_clicked(|s|{
        slint::spawn_local(async move {
            println!("Requested {}", s);
            task::sleep(Duration::from_millis(3000)).await;
            println!("done sleeping");
        }).unwrap();
    });
    ui.run()?;

    Ok(())
}

main.slint:

import { Button } from "std-widgets.slint";

import { FunctionButton, Logic } from "function-button.slint";

export component AppWindow inherits Window {
    pure callback function-button-clicked <=> Logic.function-button-clicked;

    width: 1024px;
    height: 576px;

    VerticalLayout {
        spacing: 10px;
        x: 0px;
        y: 0px;
        width: 12%;

        in property <[{label: string, image: image}]> model: [
            {label: "Telephone", image: @image-url("assets/Telephone.png") },
            {label: "Music", image: @image-url("assets/Music.png") },
            {label: "Television", image: @image-url("assets/Television.png") },
            {label: "Reminder", image: @image-url("assets/Reminder.png") },
        ];
        for data in model: FunctionButton {
            height: 120px;
            image: data.image;
            label: data.label;
        }
    }
}

function-button.slint

import { VerticalBox } from "std-widgets.slint";

export global Logic {
    pure callback function-button-clicked(string);
}

export component FunctionButton inherits Rectangle {
    in property<string> label;
    in property<image> image;

    background: lightgray;

    TouchArea {
        clicked => { Logic.function-button-clicked(root.label) }  
    }

    VerticalBox {

        Image {
            source: root.image;  
        }
        Text {
            horizontal-alignment: center;
            font-size: 20px;
            // text: my-function(1);
            text: root.label;
            
        }
    }
}

[ogoffart]

If you add export { Logic } from your main.slint, you can use

ui.global::<Logic>().on_function_button_clicked(|s|{ ...

[john-]

Thanks. I was able to get rid of the two way binding at the top of main.slint by adding that export near the top where it makes more sense.