Dantesque Vaadin: 2018

You can go to Vaadin starters and create a new template project.
I have done so, but you can do it from scratch. Let's go, but first, install JDK 10 and Tomcat 9

1. Creating an Eclipse Maven project

Open Eclipse and File-New-MavenProject. Select "Create a simple project (skip archetype selection)" and Select "Use default Workspace location" and Next

Fill the fields indicating Group id: com.ximodante.vaadin and Artifact Id: VaadinJava01 that is our project and Finish

We have now a project named VaadinJava01 in our workspace

2. Editing the pom.xml file

Let's edit this file as follows

<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>com.ximodante.vaadin</groupId>
  <artifactId>VaadinJava01</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <name>VaadinJava01</name>
  <description>First project with java anad vaadin 12</description>
  <packaging>war</packaging>
    
  <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>12.0.3</vaadin.version>
  </properties>
  
  
  <repositories>
    <!-- Repository used by many Vaadin add-ons -->
    <repository>
      <id>Vaadin Directory</id>
      <url>http://maven.vaadin.com/vaadin-addons</url>
    </repository>
    <!-- Repository needed for prerelease versions of Vaadin -->
    <repository>
      <id>vaadin-prereleases</id>
      <url>https://maven.vaadin.com/vaadin-prereleases</url>
    </repository>
  </repositories>
  
  <pluginRepositories>
    <!-- Repository needed for prerelease versions of Vaadin -->
    <pluginRepository>
      <id>vaadin-prereleases</id>
      <url>https://maven.vaadin.com/vaadin-prereleases</url>
    </pluginRepository>
  </pluginRepositories>
  
  <dependencyManagement>
    <dependencies>
      <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-bom</artifactId>
        <type>pom</type>
        <scope>import</scope>
        <version>${vaadin.version}</version>
      </dependency>
    </dependencies>
  </dependencyManagement>
  
  <dependencies>
    <dependency>
      <groupId>com.vaadin</groupId>
      <artifactId>vaadin-core</artifactId>
    </dependency>

    <!-- Added to provide logging output as Flow uses -->
    <!-- the unbound SLF4J no-operation (NOP) logger implementation -->
    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-simple</artifactId>
    </dependency>

    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <!-- <version>3.1.0</version> -->
      <version>4.0.1</version>
      <scope>provided</scope>
    </dependency>
    
    
    
  </dependencies>

  <build>
    <plugins>
      <!-- Jetty plugin for easy testing without a server -->
      <plugin>
        <groupId>org.eclipse.jetty</groupId>
        <artifactId>jetty-maven-plugin</artifactId>
        <version>9.4.11.v20180605</version>
        <configuration>
          <scanIntervalSeconds>1</scanIntervalSeconds>
        </configuration>
      </plugin>
    </plugins>
  </build>

  <profiles>
    <profile>
      <id>productionMode</id>
      <activation>
        <property>
          <name>vaadin.productionMode</name>
        </property>
      </activation>
      <dependencies>
        <dependency>
          <groupId>com.vaadin</groupId>
          <artifactId>flow-server-production-mode</artifactId>
        </dependency>
      </dependencies>
      <build>
        <plugins>
          <plugin>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-maven-plugin</artifactId>
            <version>${vaadin.version}</version>
            <executions>
              <execution>
                <goals>
                  <goal>copy-production-files</goal>
                  <goal>package-for-production</goal>
                </goals>
              </execution>
            </executions>
          </plugin>
        </plugins>
      </build>
    </profile>
  </profiles>
  
</project>

3. Create a simple view class

Create the package org.ximodante.vaadin and place this class in it

package org.ximodante.vaadin;

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

Notice on line 18 the "var" keyword for Java 10 version.

Now let's right-click the project Run As- Maven clean then right-click the project Maven-Update Project

If you have Tomcat installed in Eclipse then you can run the project if you right-click the project and
Run as - Run on Server

You should see

If you click, a message will be displayed.

If your project did not show this then repeat the previous yellow highlighted steps.

Happy coding!

Dantesque Vaadin

domingo, 30 de diciembre de 2018

01. VAADIN First App

1. Creating an Eclipse Maven project

2. Editing the pom.xml file

3. Create a simple view class