Merge pull request #200 from leaningtech/interoperability-tutorial-files

added files for interoperability tutorial
leaningtech · Nov 11, 2024 · 9969c0a · 9969c0a
2 parents 297e3d2 + 7d63cfe
commit 9969c0a
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 0 deletions.
diff --git a/examples/Interoperability/README.md b/examples/Interoperability/README.md
@@ -0,0 +1,5 @@
+# CheerpJ example: Interoperability Tutorial
+
+This example demonstrates how to enable Java and JavaScript communication using CheerpJ. With CheerpJ, a Java application can integrate with JavaScript in a browser environment, enabling seamless interaction between Java and JavaScript code.
+
+# Find the step-by-step on our [documentation website](https://cheerpj.com/docs/tutorials/interoperability-tutorial).
diff --git a/examples/Interoperability/example.jar b/examples/Interoperability/example.jar
diff --git a/examples/Interoperability/index.html b/examples/Interoperability/index.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <title>CheerpJ test</title>
+    <script src="https://cjrtnc.leaningtech.com/3_20241017_546/cj3loader.js"></script>
+</head>
+
+<body>
+    <h1>CheerpJ Java Interoperability Tutorial</h1>
+    <input type="text" id="inputText" placeholder="Type something here">
+    <button onclick="sendInputToJava()">Send to Java</button>
+    <div id="javaOutput" style="margin-top:20px; font-weight: bold;">JavaScript received: </div>
+    </br>
+
+    <script>
+        let exampleInstance;
+
+        async function Java_com_example_Example_sendToHTML(lib, str) {
+            document.getElementById('javaOutput').innerText = "JavaScript received: " + str;
+            console.log("Received input from Java: " + str);
+        }
+
+        async function Java_com_example_Example_nativeSetApplication(lib, myApplication) {
+            window.myApplication = myApplication;
+            console.log(window.myApplication);
+            console.log(myApplication);
+            console.log("setting application");
+            /* This makes the function 'never' return */
+            return new Promise(() => { });
+        }
+
+        (async () => {
+            await cheerpjInit(
+                {
+                    version: 8,
+                    natives: { 
+                        Java_com_example_Example_sendToHTML, 
+                        Java_com_example_Example_nativeSetApplication 
+                    }
+                }
+            );
+            cheerpjCreateDisplay(400, 300);
+
+            await cheerpjRunJar('/app/example.jar');
+        })();
+
+        async function sendInputToJava() {
+
+            // Get the input text from the HTML input box
+            const inputText = document.getElementById("inputText").value;
+            console.log(inputText);
+
+            // Call the Java method with the input text
+            const response = await window.myApplication.processInput(inputText);
+            window.alert(response);
+
+        }
+    </script>
+</body>
+
+</html>