用Eclipse進(jìn)行可視化Java界面設(shè)計(jì)(1)
Posted on 2005-12-30 14:51 心田小筑 閱讀(2170) 評論(0) 編輯 收藏 所屬分類: 技術(shù)文章
前言
最近,Eclipse開源項(xiàng)目終于推出了期待已久的Visual Editor Project(VEP)。VE項(xiàng)目使得功能強(qiáng)大的eclipse平臺在java開發(fā)方面又增加了一個(gè)可視化java組件開發(fā)利器。它讓java開發(fā)者再 也不用依賴其它的IDE產(chǎn)品來做GUI界面方面的工作。所有的開發(fā),從應(yīng)用程序界面到業(yè)務(wù)邏輯的開發(fā),現(xiàn)在都可以在eclipse平臺上完成。本文將引導(dǎo) 開發(fā)者如何安裝配置并使用Visual Editor。
關(guān)于Visual Editor
開始介紹之前,來看一個(gè)筆者用Visual Editor(以下簡稱VE)設(shè)計(jì)的一個(gè)java程序界面:

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

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


在此菜單上,多了一個(gè)"Visual Calss"的子菜單,這就是進(jìn)入Visual Editor的入口之一。點(diǎn)擊"Visual Class",彈出如下的對話框:

在此對話框中,要求輸入類的名稱(如標(biāo)記○1)位置),在這里我們輸入"MessagePanel",以及你想要繼承的可視類(如標(biāo)記○2位置)。你可 以選擇繼承來自swing或AWT的任何界面組件,如要繼承其它類型的類,請選擇"other"并點(diǎn)擊"瀏覽"按鈕來選擇你要繼承的類。在此處,我們選擇 "panel"和Swing選項(xiàng),繼承JPanel,然后點(diǎn)擊"完成"按鈕,大家就可以見到Visual Editor的界面了:

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

圖中顯示了JPanel的預(yù)設(shè)LayoutManager。在"layout"屬性的右邊,可以通過點(diǎn)擊組合框來指定不同類型的 LayoutManager。不同的LayoutManager會在屬性編輯器中顯示不同的參數(shù),如果選擇GridLayout,屬性編輯器中的 layout屬性將顯示另外幾種不同的參數(shù),如下圖如示:
