Vaadin初探

以前用过服务端的echo框架，感觉挺好使的，它可以在服务器上生成html,

然后返回给浏览器。开发人员不需要了解html和javascript，就可以开发出

web应用。在服务端使用的也都是类似于swing的API。唯一的缺陷是每个

动作都要重新刷新一下页面，对ajax的支持比较滞后。虽然后来搞过echo和

extjs的结合（Echo3Ext20），不过毕竟不是一家人，诸多困难，后来只好放弃这个框架。

 

说了这么多前奏，才开始说说vaadin。我用的是Vaadin 7。Vaadin也有不短的历史，

最近关注是因为它也有个server框架，和echo很类似，但它不是每次都生成整个html

页面，而是有大量的ajax支持，因此不会再出现echo当中频繁刷新页面的情况。而且

它的文档非常完整，甚至都有一本书 Book of Vaadin 。同时，还有eclipse的插件

来支持开发，总得来说还是很方便的。

 

当然，Vaadin还有个和gwt结合的client框架，不过我对这个的兴趣不大，因为我们

现在用smartgwt，感觉很不错，就没必要去整vaadin了。

 

按照Vaadin的文档，安装eclipse的插件，可以很容易就创建一个vaadin的项目，

同时，很容易就把Hello world给启动起来。它的服务端入口就是一个 UI 的子类，

类似于gwt的概念，然后在 UI 子类里面把content填充进去，非常简单。

@Theme("runo")
public class SimpleUI extends UI {

	@Override
	protected void init(VaadinRequest request) {
		getPage().setTitle("Test");
		
		final VerticalLayout layout = new VerticalLayout();
		layout.setMargin(true);
		
		layout.setSizeFull();
		setContent(layout);
		LoginPanel panel = new LoginPanel();
		
		layout.addComponent( panel);
	}

}

 

它也有Theme的概念，换肤也挺方便，对css的支持也很好。总的来说，

只要熟悉swing/gwt，用vaadin可以很快的上手。而且不存在gwt的编译

过程，部署起来也容易些。如果只是用它来做一些小的项目开发，还是

一个不错的选择。

 

由于它本身是个server框架，因此不存在gwt里面的异步调用问题，对于

新手来说，也比较容易理解。开发人员可以把它当swing来使用，所有的

数据操作都是在服务器上，这也是一个非常不错的特性，也是我们当年用

echo所体会到的最大的一个好处。

 

vaadin的layout稍显复杂，不如echo那么简单。可能是不太熟悉的原因，

要不停的尝试各种设置。幸好它有个所见即所得的编辑器，使得这个工作

稍微简单一些。不过后来发现复杂的页面，还是手工写来的更快，用所见

即所得编辑器还是太费劲。

 

接下来，就是最关注的表格功能。vaadin的表格非常简单，简单到连分页

这种最常见的需求都没有原生的实现，而是要安装一个插件。虽然从这点

来看，有插件体系还是不错的，至少可扩展性很强。但是插件的另一个问题

就是，代码质量和使用习惯都不一致，因此使用起来还挺麻烦的。而且在

使用PagedTable的过程当中，发现页面总数总是不对，而且上一页下一页的

翻页也经常出现问题。很无奈。

 

用到这里，只能一声叹息，默默放弃。其实还是个不错的框架，但是对于

Table的支持很弱，象SmartGWT那么强大的表格，不知道要到第几个版本

才会有。先放一放吧。

评论

3 楼 diggywang 2013-10-11  

但从Grid（Table）的支持来讲，这星球上很少有几个框架能比得过SmartGWT，但人无完人，SmartGWT虽然UI上超级强大，但毕竟只是一个smartclient的js wrapper，渲染性能上很多时候都不尽人意，一个listgrid全部显示上百条records就毕竟吃力了，grid的Overflow参数可以使之仅显示需要的部分，但这样scroll的性能就很差；另外SmartGWT在widget稍微多点的时候，渲染能力也很差，在这种时候我经常只好定义原生的GWT控件来嵌入到SmartGWT的canvas中去。这也是我用SmartGWT 2年多来对smartgwt最感到不满的地方。

2 楼 SimonLei 2013-05-13  

lymalf 写道

vaadin book的demo地址:http://demo.vaadin.com/book-examples/book/#component.select.twincolselect.basic

不知道你要表达什么意思，不过如果要比较的话，你可以看看smartgwt的例子

http://www.smartclient.com/smartgwt/showcase/#main

还有进一步smartgwtee的例子 www.smartclient.com/smartgwtee/showcase/

1 楼 lymalf 2013-05-13  

vaadin book的demo地址:http://demo.vaadin.com/book-examples/book/#component.select.twincolselect.basic