使用Xtend构建Vaadin UI

今天，我决定向Xtend打个招呼。我希望学习一些新的编程语言。选择一个标准的清单并不多。

它必须是在JVM上运行的编程语言，
如果我不需要学习用于建筑应用的全新生态系统，那就太好了。

我已经检查了几个选项。 JVM的编程语言列表已不多了，但在我决定要选择以下语言时：Groovy，Scala和Xtend。在和我已经选择Xtend。

Scala不能很好地适合我的标准，另一方面，符合我的条件的常规方法却是Xtend之后我将学习的下一门编程语言。很难解释为什么我选择Xtend。我什至不认为Xtend是一种编程语言，它更像是扩展，但这是我的看法。

什么是Xtend

因此，这里有一些关于该语言的词。有关更多信息，请访问Xtend网页。这是一种美观而简单的语言，可以使Java现代化。 Xtend代替了编译后的字节码，而是转换为漂亮的Java类，这使其适用于无法使用字节码（例如GWT）的平台。正如我已经提到的，用Xtend编写的代码产生Java类，因此在使用任何现有Java框架时都没有限制。该语言是用Xtext创建的，因此它已经准备好了Eclipse，并且有该语言的maven插件，因此在Eclipse中使用它不会有问题。

学习

学习Xtend并不难。 Java中目前缺少一些语法更改和一些新的语义概念。与其他编程语言相比，没有什么革命性的东西，Xtend只是用新功能扩展了Java，它将使您可以创建更好，更短的类。我最关注的功能是闭包，lambda表达式和扩展。这些东西使您可以创建一个非常好的构建器类。您可以轻松创建UI Builders API，这将使您可以创建更简单的视图（不是在功能范围内，而是在代码理解的范围内）。

参与Xtend

我已经提到Xtend是使用Xtext构建的，这意味着eclipse已经能够正确处理Xtend语言。创建新的Xtend类后，如果您不使用maven获取依赖项，则eclipse将抱怨缺少的lib，并提供您将其添加到类路径中。这篇博客文章的目的是展示Xtend如何改善构建UI的方式。我已经找到了JavaFX，GWT的好示例……但是我没有找到Vaadin的任何东西，因此我决定构建一个简单的类来构建Vaadin UI。或者更确切地说只是其中的一部分。下面的示例尚未完全实现，它只能构建UI的一部分，但可以轻松扩展。

Vaadins UI是用Java编写的命令式UI的示例。构建UI的过程类似于GWT或SWT中构建命令式UI的过程。这是一个简单的示例，其外观如下：

package org.pis.web.application;import org.eclipse.xtext.xbase.lib.InputOutput;import com.vaadin.Application;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Panel;
import com.vaadin.ui.Window;@SuppressWarnings("serial")
public class MainWindow extends Application {public void init() {Window main =  new Window();HorizontalLayout hl = new HorizontalLayout();Panel panel  = new Panel();final Button button = new Button("First button");button.addListener( new ClickListener() {@Overridepublic void buttonClick(ClickEvent event) {sayHello("Hello First Button");button.setCaption("First button clicked");}});panel.addComponent(button);Button button2 = new Button("Second button");button2.addListener(new ClickListener() {@Overridepublic void buttonClick(ClickEvent event) {sayHello("Hello Second Button");}});main.addComponent(hl);setMainWindow(main);}public void sayHello(final String string) {InputOutput.<String> println(string);}
}

上面的示例是Vaadin UI的典型实现，我的目标是使其变得更容易阅读。为此，我将从构建器类开始。

制作UI Builder API

为了更好地创建UI，我将首先创建一个组件构建器。这不是构建器模式的标准实现，就像我们可以在纯Java中那样。实际上，我们正在构建扩展类。此类包含扩展方法，这些扩展方法将使用新方法扩展现有的类。这是该类的实现。

package org.pis.web.applicationimport com.vaadin.ui.Window
import com.vaadin.ui.Button
import com.vaadin.ui.Panel
import com.vaadin.ui.HorizontalLayout
import com.vaadin.ui.ComponentContainerclass ComponentBuilder{def window ( (Window) => void initializer){new Window().init(initializer)}def panel( ComponentContainer it, (Panel) => void initializer){val panel = new Panel().init(initializer)it.addComponent(panel)return panel}def horizontalLayout (ComponentContainer it, (HorizontalLayout) => void initializer){val hl = new HorizontalLayout().init(initializer)it.addComponent(hl);return hl}def button ( ComponentContainer it, (Button)=> void initializer){println('Button in panel creation')val that = new Button().init(initializer);it.addComponent(that);return that}def private <T> T init(T obj, (T) => void init){init?.apply(obj)return obj }}

单独的builder类不能做很多事情，它具有基本的功能，例如构建窗口，添加各种面板和按钮，并且如果您熟悉Vaadin的话，您知道框架中内置了很多组件。构建器中的几乎所有方法都有两个参数。第一个参数代表将处理新组件的容器类，第二个参数是闭包，它将包含用于组件初始化的代码。

制作UI

以下代码段中的代码说明了如何使用构建器类来构建Vaadin UI。类主体中的第一行包括ComponentBuilder作为扩展。强大的Xtend的lambda语法使代码看起来更简单易懂。这样，我们消除了Java的内部类和许多纯Java代码中的样板代码。有关Xtend Lambda表达式的更多信息，请参见Xtend的文档。

package org.pis.web.applicationimport com.vaadin.Application
import com.vaadin.ui.Buttonclass MainWindowXtend extends Application{extension ComponentBuilder = new ComponentBuilderoverride init() {  mainWindow = window[horizontalLayout[panel[button[caption = "First button"it.addListener()[sayHello('Hello First Button');component as Buttoncomponent.caption = 'First button clicked']]button[caption = "Second button"it.addListener()[sayHello('Hello');]]]]];  }def void sayHello(String string) { println(string)}}