From 5594dc1dcf72382069f8a53b37af2d80e36d3dc0 Mon Sep 17 00:00:00 2001 From: Theodora Vraimakis Date: Mon, 18 Nov 2024 17:02:35 +0000 Subject: [PATCH] Combine the last two commits with current changes --- .../CheerpJInteroperabilityTutorial.zip | Bin 0 -> 8055 bytes .../05-interoperability-tutorial.mdx | 204 ++++++++++++++++++ 2 files changed, 204 insertions(+) create mode 100644 sites/cheerpj/public/cheerpj3/tutorials/CheerpJInteroperabilityTutorial.zip create mode 100644 sites/cheerpj/src/content/docs/13-tutorials/05-interoperability-tutorial.mdx diff --git a/sites/cheerpj/public/cheerpj3/tutorials/CheerpJInteroperabilityTutorial.zip b/sites/cheerpj/public/cheerpj3/tutorials/CheerpJInteroperabilityTutorial.zip new file mode 100644 index 0000000000000000000000000000000000000000..2e6daabbe553483fe3e5225615abe6783a262561 GIT binary patch literal 8055 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 Uk?#F~q1}GxZkJdf$&Y{k1FX!52><{9 literal 0 HcmV?d00001 diff --git a/sites/cheerpj/src/content/docs/13-tutorials/05-interoperability-tutorial.mdx b/sites/cheerpj/src/content/docs/13-tutorials/05-interoperability-tutorial.mdx new file mode 100644 index 00000000..bf0d632d --- /dev/null +++ b/sites/cheerpj/src/content/docs/13-tutorials/05-interoperability-tutorial.mdx @@ -0,0 +1,204 @@ +--- +title: Java and JavaScript Interoperability +description: Learn how to enable Java and JavaScript communication using CheerpJ +--- + +import Callout from "@leaningtech/astro-theme/components/Callout.astro"; + +With CheerpJ, a Java application can interact with JavaScript in a browser environment, enabling seamless interaction between Java and JavaScript code. + +In this tutorial, we’ll teach you how to create a two-way communication channel between Java and JavaScript using CheerpJ. This setup will allow a Java class to access JavaScript functions and vice versa, enabling data exchange between the two environments. + +## Prerequisites + +- [Download the template project](/docs/cheerpj3/tutorials/CheerpJInteroperabilityTutorial.zip) and unzip it. +- [Node.js](https://nodejs.org/en/) (>= 18) + +## Project structure + +The project consists of the following files and directories: + +```plaintext +CheerpJInteroperabilityTutorial/ +├── com/example +│ └── Example.java +│ └── manifest.txt +│ └── Example.class (and other compiled .class files) +├── index.html +└── example.jar +└── Makefile + +``` + +In this tutorial, we will implement the native methods in JavaScript in the `index.html` file to enable communication between Java and JavaScript. + +You can see the fully implemented example on [GitHub](https://github.com/leaningtech/cheerpj-meta/tree/main/examples/Interoperability). + +## Java source code: `Example.java` + +Let's start by examining the source code of the Java class that will interact with JavaScript. This class will receive input from JavaScript, process it, and send a response back to JavaScript. + +```java title="Example.java" +package com.example; + +public class Example { + public static native void sendToHTML(String s); + + public String processInput(String input) { + sendToHTML(input); + return "Java received: " + input; + } + + public static native void nativeSetApplication(Example myApplication); + + public static void main(String[] args) { + Example app = new Example(); + new Thread(() -> { + nativeSetApplication(app); + System.out.println("Starting Thread"); + }).start(); + } +} +``` + +This Java class contains the following methods: + +- `sendToHTML`: A native method implemented in JavaScript, called to send data to the JavaScript environment. +- `processInput`: Receives data from JavaScript, passes it to `sendToHTML`, and returns a response. +- `nativeSetApplication`: Captures the running Java thread for persistent communication with JavaScript. + + + There is **no need to recompile the Java code** for this tutorial, as a + precompiled file is provided in the template project. However, if you want to + modify the Java code, you will need to recompile it. To do so, follow the + instructions in the [Running the example](#running-the-example) section. + + +## JavaScript native method implementation + +To enable Java and JavaScript communication, we need to implement the [`native`] methods in JavaScript. These methods will handle the data exchange between the two environments. + +We will do this in the `index.html` file, which is part of the template project `.zip` file. In this file, you will find useful comments to guide you through the implementation process described below. + +### 1. Define JavaScript native methods + +In the ` +``` + +To load CheerpJ, we initialize it in the HTML file with specific configurations for native methods. + +```js title="index.html" +(async () => { + await cheerpjInit({ + version: 8, + natives: { + Java_com_example_Example_sendToHTML, + Java_com_example_Example_nativeSetApplication, + }, + }); + cheerpjCreateDisplay(800, 600); + await cheerpjRunJar("/app/example.jar"); +})(); +``` + +Explanation: + +- `cheerpjInit`: Initializes CheerpJ with the specified configurations: + - `version`: Specifies the Java version to use. + - `natives`: Lists JavaScript implementations of native Java methods. +- `cheerpjCreateDisplay`: Creates a display area for any graphical output (optional in this example). +- `cheerpjRunJar`: Loads and runs the provided JAR file. + +## Running the example + +1. There is **no need to recompile the Java code** for this tutorial as we only changed the JavaScript code and you can use the precompiled `example.jar` file provided in the template project. However, if you want to modify the Java code, you can recompile it using the provided `Makefile` (requires Java installed): + +```bash +make +``` + +Alternatively, compile and package manually: + +```bash +javac Example.java +jar cvfm example.jar manifest.txt com/example/*.class +``` + +2. **Start a Local Server**: Serve the files using a simple HTTP server like [`http-server`]: + +```bash +npx http-server -p 8080 +``` + +3. **Run the Example**: Open http://localhost:8080/index.html in your browser. + +## The result + + + +## Source code + +[View full source code on GitHub](https://github.com/leaningtech/cheerpj-meta/tree/main/examples/Interoperability) + +[`http-server`]: https://www.npmjs.com/package/http-server +[`native`]: /docs/guides/implementing-native-methods +[`native method`]: /docs/guides/implementing-native-methods