Compiler Error: Trait Bound Not Satisfied When Adding AsyncComponent as Child to gtk::Stack

[run-stop]

I am working on a GTK application where I am using Relm4 for managing my UI. I have created a Browser component that uses the WebView from webkit6. This component is defined as an Async Relm4 component.

#[relm4::component(pub async)]
impl SimpleAsyncComponent for Browser {
    type Input = BrowserInput;
    type Output = BrowserOutput;
    type Init = BrowserInit;

    view! {
        #[root]
        WebView {

        }
    }

    // ... existing implementation
}

I want to add this Browser component as a child to a gtk::Stack in my main window, like so:

view! {
        #[root]
        gtk::Window {
            ...
                #[name = "stack"]
                gtk::Stack {
                    // ... existing code
                   #[name = "browser"]
                    add_child = &Browser {} -> {
                        set_name: "browser"
                    },
                   ...
}

However, when I try to compile, I am greeted with the following error:

error[E0277]: the trait bound `browser::Browser: webkit6::glib::IsA<relm4::gtk4::Widget>` is not satisfied
   --> src/main.rs:118:29
    |
118 |                      #[name = "browser"]
    |  _____________________________^
119 | |                     add_child = &Browser {} -> {
    | |_____________________---------___^ the trait `webkit6::glib::IsA<relm4::gtk4::Widget>` is not implemented for `browser::Browser`
    |                       |
    |                       required by a bound introduced by this call

I have a couple of questions:

• Is there a way to make the Browser component satisfy the required trait bound so that it can be added to the gtk::Stack?
• Am I missing some conversions or type annotations to make this work?
• Is there a recommended way to nest an Async Relm4 component within a gtk::Stack?

Any help or guidance would be much appreciated. Thank you!

[AaronErhardt]

Is there a way to make the Browser component satisfy the required trait bound so that it can be added to the gtk::Stack?

Components in Relm4 are not compatible with widgets automatically. You can however easily access the root widget by calling .widget() on the AsyncController<Browser> and using the #[local_ref] to access the WebView from a local variable. The code should roughly look like this:

view! {
        #[root]
        gtk::Window {
            ...
                #[name = "stack"]
                gtk::Stack {
                    // ... existing code
                   #[local_ref]
                   add_child = web_view -> WebView {} -> {
                        set_name: "browser"
                    },
                   ...
}

fn init(...) {
    let browser = Browser::build().launch(...).detach();
    let web_view = browser.widget();
    let widgets = view_output!();
    // ...
}

[run-stop]

Thank you for getting back to me so quickly!

I originally did what you suggested, and it indeed works. Where I hit a snag is in figuring out how to link actions to the WebView widget.

To give you a clearer picture:

• The WebView is part of a multi-step wizard, and it needs to load a dynamic URL. So when the program starts and the main window is displayed, I want to inject or send that specific URL to the WebView instance as soon as it's visible.

• On a similar note, but unrelated to the web widget, I'm working on another widget based on gtk::Label. This widget will display a temporary code. The code gets updated every 60 seconds from an external API, and I need to refresh the displayed code in the widget accordingly.

My initial thought was to wrap the WebView in a Relm4 async component to make it reusable. Component has to be async, as I'm using reqwest to query the API.

I've also spent hours combing through code samples, but I'm struggling to translate what I see into the MVC framework or the signal/slot mechanism from Qt that I'm more familiar with.

[AaronErhardt]

Component has to be async, as I'm using reqwest to query the API.

Not necessarily, you can also handle async stuff in commands. But if you don't want to process any further messages while doing a request AsyncComponent is indeed better.

Can you be more clear about your problems? What you describe should be possible with Relm4, yet I don't understand where exactly you encountered the problem or which part of Relm4 or gtk-rs didn't work out for you yet.

[run-stop]

Let me try to explain...

Because I need to integrate Relm4 with a standard Gtk4 widget (specifically, WebView), I've found myself struggling with the app's design.

I have defined a Model struct as follows:

struct Model {
    // ... other fields ...
    button_visible: bool,
    // ... other fields ...
}

In my application, there's a button whose visibility needs to be toggled on and off, and whose label may also need to be changed at certain points. To manage this, I've defined an Msg enum like so:

enum Msg {
    // ... other variants ...
    TurnThePage,
    HideNextButton,
    ShowNextButton,
    // ... other variants ...
}

In the update() function, which is responsible for handling changes in the application state, I have code that checks the current visible page in the stack. Specifically, for the page that contains the web browser, the function prepares the URL and updates the browser by calling self.browser.load_url(&self.the_uri).

This browser is used for Azure authentication, which occurs in multiple steps. We monitor the Microsoft Graph to determine the outcome of the authentication process. This monitoring happens in a loop, executed at an interval specified by the Azure API.

To implement this loop, I am using the following code:

tokio::spawn(clone!(@strong device_code_clone, @strong interval_clone, @weak button_visible => async move  {   
    wait_for_azure_authentication(device_code_clone, interval_clone, button_visible).await;                            
}));

This spawns an asynchronous task to wait for Azure authentication, passing in the cloned device code, the interval for monitoring, and a flag to indicate the button/authentication status.

The variable button_visible changes outside the main GUI thread of the application when the user completes the authentication. However, I'm uncertain how to signal back to my application that button_visible has changed and the screen needs to be updated.

I assume I could use either of the following calls within the wait_for_azure_authentication() to achieve this:

sender.emit(Msg::ShowNextButton)

or

sender.emit(Msg::HideNextButton)

However, the sender must be of type Arc<Mutex<AsyncComponentSender<>>>. This is problematic because AsyncComponentSender is not thread-safe, meaning it cannot be shared between threads.

Is there an idiomatic approach to resolving this issue, especially given the mixture of Relm4 and Gtk4 in my application? Or should I explore using Tokio channels?

I apologize for the technical depth, but I find it challenging to explain this issue more simply.

[AaronErhardt]

Your approach sounds good and should actually work. The problems you have are likely very easy to fix.

However, the sender must be of type Arc<Mutex<AsyncComponentSender<>>>. This is problematic because AsyncComponentSender is not thread-safe, meaning it cannot be shared between threads.

You should be able to clone the sender, or at least a specific instance like .input_sender(). I don't understand what you mean with no thread-safety because all senders in Relm4 should be Send + Sync and also implement Clone.

However, commands should be a better concept for you and basically exactly what you are looking for. I recommend you to read through the threads and async chapter of the book: https://relm4.org/book/stable/threads_and_async/index.html

[run-stop]

I tried out your suggestion, and it works perfectly when I pass sender.input_sender() to the async function using Tokio. After the async function finishes processing, I can easily send a signal back to the main app.

I think using the "command recipe" approach will make the code cleaner. So, here's what I did:

• In my main program, I created the AuthenticationResult type and CommandMsg struct like this:

type AuthenticationResult = ();

#[derive(Debug)]
enum CommandMsg {
    AzureAuthentication(AuthenticationResult)
}

• I added a placeholder function called update_cmd to my main app component:

async fn update_cmd(
        &mut self,
        message: Self::CommandOutput,
        _sender: AsyncComponentSender<Self>,
        _: &Self::Root,
    ) {
        todo!()
    }

However, I ran into a compiler error:

error[E0195]: lifetime parameters or bounds on method `update_cmd` do not match the trait declaration
   --> src/main.rs:276:18
    |
276 |     fn update_cmd(
    |                  ^ lifetimes do not match method in trait

Could you provide a basic example that uses the command method with AsyncController?

I think that will clear up my confusion.

[AaronErhardt]

Mhh, I've just added your update_cmd method to the simple_async.rs example and it worked. I'm not sure why it doesn't work for you...

Unfortunately, the lack of async traits in Rust and the use of the async-trait crate could make it more challenging to debug this...

Can you try reproducing your error in a small example?

[run-stop]

I'm struggling with too many things due to my own lack of experience with GTK4/Relm4. I tried today to refactor my app by implementing some reusable components, but I ended up facing a different set of problems.

You've already helped me fix this issue, and I've marked it as resolved.

Today, I'm struggling with the proper way to end an Async Relm application. Is there another way to ask questions, like on Discord or Slack, or should I open a new question? I'm not sure if my issues will be useful for a wider audience.

[AaronErhardt]

Is there another way to ask questions, like on Discord or Slack, or should I open a new question? I'm not sure if my issues will be useful for a wider audience.

Yes, feel free to join our Matrix chat: https://relm4.org/book/stable/tricks.html#guaranteed-helpful-our-matrix-chat