这也许是Java程序的通病：当代码复杂时，可读性不高。特别是这种与布局相关的代码，使用java完全看不出来组件之间的上下级关系，看着非常累。
不信的话，看这官方提供的例子：
所有的代码都是一块一块的，在同一个层级上排列下来，从代码中很难想像出页面的效果。当代码长一点之后，看起来真是非常痛苦。
对于布局，最好的方式是像html标签那样，互相嵌套，像树一样清晰。解决方式有两种：
- 提供可视化设计工具
- 用其它语言写一套DSL
一、可视化设计器
vaadin的eclipse插件中真的提供了一个可视化的设计工具。可在新建文件时选择“Vaadin Composite”即可打开一个可“Design“的页面，效果如下图：
设计器XulRunner的支持，需要先到https://developer.mozilla.org/en/XULRunner_1.9_Release_Notes处下载XulRunner，然后还得注册一下：
xulrunner -register-global
设计器看起来还是比较酷的，但是用起来还是不够流畅。首先反应有点慢，拖动起来总觉得很费力，修改属性不太方便。另外，要想快速画出一个满意的布局，还得先好好了解Vaadin的代码用法。试用了一下，感觉短期内掌握有点困难。与Extjs提供的Ext-Designer相比，略差一些。
它将生成对应的Java代码，在生成的属性或方法上都会加上一个@AutoGenerated注解。然后在它的基础上进行一些修改。
我感觉这个设计器用用处不大。拖的不爽影响心情，最终还要直面惨淡的Java代码，始终逃不过。所以希望能走第二条路，设计一套DSL，用代码方式直接控制布局。
二、Scala-wrappers
Vaadin有一个Add-on叫scal-wrappers，能让代码嵌套，看起来清楚一些。项目地址在：https://github.com/henrikerola/scala-wrappers
给个它自带的例子：
new GridLayout(columns = 2, rows = 1, width = 560 px, spacing = true, margin = true, caption = “Labels”, style = Reindeer.LAYOUT_WHITE) {
add(new HtmlLabel("Header Style (<code>Reindeer.LABEL_H1</code>)"))
add(new H1("Lorem Ipsum"))
}
可以看到其中的嵌套关系，比之前要清晰一些。
但是还不够，我希望能写成这样：
GridLayout(columns = 2, rows = 1, width = 560 px, spacing = true, margin = true, caption = “Labels”, style = Reindeer.LAYOUT_WHITE) {
HtmlLabel("Header Style (<code>Reindeer.LABEL_H1</code>)")
H1("Lorem Ipsum")
}
即可前面的add和new也去掉，这样看起来干扰更少一些。
这个工作得等我慢慢开始做。有一套好用的DSL，才能提高开发效率。