TabWidget - Tab callback to update contents

[JohnnyWulgaru]

I am trying to make a simple application that has a few tabs. Each tab displays some information retrieved from a web service.
When a specific tab is selected I want to update the contents from the web service to make sure the user sees the latest information.

I've been looking through the documentation and examples but couldn't find anything.
I didn't see any callback or similar method, I only saw that TabWidget has a current-index property, but as far as I can tell you can't listen to property changes.

Maybe there is another way to achieve this that I am not thinking of?

Thanks!

[ogoffart]

There is currently no such callback.
Perhaps there should be one.

In the mean time, there is a workaround to simulate change events with #112 (comment)

[JohnnyWulgaru]

It probably would be useful to have such a callback. I am coming from the Java/JavaFX world and there you can add event listeners to almost all properties. This is super powerful but you can also easily shoot yourself in the foot with them.

I tried to implement the workaround from the linked comment but can't get it to work.
I am running into a Call of impure callback 'my-callback' error. Looks like something changed since that comment was made.

With this .slint-Code I get the "impure callback" error:

export component Demo inherits Window {
    callback my_callback(bool) -> color;
    my_callback(x) => { debug("HELLO", x); white; }
    background: my_callback(touch.has-hover);
    touch := TouchArea {  height: 50%;  }
}

While the older syntax to define components only gives a warning:

export appWindow := Window {
    callback my_callback(bool) -> color;
    my_callback(x) => { debug("HELLO", x); black; }
    background: my_callback(touch.has-hover);
    touch := TouchArea {  height: 50%;  }
}

[Vadoola]

I believe you just need to mark the callback as pure as below:

export component Demo inherits Window {
    pure callback my_callback(bool) -> color;
    my_callback(x) => { debug("HELLO", x); white; }
    background: my_callback(touch.has-hover);
    touch := TouchArea {  height: 50%;  }
}

[JohnnyWulgaru]

I could have sworn I tried this. Thanks that did the job.

[mrpew]

Could you share a snippet showing how you implemented this with the current-index property?
I am having the same issue, however this does not work for me (The handler registered in rust code is not called):

export component AppWindow inherits Window {

    preferred-width: 700px;
    preferred-height: 500px;

    pure callback tab-changed(int) -> int;
    property <int> workaround: tab-changed(tw.current-index);

    VerticalLayout {

        tw := TabWidget {
            //current-index: root.tab-changed(self.current-index);
            Tab {
                title: "A";
            }

            Tab {
                title: "B";
            }

            Tab {
                title: "C";
            }
        }
    }
}

    let ui = AppWindow::new()?;
    let ui_weak = ui.as_weak();
    let app = App::init(ui_weak);

    ui.on_tab_changed({
        let app = app.clone();
        move |tab| {
            log::debug("tab changed to {tab}");
            let mut app = app.lock().unwrap();
            app.on_tab_changed(Tabs::from_tab_index(tab));
            0
        }
    });