Java Swing 中應用 HTML 語言美化介面元件

前言

在 Java Swing 開發中，標準元件如 JLabel、JButton 等預設只支援純文字顯示。若想實現富文本效果——例如混合顏色、字型大小、粗體、斜體、列表等——最簡單的方法就是利用 Swing 內建的 HTML 渲染支援。本文透過一個完整範例，示範如何在 JPanel 中結合 JTextArea（編輯區）與 JLabel（預覽區），即時呈現 HTML 內容。

核心架構

範例程式 HtmlDemo 繼承 JPanel 並實作 ActionListener，主要包含三大區塊：

• 左側編輯面板：內含 JTextArea（置於 JScrollPane）與「改變顯示」按鈕，供使用者輸入或修改 HTML 字串。
• 右側預覽面板：使用固定尺寸 200×200 像素的 JLabel，水平垂直置中顯示渲染後的 HTML。
• 主框架啟動：main() 建立 JFrame，將 HtmlDemo 面板設為內容窗格並顯示視窗。

關鍵程式碼解析

1. 初始 HTML 字串建構

String initialText = "<html>\n" +
    "顏色和字體測試:\n" +
    "<ul>\n" +
    "<li><font color=red>red</font>\n" +
    "<li><font color=blue>blue</font>\n" +
    "<li><font color=green>green</font>\n" +
    "<li><font size=-2>small</font>\n" +
    "<li><font size=+2>large</font>\n" +
    "<li><i>italic</i>\n" +
    "<li><b>bold</b>\n" +
    "</ul>\n";

字串必須以 <html> 開頭，Swing 才會啟動 HTML 渲染器。支援的標籤包含 <font>（顏色、大小）、<b>、<i>、<ul>/<li> 等基本排版元素。

2. JLabel 尺寸鎖定

theLabel = new JLabel(initialText) {
    public Dimension getPreferredSize() { return new Dimension(200, 200); }
    public Dimension getMinimumSize() { return new Dimension(200, 200); }
    public Dimension getMaximumSize() { return new Dimension(200, 200); }
};

覆寫三個尺寸方法，確保預覽區大小固定，避免版面因內容長短而跳動。

3. 事件處理：即時同步

public void actionPerformed(ActionEvent e) {
    theLabel.setText(htmlTextArea.getText());
}

使用者點擊按鈕後，直接將編輯區文字設給 JLabel，Swing 會自動重繪 HTML。

執行畫面預期

啟動後會出現左右分欄視窗：左側可編輯 HTML 原始碼，右側即時顯示渲染結果。預設載入的範例會展示紅/藍/綠文字、大小字體、斜體與粗體等效果。

應用場景與延伸

• 動態產生說明文字、工具提示（setToolTipText 亦支援 HTML）。
• 結合 CSS 樣式（Swing 支援有限的 CSS 子集）進一步美化。
• 作為簡易 HTML 編輯器/預覽器的雛形，可再加入語法高亮、標籤自動補全等功能。

總結

Swing 內建的 HTML 支援雖不如瀏覽器完整，但對於簡單富文本需求已足夠。善用 JLabel、JButton、JToolTip 等元件的 HTML 渲染特性，即可在不引入外部函式庫的前提下，大幅提升介面表現力。