Building a reusable PopupWindow/Dialog

[Delphinidae84]

I am trying to build a popup component which I can reuse to display different kind of (text) information, depending on the context it was triggered from.

Therefor I built this component:

import { StandardButton, Palette } from "std-widgets.slint";

export component InfoDialog inherits PopupWindow {
    in property <string> info_text: "";
    close-policy: no-auto-close;

    Rectangle {
        background: Palette.background;
        border-color: Palette.border;
        border-width: 1px;
    }

    info_popup_layout := Dialog {
        height: 100%;
        width: 100%;
        info_popup_text := Text {
            text: root.info_text;
            wrap: word-wrap;
            font-size: 18px;
        }

        StandardButton {
            kind: ok;
            clicked => {
                root.close();
            }
        }
    }
}

This is how I try to incorporate the component into my main.slint:

import { Button, SpinBox, LineEdit } from "std-widgets.slint";
import { InfoDialog } from "info_dialog.slint";

export component MainWindow inherits Window {
    callback event_one();
    callback event_two();

    preferred-width: 800px;
    preferred-height: 600px;

    callback show_info_popup(string);
    show_info_popup(t) => {
        info_popup.info_text = t;
        info_popup.show();
    }

    info_popup := InfoDialog {
        x: (root.width - self.width) / 2;
        y: (root.height - self.height) / 2;
        width: root.width * 0.65;
        height: root.height * 0.2;
    }

    GridLayout {
        width: 100%;
        height: 100%;
        spacing: 10px;

        Row {
            Button {
                max-height: 50px;
                text: "Trigger 1";
                clicked => {
                    event_one();
                }
            }
        }

        Row {
            Button {
                max-height: 50px;
                text: "Trigger 2";
                clicked => {
                    event_two();
                }
            }
        }
    }
}

And this is my rust side of things, where I react to the callbacks triggered on the buttons:

use slint::ComponentHandle;

slint::include_modules!();

fn main() {
    let ui = MainWindow::new().unwrap();

    let ui_weak = ui.as_weak();
    ui.on_event_one({
        let ui = ui_weak.upgrade().unwrap();
        move || {
            ui.invoke_show_info_popup("Lorem Ipsum".into());
        }
    });

    let ui_weak = ui.as_weak();
    ui.on_event_two({
        let ui = ui_weak.upgrade().unwrap();
        move || {
            ui.invoke_show_info_popup("Ipsum Lorem".into());
        }
    });

    ui.run().unwrap();
}

So what I am trying to do is to find a way to pass a different string to my Popup-component. The problem is that as soon as I include the following line into my show_info_popup-callback info_popup.info_text = t;, I get an execption:

error: Cannot access the inside of a PopupWindow from enclosing component
--> \main.slint:17:19
|
| info_popup := InfoDialog {

First of all I am not really sure, what this error message is trying to tell me. Also what would be a canoncial way to implement a component like that.

[Kamil729]

I guess it's because PopupWindow doesn't allow for access of properties of elements within it from outside, and you try to access info_text from your MainWindow component.

Here's slintpad with a working version of what you're trying to do.

[Delphinidae84]

This is a working solution for me, thank you very much.