examples: ad serve_a_folder example

webui-dev · Oct 29, 2023 · 518e448 · 518e448
1 parent 381466c
commit 518e448
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 0 deletions.
diff --git a/examples/serve_a_folder/main.odin b/examples/serve_a_folder/main.odin
@@ -0,0 +1,64 @@
+// This examples needs to be executed relative to the examples directory.
+// E.g. `cd examples/serve_a_folder` then `odin run .` instead of `odin run examples/serve_a_folder`.
+package main
+
+import ui "../../"
+import "core:fmt"
+
+w :: ui.Window(1)
+w2 :: ui.Window(2)
+
+// // This function gets called every time there is an event.
+events :: proc(e: ^ui.Event) {
+	if e.event_type == .Connected {
+		fmt.println("Connected.")
+	} else if e.event_type == .Disconnected {
+		fmt.println("Disconnected.")
+	} else if e.event_type == .MouseClick {
+		fmt.println("Click.")
+	} else if e.event_type == .Navigation {
+		target := ui.get_arg(string, e)
+		fmt.println("Starting navigation to:", target)
+		ui.navigate(e.window, target)
+	}
+}
+
+// Switch to `/second.html` in the same opened window.
+switch_to_second_page :: proc(e: ^ui.Event) {
+	ui.show(e.window, "second.html")
+}
+
+show_second_window :: proc(e: ^ui.Event) {
+	ui.show(w2, "second.html", await = true)
+	// Remove the Go Back button when showing the second page in another window.
+	ui.run(w2, "document.getElementById('go-back').remove();")
+}
+
+close_window :: proc(e: ^ui.Event) {
+	ui.close(e.window)
+}
+
+main :: proc() {
+	// Set the root folder for the UI.
+	ui.set_default_root_folder("ui")
+
+	// Prepare the main window.
+	ui.new_window_id(w)
+
+	// Bind HTML elements to functions.
+	ui.bind(w, "switch-to-second-page", switch_to_second_page)
+	ui.bind(w, "open-new-window", show_second_window)
+	ui.bind(w, "exit", close_window)
+	ui.bind(w, "", events) // Bind all events.
+
+	// Show the main window.
+	ui.show(w, "index.html")
+
+	// Prepare the second window.
+	ui.new_window_id(w2)
+	ui.bind(w2, "exit", close_window)
+
+	// Wait until all windows get closed.
+	ui.wait()
+	ui.clean()
+}
diff --git a/examples/serve_a_folder/ui/index.html b/examples/serve_a_folder/ui/index.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+	<head>
+		<title>WebUI - Serve a Folder Example</title>
+		<script src="webui.js"></script>
+		<style>
+			body {
+				background: linear-gradient(to left, #36265a, #654da9);
+				color: AliceBlue;
+				font: 16px sans-serif;
+				text-align: center;
+				margin-top: 30px;
+			}
+			button {
+				margin: 5px 0 10px;
+			}
+		</style>
+	</head>
+	<body>
+		<h1>WebUI - Serve a Folder Example</h1>
+		<br />
+		<div>
+			<p>Click on the link to switch the page</p>
+			<a href="second.html">Switch page link</a>
+		</div>
+		<div>
+			<p>Or click on the button to switch the page programmatically</p>
+			<button id="switch-to-second-page">Switch page programmatically</button>
+		</div>
+		<div>
+			<p>Open the second page in another window</p>
+			<button id="open-new-window">Open Second Window</button>
+		</div>
+	</body>
+</html>
diff --git a/examples/serve_a_folder/ui/second.html b/examples/serve_a_folder/ui/second.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+	<head>
+		<title>WebUI - Second Page</title>
+		<script src="webui.js"></script>
+		<style>
+			body {
+				background: linear-gradient(to left, #36265a, #654da9);
+				color: AliceBlue;
+				font: 16px sans-serif;
+				text-align: center;
+				margin-top: 30px;
+			}
+			button {
+				margin: 5px 0 10px;
+			}
+		</style>
+	</head>
+	<body>
+		<h1>Second Page</h1>
+		<br />
+		<button id="go-back" onclick="location.href='index.html';">Go Back</button>
+		<button id="exit">Exit</button>
+	</body>
+</html>