Java Applet 入門實戰：情人節專屬「星空告白」動畫開發全記錄

Applet 基礎知識

• 嵌入 HTML 網頁、瀏覽器下載執行的 Java 程式（需 JRE/JVM 支援）
• 突破 HTML/JS 能力邊界：網路通訊、複雜繪圖、多執行緒、本地檔案存取（簽名後）
• vs Flash：Flash 強在向量動畫、輕量；Applet 強在完整 Java 生態、J2EE 整合、邏輯複雜度支撐

四步驟建立 Applet

1. Import 相關套件（java.applet.*, java.awt.*）
2. 繼承 Applet 類別
3. 實作生命週期方法（init, start, paint, stop, destroy）
4. 撰寫 HTML <applet> 標籤嵌入網頁

案例設計：參數化星空告白

背景圖（海洋椰樹）+ 動態文字「XXX 愛 YYY」。關鍵需求：名稱可透過網頁參數傳入，非硬編碼，方便非程式人員客製化。

核心原始碼

import java.applet.Applet;
import java.awt.*;

public class NewsApplet extends Applet {
    Image snapshot;
    String from, to;

    public void init() {
        // 從 HTML 參數讀取，預設值「老鼠」「大米」
        from = getParameter("from");
        if (from == null) from = "老鼠";
        to = getParameter("to");
        if (to == null) to = "大米";

        // 載入背景圖並等待完成
        snapshot = getImage(getCodeBase(), "snapshot.jpg");
        MediaTracker tracker = new MediaTracker(this);
        tracker.addImage(snapshot, 0);
        try { tracker.waitForID(0); }
        catch (InterruptedException e) { System.out.println("圖片載入失敗"); }
    }

    public void paint(Graphics g) {
        // 繪製背景圖填滿區域
        g.drawImage(snapshot, 0, 0, getWidth(), getHeight(), this);

        // 繪製星空文字
        g.setFont(new Font("華文彩雲", Font.BOLD | Font.ITALIC, 14));
        g.setColor(Color.WHITE);
        g.drawString(from, 30, 90);
        g.drawString("愛", 50, 105);
        g.drawString(to, 70, 120);
    }
}

HTML 嵌入與參數傳遞

<html><body>
<applet code="NewsApplet.class" codebase="." width=480 height=384>
  <param name="from" value="Prince Charming">
  <param name="to" value="Cinderella">
</applet>
</body></html>

進階：JavaScript 動態產生 Applet 標籤

痛點：Applet 無法主動通知 JS 初始化完成，若用 JS 呼叫 setFrom() 易有時序問題。解法：JS 解析 URL 參數，動態 document.write 產生完整 <applet> 標籤，參數直接寫死於標籤屬性中。

<script>
var params = new URLSearchParams(location.search);
var from = params.get('from') || '老鼠';
var to = params.get('to') || '大米';
document.write('<applet code="NewsApplet.class" width=480 height=384>');
document.write('  <param name="from" value="' + from + '">');
document.write('  <param name="to" value="' + to + '">');
document.write('</applet>');
</script>

使用者訪問 page.html?from=Alice&to=Bob 即見專屬畫面，零程式修改。

測試與除錯工具

• Eclipse：Run As → Java Applet 即時預覽
• appletviewer page.html：JDK 內建輕量測試器
• 瀏覽器 Java 主控台：查看 System.out 輸出與例外堆疊

現代啟示

Applet 雖已退出歷史舞台（瀏覽器移除 NPAPI 支援），但其「參數化配置、資源預載、繪圖迴圈、JS 互操作」核心模式，完整映射至現代 Canvas/WebGL、React/Vue 組件 props、動態 import、Web Worker 等前端工程實踐。理解經典，洞見今朝。