Howdy World! – GUI growth with Rust and GTK 4

2023-04-24 09:40:54

Now that we have a working set up, let’s get proper into it!

On the very least, we have to create a gtk::Application occasion with an application id.
For that we use the builder pattern which many gtk-rs objects help.
Be aware that we additionally import the prelude to carry the required traits into scope.

Filename: listings/hello_world/1/main.rs

use gtk::prelude::*;
use gtk::{glib, Utility};

const APP_ID: &str = "org.gtk_rs.HelloWorld1";

fn fundamental() -> glib::ExitCode {
    // Create a brand new software
    let app = Utility::builder().application_id(APP_ID).construct();

    // Run the appliance
    app.run()
}

It builds advantageous, however nothing however a warning in our terminal seems.

GLib-GIO-WARNING: Your software doesn't implement g_application_activate()
and has no handlers related to the 'activate' sign. It ought to do one in all these.

GTK tells us that one thing needs to be known as in its activate step.
So let’s create a gtk::ApplicationWindow there.

Filename: listings/hello_world/2/main.rs

use gtk::prelude::*;
use gtk::{glib, Utility, ApplicationWindow};

const APP_ID: &str = "org.gtk_rs.HelloWorld2";

fn fundamental() -> glib::ExitCode {
    // Create a brand new software
    let app = Utility::builder().application_id(APP_ID).construct();

    // Hook up with "activate" sign of `app`
    app.connect_activate(build_ui);

    // Run the appliance
    app.run()
}

fn build_ui(app: &Utility) {
    // Create a window and set the title
    let window = ApplicationWindow::builder()
        .software(app)
        .title("My GTK App")
        .construct();

    // Current window
    window.current();
}

That’s higher!

An empty window with a header bar with label 'My GTK App'

Usually we anticipate to have the ability to work together with the person interface.
Additionally, the title of the chapter means that the phrase “Howdy World!” will probably be concerned.

Filename: listings/hello_world/3/main.rs

use gtk::prelude::*;
use gtk::{glib, Utility, ApplicationWindow, Button};
const APP_ID: &str = "org.gtk_rs.HelloWorld3";

fn fundamental() -> glib::ExitCode {
    // Create a brand new software
    let app = Utility::builder().application_id(APP_ID).construct();

    // Hook up with "activate" sign of `app`
    app.connect_activate(build_ui);

    // Run the appliance
    app.run()
}

fn build_ui(app: &Utility) {
    // Create a button with label and margins
    let button = Button::builder()
        .label("Press me!")
        .margin_top(12)
        .margin_bottom(12)
        .margin_start(12)
        .margin_end(12)
        .construct();

    // Hook up with "clicked" sign of `button`
    button.connect_clicked(|button| {
        // Set the label to "Howdy World!" after the button has been clicked on
        button.set_label("Howdy World!");
    });

    // Create a window
    let window = ApplicationWindow::builder()
        .software(app)
        .title("My GTK App")
        .little one(&button)
        .construct();

    // Current window
    window.current();
}

If you happen to look intently on the code snippet you’ll discover that it has a small eye image on its prime proper.
After you press on it you’ll be able to see the total code of the itemizing.
We are going to use this all through the guide to cover particulars which aren’t vital to carry the message throughout.
Take note of this if you wish to write apps by following the guide step-by-step.
Right here, we have hidden that we introduced gtk::Button into scope.

There’s now a button and if we click on on it, its label turns into “Howdy World!”.