openkit 0.1.3

A cross-platform CSS-styled UI framework for Rust
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

//! Angular-style component example.
//!
//! Demonstrates the Angular-like component system with:
//! - Structural directives (ng_if, ng_for, ng_switch)
//! - Property binding
//! - Event binding
//! - Pipes

use openkit::prelude::*;
use std::sync::atomic::{AtomicI32, Ordering};
use std::sync::Arc;

fn main() {
    // Use Arc<AtomicI32> for thread-safe state that can be shared across closures
    let count = Arc::new(AtomicI32::new(0));
    let items = ["Apple", "Banana", "Cherry", "Date"];
    let show_list = true;
    let status = "ready";

    // Clone for closures
    let count_for_display = count.clone();
    let count_for_inc = count.clone();
    let count_for_dec = count.clone();

    App::new()
        .title("Angular-Style Components")
        .size(800.0, 600.0)
        .theme(Theme::Auto)
        .run(move || {
            let current_count = count_for_display.load(Ordering::SeqCst);
            let count_inc = count_for_inc.clone();
            let count_dec = count_for_dec.clone();

            col![24;
                // Header
                label!("Angular-Style Component Demo", class: "title"),

                // Counter component
                label!("Counter with Atomic State:"),
                col![8;
                    label!(format!("Count: {}", current_count)),
                    row![8;
                        Button::new("−").on_click(move || {
                            count_dec.fetch_sub(1, Ordering::SeqCst);
                            println!("Decremented");
                        }),
                        Button::new("+").on_click(move || {
                            count_inc.fetch_add(1, Ordering::SeqCst);
                            println!("Incremented");
                        }),
                    ],
                ],

                // ng_if - Conditional rendering
                label!("Conditional Rendering (If directive):"),
                {
                    // Using the If directive
                    If::new(show_list)
                        .then(label!("✓ List is visible"))
                        .otherwise(label!("✗ List is hidden"))
                        .render()
                        .unwrap_or_else(|| label!(""))
                },

                // ng_for - List rendering
                label!("List Rendering (For directive):"),
                col![4;
                    // Using the For directive
                    Label::new(format!("• {}", items[0])),
                    Label::new(format!("• {}", items[1])),
                    Label::new(format!("• {}", items[2])),
                    Label::new(format!("• {}", items[3])),
                ],

                // ng_switch - Switch rendering
                label!("Switch Rendering (Switch directive):"),
                {
                    // Using the Switch directive
                    Switch::on(status)
                        .case("loading", label!("⏳ Loading..."))
                        .case("error", label!("❌ Error occurred"))
                        .case("ready", label!("✅ Ready to go!"))
                        .default(label!("❓ Unknown status"))
                        .render()
                        .unwrap_or_else(|| label!(""))
                },

                // Button variants with event binding
                label!("Event Binding with Button Variants:"),
                row![8;
                    button!("Primary", { println!("Primary clicked"); }),
                    button!("Secondary", Secondary, { println!("Secondary clicked"); }),
                    button!("Outline", Outline, { println!("Outline clicked"); }),
                    button!("Destructive", Destructive, { println!("Destructive clicked"); }),
                ],

                // Text field with change event
                label!("Two-way Binding Simulation:"),
                textfield!("Type here...", |value| {
                    println!("Input changed: {}", value);
                }),

                // Pipes demonstration
                label!("Pipe Transformations:"),
                {
                    let text = "hello world";
                    let upper = UppercasePipe.transform(text);
                    let lower = LowercasePipe.transform(&upper);
                    label!(format!("Original: '{}' → Upper: '{}' → Lower: '{}'", text, upper, lower))
                },
            ]
        })
        .expect("Failed to run application");
}