EclipseCon 2014 presentation about using Vaadin and SpringBoot to remote control Parrot AR Drone over a web application.

1. slogan
WebApp controlled
Parrot AR Drone
with Vaadin and Spring Boot
Je zult maar letter wezen. Goed, ik ben niet
ontevredet. Maar het valt niet mee in deze zeventiger
jaren tot het vaderlandse alfabet te behoren.
Foto-zetterijen wringen je steeds in steeds
ingevikkelder. Je zult maar letter wezen. Goed, ik ben
Je zult maar letter wezen. Goed, ik ben niet
ontevredet. Maar het valt niet mee in deze zeventiger
jaren tot het vaderlandse alfabet te behoren.
Foto-zetterijen wringen je steeds in steeds
ingevikkelder. Je zult maar letter wezen. Goed, ik ben
Je zult maar letter wezen. Goed, ik ben niet
ontevredet. Maar het valt niet mee in deze zeventiger
jaren tot het vaderlandse alfabet te behoren.
Foto-zetterijen wringen je steeds in steeds
iJneg ezvuilkt kmeladaerr .l eJtete zr uwlte mzeana.r Gleotteedr ,w ike bzeenn. nGieote d, ik ben
ontevredet. Maar het valt niet mee in deze zeventiger
jaren tot het vaderlandse alfabet te behoren.
Foto-zetterijen wringen je steeds in steeds
ingevikkelder. Je zult maar letter wezen. Goed, ik ben
@peter_lehto
Vaadin Expert & Trainer

2. What is
Vaadin?
Integrating
with
Spring Boot

3. QA
How to
get
started?
Drone

5. User interface
framework for rich
web applications

7. java html

8. > [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> typeof NaN;
> number
> var foo = [0];
> foo == !foo;
> true

9. Developer
Productivity
Rich
UX

10. User Interface
Components

11. How does Vaadin work, really?

12. JogDial jogDial = new JogDial(Size.MEDIUM);
!
TextField x = new TextField();
TextField y = new TextField();

13. JogDial jogDial = new JogDial(Size.MEDIUM);
!
TextField x = new TextField();
TextField y = new TextField();
!
jogDial.addMoveListener(e -> {
x.setValue(e.getX());
y.setValue(e.getY());
});

14. JogDial jogDial = new JogDial(Size.MEDIUM);
!
TextField x = new TextField();
TextField y = new TextField();
!
jogDial.addMoveListener(e -> {
x.setValue(e.getX());
y.setValue(e.getY());
});
!
layout.addComponents(x, y, jogDial);

15. • Loader page
• CSS Theme
• Images
• JavaScript
135k
Compressed &
reduced
Thin client

17. • x=-0.5, y=0.5
• jogDial moved
!
314 bytes

18. JogDial jogDial = new JogDial(Size.MEDIUM);
!
TextField x = new TextField();
TextField y = new TextField();
!
jogDial.addMoveListener(e -> {
x.setValue(e.getX());
y.setValue(e.getY());
});
!
layout.addComponents(x, y, jogDial);

19. • x=-0.5, y=0.5
• jogDial moved
!
314
• moveCap(-0.5,0.5)
• x.value=-0.5
y.value=0.5
!
351 bytes

20. Integration with

22. Single point of focus
A tool for getting started quickly
Non-functional requirements
Easily customizable

24. <parent>!
<groupId>org.springframework.boot</groupId>!
<artifactId>spring-boot-starter-parent</artifactId>!
<version>1.1.8.RELEASE</version>!
</parent>!
!
<dependencies>!
<dependency>!
<groupId>org.springframework.boot</groupId>!
<artifactId>spring-boot-starter-web</artifactId>!
</dependency>!
<dependency>!
<groupId>org.vaadin.spring</groupId>!
<artifactId>spring-boot-vaadin</artifactId>!
</dependency>!
</dependencies>

25. Maven POM hierarchy
Annotation based configuration
Dependencies as @Bean
Embedded web server

26. @Configuration
@ComponentScan
@EnableAutoConfiguration
@EnableTouchKitServlet
public class Application {
!
public static void main(String[] args) {
SpringApplication.run(Application.class, args).start();
}
!
@Bean
DroneTemplate provideTemplate(TaskExecutor taskExecutor,
DroneStateChangeCallback[] callbacks) throws UnknownHostException {
return new DroneTemplate(taskExecutor, callbacks);
}
!
@Bean
Drone provideDrone() {
return new Drone();
}
}

27. @VaadinUI / @TouchkitUI
@UIScope
@EventBus for View/UI/App
Spring managed beans

28. @TouchKitUI
@Theme("drone")
public class DroneUI extends UI implements InitializingBean, DisposableBean {
@Autowired
private DroneTemplate service;
!
@Autowired
private ControlPanel controlPanel;
!
@Autowired
private GaugePanel gaugePanel;
!
…
}

29. @Target({java.lang.annotation.ElementType.TYPE})
@Retention(java.lang.annotation.RetentionPolicy.RUNTIME)
@Documented
@VaadinComponent
@UIScope
public @interface TouchKitUI {
String path() default "";
}

30. @Target({java.lang.annotation.ElementType.TYPE})
@Retention(java.lang.annotation.RetentionPolicy.RUNTIME)
@Documented
@VaadinComponent
@UIScope
public @interface TouchKitUI {
String path() default "";
}
@Target(ElementType.TYPE)
@Retention(RetentionPolicy.RUNTIME)
@Documented
@Import({TouchKitServletConfiguration.class, PingServletConfiguration.class})
public @interface EnableTouchKitServlet {
}

31. EventBus for loose coupling
Scoped events
Subscribe / Unsubscribe
UI.access Runnable for threads

32. @TouchKitUI
@Theme("drone")
public class DroneUI extends UI implements InitializingBean, DisposableBean {
…
@Autowired
private DroneEmergencyDialog emergencyDialog;
!
@Autowired
private EventBus eventBus;
!
@Override
public void afterPropertiesSet() throws Exception {
eventBus.subscribe(this);
}
!
@EventBusListenerMethod
protected void onEmergencyEvent(DroneEmergencyEvent event) {
this.access(() -> emergencyDialog.show(this));
}
}

33. slogan
Je zult maar letter wezen. Goed, ik ben niet
ontevredet. Maar het valt niet mee in deze zeventiger
jaren tot het vaderlandse alfabet te behoren.
Foto-zetterijen wringen je steeds in steeds
ingevikkelder. Je zult maar letter wezen. Goed, ik ben
Je zult maar letter wezen. Goed, ik ben niet
ontevredet. Maar het valt niet mee in deze zeventiger
jaren tot het vaderlandse alfabet te behoren.
Foto-zetterijen wringen je steeds in steeds
ingevikkelder. Je zult maar letter wezen. Goed, ik ben
Je zult maar letter wezen. Goed, ik ben niet
ontevredet. Maar het valt niet mee in deze zeventiger
jaren tot het vaderlandse alfabet te behoren.
Foto-zetterijen wringen je steeds in steeds
iJneg ezvuilkt kmeladaerr .l eJtete zr uwlte mzeana.r Gleotteedr ,w ike bzeenn. nGieote d, ik ben
ontevredet. Maar het valt niet mee in deze zeventiger
jaren tot het vaderlandse alfabet te behoren.
Foto-zetterijen wringen je steeds in steeds
ingevikkelder. Je zult maar letter wezen. Goed, ik ben

34. <<WIFI-HOTSPOT>>
192.168.1.1
AR Parrot
Drone

35. <<WIFI-HOTSPOT>>
192.168.1.1
AR Parrot
Drone
<<JVM>>
<<Embedded-Jetty>>
192.168.1.2

36. <<WIFI-HOTSPOT>>
192.168.1.1
AR Parrot
Drone
<<JVM>>
<<Embedded-Jetty>>
<<Embedded-Jetty>>
192.168.1.2
192.168.1.2
Vaadin UI
SpringBoot

37. <<WIFI-HOTSPOT>>
192.168.1.1
AR Parrot
Drone
<<JVM>>
<<Embedded-Jetty>>
<<Embedded-Jetty>>
192.168.1.2
192.168.1.2
Vaadin UI
SpringBoot
<<Browser>>
(192.168.1.3)
User

38. <<VaadinUI>>
DroneUI

39. <<Widget>>
JogDial <<Widget>>
JogDial
<<VaadinUI>>
DroneUI

40. <<Widget>>
JogDial <<Widget>>
JogDial
<<VaadinUI>>
DroneUI
<<Widget>>
Gauge <<Widget>>
Gauge <<Widget>>
Gauge

41. <<Widget>>
JogDial <<Widget>>
JogDial
<<Widget>>
Gauge <<Widget>>
Gauge <<Widget>>
Gauge
<<Bean>>
Drone
<<VaadinUI>>
DroneUI

42. <<Widget>>
JogDial <<Widget>>
JogDial
<<Widget>>
Gauge <<Widget>>
Gauge <<Widget>>
Gauge
<<Bean>>
DroneTemplate
<<Bean>>
Drone
<<VaadinUI>>
DroneUI

43. <<Widget>>
JogDial <<Widget>>
JogDial
<<Widget>>
Gauge <<Widget>>
Gauge <<Widget>>
Gauge
<<Bean>>
DroneTemplate
<<DroneStateCall…>>
UIEventProducer
<<Bean>>
Drone
<<VaadinUI>>
DroneUI

44. @Component
class UIEventProducer implements DroneStateCallback {
!
@Autowired
@EventBusScope(EventScope.APPLICATION)
private EventBus eventBus;
!
@Override
public void onDroneStateChanged(DroneState latestState) {
if (latestState.isEmergency()) {
eventBus.publish(this, new DroneEmergencyEvent());
}
if (latestState.isBatteryTooLow()) {
eventBus.publish(this, new DroneLowBatteryEvent());
}
!
eventBus.publish(this,
new DroneBatteryEvent(this, latestState.getBattery()));
!
eventBus.publish(this,
new DroneThetaEvent(this, latestState.getTheta()));
!
eventBus.publish(this,
new DroneAltitudeEvent(this, latestState.getAltitude()));
}
}

47. Getting
started

48. github.com/vaadin/teleport
Klikkaa otsikkoa
kolmesti ja kirjoita
vaadin.com/demo
start.spring.io
teksti
github.com/peholmst/vaadin4spring

49. Eclipse
Download Vaadin
plugin from
Marketplace

50. mvn
archetype:generate
-DarchetypeGroupId=
com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-application
-DarchetypeVersion=
7.3.3
Maven

51. Download for Free
vaadin.com/book
PDF, ePub, HTML
ISBN 978-952-93-1970-1
9789529319701
ISBN 978-952-93-1970-1
9789529319701
Vol 1
288 pages
Vol 2
434 pages

52. Lessons learned today
1. Finns smile, always
2. Vaadin is good for web apps, brings you great productivity
3. Boot kickstarts development and helps you all the way
4. If I catch you building your home pages with Vaadin + Boot
I’ll take you behind the sauna (a not-so-fun Finnish tradition)

54. vaderlandse alfabet te behoren.
wringen je steeds in steeds
Je zult maar letter wezen. Goed, ik ben
maar letter wezen. Goed, ik ben niet
Questions,
Comments?
ontevredet. Maar het valt niet mee in deze zeventiger
tot het vaderlandse alfabet te behoren.
zetterijen wringen je steeds in steeds
ingevikkelder. Je zult maar letter wezen. Goed, ik ben
zult maar letter wezen. Goed, ik ben niet
ontevredet. Maar het valt niet mee in deze zeventiger
tot het vaderlandse alfabet te behoren.
Foto-zetterijen wringen je steeds in steeds
ezvuilkt kmeladaerr .l eJtete zr uwlte mzeana.r Gleotteedr ,w ike bzeenn. nGieote d, ik ben
ontevredet. Maar het valt niet mee in deze zeventiger
tot het vaderlandse alfabet te behoren.
Foto-zetterijen wringen je steeds in steeds
ingevikkelder. Je zult maar letter wezen. Goed, ik ben
@peter_lehto
peter@vaadin.com
Vaadin Ltd