先前的FlowLayout的三個(gè)參數(shù)alignment, horizontal gap和vertical gap變成了GridLayout的另外四種參數(shù)：columns, horizontal gap, rows, vertical gap。
　　
　　為了方便設(shè)計(jì)，筆者在這個(gè)例子中將采用null，即不用任何LayoutManager來(lái)設(shè)計(jì)界面。
　　
　　布局設(shè)置好后，就可以在JPanel上擺置各種Swing組件了。按照我們最開(kāi)始設(shè)計(jì)的草圖，界面上要擺上四個(gè)Label：From, To, Subject, Message。以及四個(gè)文本組件，其第四個(gè)應(yīng)該是TextArea, 用于編輯多行文本。我們?cè)诠ぞ呙姘迳线x好相關(guān)組件，然后在JPanel上拖選出一個(gè)矩形，組件即按相應(yīng)大小和位置顯示在此矩形區(qū)域。再在"屬性"視圖中編輯每個(gè)JLabel和JButton的"text"屬性為相應(yīng)的值。現(xiàn)在來(lái)看看下面筆者"畫(huà)"出來(lái)的界面：
　　　
　　看看，設(shè)計(jì)的如何？筆者不是畫(huà)家，"畫(huà)"出來(lái)的界面顯得有些凌亂。沒(méi)關(guān)系，VE也提供一些工具按鈕來(lái)讓我們調(diào)整各個(gè)組件的位置。請(qǐng)點(diǎn)擊VE工具欄上的"Show alignment window"按鈕：
　　　
　　顯示如下圖的視窗：
　　　
　　通過(guò)此視窗，可以將所選組件向上下左右各個(gè)方向?qū)R。還可以使所選組件具有相同高度和寬度。來(lái)看看下圖經(jīng)過(guò)調(diào)整位置后的界面布局：
　　　
　　現(xiàn)在看起來(lái)是不是美觀多了？
　　
　　添加事件處理
　　
　　經(jīng)過(guò)前面的步驟，VE的可視化設(shè)計(jì)的任務(wù)就基本上完成了。在我們?cè)O(shè)計(jì)的界面中，有"Send"和"Clear"按鈕。我們?cè)賮?lái)看看VE是如何為它們添加事件處理的。
　　
　　在設(shè)計(jì)界面的"Send"按鈕上點(diǎn)擊鼠標(biāo)右鍵，彈出菜單，如下圖：
　　　
　　在"Event"菜單項(xiàng)中，可以看到一個(gè)"actionPerformed"事件。如果要添加其它類(lèi)型的事件，可以點(diǎn)擊"Add Events"選擇其它類(lèi)型的事件。我們點(diǎn)擊"actionPerformed"事件后，在"Java Beans"視圖的"jButton-"Send""組件下面，多了一個(gè)"actionPerformed"事件類(lèi)型，如下圖所示：
　　　
　　在"Java Beans"視圖中，選中"actionPerformed"事件，再VE的窗口中，從"Design"切換到"Source"視圖。
　　　
　　在上圖標(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類(lèi)"按鈕，建立一個(gè)JFrame的Visual Class類(lèi)。你也可以在通過(guò)菜單"文件"->"新建"->"Visual Class"來(lái)尋一個(gè)JFrame類(lèi)。在這里，我們將這個(gè)類(lèi)命名為"MyApp"。
　　
　　當(dāng)VE窗口出現(xiàn)時(shí)，可以看到一個(gè)空白的JFrame顯示在設(shè)計(jì)視圖中。此時(shí)，點(diǎn)擊VE的工具面板上的" Choose Bean"按鈕，然后在彈出的對(duì)話框中輸入我們?cè)O(shè)計(jì)的Java組件的類(lèi)名"MessagePane"，再點(diǎn)擊"確定"。這時(shí)，當(dāng)我們的鼠標(biāo)移到JFrame上時(shí)，JFrame會(huì)用綠色的線條切分成五份，如下圖所示：
　　
　　這是因?yàn)镴Frame的預(yù)設(shè)LayoutManager是BorderLayout，在VE中，如果在工具面板上選好Java組件，當(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)不同的開(kāi)發(fā)者，VE也提供了一些選項(xiàng)來(lái)讓開(kāi)發(fā)者設(shè)計(jì)自己喜好的VE環(huán)境。
　　
　　請(qǐng)打開(kāi)菜單"窗口"->"首選項(xiàng)"->"Java"->"Visual Editor"，此時(shí)出現(xiàn)VE的各種首選項(xiàng)界面。由于筆者安裝的eclipse中文語(yǔ)言包早于VE發(fā)布，所以此界面仍然是英文界面。在這里，VE的首選項(xiàng)分為三類(lèi)："Appearance"，"Code Generation"，"Pattern Style"。下面結(jié)合圖形分別介紹：
　　
　　1．外觀(Appearance)設(shè)置：
　　
　　此面板中可以設(shè)置這此內(nèi)容：
　　
　　(1) 設(shè)置可視編輯器和源代碼編輯器的布局，一種是上下分隔的布局，另一種是用頁(yè)答進(jìn)行切換的布局(即本文例圖中所見(jiàn)到的樣式)。
　　
　　(2) 設(shè)置是否顯示"屬性"視圖和"Java Beans"視圖。
　　
　　(3) 設(shè)置設(shè)計(jì)時(shí)Swing的界面風(fēng)格。
　　
　　2．代碼生成(Code Generation)設(shè)置
　　
　　此面板包括以下內(nèi)容：
　　
　　(1) 設(shè)置是否為新表達(dá)式生成注釋和try{}…catch()塊。
　　
　　(2) 設(shè)置可視設(shè)計(jì)界面和代碼編輯器之間的代碼同步時(shí)間。
　　
　　3．代碼模板風(fēng)格(Pattern Style)設(shè)置
　　
　　此面板包括以下內(nèi)容：
　　
　　(1) VE所用的存取Java Bean的代碼風(fēng)格。
　　
　　(2) VE初始化時(shí)嘗試使用的初始化方法。VE目前已提供了對(duì)Jbuilder、NetBean等其它IDE產(chǎn)品可視編輯器生成的Java組件代碼初始化方式的支持。
　　
　　總結(jié)
　　
　　行文至此，我們從VE的安裝到Java組件設(shè)計(jì)以及VE環(huán)境的設(shè)置，基本上已對(duì)eclipse的全新工具Visual Editor作了一個(gè)全面的了解。有了Visual Editor，我們所有的開(kāi)發(fā)工作，從圖形用戶(hù)界面到業(yè)務(wù)邏輯，全部可以在eclipse平臺(tái)上完成。