tuix 0.2.0

Cross-platform GUI toolkit
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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

use tuix::*;

const STYLE: &str = r#"

    stack {
        background-color: white;
    }

    button {
        width: 50px;
        height: 30px;
        color: black;
        background-color: gray;
        child-space: 1s;
        border-radius: 3px;
    }

    label {
        child-space: 1s;
    }

"#;

#[derive(Default)]
struct Container {
    stack: Entity,
}

impl Widget for Container {
    type Ret = Entity;
    type Data = ();
    fn on_build(&mut self, state: &mut State, entity: Entity) -> Self::Ret {

        self.stack = Stack::new()
            // .on_change(|spinbox, state, entity| {
            //     state.insert_event(Event::new(CustomEvent::ChangeColor(Color::rgba(spinbox.value, spinbox.value, spinbox.value, 255))).target(entity));
            // })
            .build(state, entity, |builder| {
                builder
            });

        // First page
        let first = Element::new().build(state, self.stack, |builder| 
            builder

                .set_background_color(Color::red())
        );
        Label::new("Red Page").build(state, first, |builder| builder.set_color(Color::black()));
        Button::with_label("Next")
            .on_press(|_, state, button|{
                button.emit(state, StackEvent::SetIndex(1));
            })
            .build(state, first, |builder|
                builder

                    .set_position_type(PositionType::SelfDirected)
                    .set_left(Stretch(1.0))
                    .set_top(Stretch(1.0))
                    .set_right(Pixels(10.0))
                    .set_bottom(Pixels(10.0))
            );

        // Second page
        let second = Element::new().build(state, self.stack, |builder| 
            builder

                .set_background_color(Color::green())
        );
        Label::new("Green Page").build(state, second, |builder| builder.set_color(Color::black()));
        Button::with_label("Next")
            .on_press(|_, state, button|{
                button.emit(state, StackEvent::SetIndex(2));
            })
            .build(state, second, |builder|
                builder

                    .set_position_type(PositionType::SelfDirected)
                        .set_left(Stretch(1.0))
                        .set_top(Stretch(1.0))
                    .set_right(Pixels(10.0))
                    .set_bottom(Pixels(10.0))
            );

        Button::with_label("Prev")
        .on_press(|_, state, button|{
            button.emit(state, StackEvent::SetIndex(0));
        })
        .build(state, second, |builder|
            builder

                .set_position_type(PositionType::SelfDirected)
                .set_left(Pixels(10.0))
                .set_top(Stretch(1.0))
                .set_right(Stretch(1.0))
                .set_bottom(Pixels(10.0))
        );

        // Third page
        let third = Element::new().build(state, self.stack, |builder| 
            builder

                .set_background_color(Color::blue())
        );
        Label::new("Blue Page").build(state, third, |builder| builder.set_color(Color::black()));
        Button::with_label("Prev")
            .on_press(|_, state, button|{
                button.emit(state, StackEvent::SetIndex(1));
            })
            .build(state, third, |builder|
                builder

                    .set_position_type(PositionType::SelfDirected)
                    .set_left(Pixels(10.0))
                    .set_top(Stretch(1.0))
                    .set_right(Stretch(1.0))
                    .set_bottom(Pixels(10.0))
            );

        entity.set_background_color(state, Color::white())
    }
}

fn main() {
    let app = Application::new(
    WindowDescription::new()
            .with_title("Stack")
            .with_inner_size(300, 300),
    |state, window| {

            window.set_background_color(state, Color::white());

            state.add_theme(STYLE);
            
            Container::default().build(state, window, |builder| builder);

        },
    );

    app.run();
}