Home » Java » Enterprise Java » Building Vaadin UI with Xtend

About Igor Madjeric

Igor Madjeric

Building Vaadin UI with Xtend

Today I have decided to say hello to Xtend . I had wish to learn some new programming language. The list of the criteria for choosing one, wasn’t so big .

  • It must be a programming language running on JVM,
  • and it would be nice if i don’t need to learn completely new eco system for building application.

I have checked a few options. The list of programming language for JVM is quit big, but at I was deciding between the following ones: Groovy, Scala and Xtend. At and i have choose Xtend.
 
 
Scala did not fit well in my criteria, on the other hand groovy fits my criteria but it will be the next programming language which i will learn, after Xtend. It is hard to explain why I choose Xtend. I don’t even think that the Xtend is a programming language, it’s more like extension, but it’s my opinion.

What is Xtend

So here is a few words about the language. For more info go on the Xtend web page. It’s nice and simple language which modernize Java. Instead of compiled byte code, Xtend is translated in to pretty-printed Java class, which makes it suitable for working with platforms which don’t work with byte code like GWT. The code written in Xtend produce Java classes, as i already mention, so there is no limitation in usage of any existing Java framework. The language is created with Xtext so it comes with already prepared Eclipse, and there are maven plugins for the language, so using it out of Eclipse will not be a problem.

Learning

Learning Xtend is not hard. There is a few syntax changes and few new semantics concepts which are currently missing in Java. There is nothing revolutionary comparing to the other programming language, Xtend just extends Java with the new feature which will allow you to create nicer,shorter classes. The features which get most of my attention were closure, lambda expression and extensions. Those stuff allow you to create a really nice builder classes. You can easily create UI Builders API, which will allow you to create simpler view(not in context of functionality, but in context of understanding of code).

Engaging Xtend

I’ve already mentioned that Xtend is build with Xtext, and that means that eclipse is already able to correctly handle Xtend language. After creating new Xtend class eclipse will complain about missing libs and offer you to add them in the class path, if you do not use maven for getting dependencies. The goals of this blog post are to show how Xtend can improve the way of building UI I’ve found nice examples for JavaFX, GWT … but I didn’t find anything for Vaadin, so I have decide to build a simple class for building Vaadin UI. Or to be more precise just a segment of it. The following example is not fully implemented and it can build just some part of UI, but it can be easily extend.

Vaadins UI is example of imperative UI written in the Java. Process of building UI is similar to the building imperative UI in GWT or SWT. Here is the simple example how it looks like:

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);
 }
}

The example above is typical implementation of Vaadin UI, and my goal is to make it easier and more readable. To do that I will start with the builder class.

Making UI Builder API

For getting nicer way for creating UI, I will create a component builder first. This is not a standard implementation of builder pattern, like we can do in pure Java. Actually we are building extension class. This class contains extension methods which will extend existing class with new methods. And here is implementation of the class.

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

The builder class alone can not do so much, it has basic functionality like building window, adding the different kinds of panels and button, and if you are familiar with Vaadin you know that there is a lot more components built in the framework. Almost all methods in the builder have two parameters. First parameter represent container class which will handle new component, and second parameter is closure which will contain code for the component initialization.

Making UI

The code, in the following snippet, is illustration of using builder class for building a Vaadin UI. The first line, in the class body, include ComponentBuilder as an extension. And powerful Xtend’s lambda syntax allows that the code looks more simple and easier to understand. This way we eliminated Java’s inner class and lot of boilerplate code which we would have in the case of pure Java. More about Xtend lambda expressions can be found in Xtend’s documentation

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)
     }
 
}

Conclusion

So this is really nice language, learning process take just few hours. Documentation is well written, the main language concept is shown in about 50 pages. After few hours you are ready for improving you application. This is something how Java should look like. In short, playing with Xtend was fun and it is worth of investing time.
 

Reference: Building Vaadin UI with Xtend from our JCG partner Igor Madjeric at the Igor Madjeric blog.

Do you want to know how to develop your skillset to become a Java Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. JPA Mini Book
2. JVM Troubleshooting Guide
3. JUnit Tutorial for Unit Testing
4. Java Annotations Tutorial
5. Java Interview Questions
6. Spring Interview Questions
7. Android UI Design
and many more ....
Email address:

Leave a Reply

1 Comment on "Building Vaadin UI with Xtend"

avatar
  Subscribe  
newest oldest most voted
Notify of
Tania
Guest
Hello Florian, My name is Tania and I work for Packt Publishing, a U.K. based publishing firm specializing in focused IT books. You can read more about us here: http://www.packtpub.com I came across your blog via a Google search and noticed a good amount of relevant information and blog updates related to Web development and Vaadin. I would like to inform you that Packt has recently published a new book Vaadin 7 UI Design By Example: Beginner’s Guide. Vaadin 7 UI Design By Example: Beginner’s Guide is an engaging guide that teaches the user how to develop web applications in… Read more »
Want to take your Java skills to the next level?
Grab our programming books for FREE!
Here are some of the eBooks you will get:
  • Spring Interview QnA
  • Multithreading & Concurrency QnA
  • JPA Minibook
  • JVM Troubleshooting Guide
  • Advanced Java
  • Java Interview QnA
  • Java Design Patterns
The Spring Framework Cookbook
  • Learn the best practices of the Spring Framework
  • Build simple, portable, fast and flexible JVM-based systems and applications
  • Explore specific projects like Boot and Batch
The Spring Data Programming Cookbook
  • Learn how to use data access technologies and cloud-based data services
  • Set up the environment and create a basic project
  • Learn how to handle the various modules (e.g. JPA, MongoDB, Redis etc.)
The Selenium Programming Cookbook
  • Kick-start your own projects using this testing framework for web applications
  • Learn JUnit integration and Standalone Server functionality
  • Find out the most popular Interview Questions about the Selenium Framework
The Mockito Programming Cookbook
  • Kick-start your own web projects using this open source testing framework
  • Write simple test cases using the Mockito Framework
  • Learn how to integrate with JUnit, Maven and other frameworks
The JUnit Programming Cookbook
  • Learn basic usage and configuration of JUnit
  • Create multithreaded tests
  • Learn how to integrate with other testing frameworks
The JSF 2.0 Programming Cookbook
  • Build component-based user interfaces for web applications
  • Set up the environment and create a basic project
  • Learn Internationalization and Facelets Templates
The Amazon S3 Tutorial
  • Develop your own Amazon S3 based applications
  • Learn API usage and pricing
  • Get your own projects up and running in minimum time
Java Design Patterns
  • Learn how Design Patterns are implemented and utilized in Java
  • Understand the reasons why patterns are so important
  • Learn when and how to apply each one of them
Java Concurrency Essentials
  • Dive into the magic of concurrency
  • Learn about concepts like atomicity, synchronization and thread safety
  • Learn about testing concurrent applications
The IntelliJ IDEA Handbook
  • Kick-start your own programming projects using IntelliJ IDEA
  • Learn how to setup and install plugins
  • Create UIs with this Java integrated development environment
The Git Tutorial
  • Learn why Git differs from other version control systems
  • Explore Git's usage and best practises
  • Learn branching strategies
The Eclipse IDE Handbook
  • Explore the most widely used Java IDE
  • Learn how to setup and install plugins
  • Built your own projects up and running in minimum time
The Docker Containerization Cookbook
  • Explore the world’s leading software containerization platform
  • Learn how to wrap a piece of software in a complete filesystem
  • Learn how to use DNS and various commands
Developing Modern Applications With Scala
  • Develop modern Scala applications
  • Build SBT and reactive applications
  • Learn about testing and database access
The Apache Tomcat Cookbook
  • Explore Apache Tomcat open-source web server
  • Learn about installation, configuration, logging and clustering
  • Kick-start your own web projects using Apache Tomcat
The Apache Maven Cookbook
  • Explore the Apache Maven build automation tool
  • Learn about Maven's project structure and configuration
  • Learn about Maven's dependency management and plug-ins
The Apache Hadoop Cookbook
  • Explore the Apache Hadoop open-source software framework
  • Learn distributed caching and streaming
  • Kick-start your own web projects using Apache Hadoop
The Android Programming Cookbook
  • Explore the Android mobile operating system
  • Learn about services and page views
  • Learn about Google Maps and Bluetooth functionality
The Elasticsearch Tutorial
  • Explore the Elasticsearch search engine
  • Develop your own Elasticsearch based applications
  • Learn operations, Java API Integration and reporting
Amazon DynamoDB Tutorial
  • Develop your own Amazon DynamoDB based applications
  • Learn DynamoDB Concepts and Best Practices
  • Get your own projects up and running in minimum time
Java NIO Programming Cookbook
  • Learn features for intensive I/O operations
  • Follow a series of tutorials on Java NIO examples
  • Get knowledge on Java Nio Socket and Asynchronous Channels
JBoss Drools Cookbook
  • Explore Drools business rule management system
  • Follow a series of tutorials on Drools examples
  • Get knowledge on business rules for a shopping domain model
Vaadin Programming Cookbook
  • Explore Vaadin web framework for rich Internet applications
  • Learn the Architecture and Best Practices
  • Get knowledge on Data Binding and Custom Components
Groovy Programming Cookbook
  • Explore Apache Groovy object-oriented programming language
  • Create sample applications and explore interview questions
  • Get knowledge on Callback functionality and various widgets
GWT Programming Cookbook
  • Explore the open source Google Web Toolkit
  • Create sample applications and explore interview questions
  • Create and maintain complex JavaScript front-end applications in Java
Do you want to know how to develop your skillset to become a Java Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. JPA Mini Book
2. JVM Troubleshooting Guide
3. JUnit Tutorial for Unit Testing
4. Java Annotations Tutorial
5. Java Interview Questions
and many more ....
Email address:
Do you want to know how to develop your skillset to become a Java Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. JPA Mini Book
2. JVM Troubleshooting Guide
3. JUnit Tutorial for Unit Testing
4. Java Annotations Tutorial
5. Java Interview Questions
and many more ....
Email address:
Do you want to know how to develop your skillset to become a Java Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. JPA Mini Book
2. JVM Troubleshooting Guide
3. JUnit Tutorial for Unit Testing
4. Java Annotations Tutorial
5. Java Interview Questions
6. Spring Interview Questions
7. Android UI Design
and many more ....
Email address:
Want to be a DynamoDB Master ?
Subscribe to our newsletter and download the Amazon DynamoDB Tutorial right now!
In order to help you master this Amazon NoSQL database service, we have compiled a kick-ass guide with all the major DynamoDB features and use cases! Besides studying them online you may download the eBook in PDF format!
Email address:
Programming Interview Coming Up?
Subscribe to our newsletter and download the Ultimate Multithreading and Concurrency interview questions and answers collection right now!
In order to get you prepared for your next Programming Interview, we have compiled a huge list of relevant Questions and their respective Answers. Besides studying them online you may download the eBook in PDF format!
Email address:
Java Interview Coming Up?
Subscribe to our newsletter and download the Ultimate Spring interview questions and answers collection right now!
In order to get you prepared for your next Java Interview, we have compiled a huge list of relevant Questions and their respective Answers. Besides studying them online you may download the eBook in PDF format!
Email address:
Java Interview Coming Up?
Subscribe to our newsletter and download the Ultimate Java interview questions and answers collection right now!
In order to get you prepared for your next Java Interview, we have compiled a huge list of relevant Questions and their respective Answers. Besides studying them online you may download the eBook in PDF format!
Email address:
Want to be a Java NIO Master ?
Subscribe to our newsletter and download the Java NIO Programming Cookbook right now!
In order to help you master Java NIO Library, we have compiled a kick-ass guide with all the major Java NIO features and use cases! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to be a Drools Master ?
Subscribe to our newsletter and download the JBoss Drools Cookbook right now!
In order to help you master Drools Business Rule Management System, we have compiled a kick-ass guide with all the major Drools features and use cases! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to be an iText Master ?
Subscribe to our newsletter and download the iText Tutorial right now!
In order to help you master iText Library, we have compiled a kick-ass guide with all the major iText features and use cases! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to be an Elasticsearch Master ?
Subscribe to our newsletter and download the Elasticsearch Tutorial right now!
In order to help you master Elasticsearch search engine, we have compiled a kick-ass guide with all the major Elasticsearch features and use cases! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to be a Scala Master ?
Subscribe to our newsletter and download the Scala Cookbook right now!
In order to help you master Scala, we have compiled a kick-ass guide with all the basic concepts! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to be a JUnit Master ?
Subscribe to our newsletter and download the JUnit Programming Cookbook right now!
In order to help you master unit testing with JUnit, we have compiled a kick-ass guide with all the major JUnit features and use cases! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to master Amazon Web Services ?
Subscribe to our newsletter and download the Amazon S3 Tutorial right now!
In order to help you master the leading Web Services platform, we have compiled a kick-ass guide with all its major features and use cases! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to master Spring Framework ?
Subscribe to our newsletter and download the Spring Framework Cookbook right now!
In order to help you master the leading and innovative Java framework, we have compiled a kick-ass guide with all its major features and use cases! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to master Eclipse IDE ?
Subscribe to our newsletter and download the Eclipse IDE Handbook right now!
In order to help you master Eclipse, we have compiled a kick-ass guide with all the basic features of the popular IDE! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to master IntelliJ IDEA ?
Subscribe to our newsletter and download the IntelliJ IDEA Handbook right now!
In order to help you master IntelliJ IDEA, we have compiled a kick-ass guide with all the basic features of the popular IDE! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to master Docker ?
Subscribe to our newsletter and download the Docker Containerization Cookbook right now!
In order to help you master Docker, we have compiled a kick-ass guide with all the basic concepts of the Docker container system! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to create a kick-ass Android App ?
Subscribe to our newsletter and download the Android Programming Cookbook right now!
With this book, you will delve into the fundamentals of Android programming. You will understand user input, views and layouts. Furthermore, you will learn how to communicate over Bluetooth and also leverage Google Maps into your application!
Email address:
Want to be a GIT Master ?
Subscribe to our newsletter and download the GIT Tutorial eBook right now!
In order to help you master GIT, we have compiled a kick-ass guide with all the basic concepts of the GIT version control system! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to be a Hadoop Master ?
Subscribe to our newsletter and download the Apache Hadoop Cookbook right now!
In order to help you master Apache Hadoop, we have compiled a kick-ass guide with all the basic concepts of a Hadoop cluster! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to master Spring Data ?
Subscribe to our newsletter and download the Spring Data Ultimate Guide right now!
In order to help you master Spring Data, we have compiled a kick-ass guide with all the major features and use cases! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to create a kick-ass Android App ?
Subscribe to our newsletter and download the Android UI Design mini-book right now!
With this book, you will delve into the fundamentals of Android UI design. You will understand user input, views and layouts, as well as adapters and fragments. Furthermore, you will learn how to add multimedia to an app and also leverage themes and styles!
Email address:
Want to be a Java 8 Ninja ?
Subscribe to our newsletter and download the Java 8 Features Ultimate Guide right now!
In order to get you up to speed with the major Java 8 release, we have compiled a kick-ass guide with all the new features and goodies! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to master Java Annotations ?
Subscribe to our newsletter and download the Java Annotations Ultimate Guide right now!
In order to help you master the topic of Annotations, we have compiled a kick-ass guide with all the major features and use cases! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to be a JUnit Master ?
Subscribe to our newsletter and download the JUnit Ultimate Guide right now!
In order to help you master unit testing with JUnit, we have compiled a kick-ass guide with all the major JUnit features and use cases! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to master Java Abstraction ?
Subscribe to our newsletter and download the Abstraction in Java Ultimate Guide right now!
In order to help you master the topic of Abstraction, we have compiled a kick-ass guide with all the major features and use cases! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to master Java Reflection ?
Subscribe to our newsletter and download the Java Reflection Ultimate Guide right now!
In order to help you master the topic of Reflection, we have compiled a kick-ass guide with all the major features and use cases! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to be a JMeter Master ?
Subscribe to our newsletter and download the JMeter Ultimate Guide right now!
In order to help you master load testing with JMeter, we have compiled a kick-ass guide with all the major JMeter features and use cases! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to be a Servlets Master ?
Subscribe to our newsletter and download the Java Servlet Ultimate Guide right now!
In order to help you master programming with Java Servlets, we have compiled a kick-ass guide with all the major servlet API uses and showcases! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to be a JAXB Master ?
Subscribe to our newsletter and download the JAXB Ultimate Guide right now!
In order to help you master XML Binding with JAXB, we have compiled a kick-ass guide with all the major JAXB features and use cases! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to be a JDBC Master ?
Subscribe to our newsletter and download the JDBC Ultimate Guide right now!
In order to help you master database programming with JDBC, we have compiled a kick-ass guide with all the major JDBC features and use cases! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to be a JPA Master ?
Subscribe to our newsletter and download the JPA Ultimate Guide right now!
In order to help you master programming with JPA, we have compiled a kick-ass guide with all the major JPA features and use cases! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to be a Hibernate Master ?
Subscribe to our newsletter and download the Hibernate Ultimate Guide right now!
In order to help you master JPA and database programming with Hibernate, we have compiled a kick-ass guide with all the major Hibernate features and use cases! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to be a JSF Master ?
Subscribe to our newsletter and download the JSF 2.0 Programming Cookbook right now!
In order to get you prepared for your JSF development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format!
Email address:
Want to be a Java Master ?
Subscribe to our newsletter and download the Advanced Java Guide right now!
In order to help you master the Java programming language, we have compiled a kick-ass guide with all the must-know advanced Java features! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to be a Java Master ?
Subscribe to our newsletter and download the Java Design Patterns right now!
In order to help you master the Java programming language, we have compiled a kick-ass guide with all the must-know Design Patterns for Java! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to be a Hadoop Master ?
Subscribe to our newsletter and download the Hadoop Tutorial right now!
In order to help you master Apache Hadoop, we have compiled a kick-ass guide with all the basic concepts of a Hadoop cluster! Besides studying them online you may download the eBook in PDF format!
Email address:
Want to be an Elastic Beanstalk Master ?
Subscribe to our newsletter and download the Amazon Elastic Beanstalk Tutorial right now!
In order to help you master AWS Elastic Beanstalk, we have compiled a kick-ass guide with all the major Elastic Beanstalk features and use cases! Besides studying them online you may download the eBook in PDF format!
Email address:
Amazon Elastic Beanstalk Tutorial
  • Develop your own Amazon Elastic Beanstalk based applications
  • Learn Java Integration and Command Line Interfacing
  • Get your own projects up and running in minimum time
Want to take your Java skills to the next level?
Grab our programming books for FREE!
Here are some of the eBooks you will get:
  • Spring Interview QnA
  • Multithreading & Concurrency QnA
  • JPA Minibook
  • JVM Troubleshooting Guide
  • Advanced Java
  • Java Interview QnA
  • Java Design Patterns
Insiders are already enjoying weekly updates and complimentary whitepapers!
Join them now to gain exclusive access to the latest news in the Java world, as well as insights about Android, Scala, Groovy and other related technologies.
Email address:
Want to be an ActiveMQ Master ?
Subscribe to our newsletter and download the Apache ActiveMQ Cookbook right now!
In order to help you master Apache ActiveMQ JMS, we have compiled a kick-ass guide with all the major ActiveMQ features and use cases! Besides studying them online you may download the eBook in PDF format!
Email address:
Apache ActiveMQ Cookbook
  • Explore Apache ActiveMQ Best Practices
  • Learn ActiveMQ Load Balancing and File Transfer
  • Develop your own Apache ActiveMQ projects