|
| 1 | +# OpenFDD: The UI Templating Guide |
| 2 | + |
| 3 | +Because OpenFDD rigidly enforces a **No-JS Security Model** (all `<script>` tags are strictly forbidden within the template), authoring beautiful, interactive Single-Page Applications requires leaning heavily into modern CSS logic and the native Declarative Action framework. |
| 4 | + |
| 5 | +This guide will teach you the core principles of building robust `.fdd` container UI layouts without writing a single line of JavaScript. |
| 6 | + |
| 7 | +--- |
| 8 | + |
| 9 | +## 1. The Anatomy of an OpenFDD Presentation Layer |
| 10 | + |
| 11 | +Every `.fdd` file utilizes a Declarative Shadow Root explicitly bound to your cryptographic and mutable JSON pathways. Ensure your presentation code starts here: |
| 12 | + |
| 13 | +```html |
| 14 | +<template shadowrootmode="open" bind="#fdd-data, #user-notes"> |
| 15 | + <style> |
| 16 | + /* 1. Reset and base styling */ |
| 17 | + :host { display: block; font-family: system-ui, sans-serif; } |
| 18 | + </style> |
| 19 | + |
| 20 | + <!-- HTML Content Goes Here --> |
| 21 | +</template> |
| 22 | +``` |
| 23 | + |
| 24 | +### 1.1 Property Binding |
| 25 | +Your HTML will automatically evaluate against the `#fdd-data` and `#user-notes` JSON variables. Simply utilize Handlebar mustache syntax: |
| 26 | +`<h1>Welcome to {{workspaceTitle}}</h1>` |
| 27 | + |
| 28 | +--- |
| 29 | + |
| 30 | +## 2. Dynamic Layouts & CSS Logic (No-JS Interactivity) |
| 31 | + |
| 32 | +Without JavaScript event listeners (`onclick`, `onmouseover`), you must leverage pure CSS logic to build interactive elements like dropdowns, tabs, and modals! |
| 33 | + |
| 34 | +### 2.1 The "Checkbox Hack" (State Toggling) |
| 35 | +You can build entire logic trees (like opening a Settings Modal or switching generic CSS tabs) utilizing native HTML `<input type="checkbox">` elements married to CSS pseudo-classes. |
| 36 | + |
| 37 | +```html |
| 38 | +<style> |
| 39 | + .modal-content { display: none; } |
| 40 | + /* When the hidden checkbox is checked, evaluate sibling logic to display the modal */ |
| 41 | + #modal-toggle:checked ~ .modal-content { display: block; } |
| 42 | +</style> |
| 43 | + |
| 44 | +<input type="checkbox" id="modal-toggle" style="display: none;"> |
| 45 | +<label for="modal-toggle" class="btn">Open Settings</label> |
| 46 | + |
| 47 | +<div class="modal-content"> |
| 48 | + <h2>Settings Panel</h2> |
| 49 | + <label for="modal-toggle" class="btn">Close</label> |
| 50 | +</div> |
| 51 | +``` |
| 52 | + |
| 53 | +### 2.2 Deep Theming (`:has()`) |
| 54 | +Use modern CSS capabilities to adapt your document strictly based on internal HTML constraints without JS computation. |
| 55 | +```css |
| 56 | +/* If a transaction list contains a negative flag anywhere, render the overarching parent container red! */ |
| 57 | +.banking-dashboard:has(.negative-balance) { |
| 58 | + background-color: #fef2f2; |
| 59 | + border: 1px solid red; |
| 60 | +} |
| 61 | +``` |
| 62 | + |
| 63 | +--- |
| 64 | + |
| 65 | +## 3. Data Loops & Complex Layout Structuring |
| 66 | + |
| 67 | +### 3.1 Looping through Arrays |
| 68 | +You can inject CSS Grid layouts effortlessly across massive datasets natively using `{{#each}}`. |
| 69 | + |
| 70 | +```html |
| 71 | +<style> |
| 72 | + .data-grid { |
| 73 | + display: grid; |
| 74 | + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| 75 | + gap: 15px; |
| 76 | + } |
| 77 | +</style> |
| 78 | + |
| 79 | +<div class="data-grid"> |
| 80 | + {{#each transactions}} |
| 81 | + <div class="card"> |
| 82 | + <h3>Data Key: {{@index}}</h3> |
| 83 | + <p>Vendor: {{vendorName}}</p> |
| 84 | + <p>Amount: ${{amount}}</p> |
| 85 | + </div> |
| 86 | + {{/each}} |
| 87 | +</div> |
| 88 | +``` |
| 89 | + |
| 90 | +--- |
| 91 | + |
| 92 | +## 4. Single-Page Application (SPA) Routing |
| 93 | + |
| 94 | +To simulate a React/Vue router purely using HTML, leverage OpenFDD's `ui-state` ephemeral manager and `fdd-match` layout tools. |
| 95 | + |
| 96 | +### 4.1 Dispatching Route Updates |
| 97 | +Use standard FDD layout buttons to target the `selectedRoute` map natively: |
| 98 | +`<button fdd-action="set-ui" fdd-target="selectedRoute" fdd-value="settings">Go To Settings</button>` |
| 99 | + |
| 100 | +### 4.2 Conditionally Rendering Views |
| 101 | +Apply `fdd-match` to explicitly evaluate that route. When evaluating false, the OpenFDD runtime prunes the layout automatically protecting rendering thresholds! |
| 102 | + |
| 103 | +```html |
| 104 | +<!-- Home Application Route --> |
| 105 | +<div class="page-view" fdd-match="ui.selectedRoute" fdd-value="undefined"> |
| 106 | + <h1>Welcome Home</h1> |
| 107 | + <button fdd-action="set-ui" fdd-target="selectedRoute" fdd-value="settings">View Settings</button> |
| 108 | +</div> |
| 109 | + |
| 110 | +<!-- Settings Route --> |
| 111 | +<div class="page-view" fdd-match="ui.selectedRoute" fdd-value="settings"> |
| 112 | + <h1>Settings Tab</h1> |
| 113 | + <!-- Returns home by clearing the active UI route --> |
| 114 | + <button fdd-action="set-ui" fdd-target="selectedRoute" fdd-value="undefined">Go Home</button> |
| 115 | +</div> |
| 116 | +``` |
| 117 | + |
| 118 | +--- |
| 119 | + |
| 120 | +## 5. Capturing User Mutations Elegantly |
| 121 | + |
| 122 | +Finally, tie your beautiful layouts securely into the FDD State manager overriding generic HTTP forms natively. |
| 123 | + |
| 124 | +### 5.1 Real-Time Text Binding |
| 125 | +`<input type="text" name="user-notes.email" value="{{email}}" autosave>` |
| 126 | + |
| 127 | +### 5.2 Natively Pushing to an Array |
| 128 | +```html |
| 129 | +<form fdd-action="push" fdd-target="user-notes.inbox"> |
| 130 | + <input type="text" name="message" placeholder="Type..." required> |
| 131 | + <button type="submit">Append Message</button> |
| 132 | +</form> |
| 133 | +``` |
| 134 | +*Note: Any mutation bounds assigned outside of the `#user-notes` layer will reject securely to prevent cryptographic failure.* |
0 commit comments