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>....

現在，無論何時將新的附件添加到項目中，我現在都運行以下命令：