domingo, 30 de diciembre de 2018

01. VAADIN First App

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


  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<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


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
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!


Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)