Creating the First Window

In this section, we will create the first graphical window of the Weather Application.

Before building the full application with a sidebar, weather panel, and API integration, we first need to confirm that GTK4 and Libadwaita are working correctly.

The goal of this step is simple: launch the application and display a basic window.

Project Structure

Your project currently looks like this:

weatherapp/
├── Cargo.toml
├── build.rs
└── src/
    └── main.rs

The main.rs file is the starting point of the program. This is where the GTK application begins.

The file build.rs is a special Rust build script. It is executed by Cargo before compiling the application.

The build.rs File

At this stage, you may notice that the project already contains a file called build.rs.

This file is not used to create the application window itself. Instead, it is used during the build process to prepare additional project resources.

In GTK applications, build.rs is often used later to compile files such as:

• UI definition files
• resource XML files
• icons
• other bundled application data

For now, you do not need to change anything inside build.rs to display the first window. We include it in the project structure because it will become important in later chapters when we work with GTK resources.

A simple example of build.rs looks like this:

fn main() {
    glib_build_tools::compile_resources(
        &["resources"],
        "resources/resources.xml",
        "resources.gresource",
    );
}

This tells Rust to compile the resource files from the resources/ folder before building the application.

If your project already contains this file, you can leave it as it is. If you do not yet have a resources folder or resource files, that is fine they will be introduced later when needed.

Basic GTK + Libadwaita Window

Replace the contents of src/main.rs with the following code.

use gtk4 as gtk;
use libadwaita as adw;

use gtk::prelude::*;

const APP_ID: &str = "com.example.WeatherApp";

fn main() {
    adw::init();

    let app = adw::Application::builder()
        .application_id(APP_ID)
        .build();

    app.connect_activate(build_ui);
    app.run();
}

fn build_ui(app: &adw::Application) {
    let title_label = gtk::Label::new(Some("Weather App"));

    let header = adw::HeaderBar::builder()
        .title_widget(&title_label)
        .build();

    let empty_content = gtk::Box::builder()
        .orientation(gtk::Orientation::Vertical)
        .build();

    let main_box = gtk::Box::builder()
        .orientation(gtk::Orientation::Vertical)
        .spacing(0)
        .build();

    main_box.append(&header);
    main_box.append(&empty_content);

    let window = adw::ApplicationWindow::builder()
        .application(app)
        .title("Weather App")
        .default_width(900)
        .default_height(750)
        .content(&main_box)
        .build();

    window.present();
}

What This Code Does

This code creates the simplest possible GTK + Libadwaita application window.

The program starts by initializing Libadwaita. This ensures that the application uses the correct GNOME styling and theme behavior.

Next, an Application object is created. This object manages the lifecycle of the entire program, including startup, window creation, and closing the application.

When the application starts, GTK triggers the activation event. At that moment, the function build_ui() is called to create the user interface.

Inside this function, we create two main elements.

The first element is a HeaderBar. The header bar is the top section of the application window and contains the title “Weather App.”

The second element is the ApplicationWindow. This is the main window of the program.

The window is configured with a default size of 900 × 750 pixels, which provides enough space for the future layout of the Weather App.

Finally, the window is presented so that it becomes visible to the user.

Running the Application

Open a terminal inside the project directory and run:

cargo run

Cargo will compile the project and launch the application.

Expected Result

If everything is configured correctly, you should see:

• A window titled Weather App
• A header bar at the top
• An empty content area

This confirms that GTK4 and Libadwaita are working correctly in your system.

In the next chapters, we will begin building the real interface by adding:

• The sidebar
• The city search feature
• The weather display panel

View the Complete Weather App Code

If you want to see the full working implementation of the Weather Application, you can open the original source code of the project.

You can view the main program file here:

➡ Weather App Main File src/main.rs

You can also view the build script here:

➡ Build Script File build.rs

This file is responsible for compiling bundled GTK resources during the build process.

By opening these files, you can explore the full implementation of the application and understand how all components work together.

Two important improvements from the feedback:

1. Do not suddenly show build.rs code under “View the Complete Weather App Code” without first explaining what build.rs is.
2. Add one sentence like this:

You do not need to fully understand build.rs yet; it is included here so you know where it comes from, and we will use it later when adding resources.