Dantesque Vaadin: 10. A project from scratch

updated on April 15, 2019

1. Introduction

It is required :

Open JDK 10.x
Lombok
Eclipse Photon (4.9.0)
Tomcat 9.08

2. Installation

Download and install Open JDK10 as teaches Wesam in StackOverflow.
Download and install Eclipse Photon.
Download and execute Lombok.jar (version 1.18) and search for your eclipse installation
Download and install Tomcat 9.

3. Create an Eclipse Maven Project

1) File > New > Maven Project

2) Check only:
🗹 Create a simple project (skip archetype selection).
🗹 Use default Workspace location.
Press Next

3) Fill these fields (I have used these values. But don't forget to select war packaging!)
  Group Id: ximodante
  Artifact Id: VaadinJava04
  Packaging : war
  Name : OpenWebVaadin02
  Description: CDI-Vaadin-Maven
Press Finish

4. Edit the pom.xml file so that we can use:

Vaadin (version 12.x, as 13.x, is not working)
CDI
Hibernate
XML and other stuff that has been omitted in Java>8
posgresql
yaml
Lombok...

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>openadmin</groupId>
  <artifactId>OpenWebVaadin02</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  <name>OpenWebVaadin02</name>
  <description>CDI-Vaadin-Maven</description>
  
  <properties>
    <!-- changed from 1.8 to 10 -->
    <maven.compiler.source>10</maven.compiler.source>
    <maven.compiler.target>10</maven.compiler.target>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <failOnMissingWebXml>false</failOnMissingWebXml>

    <vaadin.version>13.0.3</vaadin.version>
    <vaadin-cdi.version>10.1.0</vaadin-cdi.version>
    <lombok.version>1.18.6</lombok.version>
    <servlet.version>4.0.1</servlet.version>
    <weld-cdi.version>3.1.0.Final</weld-cdi.version>
   
    <hibernate.version>5.2.16.Final</hibernate.version>
    <jaxb.version>2.3.0</jaxb.version>
    <activation.version>1.2.0</activation.version>
    <jackson.version>2.9.5</jackson.version>
    
  </properties>
    
  <dependencies>
    <!-- https://mvnrepository.com/artifact/com.vaadin/vaadin-core -->
    <dependency>
      <groupId>com.vaadin</groupId>
      <artifactId>vaadin-core</artifactId>
      <version>${vaadin.version}</version>
    </dependency>
    
    
       
    <!-- https://mvnrepository.com/artifact/com.vaadin/vaadin-cdi -->
    <dependency>
      <groupId>com.vaadin</groupId>
      <artifactId>vaadin-cdi</artifactId>
      <version>${vaadin-cdi.version}</version>
    </dependency>
   
    
    <!-- 2019.02  -->
    <!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>${lombok.version}</version>
      <scope>provided</scope>
    </dependency>
    
    <!-- 2018-04 Java Servlet API-->  
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <!-- <version>3.1.0</version> -->
      <version>${servlet.version}</version>
      <scope>provided</scope>
    </dependency>
    
    <!-- 2019.02 Weld CDI for Tomcat with all dependencies included (does not fulfill all capabilities !!!) -->
    <!-- https://mvnrepository.com/artifact/org.jboss.weld.servlet/weld-servlet-shaded -->
    <dependency>
      <groupId>org.jboss.weld.servlet</groupId>
      <artifactId>weld-servlet-shaded</artifactId>
      <version>${weld-cdi.version}</version>
    </dependency>
    
  </dependencies>
  
  
  
</project>

4. Additional files:

1. Create a new folder into webapp folder (src/main/webapp) called WEB-INF

2. Create an empty file beans.xml in the WEB-INF folder. This file may be required by CDI (Context and dependency injection). For more information see BalusC.

3. (Optional)In future posts we will need including local jar files (dependencies) that are not in Maven Central repository. So in the previous WEB-INF folder let's create the folder lib, that will contain these jars. (There are other options to solve this problem, but it is good for me. See Roufid for more accepted solutions)

4. (Optional) Also in the future, we will be using JNDI data sources in Tomcat (and will be referenced in JPA). So we need to create the META-INF folder (in the webapp folder). We will include in this folder the empty file context.xml.

5. Additional files in the src/main/resources folder

(Optional) In a future we will put this files in the src/main resources:

1. META_INF/persistence.xml (for JPA)
2. properties/application.properties (for properties files)
3. bundles/language.properties (for resources bundles)
4. Other stuff

6. Simple page

1. Let's create the package openadmin.ui into src/main/java. I have decided to save all my user interface in "ui" folder

2. Create the java class MainView.java

package openadmin.ui;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;

/**
 * The main view contains a button and a click listener.
 */
@SuppressWarnings("serial")
@Route("")
@PWA(name = "Project Base for Vaadin Flow", shortName = "Project Base")
public class MainView extends VerticalLayout {

    public MainView() {
        var button = new Button("Click me. Right Now!",
                event -> Notification.show("Clicked! Silly Boy v.04.1"));
        add(button);
    }
}

Note:

Only one @Route annotation with a constant non-empty parameter should be used as indicates the bootstrap class.
We are using CDI and Vaadin, each system has its own annotations.
In CDI all beans should implement Serializable interface or else Tomcat won't start.
We are using Lombok annotations @Getter and @Setter.3. Let's create (optionally) the folder "pages" into the folder "webapp".
@PWA annotation let us introduce to the Progressive Web Applications.

6. Project structure

7. Executing the page

Right-click on test02-login-page.xhtml and select Run As - Run on Serve

Dantesque Vaadin

miércoles, 10 de abril de 2019

10. A project from scratch