Update to WebUI 2.5.0-beta.1

README.md

@@ -6,7 +6,7 @@ However, you can also decide to have a visible Delphi or Lazarus application com
 
 WebUI4Delphi can be used in Delphi or Lazarus applications for Windows, Linux and MacOS. 
 
-WebUI4Delphi was developed and tested on Delphi 12.1 and Lazarus 3.2/FPC 3.2.2 but it also supports Delphi XE2. 
+WebUI4Delphi was developed and tested on Delphi 12.1 and Lazarus 3.4/FPC 3.2.2 but it also supports Delphi XE2. 
 
 WebUI4Delphi includes VCL, FireMonkey (FMX), LCL and console examples.
 

assets/serve_a_folder/index.html

@@ -79,12 +79,9 @@ <h4><a href="test.txt">Static file example (Embedded)</a></h4>
 		<h4><a href="dynamic.html">Dynamic file example (Embedded)</a></h4>
 		<p>
 			Unicode Test:<br /><br />
-			مرحبًا<br />
-			<!-- Arabic -->
-			你好<br />
-			<!-- Chinese -->
-			こんにちは
-			<!-- Japanese -->
+			مرحبًا<br /> <!-- Arabic -->
+			你好<br /> <!-- Chinese -->
+			こんにちは <!-- Japanese -->
 		</p>
 	</body>
 
@@ -94,8 +91,8 @@ <h4><a href="dynamic.html">Dynamic file example (Embedded)</a></h4>
 	<script>
 		function call_deno_file() {
 			// Because `main.c` set Deno as the `.ts` and `.js` interpreter
-			// then a simple HTTP request to `/deno_test.ts` will be parsed
-			// of course Deno should be installed.
+			// then a simple HTTP request to `/deno_test.ts` will be bassed
+			// to Deno.
 
 			// Simple HTTP Request
 			var xmlHttp = new XMLHttpRequest();
@@ -104,18 +101,68 @@ <h4><a href="dynamic.html">Dynamic file example (Embedded)</a></h4>
 			alert(xmlHttp.responseText);
 		}
 
+		// JavaScript Example
+		/*
 		document.addEventListener('DOMContentLoaded', function() {
-			// DOM is loaded, and `webui` object should be available.
-			webui.setEventCallback((e) => {
-				if (e == webui.event.CONNECTED) {
-					// Connection to the backend is established
-					console.log('Connected.');
-				} else if (e == webui.event.DISCONNECTED) {
-					// Connection to the backend is lost
-					console.log('Disconnected.');
-				}
-			});
+			// DOM is loaded. Check if `webui` object is available
+			if (typeof webui !== 'undefined') {
+				// Set events callback
+				webui.setEventCallback((e) => {
+					if (e == webui.event.CONNECTED) {
+						// Connection to the backend is established
+						console.log('Connected.');
+						webuiTest();
+					} else if (e == webui.event.DISCONNECTED) {
+						// Connection to the backend is lost
+						console.log('Disconnected.');
+					}
+				});
+			} else {
+				// The virtual file `webui.js` is not included
+				alert('Please add webui.js to your HTML.');
+			}
 		});
 
+		function webuiTest() {
+			// Call a backend function
+			if (webui.isConnected()) {
+
+				// When you bind a func in the backend
+				// webui will create the `func` object
+				// in three places:
+				//
+				// Global   : func(...)
+				// Property : webui.func(...)
+				// Method   : webui.call('func', ...)
+				//
+				// [!] Note: Objects creation fails when
+				// a similar object already exist.
+
+				const foo = 'Hello';
+				const bar = 123456;
+
+				// Calling as global object
+				myBackendFunction(foo, bar).then((response) => {
+					// Do something with `response`
+				});
+				
+				// Calling as property of `webui.` object
+				webui.myBackendFunction(foo, bar).then((response) => {
+					// Do something with `response`
+				});
+				
+				// Calling using the method `webui.call()`
+				webui.call('myBackendFunction', foo, bar).then((response) => {
+					// Do something with `response`
+				});
+				
+				// Using await
+				// const response = await myBackendFunction(foo, bar);
+				// const response = await webui.myBackendFunction(foo, bar);
+				// const response = await webui.call('myBackendFunction', foo, bar);
+			}
+		}
+		*/
+
 	</script>
 </html>

assets/text_editor/index.html

@@ -16,7 +16,7 @@
 		<nav>
 			<button id="open-btn" title="Open file" type="button"><i class="fas fa-folder-open"></i></button>
 			<button id="save-btn" title="Save file" type="button" disabled><i class="fa fa-floppy-disk"></i></button>
-			<button id="__close-btn" title="Close file" type="button"><i class="fas fa-circle-xmark"></i></button>
+			<button id="close_app" title="Close file" type="button"><i class="fas fa-circle-xmark"></i></button>
 			<button id="about-btn" title="About Info" type="button"><i class="fas fa-question-circle"></i></button>
 		</nav>
 		<div class="main" id="main">
@@ -27,7 +27,7 @@
 				<h1>WebUI Text Editor</h1>
 				v1.1
 				<p>Example of a text editor software in C using WebUI library.</p>
-				<p><a href="https://webui.me" target="_blank">webui.me</a> | (C)2023 Hassan Draga</p>
+				<p><a href="https://webui.me" target="_blank">webui.me</a> | (C)2024 Hassan Draga</p>
 			</div>
 		</div>
 		<script src="js/codemirror.min.js"></script>