先前的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组件，现在我们来看看如何在自己的程序中?d?d一个窗口中来调用这个组件。
　　
　　使用前面介绍的方法，在工具栏上点击"新建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平台上完成。