Eclipse Visual Editor 實戰：可視化 Java GUI 設計全流程指南

Eclipse 開源專案推出期待已久的 Visual Editor Project (VEP)，為強大的 Eclipse 平台增添可視化 Java 元件開發利器。開發者無需依賴其他 IDE 即可完成從 GUI 介面到業務邏輯的全流程開發。本文完整記錄 VE 安裝、配置、元件設計、事件處理、自訂元件重用與環境客製化。

Visual Editor 簡介

VE 是開源 Eclipse 編輯器，與 JDT、PDE 同屬 Eclipse 工具專案。支援 Swing/AWT 可視化編輯，與 Java Editor 雙向同步：視覺化設計即時反映至原始碼，反之亦然。基於通用框架設計，未來版本將支援 SWT。當前版本 0.5.0 RC1。

下載與安裝

VE 純 Java 編寫，跨平台可用（僅 Windows/Linux 經測試）。先安裝：

• Eclipse 2.1.2
• EMF 1.1.1
• GEF 2.1.2

下載 VE ZIP，將 plugins、features 內容解壓至 Eclipse 同名目錄，重啟 Eclipse。安裝中文語言包可獲中文介面。

啟動 Visual Editor

1. 建立 Java 專案
2. 工具列「新建 Java 類別」右側箭頭 → 選擇 Visual Class
3. 輸入類別名稱（如 MessagePanel），選擇繼承的可視類別（如 JPanel，Swing 選項）
4. 完成進入 VE 介面

VE 介面佈局

• 工具面板：選取/框選工具、Swing/AWT 元件庫、Design/Source 分頁切換
• 工具列：常用按鈕快捷操作
• Java Beans / 屬性視圖：樹狀顯示元件階層、編輯當前選中元件屬性
• 設計區：灰色矩形為根容器（如 JPanel），拖放元件至此

實戰：設計郵件發送面板

1. 設定版面配置

選中根容器 → 屬性視圖 → layout 選擇 null（絕對定位，便於精確控制）。GridLayout 等傳統配置管理器皆支援，參數會動態顯示對應屬性。

2. 拖放元件與屬性設定

從元件庫拖放 JLabel、JTextField、JTextArea、JButton 至設計區，調整大小位置。屬性視圖編輯 text 等屬性。工具列 Show alignment window 提供對齊、等寬/等高按鈕，快速美化版面。

3. 事件處理

• 設計區元件右鍵 → Event → actionPerformed 添加點擊事件
• Java Beans 視圖元件下出現 actionPerformed 節點
• 切換至 Source 分頁，在事件處理方法中撰寫業務邏輯（如呼叫 send()）

4. 重用自訂元件

1. 建立新 Visual Class 繼承 JFrame（命名 MyApp）
2. 工具面板點擊 Choose Bean，輸入自訂元件類名 MessagePanel
3. 滑鼠移至 JFrame，綠色分割線指示 BorderLayout 五大區域，點擊中心區放入元件
4. 切換 Source 視圖撰寫主程式邏輯

環境客製化

Window → Preferences → Java → Visual Editor 三大類設定：

總結

從安裝到元件設計、事件綁定、元件重用、環境調教，VE 讓 Eclipse 成為完整的 Java GUI 開發平台。所有開發工作——圖形介面與業務邏輯——現可在單一平台完成。