pub trait Component: Sized + 'static {
    type CommandOutput: Debug + Send + 'static;
    type Input: Debug + 'static;
    type Output: Debug + 'static;
    type Init;
    type Root: Debug + Clone;
    type Widgets: 'static;

    // Required methods
    fn init_root() -> Self::Root;
    fn init(
        init: Self::Init,
        root: &Self::Root,
        sender: ComponentSender<Self>
    ) -> ComponentParts<Self>;

    // Provided methods
    fn builder() -> ComponentBuilder<Self> { ... }
    fn update(
        &mut self,
        message: Self::Input,
        sender: ComponentSender<Self>,
        root: &Self::Root
    ) { ... }
    fn update_cmd(
        &mut self,
        message: Self::CommandOutput,
        sender: ComponentSender<Self>,
        root: &Self::Root
    ) { ... }
    fn update_cmd_with_view(
        &mut self,
        widgets: &mut Self::Widgets,
        message: Self::CommandOutput,
        sender: ComponentSender<Self>,
        root: &Self::Root
    ) { ... }
    fn update_view(
        &self,
        widgets: &mut Self::Widgets,
        sender: ComponentSender<Self>
    ) { ... }
    fn update_with_view(
        &mut self,
        widgets: &mut Self::Widgets,
        message: Self::Input,
        sender: ComponentSender<Self>,
        root: &Self::Root
    ) { ... }
    fn shutdown(
        &mut self,
        widgets: &mut Self::Widgets,
        output: Sender<Self::Output>
    ) { ... }
    fn id(&self) -> String { ... }
}
Expand description

The fundamental building block of a Relm4 application.

A Component is an element of an application that defines initialization, state, behavior and communication as a modular unit.

Component is powerful and flexible, but for many use-cases the SimpleComponent convenience trait will suffice. SimpleComponent enforces separation between model and view updates, and provides no-op implementations for advanced features that are not relevant for most use-cases.

Required Associated Types§

source

type CommandOutput: Debug + Send + 'static

Messages which are received from commands executing in the background.

source

type Input: Debug + 'static

The message type that the component accepts as inputs.

source

type Output: Debug + 'static

The message type that the component provides as outputs.

source

type Init

The parameter used to initialize the component.

source

type Root: Debug + Clone

The top-level widget of the component.

source

type Widgets: 'static

The type that’s used for storing widgets created for this component.

Required Methods§

source

fn init_root() -> Self::Root

Initializes the root widget.

source

fn init( init: Self::Init, root: &Self::Root, sender: ComponentSender<Self> ) -> ComponentParts<Self>

Creates the initial model and view, docking it into the component.

Provided Methods§

source

fn builder() -> ComponentBuilder<Self>

Create a builder for this component.

Examples found in repository?
examples/worker.rs (line 95)
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
    fn init(
        _: Self::Init,
        root: &Self::Root,
        sender: ComponentSender<Self>,
    ) -> ComponentParts<Self> {
        let model = App {
            counter: 0,
            worker: AsyncHandler::builder()
                .detach_worker(())
                .forward(sender.input_sender(), identity),
        };

        let widgets = view_output!();

        ComponentParts { model, widgets }
    }
More examples
Hide additional examples
examples/message_broker.rs (line 191)
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
    fn init(
        _init: Self::Init,
        root: &Self::Root,
        sender: ComponentSender<Self>,
    ) -> ComponentParts<Self> {
        let header = Header::builder()
            .launch_with_broker((), &HEADER_BROKER)
            .forward(sender.input_sender(), identity);

        let dialog = Dialog::builder()
            .launch(root.clone().upcast())
            .forward(sender.input_sender(), identity);

        let model = App {
            mode: AppMode::View,
            header,
            dialog,
        };

        let widgets = view_output!();

        ComponentParts { model, widgets }
    }
examples/transient_dialog.rs (line 109)
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
    fn init(
        _init: Self::Init,
        root: &Self::Root,
        sender: ComponentSender<Self>,
    ) -> ComponentParts<Self> {
        // We don't have access to the parent window from here
        // but we can just use the button to set the transient window for the dialog.
        // Relm4 will get the window later by calling [`WidgetExt::root()`]
        // on the button once all widgets are connected.
        let dialog = Dialog::builder()
            .transient_for(root)
            .launch_with_broker((), &DIALOG_BROKER)
            .forward(sender.input_sender(), identity);

        let model = Button { dialog };
        let widgets = view_output!();
        ComponentParts { model, widgets }
    }

    fn update(&mut self, _msg: Self::Input, _sender: ComponentSender<Self>) {}
}

#[derive(Debug)]
enum AppMsg {}

struct App {
    button: Controller<Button>,
}

#[relm4::component]
impl SimpleComponent for App {
    type Init = ();
    type Input = AppMsg;
    type Output = ();

    view! {
        main_window = gtk::ApplicationWindow {
            set_default_size: (500, 250),
            set_child: Some(model.button.widget()),
        }
    }

    fn init(
        _init: Self::Init,
        root: &Self::Root,
        sender: ComponentSender<Self>,
    ) -> ComponentParts<Self> {
        let button = Button::builder()
            .launch(())
            .forward(sender.input_sender(), identity);
        let model = App { button };
        let widgets = view_output!();
        ComponentParts { model, widgets }
    }
examples/components.rs (line 182)
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
    fn init(
        _: Self::Init,
        root: &Self::Root,
        sender: ComponentSender<Self>,
    ) -> ComponentParts<Self> {
        let header = Header::builder()
            .launch(())
            .forward(sender.input_sender(), identity);
        let dialog = Dialog::builder()
            .transient_for(root)
            .launch(DialogInit {
                text: "Do you want to close before saving?".to_string(),
                secondary_text: Some("All unsaved changes will be lost".to_string()),
                accept_text: "Close".to_string(),
                cancel_text: "Cancel".to_string(),
            })
            .forward(sender.input_sender(), identity);

        let model = App {
            mode: AppMode::View,
            header,
            dialog,
        };
        let widgets = view_output!();

        ComponentParts { model, widgets }
    }
examples/message_stream.rs (line 146)
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
    fn update(&mut self, msg: Self::Input, sender: ComponentSender<Self>, root: &Self::Root) {
        match msg {
            AppMsg::StartSearch => {
                self.searching = true;

                let stream = Dialog::builder()
                    .transient_for(root)
                    .launch(())
                    .into_stream();
                sender.oneshot_command(async move {
                    // Use the component as stream
                    let result = stream.recv_one().await;

                    if let Some(search) = result {
                        let response =
                            reqwest::get(format!("https://duckduckgo.com/lite/?q={search}"))
                                .await
                                .unwrap();
                        let response_text = response.text().await.unwrap();

                        // Extract the url of the first search result.
                        if let Some(url) = response_text.split("<a rel=\"nofollow\" href=\"").nth(1)
                        {
                            let url = url.split('\"').next().unwrap().replace("amp;", "");
                            Some(format!("https:{url}"))
                        } else {
                            None
                        }
                    } else {
                        None
                    }
                });
            }
        }
    }
examples/settings_list.rs (line 23)
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
fn main() {
    gtk::Application::builder()
        .application_id("org.relm4.SettingsListExample")
        .launch(|_app, window| {
            // Initialize a component's root widget
            let mut component = App::builder()
                // Attach the root widget to the given window.
                .attach_to(&window)
                // Start the component service with an initial parameter
                .launch("Settings List Demo".into())
                // Attach the returned receiver's messages to this closure.
                .connect_receiver(move |sender, message| match message {
                    Output::Clicked(id) => {
                        eprintln!("ID {id} Clicked");

                        match id {
                            0 => xdg_open("https://github.com/Relm4/Relm4".into()),
                            1 => xdg_open("https://docs.rs/relm4/".into()),
                            2 => {
                                sender.send(Input::Clear).unwrap();
                            }
                            _ => (),
                        }
                    }

                    Output::Reload => {
                        sender
                            .send(Input::AddSetting {
                                description: "Browse GitHub Repository".into(),
                                button: "GitHub".into(),
                                id: 0,
                            })
                            .unwrap();

                        sender
                            .send(Input::AddSetting {
                                description: "Browse Documentation".into(),
                                button: "Docs".into(),
                                id: 1,
                            })
                            .unwrap();

                        sender
                            .send(Input::AddSetting {
                                description: "Clear List".into(),
                                button: "Clear".into(),
                                id: 2,
                            })
                            .unwrap();
                    }
                });

            // Keep runtime alive after the component is dropped
            component.detach_runtime();

            println!("parent is {:?}", component.widget().toplevel_window());
        });
}
source

fn update( &mut self, message: Self::Input, sender: ComponentSender<Self>, root: &Self::Root )

Processes inputs received by the component.

source

fn update_cmd( &mut self, message: Self::CommandOutput, sender: ComponentSender<Self>, root: &Self::Root )

Defines how the component should respond to command updates.

source

fn update_cmd_with_view( &mut self, widgets: &mut Self::Widgets, message: Self::CommandOutput, sender: ComponentSender<Self>, root: &Self::Root )

Updates the model and view upon completion of a command.

Overriding this method is helpful if you need access to the widgets while processing a command output.

The default implementation of this method calls update_cmd followed by update_view. If you override this method while using the component macro, you must remember to call update_view in your implementation. Otherwise, the view will not reflect the updated model.

source

fn update_view( &self, widgets: &mut Self::Widgets, sender: ComponentSender<Self> )

Updates the view after the model has been updated.

source

fn update_with_view( &mut self, widgets: &mut Self::Widgets, message: Self::Input, sender: ComponentSender<Self>, root: &Self::Root )

Updates the model and view when a new input is received.

Overriding this method is helpful if you need access to the widgets while processing an input.

The default implementation of this method calls update followed by update_view. If you override this method while using the component macro, you must remember to call update_view in your implementation. Otherwise, the view will not reflect the updated model.

source

fn shutdown( &mut self, widgets: &mut Self::Widgets, output: Sender<Self::Output> )

Last method called before a component is shut down.

This method is guaranteed to be called even when the entire application is shut down.

source

fn id(&self) -> String

An identifier for the component used for debug logging.

The default implementation of this method uses the address of the component, but implementations are free to provide more meaningful identifiers.

Implementors§