先前的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平臺上完成。