how to call Java classes in a web page by cheerpj

🚀 在瀏覽器中直接執行 Java：CheerpJ v3 實作指南

長期以來，Java Applets 因為安全性與插件問題早已退出歷史舞台。但隨著 WebAssembly (Wasm) 技術的成熟，現在網頁安裝如下 CheerpJ v3 套件庫，就可以在瀏覽器中直接呼叫 Java Bytecode 類別檔，完全不需要再安裝其他套件。 ☕️

<script src="https://cjrtnc.leaningtech.com/3.0/cj3loader.js"></script>

🏗️ 核心架構與原理

CheerpJ v3 的運作原理並非將 Java 轉譯為 JavaScript，而是建立了一個 WebAssembly 虛擬機。它在瀏覽器中模擬了 JVM (Java Virtual Machine) 的環境，直接讀取並執行 Java 的 Bytecode (.class 檔案)。

其整合流程可分為三個階段：

• 編譯階段： 將 Java 原始碼編譯為 Java 8 版本的 Bytecode (Major version 52)。這是關鍵，因為 CheerpJ v3 目前對 Java 8 的相容性最穩定。
• 部署階段： 將編譯後的 .class 檔案放置於 Web 伺服器上（如 GitHub Pages），使其能透過 HTTP 請求獲取。
• 執行階段： 在前端 HTML 中載入 CheerpJ Runtime，初始化虛擬檔案系統，並將遠端路徑映射到虛擬的 /app/ 目錄中。

🛠️ 技術實作：類別初始化與資料交換

在 v3 版本中，我們使用 Library Mode API。由於 Java 執行環境是異步載入的，所有操作都必須在 async 函數中進行。

1. Java 類別初始化 (Initialization)

初始化過程分為：啟動 Runtime → 定義路徑 → 獲取類別 → 實例化對象。

async function init() {
  // 1. 初始化 CheerpJ 環境
  await cheerpjInit();

  // 2. 定義類別路徑 (Classpath)
  const lib = await cheerpjRunLibrary("/app/");

  // 3. 從 Library 中獲取 Java 類別 (Class)
  const MyClass = await lib.MyClass;

  // 4. 實例化 Java 對象 (Instance)
  const instance = await new MyClass();
  return instance;
}

2. DOM 與 Java 類別的資料交換 (Data Passing)

由於 JavaScript 是單線程，為了不讓其卡住，CheerpJ 將 Java 方法呼叫封裝為 Promise (承諾）。Promise 物件代表一個現在 尚未完成 (pending)，但在未來會 完成 (fullfilled)，或 失敗 (rejected）的非同步操作及其結果。因此，傳遞資料時必須使用 await 指令。

👉 從 DOM 傳送到 Java： 直接將 JS 變數作為參數傳入 Java 方法。

// 假設從 input 獲取值並傳給 Java 的 push 方法
const val = document.getElementById("myInput").value;
const result = await stack.push(val); // 將 JS 字串傳入 Java

👉 從 Java 回傳至 DOM： 接收 Java 方法的返回值，並使用 DOM API 更新畫面。

// 呼叫 Java 的 pop 方法並獲取回傳值
const poppedValue = await stack.pop(); 

// 將結果顯示在網頁上
document.getElementById("out").textContent = "彈出值: " + poppedValue;

🌟 實作範例

以下建立了一個簡單的 Stack (堆疊) 操作 Demo，展示如何將 Java 的資料結構邏輯直接封裝在網頁中：

• GitHub 儲存庫： sekewei/cheerpj 📂
• 線上 Demo： 點此體驗 Java 在瀏覽器執行 🌐

在這個範例中，所有的邏輯（Push, Pop, Peek）都是由後端編譯的 MyStack3.class 處理，前端僅負責 UI 互動與結果顯示。這證明了網頁可以在不撰寫任何後端 API 的情況下，將既有的 Java 邏輯直接移植到靜態網頁中。 ✨

---

#Java #WebAssembly #CheerpJ #Frontend #WebDev #JVM