Remote controlling Parrot AR Drone with Spring Boot & Vaadin. Peter expert & trainer

Transcription

1 Remote controlling Parrot AR Drone with Spring Boot & Vaadin Peter expert & trainer

2 Vaadin & GWT Vaadin Spring Integration Spring Boot

3 How to get started? QA Drone

4

5

6 Server driven UI framework

7 Developer Rich Productivity UX

8

9 > var foo = [0]; > foo ==!foo;

10 > var foo = [0]; > foo ==!foo; > true

11 > var foo = [0]; > foo ==!foo; > true > [] + [];

12 > var foo = [0]; > foo ==!foo; > true > [] + []; >

13 > var foo = [0]; > foo ==!foo; > true > [] + []; > > [] + {};

14 > var foo = [0]; > foo ==!foo; > true > [] + []; > > [] + {}; > [object Object]

15 > var foo = [0]; > foo ==!foo; > true > [] + []; > > [] + {}; > [object Object] > {} + [];

16 > var foo = [0]; > foo ==!foo; > true > [] + []; > > [] + {}; > [object Object] > {} + []; > 0

17 > var foo = [0]; > foo ==!foo; > true > {} + {}; > [] + []; > > [] + {}; > [object Object] > {} + []; > 0

18 > var foo = [0]; > foo ==!foo; > true > {} + {}; > NaN > [] + []; > > [] + {}; > [object Object] > {} + []; > 0

19 > var foo = [0]; > foo ==!foo; > true > [] + []; > > {} + {}; > NaN > NaN == NaN; > [] + {}; > [object Object] > {} + []; > 0

20 > var foo = [0]; > foo ==!foo; > true > [] + []; > > {} + {}; > NaN > NaN == NaN; > false > [] + {}; > [object Object] > {} + []; > 0

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

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

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

24 UI Browser

25 Widgets UI Browser

26 Widgets Theme UI Browser

27 Widgets Backend Theme UI Browser Server

28 Widgets Backend Theme UI Service (GWT-RPC) Browser Server

29 Server Backend

30 UI Backend Server

31 Widgets Components UI Backend Browser Server

32 Widgets Components UI Backend Theme Browser Server

33 Widgets Components UI Backend Theme UI Service (GWT-RPC) Browser Server

34 User Interface Components

35 User Interface Components

36 How does Vaadin work, really?

37

38 JogDial jogdial = new JogDial(Size.MEDIUM); TextField x = new TextField(); TextField y = new TextField();

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

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

41 Loader page CSS Theme Images JavaScript

42 Loader page CSS Theme Images JavaScript 135k Compressed & reduced Thin client

43

44

45 jogdialmoved(-0.5,0.5) 314 bytes

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

47 jogdialmoved(-0.5,0.5) 314 movecap(-0.5,0.5) x.value=-0.5 y.value= bytes

48 JogDial Server

49 JogDialWidget Browser JogDial Server

50 JogDialWidget JogDialConnector Browser JogDial Server

51 JogDialWidget JogDialConnector SharedState Browser SharedState JogDial Server

52 JogDialWidget JogDialConnector SharedState Browser SharedState JogDial Server

53 JogDialWidget JogDialConnector SharedState RPC Browser SharedState RPC JogDial Server

54 JogDialWidget JogDialConnector SharedState RPC Browser SharedState RPC JogDial Server

55 JogDialWidget JogDialConnector SharedState RPC Browser SharedState RPC JogDial Server

56 JogDialWidget JogDialConnector SharedState RPC Browser SharedState RPC JogDial Server

57

58

59

60

61 Single point of focus

62 Single point of focus A tool for getting started quickly

63 Single point of focus A tool for getting started quickly Non-functional requirements

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

65

66 Maven POM hierarchy

67 Maven POM hierarchy Annotation based configuration

68 Maven POM hierarchy Annotation based configuration Dependencies

69 Maven POM hierarchy Annotation based configuration Dependencies Embedded web server

70 Spring Demo Approx 5 minutes.

71 Vaadin & Spring integration

72 <parent> <groupid>org.springframework.boot</groupid> <artifactid>spring-boot-starter-parent</artifactid> <version>1.2.3.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>

73 <parent> <groupid>org.springframework.boot</groupid> <artifactid>spring-boot-starter-parent</artifactid> <version>1.2.3.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>

74 <parent> <groupid>org.springframework.boot</groupid> <artifactid>spring-boot-starter-parent</artifactid> <version>1.2.3.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>

75 Vaadin Spring Integration Demo Approx 10 minutes.

76 +

77

78 @UIScope

79 @UIScope Spring managed beans

80 @UIScope Spring managed beans EventBus for loose coupling

81 public class Application { public static void main(string[] args) { SpringApplication.run(Application.class, args).start(); DroneTemplate providetemplate(taskexecutor taskexecutor, DroneStateChangeCallback[] callbacks) throws UnknownHostException { return new DroneTemplate(taskExecutor, callbacks); } Drone providedrone() { return new Drone(); }

82 public class Application { public static void main(string[] args) { SpringApplication.run(Application.class, args).start(); DroneTemplate providetemplate(taskexecutor taskexecutor, DroneStateChangeCallback[] callbacks) throws UnknownHostException { return new DroneTemplate(taskExecutor, callbacks); } Drone providedrone() { return new Drone(); }

83 public class Application { public static void main(string[] args) { SpringApplication.run(Application.class, args).start(); DroneTemplate providetemplate(taskexecutor taskexecutor, DroneStateChangeCallback[] callbacks) throws UnknownHostException { return new DroneTemplate(taskExecutor, callbacks); } Drone providedrone() { return new Drone(); }

84 public class Application { public static void main(string[] args) { SpringApplication.run(Application.class, args).start(); DroneTemplate providetemplate(taskexecutor taskexecutor, DroneStateChangeCallback[] callbacks) throws UnknownHostException { return new DroneTemplate(taskExecutor, callbacks); } Drone providedrone() { return new Drone(); }

85 public class DroneUI extends UI implements InitializingBean, DisposableBean private DroneTemplate private ControlPanel private EventBus private DroneEmergencyDialog emergencydialog;

86 public class DroneUI extends UI implements InitializingBean, DisposableBean private DroneTemplate private ControlPanel private EventBus private DroneEmergencyDialog emergencydialog;

87 public class DroneUI extends UI implements InitializingBean, DisposableBean private DroneTemplate private ControlPanel private EventBus private DroneEmergencyDialog emergencydialog;

88 public class DroneUI extends UI implements InitializingBean, DisposableBean private DroneTemplate private ControlPanel private EventBus private DroneEmergencyDialog emergencydialog;

89 @Override public void afterpropertiesset() throws Exception { eventbus.subscribe(this); protected void onemergencyevent(droneemergencyevent event) { this.access(() -> emergencydialog.show(event.getemergencytype(), this)); protected void onlowbatteryevent(dronelowbatteryevent event) { this.access(() -> emergencydialog.show(emergency.battery, this)); } public void destroy() throws Exception { eventbus.unsubscribe(this); }

90 @Override public void afterpropertiesset() throws Exception { eventbus.subscribe(this); protected void onemergencyevent(droneemergencyevent event) { this.access(() -> emergencydialog.show(event.getemergencytype(), this)); protected void onlowbatteryevent(dronelowbatteryevent event) { this.access(() -> emergencydialog.show(emergency.battery, this)); } public void destroy() throws Exception { eventbus.unsubscribe(this); }

91

92 <<WIFI-HOTSPOT>> AR Parrot Drone

93 <<WIFI-HOTSPOT>> AR Parrot Drone <<JVM>> <<Embedded-Jetty>>

94 <<WIFI-HOTSPOT>> AR Parrot Drone <<JVM>> <<Embedded-Jetty>> Vaadin UI SpringBoot

95 <<WIFI-HOTSPOT>> AR Parrot Drone <<JVM>> <<Embedded-Jetty>> Vaadin UI SpringBoot <<Browser>> (localhost / ) User

96 <<VaadinUI>> DroneUI

97 <<Widget>> <<Widget>> JogDial <<VaadinUI>> DroneUI

98 <<Widget>> <<Widget>> JogDial <<VaadinUI>> DroneUI <<Widget>> <<Widget>> <<Widget>> Gauge

99 <<Widget>> <<Widget>> JogDial <<VaadinUI>> DroneUI <<Bean>> Drone <<Widget>> <<Widget>> <<Widget>> Gauge

100 <<Widget>> <<Widget>> JogDial <<VaadinUI>> DroneUI <<Bean>> Drone <<Bean>> DroneTemplate <<Widget>> <<Widget>> <<Widget>> Gauge

101 <<Widget>> <<Widget>> JogDial <<VaadinUI>> DroneUI <<Bean>> Drone <<Bean>> DroneTemplate <<Widget>> <<Widget>> <<Widget>> Gauge <<DroneStateCall >> UIEventProducer

102 @Component class UIEventProducer implements private EventBus 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()));

103 @Component class UIEventProducer implements private EventBus 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()));

104 @Component class UIEventProducer implements private EventBus 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()));

105

106

107 Getting started

108 Getting started

109 Eclipse Download Vaadin plugin from Marketplace

110 mvn archetype:generate -DarchetypeGroupId= Maven com.vaadin -DarchetypeArtifactId= vaadin-archetypeapplication -DarchetypeVersion= LATEST

111 Download for Free vaadin.com/book PDF, epub, HTML Vol pages Vol pages

112 Lessons learned today

113 Lessons learned today 1. Drones are super cool!

114 Lessons learned today 1. Drones are super cool! 2. Vaadin is good for web apps, brings you great productivity

115 Lessons learned today 1. Drones are super cool! 2. Vaadin is good for web apps, brings you great productivity 3. Boot kickstarts development and helps you all the way

116 Lessons learned today 1. Drones are super cool! 2. Vaadin is good for web apps, brings you great productivity 3. Boot kickstarts development and helps you all the way 4. Official Vaadin Spring integration is already in Beta

117 Thank you! Peter expert & trainer