用Eclipse進(jìn)行可視化Java界面設(shè)計(jì)(1)

2019-11-18 13:03:39

字體：大中小

供稿：網(wǎng)友

用Eclipse進(jìn)行可視化Java界面設(shè)計(jì)(1)（圖一）

　　前言
　　
　　最近，Eclipse開(kāi)源項(xiàng)目終于推出了期待已久的Visual Editor PRoject(VEP)。VE項(xiàng)目使得功能強(qiáng)大的eclipse平臺(tái)在java開(kāi)發(fā)方面又增加了一個(gè)可視化java組件開(kāi)發(fā)利器。它讓java開(kāi)發(fā)者再也不用依靠其它的IDE產(chǎn)品來(lái)做GUI界面方面的工作。所有的開(kāi)發(fā)，從應(yīng)用程序界面到業(yè)務(wù)邏輯的開(kāi)發(fā)，現(xiàn)在都可以在eclipse平臺(tái)上完成。本文將引導(dǎo)開(kāi)發(fā)者如何安裝配置并使用Visual Editor。
　　
　　關(guān)于Visual Editor
　　
　　開(kāi)始介紹之前，來(lái)看一個(gè)筆者用Visual Editor(以下簡(jiǎn)稱VE)設(shè)計(jì)的一個(gè)java程序界面：
　　　用Eclipse進(jìn)行可視化Java界面設(shè)計(jì)(1)（圖二）

用Eclipse進(jìn)行可視化Java界面設(shè)計(jì)(1)（圖二）

　　怎么樣，其可視化的界面設(shè)計(jì)，一點(diǎn)也不遜于其它的Java可視化界面開(kāi)發(fā)工具。
　　
　　Visual Editor是一個(gè)開(kāi)源的eclipse編輯器。它同JDT、PDE等其它eclipse的工具項(xiàng)目一樣，是一個(gè)全新的eclipse工具項(xiàng)目。它可以進(jìn)行可視化的編輯java GUI程序，也能編輯可視化的Java Bean組件。它能與eclipse的Java Editor集成在一起，當(dāng)在Visual Editor中編輯圖形界面時(shí)，會(huì)立即反饋到j(luò)ava Editor中的代碼。反之亦然。
　　
　　VE是一個(gè)可視化開(kāi)發(fā)的一個(gè)framework，當(dāng)前版本的VE是0.5.0RC1版，本版本的VE支持Swing和AWT的可視Java組件開(kāi)發(fā)。由于這個(gè)framework設(shè)計(jì)的具有通用性，它也可以很輕易的實(shí)現(xiàn)C++或其它語(yǔ)言下可視化開(kāi)發(fā)。其將來(lái)的版本(從1.0開(kāi)始)，將會(huì)支持SWT的開(kāi)發(fā)。更多的關(guān)于Visual Editor的信息，請(qǐng)看參考資料的相關(guān)鏈接。
　　
　　下載與安裝
　　
　　由于Visual Editor是用純java編寫的，所以它應(yīng)該可以在任何操作系統(tǒng)上運(yùn)行。但當(dāng)前的VE版本是0.5.0RC1，只在windows和linux平臺(tái)上經(jīng)過(guò)測(cè)試。所以假如你使用的是這兩種操作系統(tǒng)之外的其它操作系統(tǒng)，你應(yīng)該先閱讀VE的readme文件，安裝和使用VE前，必須先安裝以下版本的eclipse和相關(guān)支持類庫(kù)：
　　
　　Eclipse build 2.1.2 (build page) (download zip)
　　EMF build 1.1.1: (build page) (download zip)
　　GEF Build 2.1.2: (build page) (download zip)
　　
　　為了方便中國(guó)的開(kāi)發(fā)者，eclipse也提供了一個(gè)中文語(yǔ)言包，下載安裝后，elcipse環(huán)境將變成全中文的界面。在本文中，筆者用的eclipse也安裝了此中文語(yǔ)言包。之后就可以從以下地址下載Visual Editor了：
　　
　　http://download.eclips.org/vep….
　　
　　下載后的VE是一個(gè)zip檔案，請(qǐng)將其壓縮包中plugins和features目錄下的內(nèi)容解壓到eclipse安裝目錄的相應(yīng)目錄中即可。假如你的eclipse是運(yùn)行著的，請(qǐng)關(guān)閉并重新啟動(dòng)eclipse。
　　
　　開(kāi)始一個(gè)設(shè)計(jì)任務(wù)
　　
　　現(xiàn)在，所有程序安裝完成，筆者將用一個(gè)例子，來(lái)講解Visual Editor的使用。在這個(gè)例子中，筆者要設(shè)計(jì)一個(gè)郵件發(fā)送面板，下面是它的草圖：
　　　用Eclipse進(jìn)行可視化Java界面設(shè)計(jì)(1)（圖三）

用Eclipse進(jìn)行可視化Java界面設(shè)計(jì)(1)（圖三）

　　此面板包括發(fā)送人，接收人，郵件主題，郵件內(nèi)容以及發(fā)送和清除按鈕，
　　
　　進(jìn)入Visual Editor
　　
　　啟動(dòng)eclipse平臺(tái)。剛開(kāi)始，你可能覺(jué)得eclipse并沒(méi)有什么變化。先別急，請(qǐng)新建一個(gè)項(xiàng)目，點(diǎn)擊"文件"菜單下的"新建"子菜單，選擇并建立一個(gè)新的"java項(xiàng)目"。然后在工具欄上的"新建Java類" 圖標(biāo)上，點(diǎn)擊右邊的小箭頭　用Eclipse進(jìn)行可視化Java界面設(shè)計(jì)(1)（圖四）

用Eclipse進(jìn)行可視化Java界面設(shè)計(jì)(1)（圖四）

，將展開(kāi)如下圖的菜單：
　　　用Eclipse進(jìn)行可視化Java界面設(shè)計(jì)(1)（圖五）

　　在此菜單上，多了一個(gè)"Visual Calss"的子菜單,這就是進(jìn)入Visual Editor的入口之一。點(diǎn)擊"Visual Class"，彈出如下的對(duì)話框：
　　　用Eclipse進(jìn)行可視化Java界面設(shè)計(jì)(1)（圖六）

　　在此對(duì)話框中，要求輸入類的名稱（如標(biāo)記○1）位置），在這里我們輸入"MessagePanel"，以及你想要繼續(xù)的可視類（如標(biāo)記○2位置）。你可以選擇繼續(xù)來(lái)自swing或AWT的任何界面組件，如要繼續(xù)其它類型的類，請(qǐng)選擇"other"并點(diǎn)擊"瀏覽"按鈕來(lái)選擇你要繼續(xù)的類。在此處，我們選擇"panel"和Swing選項(xiàng)，繼續(xù)JPanel，然后點(diǎn)擊"完成"按鈕，大家就可以見(jiàn)到Visual Editor的界面了：
　　　用Eclipse進(jìn)行可視化Java界面設(shè)計(jì)(1)（圖七）

用Eclipse進(jìn)行可視化Java界面設(shè)計(jì)(1)（圖七）

　　由于eclipse工作臺(tái)高度的可定制性，讀者現(xiàn)在看到的界面并非VE初始的布局，而是經(jīng)過(guò)筆者按喜好的方式重新布局過(guò)的透視圖，但是這并不會(huì)影響讀者理解本文內(nèi)容。
　　
　　如圖中1所示，是VE的工具面板，提供"選取"、"框選"等選擇工具。還有Swing組件，Swing容器，Swing菜單以及AWT控件設(shè)計(jì)工具。在面板下方有"Design"和"Source"兩個(gè)頁(yè)簽，用來(lái)切換設(shè)計(jì)界面和Java源代碼視圖。
　　
　　圖中2是VE的工具欄，包括工具面板中的一些常用按鈕。
　　
　　圖中3是"Java Beans"視圖和"屬性"視圖，兩個(gè)視圖可以切換顯示。"Java Beans"視圖用樹(shù)形結(jié)構(gòu)即時(shí)顯示設(shè)計(jì)中用到的各種Java Bean組件層次。而"屬性"視圖顯示顯示當(dāng)前所選中的Java bean組件的屬性值列表，你可以在此列表中編輯各項(xiàng)Java Bean的屬性值。
　　圖中灰色矩形區(qū)域即是我們最開(kāi)始選擇的JPanel，所有的工作就從它開(kāi)始。
　　
　　擺設(shè)Swing組件
　　
　　做過(guò)Swing GUI界面設(shè)計(jì)的人都知道，Java應(yīng)用程序界面上的元素位置是用LayoutManager來(lái)治理的。JPanel的預(yù)設(shè)布局治理器是FlowLayout。VE目前支持所有的傳統(tǒng)的布局治理器（這里所指的傳統(tǒng)布局治理器是指JDK1.4之前的布局治理器。可惜的是VE目前還不支持從JDK1.4開(kāi)始有的SpringLayout）。
　　
　　要設(shè)置JPanel的layout，請(qǐng)先在設(shè)計(jì)界面中選中JPanel，再切換到"屬性"視圖，找到"layout"屬性，如下圖所示：
　　　用Eclipse進(jìn)行可視化Java界面設(shè)計(jì)(1)（圖八）

用Eclipse進(jìn)行可視化Java界面設(shè)計(jì)(1)（圖八）

　　圖中顯示了JPanel的預(yù)設(shè)LayoutManager。在"layout"屬性的右邊，可以通過(guò)點(diǎn)擊組合框來(lái)指定不同類型的LayoutManager。不同的LayoutManager會(huì)在屬性編輯器中顯示不同的參數(shù)，假如選擇GridLayout，屬性編輯器中的layout屬性將顯示另外幾種不同的參數(shù)，如下圖如示：
　　用Eclipse進(jìn)行可視化Java界面設(shè)計(jì)(1)（圖九）