Rename Example IDs - serve_a_folder

examples/C/serve_a_folder/index.html

@@ -79,12 +79,9 @@
 		<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 @@
 	<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 @@
 			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>