Struct WebUIConfig

pub struct WebUIConfig {
    pub port: u16,
    pub host: [u8; 4],
    pub title: String,
    pub static_dir: String,
}

Configuration for the WebUI server.

This struct contains all the settings needed to configure and run the web server, including network settings, UI customization, and file serving options.

Examples

use web_ui::WebUIConfig;

let config = WebUIConfig::default()
    .with_port(8080)
    .with_host([0, 0, 0, 0]) // Listen on all interfaces
    .with_title("My Application".to_string())
    .with_static_dir("./public".to_string());

Fields

port: u16

Port number to bind the server to

host: [u8; 4]

Host IP address as a 4-byte array [a, b, c, d]

title: String

Title of the web application (used in HTML title tag)

static_dir: String

Directory path containing static files to serve

Implementations

impl WebUIConfig

pub fn with_port(self, port: u16) -> Self

Sets the port number for the server.

Arguments

• port - The port number to bind to (1-65535)

Examples

use web_ui::WebUIConfig;

let config = WebUIConfig::default().with_port(8080);

Examples found in repository

examples/welcome.rs (line 6)

async fn main() -> Result<(), Box<dyn std::error::Error>> {
    let config = WebUIConfig::default()
        .with_port(3030)
        .with_title("My Web App".to_string())
        .with_static_dir("./static".to_string());

    let web_ui = WebUI::new(config);
    web_ui.run().await?;
    
    Ok(())
}

examples/event_binding.rs (line 9)

async fn main() -> Result<(), Box<dyn std::error::Error>> {
    // Create configuration
    let config = WebUIConfig::default()
        .with_port(3030)
        .with_title("Event Binding Demo".to_string())
        .with_static_dir("./static/event_binding".to_string());

    // Create WebUI instance
    let web_ui = WebUI::new(config);

    // Shared counter for demonstrating state
    let click_counter = Arc::new(AtomicU32::new(0));

    // Bind a simple hello button
    web_ui.bind_click("hello-btn", || {
        println!("Hello button was clicked!");
    }).await;

    // Bind a counter button with state and response data
    let counter_clone = click_counter.clone();
    web_ui.bind_event("count-btn", "click", move |_event| {
        let count = counter_clone.fetch_add(1, Ordering::SeqCst) + 1;
        println!("Count button clicked {} times", count);
        
        Ok(UIResponse {
            success: true,
            message: Some(format!("Button clicked {} times", count)),
            data: Some(serde_json::json!({ "count": count })),
            request_id: None,
        })
    }).await;

    // Bind a greeting button that uses input data
    web_ui.bind_event("greet-btn", "click", |event| {
        println!("Greet button event data: {:?}", event.data);
        
        // Try to get the name from the input field
        let name = if let Some(name_value) = event.data.get("name-input") {
            name_value.as_str().unwrap_or("Anonymous")
        } else {
            // If not provided in event data, we'll need to handle it differently
            "Friend"
        };

        let greeting = format!("Hello, {}! Nice to meet you.", name);
        println!("Greeting: {}", greeting);

        Ok(UIResponse {
            success: true,
            message: Some(greeting),
            data: Some(serde_json::json!({ 
                "greeting_sent": true,
                "name": name 
            })),
            request_id: None,
        })
    }).await;

    // Bind input change events for real-time updates
    web_ui.bind_event("name-input", "change", |event| {
        if let Some(value) = event.data.get("value") {
            if let Some(name) = value.as_str() {
                println!("Name input changed to: {}", name);
                return Ok(UIResponse {
                    success: true,
                    message: Some(format!("Name updated to: {}", name)),
                    data: None,
                    request_id: None,
                });
            }
        }
        
        Ok(UIResponse {
            success: true,
            message: Some("Name input changed".to_string()),
            data: None,
            request_id: None,
        })
    }).await;

    println!("Starting Web UI server...");
    println!("Visit http://localhost:3030 to see the demo");
    println!("Try clicking the buttons to see the event binding in action!");

    // Start the server
    web_ui.run().await
}

template/template.rs (line 9)

async fn main() -> Result<(), Box<dyn std::error::Error>> {
    // Create configuration for your web UI
    let config = WebUIConfig::default()
        .with_port(3030)  // Change this port if needed
        .with_title("Your Web UI Component".to_string())  // Customize your title
        .with_static_dir("./template/static".to_string());  // Point to your static files directory

    // Create WebUI instance
    let web_ui = WebUI::new(config);

    // Example: Shared state (optional)
    let counter = Arc::new(AtomicU32::new(0));

    // Example 1: Simple button click handler
    web_ui.bind_click("your-button-id", || {
        println!("Button was clicked!");
        // Add your custom logic here
    }).await;

    // Example 2: Event handler with response data
    let counter_clone = counter.clone();
    web_ui.bind_event("your-button-id", "click", move |event| {
        let count = counter_clone.fetch_add(1, Ordering::SeqCst) + 1;
        println!("Event received: {:?}", event);
        
        // Return a response to the client
        Ok(UIResponse {
            success: true,
            message: Some(format!("Action completed successfully! Count: {}", count)),
            data: Some(serde_json::json!({ 
                "count": count,
            })),
            request_id: event.request_id,
        }) 
    }).await;

    // Example 3: Input field handler
    web_ui.bind_event("your-input-id", "change", |event| {
        println!("Input changed: {:?}", event.data);
        
        // Process input data
        let input_value = event.data.get("value")
            .and_then(|v| v.as_str())
            .unwrap_or("");

        Ok(UIResponse {
            success: true,
            message: Some(format!("Input received: {}", input_value)),
            data: Some(serde_json::json!({ "processed_input": input_value.to_uppercase() })),
            request_id: event.request_id,
        })
    }).await;

    // Example 4: Form submission handler
    web_ui.bind_event("your-form-id", "submit", |event| {
        println!("Form submitted: {:?}", event.data);
        
        // Extract form data from the formData object
        let form_data = event.data.get("formData")
            .and_then(|v| v.as_object());
            
        let name = form_data
            .and_then(|fd| fd.get("name"))
            .and_then(|v| v.as_str())
            .unwrap_or("Unknown");
        
        let email = form_data
            .and_then(|fd| fd.get("email"))
            .and_then(|v| v.as_str())
            .unwrap_or("No email provided");

        // Process form data here
        // You can validate, save to database, send emails, etc.

        Ok(UIResponse {
            success: true,
            message: Some(format!("Thank you, {}! Form submitted successfully.", name)),
            data: Some(serde_json::json!({ 
                "user_name": name,
                "user_email": email,
            })),
            request_id: event.request_id,
        })
    }).await;

    // Example 5: Custom event with error handling
    web_ui.bind_event("custom-action", "custom", |event| {
        println!("Custom event received: {:?}", event);
        
        // Simulate some processing that might fail
        let data = event.data.get("required_field");
        
        if data.is_none() {
            return Ok(UIResponse {
                success: false,
                message: Some("Required field is missing".to_string()),
                data: None,
                request_id: event.request_id,
            });
        }

        // Process the data...
        
        Ok(UIResponse {
            success: true,
            message: Some("Custom action completed".to_string()),
            data: Some(serde_json::json!({ "result": "success" })),
            request_id: event.request_id,
        })
    }).await;

    // Start the web server
    println!("Starting web UI server on http://localhost:3030");
    web_ui.run().await?;
    
    Ok(())
}

pub fn with_host(self, host: [u8; 4]) -> Self

Sets the host IP address for the server.

Arguments

• host - IP address as a 4-byte array [a, b, c, d]

Examples

use web_ui::WebUIConfig;

// Listen on all interfaces
let config = WebUIConfig::default().with_host([0, 0, 0, 0]);

pub fn with_title(self, title: String) -> Self

Sets the title of the web application.

Arguments

• title - The title string to use in the HTML title tag

Examples

use web_ui::WebUIConfig;

let config = WebUIConfig::default().with_title("My App".to_string());

Examples found in repository

examples/welcome.rs (line 7)

async fn main() -> Result<(), Box<dyn std::error::Error>> {
    let config = WebUIConfig::default()
        .with_port(3030)
        .with_title("My Web App".to_string())
        .with_static_dir("./static".to_string());

    let web_ui = WebUI::new(config);
    web_ui.run().await?;
    
    Ok(())
}

examples/event_binding.rs (line 10)

async fn main() -> Result<(), Box<dyn std::error::Error>> {
    // Create configuration
    let config = WebUIConfig::default()
        .with_port(3030)
        .with_title("Event Binding Demo".to_string())
        .with_static_dir("./static/event_binding".to_string());

    // Create WebUI instance
    let web_ui = WebUI::new(config);

    // Shared counter for demonstrating state
    let click_counter = Arc::new(AtomicU32::new(0));

    // Bind a simple hello button
    web_ui.bind_click("hello-btn", || {
        println!("Hello button was clicked!");
    }).await;

    // Bind a counter button with state and response data
    let counter_clone = click_counter.clone();
    web_ui.bind_event("count-btn", "click", move |_event| {
        let count = counter_clone.fetch_add(1, Ordering::SeqCst) + 1;
        println!("Count button clicked {} times", count);
        
        Ok(UIResponse {
            success: true,
            message: Some(format!("Button clicked {} times", count)),
            data: Some(serde_json::json!({ "count": count })),
            request_id: None,
        })
    }).await;

    // Bind a greeting button that uses input data
    web_ui.bind_event("greet-btn", "click", |event| {
        println!("Greet button event data: {:?}", event.data);
        
        // Try to get the name from the input field
        let name = if let Some(name_value) = event.data.get("name-input") {
            name_value.as_str().unwrap_or("Anonymous")
        } else {
            // If not provided in event data, we'll need to handle it differently
            "Friend"
        };

        let greeting = format!("Hello, {}! Nice to meet you.", name);
        println!("Greeting: {}", greeting);

        Ok(UIResponse {
            success: true,
            message: Some(greeting),
            data: Some(serde_json::json!({ 
                "greeting_sent": true,
                "name": name 
            })),
            request_id: None,
        })
    }).await;

    // Bind input change events for real-time updates
    web_ui.bind_event("name-input", "change", |event| {
        if let Some(value) = event.data.get("value") {
            if let Some(name) = value.as_str() {
                println!("Name input changed to: {}", name);
                return Ok(UIResponse {
                    success: true,
                    message: Some(format!("Name updated to: {}", name)),
                    data: None,
                    request_id: None,
                });
            }
        }
        
        Ok(UIResponse {
            success: true,
            message: Some("Name input changed".to_string()),
            data: None,
            request_id: None,
        })
    }).await;

    println!("Starting Web UI server...");
    println!("Visit http://localhost:3030 to see the demo");
    println!("Try clicking the buttons to see the event binding in action!");

    // Start the server
    web_ui.run().await
}

template/template.rs (line 10)

async fn main() -> Result<(), Box<dyn std::error::Error>> {
    // Create configuration for your web UI
    let config = WebUIConfig::default()
        .with_port(3030)  // Change this port if needed
        .with_title("Your Web UI Component".to_string())  // Customize your title
        .with_static_dir("./template/static".to_string());  // Point to your static files directory

    // Create WebUI instance
    let web_ui = WebUI::new(config);

    // Example: Shared state (optional)
    let counter = Arc::new(AtomicU32::new(0));

    // Example 1: Simple button click handler
    web_ui.bind_click("your-button-id", || {
        println!("Button was clicked!");
        // Add your custom logic here
    }).await;

    // Example 2: Event handler with response data
    let counter_clone = counter.clone();
    web_ui.bind_event("your-button-id", "click", move |event| {
        let count = counter_clone.fetch_add(1, Ordering::SeqCst) + 1;
        println!("Event received: {:?}", event);
        
        // Return a response to the client
        Ok(UIResponse {
            success: true,
            message: Some(format!("Action completed successfully! Count: {}", count)),
            data: Some(serde_json::json!({ 
                "count": count,
            })),
            request_id: event.request_id,
        }) 
    }).await;

    // Example 3: Input field handler
    web_ui.bind_event("your-input-id", "change", |event| {
        println!("Input changed: {:?}", event.data);
        
        // Process input data
        let input_value = event.data.get("value")
            .and_then(|v| v.as_str())
            .unwrap_or("");

        Ok(UIResponse {
            success: true,
            message: Some(format!("Input received: {}", input_value)),
            data: Some(serde_json::json!({ "processed_input": input_value.to_uppercase() })),
            request_id: event.request_id,
        })
    }).await;

    // Example 4: Form submission handler
    web_ui.bind_event("your-form-id", "submit", |event| {
        println!("Form submitted: {:?}", event.data);
        
        // Extract form data from the formData object
        let form_data = event.data.get("formData")
            .and_then(|v| v.as_object());
            
        let name = form_data
            .and_then(|fd| fd.get("name"))
            .and_then(|v| v.as_str())
            .unwrap_or("Unknown");
        
        let email = form_data
            .and_then(|fd| fd.get("email"))
            .and_then(|v| v.as_str())
            .unwrap_or("No email provided");

        // Process form data here
        // You can validate, save to database, send emails, etc.

        Ok(UIResponse {
            success: true,
            message: Some(format!("Thank you, {}! Form submitted successfully.", name)),
            data: Some(serde_json::json!({ 
                "user_name": name,
                "user_email": email,
            })),
            request_id: event.request_id,
        })
    }).await;

    // Example 5: Custom event with error handling
    web_ui.bind_event("custom-action", "custom", |event| {
        println!("Custom event received: {:?}", event);
        
        // Simulate some processing that might fail
        let data = event.data.get("required_field");
        
        if data.is_none() {
            return Ok(UIResponse {
                success: false,
                message: Some("Required field is missing".to_string()),
                data: None,
                request_id: event.request_id,
            });
        }

        // Process the data...
        
        Ok(UIResponse {
            success: true,
            message: Some("Custom action completed".to_string()),
            data: Some(serde_json::json!({ "result": "success" })),
            request_id: event.request_id,
        })
    }).await;

    // Start the web server
    println!("Starting web UI server on http://localhost:3030");
    web_ui.run().await?;
    
    Ok(())
}

pub fn with_static_dir(self, static_dir: String) -> Self

Sets the directory path for serving static files.

Arguments

• static_dir - Path to the directory containing static files

Examples

use web_ui::WebUIConfig;

let config = WebUIConfig::default().with_static_dir("./public".to_string());

Examples found in repository

examples/welcome.rs (line 8)

async fn main() -> Result<(), Box<dyn std::error::Error>> {
    let config = WebUIConfig::default()
        .with_port(3030)
        .with_title("My Web App".to_string())
        .with_static_dir("./static".to_string());

    let web_ui = WebUI::new(config);
    web_ui.run().await?;
    
    Ok(())
}

examples/hello.rs (line 6)

async fn main() -> Result<(), Box<dyn std::error::Error>> {
    let config = WebUIConfig::default()
        .with_static_dir("./static/hello".to_string());
    let web_ui = WebUI::new(config);
    
    // Simple button click handler
    web_ui.bind_click("hello-btn", || {
        println!("Hello, World!");
    }).await;
    
    println!("Starting simple web UI on http://localhost:3030");
    web_ui.run().await
}

examples/event_binding.rs (line 11)

async fn main() -> Result<(), Box<dyn std::error::Error>> {
    // Create configuration
    let config = WebUIConfig::default()
        .with_port(3030)
        .with_title("Event Binding Demo".to_string())
        .with_static_dir("./static/event_binding".to_string());

    // Create WebUI instance
    let web_ui = WebUI::new(config);

    // Shared counter for demonstrating state
    let click_counter = Arc::new(AtomicU32::new(0));

    // Bind a simple hello button
    web_ui.bind_click("hello-btn", || {
        println!("Hello button was clicked!");
    }).await;

    // Bind a counter button with state and response data
    let counter_clone = click_counter.clone();
    web_ui.bind_event("count-btn", "click", move |_event| {
        let count = counter_clone.fetch_add(1, Ordering::SeqCst) + 1;
        println!("Count button clicked {} times", count);
        
        Ok(UIResponse {
            success: true,
            message: Some(format!("Button clicked {} times", count)),
            data: Some(serde_json::json!({ "count": count })),
            request_id: None,
        })
    }).await;

    // Bind a greeting button that uses input data
    web_ui.bind_event("greet-btn", "click", |event| {
        println!("Greet button event data: {:?}", event.data);
        
        // Try to get the name from the input field
        let name = if let Some(name_value) = event.data.get("name-input") {
            name_value.as_str().unwrap_or("Anonymous")
        } else {
            // If not provided in event data, we'll need to handle it differently
            "Friend"
        };

        let greeting = format!("Hello, {}! Nice to meet you.", name);
        println!("Greeting: {}", greeting);

        Ok(UIResponse {
            success: true,
            message: Some(greeting),
            data: Some(serde_json::json!({ 
                "greeting_sent": true,
                "name": name 
            })),
            request_id: None,
        })
    }).await;

    // Bind input change events for real-time updates
    web_ui.bind_event("name-input", "change", |event| {
        if let Some(value) = event.data.get("value") {
            if let Some(name) = value.as_str() {
                println!("Name input changed to: {}", name);
                return Ok(UIResponse {
                    success: true,
                    message: Some(format!("Name updated to: {}", name)),
                    data: None,
                    request_id: None,
                });
            }
        }
        
        Ok(UIResponse {
            success: true,
            message: Some("Name input changed".to_string()),
            data: None,
            request_id: None,
        })
    }).await;

    println!("Starting Web UI server...");
    println!("Visit http://localhost:3030 to see the demo");
    println!("Try clicking the buttons to see the event binding in action!");

    // Start the server
    web_ui.run().await
}

template/template.rs (line 11)

async fn main() -> Result<(), Box<dyn std::error::Error>> {
    // Create configuration for your web UI
    let config = WebUIConfig::default()
        .with_port(3030)  // Change this port if needed
        .with_title("Your Web UI Component".to_string())  // Customize your title
        .with_static_dir("./template/static".to_string());  // Point to your static files directory

    // Create WebUI instance
    let web_ui = WebUI::new(config);

    // Example: Shared state (optional)
    let counter = Arc::new(AtomicU32::new(0));

    // Example 1: Simple button click handler
    web_ui.bind_click("your-button-id", || {
        println!("Button was clicked!");
        // Add your custom logic here
    }).await;

    // Example 2: Event handler with response data
    let counter_clone = counter.clone();
    web_ui.bind_event("your-button-id", "click", move |event| {
        let count = counter_clone.fetch_add(1, Ordering::SeqCst) + 1;
        println!("Event received: {:?}", event);
        
        // Return a response to the client
        Ok(UIResponse {
            success: true,
            message: Some(format!("Action completed successfully! Count: {}", count)),
            data: Some(serde_json::json!({ 
                "count": count,
            })),
            request_id: event.request_id,
        }) 
    }).await;

    // Example 3: Input field handler
    web_ui.bind_event("your-input-id", "change", |event| {
        println!("Input changed: {:?}", event.data);
        
        // Process input data
        let input_value = event.data.get("value")
            .and_then(|v| v.as_str())
            .unwrap_or("");

        Ok(UIResponse {
            success: true,
            message: Some(format!("Input received: {}", input_value)),
            data: Some(serde_json::json!({ "processed_input": input_value.to_uppercase() })),
            request_id: event.request_id,
        })
    }).await;

    // Example 4: Form submission handler
    web_ui.bind_event("your-form-id", "submit", |event| {
        println!("Form submitted: {:?}", event.data);
        
        // Extract form data from the formData object
        let form_data = event.data.get("formData")
            .and_then(|v| v.as_object());
            
        let name = form_data
            .and_then(|fd| fd.get("name"))
            .and_then(|v| v.as_str())
            .unwrap_or("Unknown");
        
        let email = form_data
            .and_then(|fd| fd.get("email"))
            .and_then(|v| v.as_str())
            .unwrap_or("No email provided");

        // Process form data here
        // You can validate, save to database, send emails, etc.

        Ok(UIResponse {
            success: true,
            message: Some(format!("Thank you, {}! Form submitted successfully.", name)),
            data: Some(serde_json::json!({ 
                "user_name": name,
                "user_email": email,
            })),
            request_id: event.request_id,
        })
    }).await;

    // Example 5: Custom event with error handling
    web_ui.bind_event("custom-action", "custom", |event| {
        println!("Custom event received: {:?}", event);
        
        // Simulate some processing that might fail
        let data = event.data.get("required_field");
        
        if data.is_none() {
            return Ok(UIResponse {
                success: false,
                message: Some("Required field is missing".to_string()),
                data: None,
                request_id: event.request_id,
            });
        }

        // Process the data...
        
        Ok(UIResponse {
            success: true,
            message: Some("Custom action completed".to_string()),
            data: Some(serde_json::json!({ "result": "success" })),
            request_id: event.request_id,
        })
    }).await;

    // Start the web server
    println!("Starting web UI server on http://localhost:3030");
    web_ui.run().await?;
    
    Ok(())
}

Trait Implementations

impl Default for WebUIConfig

fn default() -> Self

Creates a default configuration with sensible defaults.

Default Values

• Port: 3030
• Host: [127, 0, 0, 1] (localhost)
• Title: “Web UI”
• Static directory: “./static”