xtend怎么使用_使用Xtend构建Vaadin UI

xtend怎么使用

今天，我决定向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() {
    
   @Override
   public 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() {
    
   @Override
   public 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.application
 
import com.vaadin.ui.Window
import com.vaadin.ui.Button
import com.vaadin.ui.Panel
import com.vaadin.ui.HorizontalLayout
import com.vaadin.ui.ComponentContainer
 
class 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.application
 
import com.vaadin.Application
import com.vaadin.ui.Button
 
class MainWindowXtend extends Application{
 
    extension ComponentBuilder = new ComponentBuilder
 
    override init() {  
          mainWindow = window[
                          horizontalLayout[
                                  panel[
                                        button[
                                               caption = "First button"
                                               it.addListener()[
                                                   sayHello('Hello First Button');
                                                   component as Button
                                                   component.caption = 'First button clicked'
                                              ]
                                        ]
                                        button[
                                               caption = "Second button"
                                               it.addListener()[
                                                   sayHello('Hello');
                                              ]
                                        ]
                                 ]
                          ]
                   ];  
     }
 
     def void sayHello(String string) { 
          println(string)
     }
 
}           

结论

因此，这是一种非常不错的语言，学习过程只需几个小时。 文档写得很好，主要的语言概念显示在大约50页中。 几个小时后，您就可以准备改善您的应用程序了。 这就是Java的外观。 简而言之，与Xtend一起玩很有趣，值得花时间。

参考：在Igor Madjeric博客上，我们的JCG合作伙伴 Igor Madjeric 使用Xtend构建Vaadin UI 。

翻译自: https://www.javacodegeeks.com/2013/02/building-vaadin-ui-with-xtend.html

xtend怎么使用