Vaadin 8 によるオール java web アプリ開発の仕組みと実践

Java !!! Vaadin8 Java Web

JJUG CCC 2017 Spring #ccc_i120 May 2017

Yutaka KatoDXC Technology

#ccc_i1 Vaadin 8 Java Web

URL: https://goo.gl/IIztDT URL : https://go-talks.appspot.com/github.com/mikan/talks/ccc-vaadin-8.slide

Introduction

Vaadin !

public class HelloWorld extends UI { @Override protected void init(VaadinRequest request) { VerticalLayout content = new VerticalLayout(); setContent(content); content.addComponent(new Label("Hello World!")); content.addComponent(new Button(" !", click -> Notification.show(" !"))); }}

Question

" ( ) #

"

"

" /

" Vaadin !

Vaadin

❓

" % Vaadin Ltd. OSS (Apache License 2.0)

❓ Vaadin Ltd.

"

❓ CSS HTML

" ... Valo

❓ G

" v4.1 ()

Yutaka Kato

Vaadin ()

(?)

Java BOF( / ) Go ( / ) AOSN (/Discord)

DXC Java C#

DEMO

Vaadin Sampler

demo.vaadin.com/sampler/ (https://demo.vaadin.com/sampler/)

Valo Theme

demo.vaadin.com/valo-theme/ (https://demo.vaadin.com/valo-theme/)

( )

Vaadin Framework 8 ( Vaadin 7 API ) + Spring Boot 1.5

OAuth (spring-security-oauth2) GitHub

CloudFoundry Bluemix

Vaadin

vaadin.com/success-stories (https://vaadin.com/success-stories)

Vaadin

Vaadin Framework

2002 12 Millstone Library 3.0.0 (LGPL v2, )

2007 3 IT Mill Toolkit 4.0 ( &)

2007 12 IT Mill Toolkit 4.1 (Apache License 2.0 ')

2009 5 Vaadin 6.0.0 ( ()

2017 2 Vaadin Framework 8.0 ( ))

demo.vaadin.com/RaindeerTheme (https://demo.vaadin.com/ReindeerTheme)

Vaadin Framework 8

API ( )

API com.vaadin.v7

Vaadin Framework 8 (1 of 3)

API

v *

List<Person> persons = Backend.getPersons();BeanItemContainer<Person> container = new BeanItemContainer(Person.class, persons);Grid grid = new Grid();grid.setContainerDataSource(container);grid.removeAllColumns();grid.addColumn("firstName");grid.getColumn("firstName").setHeaderCaption("First Name");

v +

List<Person> persons = Backend.getPersons();Grid<Person> grid = new Grid<>(Person.class);grid.setItems(persons);grid.addColumn(Person::getFirstName).setCaption("First Name");

getter, setter ',

Vaadin Framework 8 (2 of 3)

API ( )

v *

comboBox.addValueChangeListener(evt -> { Person p = (Person) evt.getProperty().getValue(); assert(p.getId() == 42);});

v7 getValue() Object -

v +

comboBox.addValueChangeListener(evt -> { assert(evt.getValue().getId() == 42);});

v8 API ',

Vaadin Framework 8 (3 of 3)

(null )

DateField Java SE 8 Date Time API

.

⚠

Table Grid (v7 API Compatibility Server )

Internet Explorer 8/9/10

Spring Boot

Vaadin4Spring Spring Framework Spring Boot

UI @SpringUI View @SpringView ( com.vaadin.spring.annotation)

Spring Initializr (https://start.spring.io) (Vaadin Framework 8.0.x )

Vaadin ( )

API Java 8 SE 8 API

➡ API

Spring Framework, Spring Boot

➡ Spring Java Web

Vaadin GWT

Source: Book of Vaadin (v7)

(Java ) GWT (Google WebToolkit)

Source: Book of Vaadin (v8)

()

Source: Book of Vaadin (v8)

Vaadin

Vaadin Designer (UI Eclipse, IntelliJ )

Vaadin Chart ( )

Vaadin TestBench (UI )

Vaadin Board 1 ( )

Vaadin TouchKit ( API v8 )

!?

➡ Vaadin TestBench Java

➡ Selenium DOM

(Vaadin DOM )

Vaadin TestBench Selenium

# TestBench (github.com/vaadin/testbench)

Selenide (1 of 2)

http://selenide.org/

content.addComponent(new Label("Hello World!"));Button button = new Button(" !", click -> Notification.show(" !"));button.setId("selenide-amazing-button"); // UI scontent.addComponent(button);

Selenide (2 of 2)

public class HelloWorldTest {

@BeforeClass public static void beforeClass() { Configuration.browser = WebDriverRunner.CHROME; System.setProperty("webdriver.chrome.driver", "C:/opt/bin/chromedriver.exe"); Configuration.timeout = 10; VaadinSpringDemoApplication.main(new String[]{"--server.port=8080", "--spring.profiles.active=test"}); }

@Test public void () { open("http://localhost:8080/"); $("#selenide-amazing-button").should(appear); $("#selenide-amazing-button").shouldHave(text(" !")); $("#selenide-amazing-button").click(); screenshot(" "); $(".v-Notification-caption").should(appear); $(".v-Notification-caption").shouldHave(text(" !")); screenshot(" "); }}

E2E ( )

(Valo Theme )

( )

#

(IDE)

➡ Vaadin

Jetty

➡ Spring Boot

Spring Spring Boot UI

compile('org.springframework.boot:spring-boot-starter-web')compile('org.springframework.boot:spring-boot-starter-data-jpa')compile('org.springframework.boot:spring-boot-starter-security')compile('org.springframework.boot:spring-boot-starter-actuator')compile('org.springframework.security.oauth:spring-security-oauth2')compile('com.vaadin:vaadin-spring-boot-starter')compile('org.vaadin.spring.addons:vaadin-spring-addon-i18n:2.0.0.RELEASE')compile('com.vaadin:vaadin-compatibility-server')runtime('com.vaadin:vaadin-compatibility-client-compiled')

( ) build.gradle

(1 of 2)

for Java EE Developers

✅ ( ) ✅ ( ) ✅ Vaadin Designer

Java EE download bundle

✅ ( ) ✅ ( ) ❌ Vaadin Designer

(2 of 2)

Ultimate

✅ ( ) ✅ ( ) ✅ Vaadin Designer

Community

⚠ ( ) ❌ ✅ Vaadin Designer

Vaadin Eclipse

IntelliJ OK + Ultimate

Vaadin Designer Eclipse IntelliJ

Maven (Archetype )

Gradle (mavenBom )

Vaadin

Vaadin

4

5 JS HTML5 Web UI

AWT/Swing Web UI

Web

6 ( ) Java (JVM )

Vaadin API Java 8

ZK Java UI

2 Vaadin Framework 8 Java 8 Spring Boot

Vaadin Framework

Vaadin Ltd.

Vaadin Framework Java

Happy hacking! 7

Thank you

Yutaka KatoDXC Technologyhttps://mikan.github.io/ (https://mikan.github.io/)