Quickly Set Your GTK Rust Environment & Start Coding!

This is one of these posts that demo how easily a Getting Started can be, and hopefully will push some people to start with GTK & Rust development! I must admit Rust + GTK is quite bitchy combination, it is not easy, but perhaps is the only solution for GNOME apps that performance matters, and bindings are very active maintained from GNOME & Mozilla contributors! Actually I see Rust as the future of GTK applications development! Might be wrong though :p

So here we go! This is a copy/paste guide, there is nothing advanced, but you should always follow projects documentation! I’m just trying to demo the major advantage of Rust! It is DAMN EASY TO START WITH!

Get Rust!

I will use Nightly Rust here, because it brings some improvements on RLS, plus there is backwards compatibility

$ curl https://sh.rustup.rs -sSf | sh -s -- --default-toolchain nightly
Rustup Github

On Tilix (or any other TE) make sure you have “Run Command as Login Shell” checked. Open a new Terminal Session

$ rustc --version
rustc 1.26.0-nightly (482a913fb 2018-03-25)

Create a New Project!

Just to make sure everything’s okay!

$ cargo new hello_rust --bin
$ cd hello_rust
$ cargo run
Compiling hello_rust v0.1.0 (file:///home/alex/Projects/Demo/hello_rust)
    Finished dev [unoptimized + debuginfo] target(s) in 0.33 secs
     Running `target/debug/hello_rust`
Hello, world!

Get RLS!

Thats the Rust Language Server that will add on editors things like code completion, types and documentation on hover, warnings & errors etc

$ rustup component add rls-preview rust-analysis rust-src
RLS on Github

Get a Code Editor!

You obviously can use any code editor you like, and as a matter of fact GNOME Builder has also support for RLS! But for first is better to go with VSCode that has a very good Rust support, and Rust plugin is written by Rustup guys

Get VSCode Insiders edition, press “Ctrl+P” and install Rust RLS Plugin

ext install rust-lang.rust
VSCode RLS on Github

Now open the “hello_rust” project you created before, and on the bottom left of VSCode you should see an RLS indicator

Try GTK-RS!

You obviously need the GTK development files, and I assume you already know how to do that! It should be something like

$ sudo dnf install gtk3-devel glib2-devel

At this point to refer that GTK-RS doesn’t support yet GTK 4.0, which is a huge drawback, considering GTK 4.0 is gonna release (hopefully) in Sept, and everyone wants to use that already!

This is a basic GTK program in Rust, I wont explain the code, it doesn’t do anything anyway, but it demos how we construct applications with modules and structs, and how we can use custom styles! oh and Medium has messed up the format a bit :/

I’m using these files

1. Cargo.toml
2. src/main.rs
3. src/components/header.rs
4. src/components/mod.rs
5. src/components/styles/app.css

On VSCode open “Cargo.toml” and add

[package]
name = "hello_rust"
version = "0.1.0"
authors = ["alex"]
[dependencies]
gdk = "0.7.0"
gtk = { version = "0.3.0", features = ["v3_22"] }

src/main.rs

extern crate gtk;
use gtk::*;
mod components;
use components::App;
fn main() {
    let app = App::new();
    app.window.show_all();
    gtk::main();
}

src/components/header.rs

use gtk::*;
pub struct Header {
    pub container: HeaderBar,
    pub hello_btn: Button,
}
impl Header {
    pub fn new() -> Header {
        let container = HeaderBar::new();
        container.set_show_close_button(true);
        container.set_title("Hello Rust!");
        let hello_btn = Button::new_with_label("Hello!");
        container.pack_start(&hello_btn);
//add "hello-btn" class
        hello_btn.get_style_context().map(|c| c.add_class("hello-btn"));
Header {
            container,
            hello_btn,            
        }
    }
}

src/components/mod.rs

mod header;
use self::header::Header;
use gtk;
use gtk::*;
use std::process;
const CSS: &str = include_str!("styles/app.css");
pub struct App {
    pub window:  Window,
    pub header:  Header,    
}
impl App {
    pub fn new() -> App {
        if gtk::init().is_err() {
            println!("failed to init GTK");
            process::exit(1);
}
let window = Window::new(WindowType::Toplevel);
        let header = Header::new();
//Add custom CSS
        let screen = window.get_screen().unwrap();
        let style = CssProvider::new();
        let _ = CssProviderExt::load_from_data(&style, CSS.as_bytes());
        StyleContext::add_provider_for_screen(&screen, &style, STYLE_PROVIDER_PRIORITY_USER);
window.set_default_size(600, 350);
        window.set_titlebar(&header.container);
window.connect_delete_event(move |_, _| {
            main_quit();
            Inhibit(false)
        });
//return
        App {
            window,
            header,
        }
    }
}

src/components/styles/app.css

.hello-btn {
    background:red;
    color:#fff;
    box-shadow:0;
    border:0;
}
headerbar {
    border:0;
    background:#fff;
}
window {
    background:#fff;
}

Now you can give

$ cargo run

And Rust will download all dependencies, compiles them, and run the application! Pretty Neat!

If you enjoy that, you can now read Rust Book and go to Rust GTK Github, and do something useful :) On their official page, you will find lots of apps you can steal code from!

You can easily publish your Rust Applications on Flathub, using the Flatpak Rust Extension! Check out the Fractal GTK-Rust Recipe!

If you want to say/ask anything, please use G+

a quick guide to get started with #Rust & #GTK!