event_binding/
event_binding.rs

1use web_ui::{WebUI, WebUIConfig, UIResponse};
2use std::sync::atomic::{AtomicU32, Ordering};
3use std::sync::Arc;
4
5#[tokio::main]
6async fn main() -> Result<(), Box<dyn std::error::Error>> {
7    // Create configuration
8    let config = WebUIConfig::default()
9        .with_port(3030)
10        .with_title("Event Binding Demo".to_string())
11        .with_static_dir("./static/event_binding".to_string());
12
13    // Create WebUI instance
14    let web_ui = WebUI::new(config);
15
16    // Shared counter for demonstrating state
17    let click_counter = Arc::new(AtomicU32::new(0));
18
19    // Bind a simple hello button
20    web_ui.bind_click("hello-btn", || {
21        println!("Hello button was clicked!");
22    }).await;
23
24    // Bind a counter button with state and response data
25    let counter_clone = click_counter.clone();
26    web_ui.bind_event("count-btn", "click", move |_event| {
27        let count = counter_clone.fetch_add(1, Ordering::SeqCst) + 1;
28        println!("Count button clicked {} times", count);
29        
30        Ok(UIResponse {
31            success: true,
32            message: Some(format!("Button clicked {} times", count)),
33            data: Some(serde_json::json!({ "count": count })),
34            request_id: None,
35        })
36    }).await;
37
38    // Bind a greeting button that uses input data
39    web_ui.bind_event("greet-btn", "click", |event| {
40        println!("Greet button event data: {:?}", event.data);
41        
42        // Try to get the name from the input field
43        let name = if let Some(name_value) = event.data.get("name-input") {
44            name_value.as_str().unwrap_or("Anonymous")
45        } else {
46            // If not provided in event data, we'll need to handle it differently
47            "Friend"
48        };
49
50        let greeting = format!("Hello, {}! Nice to meet you.", name);
51        println!("Greeting: {}", greeting);
52
53        Ok(UIResponse {
54            success: true,
55            message: Some(greeting),
56            data: Some(serde_json::json!({ 
57                "greeting_sent": true,
58                "name": name 
59            })),
60            request_id: None,
61        })
62    }).await;
63
64    // Bind input change events for real-time updates
65    web_ui.bind_event("name-input", "change", |event| {
66        if let Some(value) = event.data.get("value") {
67            if let Some(name) = value.as_str() {
68                println!("Name input changed to: {}", name);
69                return Ok(UIResponse {
70                    success: true,
71                    message: Some(format!("Name updated to: {}", name)),
72                    data: None,
73                    request_id: None,
74                });
75            }
76        }
77        
78        Ok(UIResponse {
79            success: true,
80            message: Some("Name input changed".to_string()),
81            data: None,
82            request_id: None,
83        })
84    }).await;
85
86    println!("Starting Web UI server...");
87    println!("Visit http://localhost:3030 to see the demo");
88    println!("Try clicking the buttons to see the event binding in action!");
89
90    // Start the server
91    web_ui.run().await
92}
event_binding/event_binding.rs

event_binding/
event_binding.rs
