Home

Welcome to the tuix wiki!

Quick start guide

Create a window

The following code creates an empty window application:

extern crate tuix;

use tuix::Application;

fn main() {
    let mut app = Application::new(|win_desc, state, window| {   

        win_desc.with_title("Tuix").set_inner_size(800, 600)
    });
        
    app.run();
}

The Application::new() function takes a closure which provides us with 3 things: the WindowDescription, the State, and the Entity id for the window. The window description lets us alter properties of the window such as the title and size.

The State is kind of like a database which stores all of the properties of our widgets.

An Entity is just an ID used to store and retreive properties from the State.

Adding widgets

We can add built-in widgets by first including them at the top of the file, eg. use tuix::widgets::Button, and then creating and building them inside the application closure:

extern crate tuix;

use tuix::Application;
use tuix::widgets::Button;

fn main() {
    let mut app = Application::new(|win_desc, state, window| {   

        Button::new().build(state, window, |builder| builder);

        win_desc.with_title("Tuix").set_inner_size(800, 600)
    });
        
    app.run();
}

Adding a button is split into two parts. First we create the button with Button::new(), then we build(...) the button, which adds it into the application.

In this case the new() function takes no parameters, but more complicated widgets might have local data (data not stored directly in state) which is set by the new() function. Local data can only be accessed by a widget at creation and when responding to events.

The build(...) function takes three parameters, the state, the parent entity ID, and a closure which gives us a way to set inline properties on the button.

If we run this application the window will still appear empty. This is because our widget has zero width and height and no color by default.

Styling widgets

There are two ways to style a widget: inline styling and CSS styling.

Inline Styling

We can use the builder inside the build function closure to set inline style properties on the widgets:

extern crate tuix;

use tuix::Application;
use tuix::widgets::Button;

use tuix::style::{Length, Color};

fn main() {
    let mut app = Application::new(|win_desc, state, window| {   

        Button::new().build(state, window, |builder| 
            builder
                .set_width(Length::Pixels(100.0))
                .set_height(Length::Pixels(50.0))
                .set_background_color(Color::rgb(100,50,50)))
        );

        win_desc.with_title("Tuix").set_inner_size(800, 600)
    });
        
    app.run();
}

Here we set the width, height and background color. If we run this application now we should see a red box in the top left corner of our window. Yay!