Vaadin附加组件和Maven

介绍

我喜欢Vaadin的（众多）一件事是它对Vaadin框架的“附加组件”社区-他们称之为Vaadin目录。 “附加组件”是框架中社区贡献的附加组件，可以是任何东西，例如从新的客户端小部件到数据表的延迟加载容器。我肯定会为Activiti看到类似的东西！

Vaadin小部件基本上是预编译的GWT小部件。 GWT窗口小部件本身是Java类，但是GWT编译器将它们编译为可在所有浏览器上使用的Javascript。因此，当您想在Vaadin Web应用程序中使用某个附加组件（具有新的客户端视觉效果）时，由于必须在Webapp中包含新的Javascript，因此您必须自己进行编译。

如果您使用的是Vaadin Eclipse插件，那么一切都会好起来的。只需将加载项jar添加到您的项目中，插件即可自动检测并编译新的小部件。但是，当您使用Maven构建Web应用程序时，并不是那么简单。但是根本不需要扔掉Maven并手动复制所有依赖项jar。毕竟是2011年。

在我看来，在Maven中进行GWT编译的默认方法效率不高。 因此，让我指导您完成最适合我的设置，以及如何调整Maven pom.xml。
对于不耐烦的人：在github上查看源代码： https : //github.com/jbarrez/vaadin-mvn-addon

使用Maven创建新的Vaadin Webapp

该步骤已被详细记录，只需检查Vaadin Wiki 。
简短版本：使用以下原型：

mvn archetype:generate -DarchetypeGroupId=com.vaadin-DarchetypeArtifactId=vaadin-archetype-clean -DarchetypeVersion=6.5.6 -DgroupId=com.jorambarrez -DartifactId=vaadin-mvn-addon -Dversion=1.0 -Dpackaging=war

添加附加组件

在这个示例webapp中，我将使用两个很酷的Vaadin附加组件：

Paperstack ：一个允许将组件显示为书页的容器
刷新：客户端组件，轮询服务器以进行UI更改

这两个插件都有新的客户端小部件，因此绝对需要通过GWT编译器运行。

调整pom.xml

打开pom.xml。原型已经生成了使用自定义加载项所需的全部内容。查找已注释的部分，然后取消注释。这就是全部。

创建网络应用

以下Vaadin Webapp展示了这两个组件的简单用法。我们将只显示“ Activiti”，并将每个字符显示在Paperstack组件的新页面上。我们还有一个按钮，它将使用Refresher组件和服务器端线程自动翻动页面：

public class MyVaadinApplication extends Application {private static final String DISPLAYED_WORD = "ACTIVITI";private Window window;private Refresher refresher;private Button goButton;private PaperStack paperStack;@Overridepublic void init() {window = new Window("My Vaadin Application");setMainWindow(window);initGoButton();initPaperStack();}private void initGoButton() {goButton = new Button("Flip to the end");window.addComponent(goButton);goButton.addListener(new ClickListener() {public void buttonClick(ClickEvent event) {goButton.setEnabled(false);startRefresher();startPageFlipThread();}});}private void startRefresher() {refresher = new Refresher();window.addComponent(refresher);refresher.setRefreshInterval(100L);}private void startPageFlipThread() {Thread thread = new Thread(new Runnable() {public void run() {goButton.setEnabled(false);int nrOfUpdates = DISPLAYED_WORD.length() - 1;while (nrOfUpdates >= 0) {paperStack.navigate(true);nrOfUpdates--;try {Thread.sleep(2000L);} catch (InterruptedException e) {e.printStackTrace();}}// Remove refresher when done (for performance)goButton.setEnabled(true);window.removeComponent(refresher);refresher = null;}});thread.start();}private void initPaperStack() {paperStack = new PaperStack();window.addComponent(paperStack);for (int i=0; i<DISPLAYED_WORD.length(); i++) {VerticalLayout verticalLayout = new VerticalLayout();verticalLayout.setSizeFull();paperStack.addComponent(verticalLayout);// Quick-hack CSS since I'm to lazy to define a styles.cssLabel label = new Label("<div style=\"text-align:center;color:blue;font-weight:bold;font-size:100px;text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;\">" + DISPLAYED_WORD.charAt(i) + "</div>", Label.CONTENT_XHTML);label.setWidth(100, Label.UNITS_PERCENTAGE);verticalLayout.addComponent(label);verticalLayout.setComponentAlignment(label, Alignment.MIDDLE_CENTER);}}

调整web.xml

为了使Vaadin了解自定义加载项，请在Vaadin Application Servlet中添加以下几行：

<init-param><param-name>widgetset</param-name><param-value>com.jorambarrez.CustomWidgetset</param-value>
</init-param>

另外，在包com.jorambarrez（无论你已经把在web.xml匹配）添加文件“CustomWidgetset.gwt.xml”。 只需复制以下几行，不必担心将附加的GWT描述符放在那里（这是合乎逻辑的），Maven插件会在附加的jar中自动找到它们。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC"-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN""http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/gwt-module.dtd">
<module><inherits name="com.vaadin.terminal.gwt.DefaultWidgetSet" />
</module>

运行网络应用

转到您的项目，并执行以下命令：

mvn clean package jetty：run

这将启动Jetty网络服务器并部署我们的Web应用程序。现在，您应该可以使用webapp了。

问题

运行前面的命令时，您应该会看到GWT编译器启动并编译自定义窗口小部件。问题是，GWT编译器确实花了一些时间来完成其魔术工作（在我的机器上为1.30分钟，而仅启动Jetty则需要5秒）。

当我想运行我的应用程序时，我不会坐下来看着GWT编译器每隔一段时间就会在我的加载项上撒上小精灵。当然， JRebel在这里可以提供很多帮助，但是绝对不需要每次都编译我的小部件 。毕竟，我完全不会更改这些加载项。

调整pom.xml（续集）

因此，我们刚刚了解到，Vaadin原型生成的默认pom.xml在加载项方面并不友好。如果您查看GWT编译器插件的配置，您会注意到已编译的窗口小部件被添加到目标文件夹中，而不是项目的源中：

<webappDirectory> $ {project.build.directory} / $ {project.build.finalName} / VAADIN / widgetsets </ webappDirectory>

如果我们将其更改为源文件夹：

<webappDirectory> src / main / webapp / VAADIN / widgetsets </ webappDirectory>

GWT编译的结果放在我的webapp的源代码中。这也意味着我可以将它们与我的Webapp的其余部分一起签入。

现在唯一需要做的就是确保我们不会在每次运行时都重新编译小部件。我选择将其简单地放在配置文件中，如下所示：

<profiles><profile><id>compile-widgetset</id><build><plugins><plugin><groupId>org.codehaus.mojo</groupId><artifactId>gwt-maven-plugin</artifactId>....

现在，无论何时将新的附件添加到项目中，我现在都运行以下命令：