用Eclipse進行視覺化Java介面設計
阿新 • • 發佈：2019-02-01
下載後的VE是一個zip檔案，請將其壓縮包中plugins和features目錄下的內容解壓到
eclipse安裝目錄的相應目錄中即可。如果你的eclipse是執行著的，請關閉並重新啟動
eclipse。
開始一個設計任務
現在，所有程式安裝完成，筆者將用一個例子，來講解Visual Editor的使用。在這個例
子中，筆者要設計一個郵件傳送面板，下面是它的草圖：
此面板包括髮送人，接收人，郵件主題，郵件內容以及傳送和清除按鈕，
進入Visual Editor
啟動eclipse平臺。剛開始，你可能覺得eclipse並沒有什麼變化。先別急，請新建一個項
目，點選"檔案"選單下的"新建"子選單，選擇並建立一個新的"java專案"。然後在工具欄
上的"新建Java類" 圖示上，點選右邊的小箭頭，將展開如下圖的選單：
在此選單上，多了一個"Visual Calss"的子選單,這就是進入Visual Editor的入口之
一。點選"Visual Class"，彈出如下的對話方塊：
在此對話方塊中，要求輸入類的名稱（如標記○1）位置），在這裡我們輸入
"MessagePanel"，以及你想要繼承的可視類（如標記○2位置）。你可以選擇繼承來自
swing或AWT的任何介面元件，如要繼承其它型別的類，請選擇"other"並點選"瀏覽"按鈕
來選擇你要繼承的類。在此處，我們選擇 "panel"和Swing選項，繼承JPanel，然後點選"
完成"按鈕，大家就可以見到Visual Editor的介面了：
由於eclipse工作臺高度的可定製性，讀者現在看到的介面並非VE初始的佈局，而是經過
筆者按喜好的方式重新佈局過的透檢視，但是這並不會影響讀者理解本文內容。
如圖中1所示，是VE的工具面板，提供"選取"、"框選"等選擇工具。還有Swing元件，
Swing容器，Swing選單以及AWT控制元件設計工具。在面板下方有"Design"和"Source"兩個頁
籤，用來切換設計介面和Java原始碼檢視。
圖中2是VE的工具欄，包括工具面板中的一些常用按鈕。
圖中3是"Java Beans"檢視和"屬性"檢視，兩個檢視可以切換顯示。"Java Beans"檢視
用樹形結構即時顯示設計中用到的各種Java Bean元件層次。而"屬性"檢視顯示顯示當前
所選中的Java bean元件的屬性值列表，你可以在此列表中編輯各項Java Bean的屬性值。
圖中灰色矩形區域即是我們最開始選擇的JPanel，所有的工作就從它開始。
擺設Swing元件
做過Swing GUI介面設計的人都知道，Java應用程式介面上的元素位置是用
LayoutManager來管理的。JPanel的預設佈局管理器是 FlowLayout。VE目前支援所有的傳
統的佈局管理器（這裡所指的傳統佈局管理器是指JDK1.4之前的佈局管理器。可惜的是VE
目前還不支援從 JDK1.4開始有的SpringLayout）。
要設定JPanel的layout，請先在設計介面中選中JPanel，再切換到"屬性"檢視，找到
"layout"屬性，如下圖所示：
圖中顯示了JPanel的預設LayoutManager。在"layout"屬性的右邊，可以通過點選組合
框來指定不同型別的 LayoutManager。不同的LayoutManager會在屬性編輯器中顯示不同
的引數，如果選擇GridLayout，屬性編輯器中的 layout屬性將顯示另外幾種不同的參
數，如下圖如示：
先前的FlowLayout的三個引數alignment, horizontal gap和vertical gap變成了
GridLayout的另外四種引數：columns, horizontal gap, rows, vertical gap。
為了方便設計，筆者在這個例子中將採用null，即不用任何LayoutManager來設計介面。
佈局設定好後，就可以在JPanel上擺置各種Swing元件了。按照我們最開始設計的草
圖，介面上要擺上四個Label：From, To, Subject, Message。以及四個文字元件，其第
四個應該是TextArea, 用於編輯多行文字。我們在工具面板上選好相關元件，然後在
JPanel上拖選出一個矩形，元件即按相應大小和位置顯示在此矩形區域。再在"屬性"檢視
中編輯每個JLabel和JButton的"text"屬性為相應的值。現在來看看下面筆者"畫"出來的
介面：
看看，設計的如何？筆者不是畫家，"畫"出來的介面顯得有些凌亂。沒關係，VE也提供
一些工具按鈕來讓我們調整各個元件的位置。請點選VE工具欄上的"Show alignment
window"按鈕：
顯示如下圖的視窗：
通過此視窗，可以將所選元件向上下左右各個方向對齊。還可以使所選元件具有相同高
度和寬度。來看看下圖經過調整位置後的介面佈局：
現在看起來是不是美觀多了？
新增事件處理
經過前面的步驟，VE的視覺化設計的任務就基本上完成了。在我們設計的介面中，有
"Send"和"Clear"按鈕。我們再來看看VE是如何為它們新增事件處理的。]
在設計介面的"Send"按鈕上點選滑鼠右鍵，彈出選單，如下圖：
在"Event" 選單項中，可以看到一個"actionPerformed"事件。如果要新增其它型別的事
件，可以點選"Add Events"選擇其它型別的事件。我們點選"actionPerformed"事件後，
在"Java Beans"檢視的"jButton-"Send""元件下面，多了一個"actionPerformed"事件類
型，如下圖所示：
在"Java Beans"檢視中，選中"actionPerformed"事件，再VE的視窗中，從"Design"切換
到"Source"檢視。
在上圖示記1的程式碼區域，就是我們剛剛新增的按鈕事件。筆者在事件中呼叫了一個send
方法，如圖中標記2程式碼區域。具體的傳送郵件的程式碼筆者在這裡就不實現了。
同樣的方法，一樣可以為另一個按鈕"Clear"新增事件。
在程式中使用自定義的元件
在前面我們設計好了自己的Java元件，現在我們來看看如何在自己的程式中——一個視窗
中來呼叫這個元件。
使用前面介紹的方法，在工具欄上點選"新建Java類"按鈕，建立一個JFrame的Visual
Class類。你也可以在通過選單"檔案"->"新建"->"Visual Class"來尋一個JFrame類。在
這裡，我們將這個類命名為"MyApp"。
當VE窗口出現時，可以看到一個空白的JFrame顯示在設計檢視中。此時，點選VE的工具
面板上的" Choose Bean"按鈕，然後在彈出的對話方塊中輸入我們設計的Java元件的類名
"MessagePane"，再點選"確定"。這時，當我們的滑鼠移到 JFrame上時，JFrame會用綠色
的線條切分成五份，如下圖所示：
這是因為JFrame的預設LayoutManager是BorderLayout，在VE中，如果在工具面板上選
好Java元件，當滑鼠移到有特定 LayoutManager的容器元件上時（在上圖中容器元件是一
個JFrame），VE會用適當的形式指示你當前滑鼠懸停的位置。在上圖在VE告訴我們現在處
在BorderLayout的中心位置，此時再在該位置點選一次，我們選好的Java元件即安放到此
位置。
用VE設計好程式介面，就可以切換到"Source"檢視進行具體的程式碼的編碼了。在此我們
就不累述了。
定製VE的環境
之前的講解，大家學到了如何用VE來進行視覺化的Java介面設計。為了適應不同的開發
者，VE也提供了一些選項來讓開發者設計自己喜好的VE環境。
請開啟選單"視窗"->"首選項"->"Java"->"Visual Editor"，此時出現VE的各種首選項
介面。由於筆者安裝的eclipse中文語言包早於VE釋出，所以此介面仍然是英文介面。在
這裡，VE的首選項分為三類："Appearance"，"Code Generation"，"Pattern Style"。下
面結合圖形分別介紹：
1．外觀(Appearance)設定：
此面板中可以設定這此內容：
(1) 設定可視編輯器和原始碼編輯器的佈局，一種是上下分隔的佈局，另一種是用頁答進
行切換的佈局(即本文例圖中所見到的樣式)。
(2) 設定是否顯示"屬性"檢視和"Java Beans"檢視。
(3) 設定設計時Swing的介面風格。
2．程式碼生成(Code Generation)設定
此面板包括以下內容：
(1) 設定是否為新表示式生成註釋和try{}…catch()塊。
(2) 設定可視設計介面和程式碼編輯器之間的程式碼同步時間。
3．程式碼模板風格(Pattern Style)設定
此面板包括以下內容：
(1) VE所用的存取Java Bean的程式碼風格。
(2) VE初始化時嘗試使用的初始化方法。VE目前已提供了對Jbuilder、NetBean等其它IDE
產品可視編輯器生成的Java元件程式碼初始化方式的支援。
總結
行文至此，我們從VE的安裝到Java元件設計以及 VE環境的設定，基本上已對eclipse的全
新工具Visual Editor作了一個全面的瞭解。有了Visual Editor，我們所有的開發工作，
從圖形使用者介面到業務邏輯，全部可以在eclipse平臺上完成。
參考資料
1．Visual Editor Project(VEP)的首頁：http:/www.eclipse..org/vep，可以在這
找到Visual Editor的所有資訊，包括程式及其原始碼下載，FAQ，郵件列表等。
eclipse安裝目錄的相應目錄中即可。如果你的eclipse是執行著的，請關閉並重新啟動
eclipse。
開始一個設計任務
現在，所有程式安裝完成，筆者將用一個例子，來講解Visual Editor的使用。在這個例
子中，筆者要設計一個郵件傳送面板，下面是它的草圖：
此面板包括髮送人，接收人，郵件主題，郵件內容以及傳送和清除按鈕，
進入Visual Editor
啟動eclipse平臺。剛開始，你可能覺得eclipse並沒有什麼變化。先別急，請新建一個項
目，點選"檔案"選單下的"新建"子選單，選擇並建立一個新的"java專案"。然後在工具欄
上的"新建Java類" 圖示上，點選右邊的小箭頭，將展開如下圖的選單：
在此選單上，多了一個"Visual Calss"的子選單,這就是進入Visual Editor的入口之
一。點選"Visual Class"，彈出如下的對話方塊：
在此對話方塊中，要求輸入類的名稱（如標記○1）位置），在這裡我們輸入
"MessagePanel"，以及你想要繼承的可視類（如標記○2位置）。你可以選擇繼承來自
swing或AWT的任何介面元件，如要繼承其它型別的類，請選擇"other"並點選"瀏覽"按鈕
來選擇你要繼承的類。在此處，我們選擇 "panel"和Swing選項，繼承JPanel，然後點選"
完成"按鈕，大家就可以見到Visual Editor的介面了：
由於eclipse工作臺高度的可定製性，讀者現在看到的介面並非VE初始的佈局，而是經過
筆者按喜好的方式重新佈局過的透檢視，但是這並不會影響讀者理解本文內容。
如圖中1所示，是VE的工具面板，提供"選取"、"框選"等選擇工具。還有Swing元件，
Swing容器，Swing選單以及AWT控制元件設計工具。在面板下方有"Design"和"Source"兩個頁
籤，用來切換設計介面和Java原始碼檢視。
圖中2是VE的工具欄，包括工具面板中的一些常用按鈕。
圖中3是"Java Beans"檢視和"屬性"檢視，兩個檢視可以切換顯示。"Java Beans"檢視
用樹形結構即時顯示設計中用到的各種Java Bean元件層次。而"屬性"檢視顯示顯示當前
所選中的Java bean元件的屬性值列表，你可以在此列表中編輯各項Java Bean的屬性值。
圖中灰色矩形區域即是我們最開始選擇的JPanel，所有的工作就從它開始。
擺設Swing元件
做過Swing GUI介面設計的人都知道，Java應用程式介面上的元素位置是用
LayoutManager來管理的。JPanel的預設佈局管理器是 FlowLayout。VE目前支援所有的傳
統的佈局管理器（這裡所指的傳統佈局管理器是指JDK1.4之前的佈局管理器。可惜的是VE
目前還不支援從 JDK1.4開始有的SpringLayout）。
要設定JPanel的layout，請先在設計介面中選中JPanel，再切換到"屬性"檢視，找到
"layout"屬性，如下圖所示：
圖中顯示了JPanel的預設LayoutManager。在"layout"屬性的右邊，可以通過點選組合
框來指定不同型別的 LayoutManager。不同的LayoutManager會在屬性編輯器中顯示不同
的引數，如果選擇GridLayout，屬性編輯器中的 layout屬性將顯示另外幾種不同的參
數，如下圖如示：
先前的FlowLayout的三個引數alignment, horizontal gap和vertical gap變成了
GridLayout的另外四種引數：columns, horizontal gap, rows, vertical gap。
為了方便設計，筆者在這個例子中將採用null，即不用任何LayoutManager來設計介面。
佈局設定好後，就可以在JPanel上擺置各種Swing元件了。按照我們最開始設計的草
圖，介面上要擺上四個Label：From, To, Subject, Message。以及四個文字元件，其第
四個應該是TextArea, 用於編輯多行文字。我們在工具面板上選好相關元件，然後在
JPanel上拖選出一個矩形，元件即按相應大小和位置顯示在此矩形區域。再在"屬性"檢視
中編輯每個JLabel和JButton的"text"屬性為相應的值。現在來看看下面筆者"畫"出來的
介面：
看看，設計的如何？筆者不是畫家，"畫"出來的介面顯得有些凌亂。沒關係，VE也提供
一些工具按鈕來讓我們調整各個元件的位置。請點選VE工具欄上的"Show alignment
window"按鈕：
顯示如下圖的視窗：
通過此視窗，可以將所選元件向上下左右各個方向對齊。還可以使所選元件具有相同高
度和寬度。來看看下圖經過調整位置後的介面佈局：
現在看起來是不是美觀多了？
新增事件處理
經過前面的步驟，VE的視覺化設計的任務就基本上完成了。在我們設計的介面中，有
"Send"和"Clear"按鈕。我們再來看看VE是如何為它們新增事件處理的。]
在設計介面的"Send"按鈕上點選滑鼠右鍵，彈出選單，如下圖：
在"Event" 選單項中，可以看到一個"actionPerformed"事件。如果要新增其它型別的事
件，可以點選"Add Events"選擇其它型別的事件。我們點選"actionPerformed"事件後，
在"Java Beans"檢視的"jButton-"Send""元件下面，多了一個"actionPerformed"事件類
型，如下圖所示：
在"Java Beans"檢視中，選中"actionPerformed"事件，再VE的視窗中，從"Design"切換
到"Source"檢視。
在上圖示記1的程式碼區域，就是我們剛剛新增的按鈕事件。筆者在事件中呼叫了一個send
方法，如圖中標記2程式碼區域。具體的傳送郵件的程式碼筆者在這裡就不實現了。
同樣的方法，一樣可以為另一個按鈕"Clear"新增事件。
在程式中使用自定義的元件
在前面我們設計好了自己的Java元件，現在我們來看看如何在自己的程式中——一個視窗
中來呼叫這個元件。
使用前面介紹的方法，在工具欄上點選"新建Java類"按鈕，建立一個JFrame的Visual
Class類。你也可以在通過選單"檔案"->"新建"->"Visual Class"來尋一個JFrame類。在
這裡，我們將這個類命名為"MyApp"。
當VE窗口出現時，可以看到一個空白的JFrame顯示在設計檢視中。此時，點選VE的工具
面板上的" Choose Bean"按鈕，然後在彈出的對話方塊中輸入我們設計的Java元件的類名
"MessagePane"，再點選"確定"。這時，當我們的滑鼠移到 JFrame上時，JFrame會用綠色
的線條切分成五份，如下圖所示：
這是因為JFrame的預設LayoutManager是BorderLayout，在VE中，如果在工具面板上選
好Java元件，當滑鼠移到有特定 LayoutManager的容器元件上時（在上圖中容器元件是一
個JFrame），VE會用適當的形式指示你當前滑鼠懸停的位置。在上圖在VE告訴我們現在處
在BorderLayout的中心位置，此時再在該位置點選一次，我們選好的Java元件即安放到此
位置。
用VE設計好程式介面，就可以切換到"Source"檢視進行具體的程式碼的編碼了。在此我們
就不累述了。
定製VE的環境
之前的講解，大家學到了如何用VE來進行視覺化的Java介面設計。為了適應不同的開發
者，VE也提供了一些選項來讓開發者設計自己喜好的VE環境。
請開啟選單"視窗"->"首選項"->"Java"->"Visual Editor"，此時出現VE的各種首選項
介面。由於筆者安裝的eclipse中文語言包早於VE釋出，所以此介面仍然是英文介面。在
這裡，VE的首選項分為三類："Appearance"，"Code Generation"，"Pattern Style"。下
面結合圖形分別介紹：
1．外觀(Appearance)設定：
此面板中可以設定這此內容：
(1) 設定可視編輯器和原始碼編輯器的佈局，一種是上下分隔的佈局，另一種是用頁答進
行切換的佈局(即本文例圖中所見到的樣式)。
(2) 設定是否顯示"屬性"檢視和"Java Beans"檢視。
(3) 設定設計時Swing的介面風格。
2．程式碼生成(Code Generation)設定
此面板包括以下內容：
(1) 設定是否為新表示式生成註釋和try{}…catch()塊。
(2) 設定可視設計介面和程式碼編輯器之間的程式碼同步時間。
3．程式碼模板風格(Pattern Style)設定
此面板包括以下內容：
(1) VE所用的存取Java Bean的程式碼風格。
(2) VE初始化時嘗試使用的初始化方法。VE目前已提供了對Jbuilder、NetBean等其它IDE
產品可視編輯器生成的Java元件程式碼初始化方式的支援。
總結
行文至此，我們從VE的安裝到Java元件設計以及 VE環境的設定，基本上已對eclipse的全
新工具Visual Editor作了一個全面的瞭解。有了Visual Editor，我們所有的開發工作，
從圖形使用者介面到業務邏輯，全部可以在eclipse平臺上完成。
參考資料
1．Visual Editor Project(VEP)的首頁：http:/www.eclipse..org/vep，可以在這
找到Visual Editor的所有資訊，包括程式及其原始碼下載，FAQ，郵件列表等。