2017/5/20 に JJUG CCC 2017 Spring で発表した資料の SlideShare バージョンです。Java Web アプリ UI フレームワークの Vaadin Framework 8 を紹介する内容となっています。 オリジナル (ブラウザ閲覧用) URL はこちら: https://go-talks.appspot.com/github.com/mikan/talks/ccc-vaadin-8.slide

1. Java !!! Vaadin
8 Java Web
JJUG CCC 2017 Spring #ccc_i1
20 May 2017
Yutaka Kato
DXC Technology

2. #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

3. Introduction

4. 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(" !")));
}
}

5. Question
" ( ) #
"
"
" /
" Vaadin !

6. Vaadin
❓
" % Vaadin Ltd. OSS (Apache License 2.0)
❓ Vaadin Ltd.
"
❓ CSS HTML
" ... Valo
❓ G
" v4.1 (
)

7. Yutaka Kato
Vaadin (
)
(?)
Java BOF( / ) Go ( / ) AOSN (
/Discord)
DXC Java C#

8. DEMO

9. Vaadin Sampler
demo.vaadin.com/sampler/(https://demo.vaadin.com/sampler/)

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

11. ( )
Vaadin Framework 8 ( Vaadin 7 API ) + Spring Boot 1.5
OAuth (spring-security-oauth2) GitHub
CloudFoundry Bluemix

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

13. Vaadin

14. 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)

15. Vaadin Framework 8
API ( )
API com.vaadin.v7

16. 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 ',

17. 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 ',

18. 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

19. 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 )

20. Vaadin ( )
API Java 8 SE 8 API
➡ API
Spring Framework, Spring Boot
➡ Spring Java Web

21. Vaadin GWT

22. Source: Book of Vaadin (v7)

24. (Java ) GWT (Google Web
Toolkit)
Source: Book of Vaadin (v8)

25. (
)
Source: Book of Vaadin (v8)

27. Vaadin
Vaadin Designer (UI Eclipse, IntelliJ )
Vaadin Chart ( )
Vaadin TestBench (UI )
Vaadin Board 1 ( )
Vaadin TouchKit ( API v8 )

28. !?
➡ Vaadin TestBench Java
➡ Selenium DOM
(Vaadin DOM )
Vaadin TestBench Selenium
# TestBench (github.com/vaadin/testbench)

29. 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);

30. 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.ac
}
@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(" ");
}
}

31. E2E ( )
(Valo Theme )
( )
#

32. (IDE)

33. ➡ 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

34. (1 of 2)
for Java EE Developers
✅ ( )
✅ ( )
✅ Vaadin Designer
Java EE download bundle
✅ ( )
✅ ( )
❌ Vaadin Designer

35. (2 of 2)
Ultimate
✅ ( )
✅ ( )
✅ Vaadin Designer
Community
⚠ ( )
❌
✅ Vaadin Designer

36. Vaadin Eclipse
IntelliJ OK + Ultimate
Vaadin Designer Eclipse IntelliJ
Maven (Archetype )
Gradle (mavenBom )

37. Vaadin

38. Vaadin
4
5 JS HTML5 Web UI
AWT/Swing Web UI
​Web
6 ( ) Java (JVM )
Vaadin API Java 8
ZK Java UI

39. 2 Vaadin Framework 8 Java 8 Spring Boot
Vaadin Framework
Vaadin Ltd.
Vaadin Framework Java
Happy hacking! 7

40. Thank you
Yutaka Kato
DXC Technology
https://mikan.github.io/(https://mikan.github.io/)