Eclipse---可視化界面設(shè)計(jì)

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

2、一個(gè)筆者用 Visual Editor(以下簡(jiǎn)稱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í)，會(huì)立即反饋到 java Editor中的代碼。反之亦然。VE是一個(gè)可視化開發(fā)的一個(gè)fr

3、amework，當(dāng)前版本的 VE是0.5.0RC1版，本版本的VE支持Swing和AWT的可視Java組件開發(fā)。由于這個(gè) framework設(shè)計(jì)的具有通用性， 它也可以很容易的實(shí)現(xiàn) C+或其它語(yǔ)言下可視化開發(fā)。其將來(lái)的版本(從1.0開始)，將會(huì)支持SWT的開發(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)過測(cè)試。所以如果你使用的是 這兩種操作系統(tǒng)之外的其它操作系統(tǒng)，你應(yīng)該先閱讀 VE的readme

4、文件，安裝和使用 VE 前，必須先安裝以下版本的eclipse和相關(guān)支持類庫(kù)：Eclipse build 2.1.2 (build page) (dow nl oad zip)EMF build 1.1.1: (build page) (download zip)GEF Build 2.1.2: (build page) (download zip)為了方便中國(guó)的開發(fā)者，eclipse也提供了一個(gè)中文語(yǔ)言包，下載安裝后，elcipse環(huán)境將變成全中文的界面。在本文中，筆者用的eclipse也安裝了此中文語(yǔ)言包。之后就可以從以下地址下載 Visual Editor 了：http:/dow nl

5、/vep下載后的VE是一個(gè)zip檔案，請(qǐng)將其壓縮包中plugins和features目錄下的內(nèi)容解壓到eclipse安裝目錄的相應(yīng)目錄中即可。如果你的eclipse是運(yùn)行著的，請(qǐng)關(guān)閉并重新啟動(dòng)eclipse 。開始一個(gè)設(shè)計(jì)任務(wù)Visual Editor的使用。在這個(gè)現(xiàn)在，所有程序安裝完成，筆者將用一個(gè)例子，來(lái)講解 例子中，筆者要設(shè)計(jì)一個(gè)郵件發(fā)送面板，下面是它的草圖：FromSutj ec t此面板包括發(fā)送人，接收人，郵件主題，郵件內(nèi)容以及發(fā)送和清除按鈕,進(jìn)入 Visual Editor啟動(dòng)eclipse平臺(tái)。剛開始，你可能覺得eclipse并沒有什么變化。先別急，請(qǐng)

6、新建一個(gè)項(xiàng)目，點(diǎn)擊”文件"菜單下的"新建"子菜單，選擇并建立一個(gè)新的"java項(xiàng)目”。然后在工具欄上的"新建Java類”圖標(biāo)上，點(diǎn)擊右邊的小箭頭，將展開如下圖的菜單：_!礫 dK吉念類念接口測(cè)試羸例總 Visual Class在此菜單上，多了一個(gè) "Visual Calss"的子菜單，這就是進(jìn)入 Visual Editor的入口之一。點(diǎn)擊"Visual Class"，彈出如下的對(duì)話框：在此對(duì)話框中，要求輸入類的名稱（如標(biāo)記O1）位置），在這里我們輸入"MessagePanel", 以及

7、你想要繼承的可視類（如標(biāo)記02位置）。你可以選擇繼承來(lái)自swing或AWT的任何界面組件，如要繼承其它類型的類，請(qǐng)選擇 "other"并點(diǎn)擊”瀏覽"按鈕來(lái)選擇你要繼承的類。 在此處，我們選擇"panel"和Swing選項(xiàng)，繼承JPanel，然后點(diǎn)擊”完成"按鈕，大家就可以 見到Visual Editor 的界面了：由于eclipse工作臺(tái)高度的可定制性，讀者現(xiàn)在看到的界面并非VE初始的布局，而是經(jīng)過筆者按喜好的方式重新布局過的透視圖，但是這并不會(huì)影響讀者理解本文內(nèi)容。如圖中1所示，是VE的工具面板，提供"選取"、&

8、quot;框選"等選擇工具。還有Swing組件， Swing容器，Swing菜單以及 AWT控件設(shè)計(jì)工具。在面板下方有"Design"和"Source"兩個(gè)頁(yè)簽，用來(lái)切換設(shè)計(jì)界面和Java源代碼視圖。圖中2是VE的工具欄，包括工具面板中的一些常用按鈕。圖中3是"Java Bea ns"視圖和"屬性"視圖，兩個(gè)視圖可以切換顯示。"Java Bea ns"視圖用樹形結(jié)構(gòu)即時(shí)顯示設(shè)計(jì)中用到的各種Java Bean組件層次。而”屬性"視圖顯示顯示當(dāng)前所選中的Java bean組件的屬

9、性值列表，你可以在此列表中編輯各項(xiàng)Java Bean的屬性值。圖中灰色矩形區(qū)域即是我們最開始選擇的JPanel，所有的工作就從它開始。擺設(shè)Swing組件做過Swing GUI界面設(shè)計(jì)的人都知道，Java應(yīng)用程序界面上的元素位置是用LayoutManager 來(lái)管理的。JPanel的預(yù)設(shè)布局管理器是 FlowLayout 。 VE目前支持所有的傳統(tǒng)的布局管理器（這里所指的傳統(tǒng)布局管理器是指JDK1.4之前的布局管理器?？上У氖荲E目前還不支持從 JDK1.4開始有的SpringLayout ）。JPanel，再切換到"屬性”視圖，找到要設(shè)置JPanel的layout，請(qǐng)先在設(shè)計(jì)界面中選

10、中"layout"屬性，如下圖所示:石茅禺題 X展性rsenabledtruefontgo見 plain, 11foregroundCokwibilack.H >layoutFlowL ayout 丄alignmentCENTERyertical 導(dǎo)Elorationo,aTJi圖中顯示了 JPanel的預(yù)設(shè)LayoutManager。在"layout"屬性的右邊，可以通過點(diǎn)擊組 合框來(lái)指定不同類型的LayoutManager。不同的LayoutManager會(huì)在屬性編輯器中顯示不同的參數(shù)，如果選擇GridLayout，屬性編輯器中的layout屬

11、性將顯示另外幾種不同的參數(shù)， 如下圖如示：先前的 FlowLayout 的三個(gè)參數(shù) alignment, horizontal gap禾口 vertical gap 變成了GridLayout 的另外四種參數(shù)： colu mns, horiz on tal gap, rows, vertical gap 。為了方便設(shè)計(jì)，筆者在這個(gè)例子中將采用null，即不用任何LayoutManager來(lái)設(shè)計(jì)界面。布局設(shè)置好后，就可以在JPanel上擺置各種Swing組件了。按照我們最開始設(shè)計(jì)的草個(gè)應(yīng)該是TextArea,用于編輯多行文本。我們?cè)诠ぞ呙姘迳线x好相關(guān)組件，然后在JPanel上拖選出一個(gè)矩形，組件

12、即按相應(yīng)大小和位置顯示在此矩形區(qū)域。再在"屬性"視圖中編輯每個(gè)JLabel和JButton的"text"屬性為相應(yīng)的值?，F(xiàn)在來(lái)看看下面筆者”畫"出來(lái)的界面：看看，設(shè)計(jì)的如何？筆者不是畫家，"畫"出來(lái)的界面顯得有些凌亂。沒關(guān)系，VE也提供一些工具按鈕來(lái)讓我們調(diào)整各個(gè)組件的位置。請(qǐng)點(diǎn)擊VE工具欄上的"Show alignmentwindow"按鈕：顯示如下圖的視窗:通過此視窗，可以將所選組件向上下左右各個(gè)方向?qū)R。還可以使所選組件具有相同高度和寬度。來(lái)看看下圖經(jīng)過調(diào)整位置后的界面布局：現(xiàn)在看起來(lái)是不是美觀多了

13、?添加事件處理經(jīng)過前面的步驟，VE的可視化設(shè)計(jì)的任務(wù)就基本上完成了。在我們?cè)O(shè)計(jì)的界面中，有"Send"和"Clear"按鈕。我們?cè)賮?lái)看看 VE是如何為它們添加事件處理的。在設(shè)計(jì)界面的"Send"按鈕上點(diǎn)擊鼠標(biāo)右鍵，彈出菜單，如下圖:Seri'jSend 軍做他）打開寰型層次結(jié)籾（叮Rename Fiekl 篝彌陣Rename FieldAdd Events .ClearClearSet Feit在"Event"菜單項(xiàng)中，可以看到一個(gè) "actionPeformed"事件。如果要添加其它類

14、型的事 件，可以點(diǎn)擊"Add Events"選擇其它類型的事件。我們點(diǎn)擊"actionPeformed"事件后，在"Java Bea ns"視圖的"jButt on-"Se nd""組件下面，多了一個(gè)"actio nPeformed"事件類型，如下圖所示：在"Java Bea ns"視圖中，選中"actio nPeformed" 事件，再 VE的窗口中，從"Desig n"切 換到"Source"

15、視圖。在上圖標(biāo)記1的代碼區(qū)域，就是我們剛剛添加的按鈕事件。筆者在事件中調(diào)用了一個(gè) send方法，如圖中標(biāo)記 2代碼區(qū)域。具體的發(fā)送郵件的代碼筆者在這里就不實(shí)現(xiàn)了。同樣的方法，一樣可以為另一個(gè)按鈕"Clear"添加事件。在程序中使用自定義的組件在前面我們?cè)O(shè)計(jì)好了自己的Java組件，現(xiàn)在我們來(lái)看看如何在自己的程序中一一一個(gè)窗口中來(lái)調(diào)用這個(gè)組件。使用前面介紹的方法，在工具欄上點(diǎn)擊"新建Java類"按鈕，建立一個(gè)JFrame的VisualClass類。你也可以在通過菜單 ”文件"->"新建"->"Visual

16、Class"來(lái)尋一個(gè)JFrame類。在這 里，我們將這個(gè)類命名為"MyApp"。當(dāng)VE窗口出現(xiàn)時(shí)，可以看到一個(gè)空白的 JFrame顯示在設(shè)計(jì)視圖中。此時(shí)，點(diǎn)擊 VE 的工具面板上的"Choose Bean"按鈕，然后在彈出的對(duì)話框中輸入我們?cè)O(shè)計(jì)的Java組件的類名"MessagePane"，再點(diǎn)擊”確定”。這時(shí)，當(dāng)我們的鼠標(biāo)移到 JFrame上時(shí)，JFrame會(huì) 用綠色的線條切分成五份，如下圖所示：這是因?yàn)?JFrame的預(yù)設(shè)LayoutManager 是BorderLayout，在 VE中，如果在工具面 板上選好Java組

17、件，當(dāng)鼠標(biāo)移到有特定LayoutManager的容器組件上時(shí)（在上圖中容器組件是一個(gè)JFrame），VE會(huì)用適當(dāng)?shù)男问街甘灸惝?dāng)前鼠標(biāo)懸停的位置。在上圖在VE告訴我們現(xiàn)在處在 BorderLayout的中心位置，此時(shí)再在該位置點(diǎn)擊一次，我們選好的Java組件即安放到此位置。用VE設(shè)計(jì)好程序界面，就可以切換到 "Source"視圖進(jìn)行具體的代碼的編碼了。在此我 們就不累述了。定制VE的環(huán)境之前的講解，大家學(xué)到了如何用VE來(lái)進(jìn)行可視化的Java界面設(shè)計(jì)。為了適應(yīng)不同的VE環(huán)境。開發(fā)者，VE也提供了一些選項(xiàng)來(lái)讓開發(fā)者設(shè)計(jì)自己喜好的請(qǐng)打開菜單"窗口 "->&

18、quot;首選項(xiàng)"->"Java"->"Visual Editor"，此時(shí)出現(xiàn) VE的各種首選項(xiàng)界 面。由于筆者安裝的eclipse中文語(yǔ)言包早于 VE發(fā)布，所以此界面仍然是英文界面。在這里，VE 的首選項(xiàng)分為三類："Appearanee" ， "Code Generation" ， "Pattern Style"。下面結(jié)合圖形分別介紹：1 .外觀(Appearanee)設(shè)置:Appearance |ShpH the visual editor and s口urce edi

19、torAbove each other with a spit psns 廠 .時(shí) 圧 i汕Qn separate notebook而 with palette in editor part ! imiii im mibiJ7 open Properties Wew 口 兩 Open Java Beans Vi&wi J Metaljawjt.swlnci.plaf .metLMetaLookAnclFeelJCDE/MDtif17, Windowscom. sun. java. swing. plaf. rnoti f. MotiflxicOndFeel cam. sun .java

20、. 5 wing, ptef .windows. Window sLooltAndFerJ叮Swing LqqR.and Fel此面板中可以設(shè)置這此內(nèi)容：(1) 設(shè)置可視編輯器和源代碼編輯器的布局，一種是上下分隔的布局，另一種是用頁(yè)答進(jìn)行切換的布局(即本文例圖中所見到的樣式)。(2) 設(shè)置是否顯示"屬性”視圖和"Java Bea ns"視圖。(3) 設(shè)置設(shè)計(jì)時(shí)Swing的界面風(fēng)格。2 .代碼生成(Code Generation) 設(shè)置fS! I!MIS'1':Code Gen era bon IGenet akion style亠 Generate a ccionent For nuiw 旳ru巧icinyGenerate