情况是这样的：
今年1月到4月，我们小组（3个人其中2个开发人员）做一个新的很小的项目，一共才200多人天。这个项目完全是新的，用户除了要求用MySQL、Hibernate和Jonas服务器外，其他的都没有要求。连界面要求也没有。
最终我们选择用Vaadin来开发界面，Spring IOC来整合全部。于是对Vaadin这个框架有了些粗浅的认识。我觉得这还是一个很不错，很好玩的框架。
不过我们当时用的，还是Vaadin 6.7，现在Vaadin 7已经出alpha版了，可能有较大的改动。
主要资源包括学习资料全在官网上有
www.vaadin.com比较重要的几个：
UI组件及示例程序：http://demo.vaadin.com/sampler
Book of Vaadin：https://vaadin.com/book
API：https://vaadin.com/api/
Eclipse插件：https://vaadin.com/eclipse
简介
先来个简介，有些是我的理解，可能不对。。。
Vaadin是一个新型的Java框架，它可以让程序员在不使用HTML和JavaScript的情况下，轻松做出跨浏览器的网页。开发的方式和Swing比较接近，采用的是组件、Layout加事件管理的模式。整个开发过程纯Java，易于调试，免去了开发js的诸多烦恼。跨浏览器的实现仰仗GWT，所以应该说做得很不错。
Vaadin所有运行的代码都是在服务器端的。在Vaadin中，GWT就像一支笔，把服务器端组件的现有状态“画”在浏览器上。以前的版本用的是他们团队自己开发的东西，后来换成了GWT。
功能丰富强大的Add-on（不知道怎么翻译，就是现成别人写好的基于Vaadin的库之类的）也是一个值得考虑的因素，不过根据不同的版权，有一些是收费的。
看过他们官方的论坛，感觉人气还行。
Vaadin和GWT的区别
Vaadin的代码是运行在服务器端的。
另外，Vaadin支持所有Java类库，使用起来毫无限制，而GWT只能使用少数的Java类库。
和一般的Java项目一样，编译速度比较快。部署和一般JSP的项目是一样的。
我们项目选择Vaadin的原因
1. 纯Java编程，学习周期短
2. 现有组件多，有Eclipse插件开发效率高
我们整个项目好像是3到4个月要交货。Vaadin还有一个Eclipse的插件，可以实现拖拽开发界面，事实证明这个确实很方便，给我们的开发帮了大忙。
3. 部署简单，和正常JSP一样，只需要加一个Vaadin的jar就行，无需多余配置，项目可以用Eclipse插件直接生成。
不过我们是用Maven的。
4. 可以和Spring整合
在选择UI库之前，我们已经决定使用Spring框架，并且客户要求使用Hibernate。这样三者就由Spring整合在一起了。
5. 跨浏览器，客户需要IE和Firefox支持
来一张官网tutorial的Vaadin程序运行的图：
Vaadin与服务器之间的联系
Vaadin的组件是在服务器端的，用户看到的只是利用GWT画在浏览器上的对应的组件而已。GWT会把对客户端组件的操作以UIDL(JSON)的形式发到服务器端，再由Vaadin的Servlet把信息解读成服务器端相对应的组件的事件，然后执行相关代码后，把新的组件状态发送给客户端。客户端的GWT组件根据这些信息作出相应的改变。
简单介绍一下Vaadin的Eclipse插件，以及怎么创建项目并运行它。
先说一下怎样安装Eclipse插件，资料来自官网，地址如下：https://vaadin.com/eclipse
Help菜单下，单击Install
New Software...
然后添加新的Update
site:
Eclipse 3.5及以上版本：
在Work with那里输入http://vaadin.com/eclipse，并按回车
现在应该没有用3.5以下版了吧。。。而且3.5以下版没有Visual Design，很重要的一个特性。
注意，只需要输入http://vaadin.com/eclipse就行了，前面的update
site:...什么的都是按回车后自己加上去的。
选择要安装的Vaadin
Plug-in for Eclipse，然后点Next，稍等片刻，待Eclipse重启，安装完成。
安装完成后，我们就可以创建新的Vaadin项目了。
点File-->New-->Project...
在列表中找到Vaadin下的Vaadin Project。选好按Next。
然后输入项目名称，比如VaadinTest。
其他的用默认就好了，不过我还是忍不住在Configuration里选择了Vaadin, Java 6, Servlet 2.4。
Target runtime那好像是根据将来运行在哪个服务器上选择的，我这里默认就是Tomcat 6。
其他一路Next，不过留意看看都有些什么东西可以配置，这里我就不多说了。
项目建好后，如图所示：
新建好的项目就可以马上运行了。我们项目开发用的是Maven来生成war的，我不知道插件新建的项目该如何打包，会ant的同学可以试着用ant打包。
不过这不影响我们运行这个项目，Eclipse会拷贝需要的文件到服务器上。
首先，Servers view要开启。而且Server也要安装。这些我就不多说了，大家应该都差不多知道。
和一般的JSP/Servlet项目一样，右键点一个服务器，我这里是Tomcat
6，然后选Add and Remove...
然后在左侧选择要部署的项目，再点Add，把它加到右边去。选好后，点Finish结束。
我们现在就可以运行这个项目了。
右键点Tomcat 6，然后选Debug（这个方便调试，可以设断点），这样Tomcat服务器就启动了。
Console里的输出如下：
Tomcat启动之后，打开浏览器，输入网址：localhost:8080/VaadinTest，效果如下：
现在我们就可以用Vaadin的Eclipse插件来创建组件了，它可以大大提高开发效率。
为了更好的组织代码，建议新建一个包，比如叫ui。
建好之后右键点击然后右击ui，选择New->Other... 
在列表中选择Vaadin
Composite，然后点Next。
注意，不要选择Vaadin Widget，Widget在Vaadin好像指的是由服务器UI component + 客户端GWT。这个我没有接触过。
接下来输入名字，这个名字将成为类的名字，所以建议按类名规范输入，比如TestComposite，然后点Finish。
在这个过程中，有可能会出现这样的信息： 
这个好像不影响使用，如果想解决这个问题，可以按提示上的去装一下XULRunner。这里暂时先点OK。
类生成好后，Eclipse会自动打开Vaadin
Editor，如下图：
注意标签上的图标和一般的Java Editor不同，另外下方有两个标签，Source和Design。
我们点一下Design标签，拖拽界面就出来了，如图：
可以看出，左边的大片空白是画图区。右侧上方Component是组件列表，中间Hierarchy是已画好的组件的结构树，下方Properties是组件的layout及属性。
随便拖几个组件试试看。如图：
有时候，在界面上拖拽并不方便，这时候可以在Hierarchy里进行拖拽。
弄好之后，点保存，再点Source，会发现生成了很多的代码。
这里需要注意的是，这两个标签互相转换时，会进行一些操作。我猜测是这样的：当从Source转到Design时，插件会遍历带有AutoGenerated标记的代码，然后试图把界面呈现出来；反过来，从Design转回到Source 时，插件又重新把Autogenerated的代码生成一遍。
所以不要轻易改动带有AutoGenerated标记的代码，否则会导致不能打开Design标签，不过也不用紧张，如果打不开，它会说哪句代码它不懂，你把那句代码从AutoGenerated的代码中删掉就好了。
我里讲点我的经验：
我一般也就是用Vaadin Editor进行组件设计，弄好之后，就使用Eclipse的Java Editor进行代码修改。我感觉Java Editor写码时更好用一些。要想用Java Editor进行代码编辑，右键点中.java文件，然后在Open with中选择Java Editor。 
好了，我们把刚才写好的Composite加到页面去，看看效果。
修改VaadintestApplication的代码，如下：
public class VaadintestApplication extends Application {
@Override
public void init() {
Window mainWindow = new Window("Vaadintest Application");
TestComposite testComposite = new TestComposite();
mainWindow.setContent(testComposite);
setMainWindow(mainWindow);
}
}然后把Tomcat重新启动一遍。建议在编辑代码时，把Tomcat先关掉，编好后再重新启动一下比较好。
显示效果如下：
