Accueil Explorer Aide
Connexion
Tilo15
/
astralis
1
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

template example

Billy Barrow il y a 1 semaine
Parent
baaa1e5743
commit
4ca0513213
2 fichiers modifiรฉs avec 490 ajouts et 0 suppressions
Vue unifiรฉe Afficher les stats Diff
  1. 483 0
      examples/DocumentBuilderTemplate.vala
  2. 7 0
      examples/meson.build

+ 483 - 0
examples/DocumentBuilderTemplate.vala
Voir le fichier 

@@ -0,0 +1,483 @@
 
+using Astralis;
 
+using Astralis.Document;
 
+using Invercargill;
 
+using Invercargill.DataStructures;
 
+
 
+/**
 
+ * DocumentBuilderTemplate Example
 
+ * 
+ * Demonstrates loading an existing HTML template and modifying elements
 
+ * using the DocumentModel classes. Shows how to:
 
+ *   - Load HTML from a string template
 
+ *   - Use XPath selectors to find specific elements
 
+ *   - Modify element content, attributes, and classes
 
+ *   - Add new elements dynamically
 
+ *   - Handle form POST to update the document state
 
+ * 
+ * This example complements DocumentBuilder.vala by showing template-based
 
+ * document manipulation rather than building from scratch.
 
+ * 
+ * Usage: document-builder-template [port]
 
+ */
 
+
 
+// Application state - a simple counter
 
+class AppState : Object {
 
+    public int counter { get; set; }
 
+    public string last_action { get; set; }
 
+    public DateTime last_update { get; set; }
 
+    
+    public AppState() {
 
+        counter = 0;
 
+        last_action = "Initialized";
 
+        last_update = new DateTime.now_local();
 
+    }
 
+    
+    public void increment() {
 
+        counter++;
 
+        last_action = "Incremented";
 
+        last_update = new DateTime.now_local();
 
+    }
 
+    
+    public void decrement() {
 
+        counter--;
 
+        last_action = "Decremented";
 
+        last_update = new DateTime.now_local();
 
+    }
 
+    
+    public void reset() {
 
+        counter = 0;
 
+        last_action = "Reset";
 
+        last_update = new DateTime.now_local();
 
+    }
 
+}
 
+
 
+// Global app state
 
+AppState app_state;
 
+
 
+// HTML template loaded as a constant
 
+private const string HTML_TEMPLATE = """
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8"/>
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 
+    <title>Document Template Example</title>
 
+    <style>
 
+        body {
 
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 
+            max-width: 700px;
 
+            margin: 0 auto;
 
+            padding: 20px;
 
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
+            min-height: 100vh;
 
+        }
 
+        .card {
 
+            background: white;
 
+            border-radius: 12px;
 
+            padding: 25px;
 
+            margin: 15px 0;
 
+            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
 
+        }
 
+        h1 {
 
+            color: #333;
 
+            margin-top: 0;
 
+        }
 
+        .counter-display {
 
+            text-align: center;
 
+            padding: 30px;
 
+            background: #f8f9fa;
 
+            border-radius: 8px;
 
+            margin: 20px 0;
 
+        }
 
+        .counter-value {
 
+            font-size: 72px;
 
+            font-weight: bold;
 
+            color: #667eea;
 
+            line-height: 1;
 
+        }
 
+        .counter-label {
 
+            color: #666;
 
+            font-size: 14px;
 
+            text-transform: uppercase;
 
+            letter-spacing: 2px;
 
+        }
 
+        .button-group {
 
+            display: flex;
 
+            gap: 10px;
 
+            justify-content: center;
 
+            margin: 20px 0;
 
+        }
 
+        button {
 
+            padding: 12px 24px;
 
+            border: none;
 
+            border-radius: 6px;
 
+            cursor: pointer;
 
+            font-size: 16px;
 
+            font-weight: 600;
 
+            transition: all 0.2s;
 
+        }
 
+        button:hover {
 
+            transform: translateY(-2px);
 
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 
+        }
 
+        .btn-primary {
 
+            background: #667eea;
 
+            color: white;
 
+        }
 
+        .btn-primary:hover {
 
+            background: #5a6fd6;
 
+        }
 
+        .btn-danger {
 
+            background: #e74c3c;
 
+            color: white;
 
+        }
 
+        .btn-danger:hover {
 
+            background: #c0392b;
 
+        }
 
+        .btn-success {
 
+            background: #2ecc71;
 
+            color: white;
 
+        }
 
+        .btn-success:hover {
 
+            background: #27ae60;
 
+        }
 
+        .info-grid {
 
+            display: grid;
 
+            grid-template-columns: repeat(2, 1fr);
 
+            gap: 15px;
 
+            margin: 20px 0;
 
+        }
 
+        .info-item {
 
+            background: #f8f9fa;
 
+            padding: 15px;
 
+            border-radius: 6px;
 
+            text-align: center;
 
+        }
 
+        .info-label {
 
+            font-size: 12px;
 
+            color: #666;
 
+            text-transform: uppercase;
 
+            letter-spacing: 1px;
 
+        }
 
+        .info-value {
 
+            font-size: 18px;
 
+            font-weight: 600;
 
+            color: #333;
 
+            margin-top: 5px;
 
+        }
 
+        .status-positive {
 
+            color: #2ecc71 !important;
 
+        }
 
+        .status-negative {
 
+            color: #e74c3c !important;
 
+        }
 
+        .status-zero {
 
+            color: #666 !important;
 
+        }
 
+        code {
 
+            background: #e8e8e8;
 
+            padding: 2px 6px;
 
+            border-radius: 4px;
 
+            font-size: 14px;
 
+        }
 
+        pre {
 
+            background: #263238;
 
+            color: #aed581;
 
+            padding: 15px;
 
+            border-radius: 6px;
 
+            overflow-x: auto;
 
+            font-size: 13px;
 
+        }
 
+        .feature-list {
 
+            margin: 0;
 
+            padding-left: 20px;
 
+        }
 
+        .feature-list li {
 
+            margin: 8px 0;
 
+            color: #555;
 
+        }
 
+        a {
 
+            color: #667eea;
 
+            text-decoration: none;
 
+        }
 
+        a:hover {
 
+            text-decoration: underline;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="card" id="main-card">
 
+        <h1 id="page-title">๐Ÿ“„ Template Document Builder</h1>
 
+        <p id="description">This page demonstrates loading an HTML template and modifying it dynamically.</p>
 
+    </div>
 
+    
+    <div class="card" id="counter-card">
 
+        <div class="counter-display">
 
+            <div class="counter-label">Current Value</div>
 
+            <div class="counter-value" id="counter-value">0</div>
 
+        </div>
 
+        
+        <div class="button-group" id="button-group">
 
+            <form method="POST" action="/decrement" style="display: inline;">
 
+                <button type="submit" class="btn-danger">โˆ’ Decrease</button>
 
+            </form>
 
+            <form method="POST" action="/reset" style="display: inline;">
 
+                <button type="submit" class="btn-primary">โ†บ Reset</button>
 
+            </form>
 
+            <form method="POST" action="/increment" style="display: inline;">
 
+                <button type="submit" class="btn-success">+ Increase</button>
 
+            </form>
 
+        </div>
 
+        
+        <div class="info-grid" id="info-grid">
 
+            <div class="info-item" id="status-item">
 
+                <div class="info-label">Status</div>
 
+                <div class="info-value" id="status-value">Zero</div>
 
+            </div>
 
+            <div class="info-item" id="action-item">
 
+                <div class="info-label">Last Action</div>
 
+                <div class="info-value" id="action-value">Initialized</div>
 
+            </div>
 
+            <div class="info-item" id="time-item">
 
+                <div class="info-label">Last Update</div>
 
+                <div class="info-value" id="time-value">--:--:--</div>
 
+            </div>
 
+            <div class="info-item" id="count-item">
 
+                <div class="info-label">Total Changes</div>
 
+                <div class="info-value" id="changes-value">0</div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <div class="card" id="code-card">
 
+        <h2>How It Works</h2>
 
+        <p>The server loads the HTML template and uses XPath selectors to find and modify elements:</p>
 
+        
+        <pre id="code-example">// Load the template
 
+var doc = new HtmlDocument.from_string(HTML_TEMPLATE);
 
+
 
+// Find and modify elements using XPath
 
+var counter_el = doc.select_one("//div[@id='counter-value']");
 
+counter_el.text_content = counter.to_string();
 
+
 
+// Add/remove classes based on state
 
+if (counter > 0) {
 
+    counter_el.add_class("status-positive");
 
+}</pre>
 
+        
+        <h3>DocumentModel Features Used:</h3>
 
+        <ul class="feature-list" id="feature-list">
 
+            <li><code>HtmlDocument.from_string()</code> - Load HTML from template</li>
 
+            <li><code>doc.select_one(xpath)</code> - Find single element by XPath</li>
 
+            <li><code>doc.select(xpath)</code> - Find multiple elements</li>
 
+            <li><code>element.text_content</code> - Get/set text content</li>
 
+            <li><code>element.add_class()/remove_class()</code> - Modify CSS classes</li>
 
+            <li><code>element.set_attribute()</code> - Set element attributes</li>
 
+            <li><code>doc.to_result()</code> - Return as HttpResult</li>
 
+        </ul>
 
+    </div>
 
+    
+    <div class="card" id="footer-card">
 
+        <p style="text-align: center; color: #666; margin: 0;">
 
+            Built with <code>Astralis.Document</code> | 
+            <a href="/raw">View Raw HTML</a>
 
+        </p>
 
+    </div>
 
+</body>
 
+</html>
 
+""";
 
+
 
+// Main page endpoint - loads template and modifies it
 
+class HomePageEndpoint : Object, Endpoint {
 
+    public async HttpResult handle_request(HttpContext context, RouteContext route) throws Error {
 
+        // Load the HTML template
 
+        var doc = new HtmlDocument.from_string(HTML_TEMPLATE);
 
+        
+        // Update the counter value
 
+        var counter_el = doc.select_one("//div[@id='counter-value']");
 
+        if (counter_el != null) {
 
+            counter_el.text_content = app_state.counter.to_string();
 
+            
+            // Update status class based on counter value
 
+            counter_el.remove_class("status-positive");
 
+            counter_el.remove_class("status-negative");
 
+            counter_el.remove_class("status-zero");
 
+            
+            if (app_state.counter > 0) {
 
+                counter_el.add_class("status-positive");
 
+            } else if (app_state.counter < 0) {
 
+                counter_el.add_class("status-negative");
 
+            } else {
 
+                counter_el.add_class("status-zero");
 
+            }
 
+        }
 
+        
+        // Update status text
 
+        var status_el = doc.select_one("//div[@id='status-value']");
 
+        if (status_el != null) {
 
+            if (app_state.counter > 0) {
 
+                status_el.text_content = "Positive";
 
+                status_el.remove_class("status-negative");
 
+                status_el.remove_class("status-zero");
 
+                status_el.add_class("status-positive");
 
+            } else if (app_state.counter < 0) {
 
+                status_el.text_content = "Negative";
 
+                status_el.remove_class("status-positive");
 
+                status_el.remove_class("status-zero");
 
+                status_el.add_class("status-negative");
 
+            } else {
 
+                status_el.text_content = "Zero";
 
+                status_el.remove_class("status-positive");
 
+                status_el.remove_class("status-negative");
 
+                status_el.add_class("status-zero");
 
+            }
 
+        }
 
+        
+        // Update last action
 
+        var action_el = doc.select_one("//div[@id='action-value']");
 
+        if (action_el != null) {
 
+            action_el.text_content = app_state.last_action;
 
+        }
 
+        
+        // Update timestamp
 
+        var time_el = doc.select_one("//div[@id='time-value']");
 
+        if (time_el != null) {
 
+            time_el.text_content = app_state.last_update.format("%H:%M:%S");
 
+        }
 
+        
+        // Update changes count (use absolute value of counter as "total changes")
 
+        var changes_el = doc.select_one("//div[@id='changes-value']");
 
+        if (changes_el != null) {
 
+            changes_el.text_content = app_state.counter.abs().to_string();
 
+        }
 
+        
+        return doc.to_result();
 
+    }
 
+}
 
+
 
+// Increment endpoint
 
+class IncrementEndpoint : Object, Endpoint {
 
+    public async HttpResult handle_request(HttpContext context, RouteContext route) throws Error {
 
+        app_state.increment();
 
+        return new HttpStringResult("", (StatusCode)302)
 
+            .set_header("Location", "/");
 
+    }
 
+}
 
+
 
+// Decrement endpoint
 
+class DecrementEndpoint : Object, Endpoint {
 
+    public async HttpResult handle_request(HttpContext context, RouteContext route) throws Error {
 
+        app_state.decrement();
 
+        return new HttpStringResult("", (StatusCode)302)
 
+            .set_header("Location", "/");
 
+    }
 
+}
 
+
 
+// Reset endpoint
 
+class ResetEndpoint : Object, Endpoint {
 
+    public async HttpResult handle_request(HttpContext context, RouteContext route) throws Error {
 
+        app_state.reset();
 
+        return new HttpStringResult("", (StatusCode)302)
 
+            .set_header("Location", "/");
 
+    }
 
+}
 
+
 
+// Raw HTML endpoint - shows the unmodified template
 
+class RawHtmlEndpoint : Object, Endpoint {
 
+    public async HttpResult handle_request(HttpContext context, RouteContext route) throws Error {
 
+        // Load template without modifications
 
+        var doc = new HtmlDocument.from_string(HTML_TEMPLATE);
 
+        
+        // Add a notice at the top
 
+        var body = doc.body;
 
+        if (body != null) {
 
+            var notice = body.append_child_element("div");
 
+            notice.set_attribute("style", "background: #fff3cd; color: #856404; padding: 15px; margin: 10px 0; border-radius: 8px; border: 1px solid #ffc107;");
 
+            notice.append_text("โš ๏ธ This is the raw template without dynamic modifications. ");
 
+            var link = notice.append_child_element("a");
 
+            link.set_attribute("href", "/");
 
+            link.append_text("โ† Back to dynamic version");
 
+        }
 
+        
+        return doc.to_result();
 
+    }
 
+}
 
+
 
+// API endpoint that demonstrates modifying multiple elements at once
 
+class BulkUpdateEndpoint : Object, Endpoint {
 
+    public async HttpResult handle_request(HttpContext context, RouteContext route) throws Error {
 
+        var doc = new HtmlDocument.from_string(HTML_TEMPLATE);
 
+        
+        // Demonstrate selecting multiple elements
 
+        var all_info_values = doc.select("//div[contains(@class, 'info-value')]");
 
+        
+        // Update all info values to show they were bulk-modified
 
+        all_info_values.set_text_all("BULK UPDATED");
 
+        all_info_values.add_class_all("status-positive");
 
+        
+        // Also demonstrate setting attributes on multiple elements
 
+        var all_cards = doc.select("//div[contains(@class, 'card')]");
 
+        all_cards.set_attribute_all("data-bulk-update", "true");
 
+        
+        // Update title to indicate bulk operation
 
+        var title = doc.select_one("//h1[@id='page-title']");
 
+        if (title != null) {
 
+            title.text_content = "๐Ÿ“„ Bulk Update Demo";
 
+        }
 
+        
+        // Add explanation
 
+        var desc = doc.select_one("//p[@id='description']");
 
+        if (desc != null) {
 
+            desc.text_content = "This demonstrates HtmlNodeList operations: set_text_all(), add_class_all(), and set_attribute_all().";
 
+        }
 
+        
+        return doc.to_result();
 
+    }
 
+}
 
+
 
+void main(string[] args) {
 
+    int port = args.length > 1 ? int.parse(args[1]) : 8080;
 
+    
+    // Initialize app state
 
+    app_state = new AppState();
 
+    
+    print("โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•—\n");
 
+    print("โ•‘          Astralis DocumentBuilderTemplate Example           โ•‘\n");
 
+    print("โ• โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•ฃ\n");
 
+    print(@"โ•‘  Port: $port");
 
+    for (int i = 0; i < 50 - port.to_string().length - 7; i++) print(" ");
 
+    print(" โ•‘\n");
 
+    print("โ• โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•ฃ\n");
 
+    print("โ•‘  Endpoints:                                                  โ•‘\n");
 
+    print("โ•‘    /           - Counter page (template with modifications)  โ•‘\n");
 
+    print("โ•‘    /increment  - Increase counter (POST)                     โ•‘\n");
 
+    print("โ•‘    /decrement  - Decrease counter (POST)                     โ•‘\n");
 
+    print("โ•‘    /reset      - Reset counter (POST)                        โ•‘\n");
 
+    print("โ•‘    /raw        - Raw template (no modifications)             โ•‘\n");
 
+    print("โ•‘    /bulk       - Bulk update demo                            โ•‘\n");
 
+    print("โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•\n");
 
+    print("\nPress Ctrl+C to stop the server\n\n");
 
+    
+    try {
 
+        var application = new WebApplication(port);
 
+        
+        // Register compression components
 
+        application.container.register_singleton<GzipCompressor>(() => new GzipCompressor());
 
+        application.container.register_singleton<ZstdCompressor>(() => new ZstdCompressor());
 
+        application.container.register_singleton<BrotliCompressor>(() => new BrotliCompressor());
 
+        
+        // Register endpoints
 
+        application.add_endpoint<HomePageEndpoint>(new EndpointRoute("/"));
 
+        application.add_endpoint<IncrementEndpoint>(new EndpointRoute("/increment"));
 
+        application.add_endpoint<DecrementEndpoint>(new EndpointRoute("/decrement"));
 
+        application.add_endpoint<ResetEndpoint>(new EndpointRoute("/reset"));
 
+        application.add_endpoint<RawHtmlEndpoint>(new EndpointRoute("/raw"));
 
+        application.add_endpoint<BulkUpdateEndpoint>(new EndpointRoute("/bulk"));
 
+        
+        application.run();
 
+        
+    } catch (Error e) {
 
+        printerr("Error: %s\n", e.message);
 
+        Process.exit(1);
 
+    }
 
+}

+ 7 - 0
examples/meson.build
Voir le fichier 

@@ -88,3 +88,10 @@ executable('document-builder',
 
     dependencies: [astralis_dep, invercargill_dep],
 
     dependencies: [astralis_dep, invercargill_dep],
 
     install: false
 
     install: false
 
 )
 
 )
 
+
 
+# DocumentBuilderTemplate Example - demonstrates loading HTML templates and modifying elements
 
+executable('document-builder-template',
 
+    'DocumentBuilderTemplate.vala',
 
+    dependencies: [astralis_dep, invercargill_dep],
 
+    install: false
 
+)