remote controlling parrot ar drone with spring boot & vaadin (javacro15)

Remote controlling Parrot AR Drone with Spring Boot & Vaadin

Peter Lehto @peter_lehto

expert & trainer

Vaadin

&

GWT

Spring Boot

Vaadin Spring

integration

QA

Drone

Gettingstarted

Server driven UI framework with GWT based thin client

Full stack Java

Not everybody loves JavaScript

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

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

> [] + [];


> [] + [];>


> [] + [];>

> [] + {};


> [] + [];>

> [] + {};> [object Object]


> [] + [];>


> {} + [];


> [] + [];>


> {} + [];> 0


> [] + [];>


> {} + [];> 0

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

> [] + [];>


> {} + [];> 0

> {} + {};> NaN


> [] + [];>


> {} + [];> 0

> {} + {};> NaN

> NaN == NaN;


> [] + [];>


> {} + [];> 0

> {} + {};> NaN

> NaN == NaN;> false


> [] + [];>


> {} + [];> 0

> {} + {};> NaN


> typeof NaN;


> [] + [];>


> {} + [];> 0

> {} + {};> NaN


> typeof NaN;> number


Backend

Server

UI Backend

Server

Browser

UI Backend

Server

Widgets Components

Them

e

Browser

UI Backend

Server

Widgets Components

Them

e

Browser

UI Backend

Server

Widgets Components

Shared StateRPC

GWT

Write client-side part with Java

GWT


Java -> JavaScript optimizing compiler

GWT



JavaScript generated DOM

GWT




Browser specific Widgetset

GWT





No browser differences

GWT






No browser plugins

GWT






No browser plugins

Look’n’feel with CSS theme

Vaadin

Vaadin

Server-side = runs in JVM

Vaadin


Component based development model

Vaadin



Events for interaction

Vaadin




Transparent communication

Vaadin





Secure

Vaadin





Secure

No need for JavaScript / HTML

Vaadin





Secure

No need for JavaScript / HTML

Precompiled Widgetset

How will Vaadinhelp?

Developer

Productivity

Rich

UX

User Interface Components

How does Vaadin work, really?

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

• Loader page • CSS Theme • Images • JavaScript

• Loader page • CSS Theme • Images • JavaScript

135k

Compressed & reduced Thin client

• jogDialMoved(-0.5,0.5)

314 bytes




layout.addComponents(x, y, jogDial);

• moveCap(-0.5,0.5) • x.value=-0.5

y.value=0.5

351 bytes

• jogDialMoved(-0.5,0.5)

314

Spring Framework

Dependency injection

Beans

Spring MVC web applications and

RESTful web services

Data access, messaging and more.

Spring Data

Spring Data

Spring Boot

Spring Data

Spring Boot

And much more…

Single point of focus


A tool for getting started quickly


A tool for getting started quickly

Easily customizable

Maven POM hierarchy

Maven POM hierarchy

Annotation based configuration

Maven POM hierarchy

Annotation based configuration

Embedded web server

Spring Demo

Approx 5 minutes.

Vaadin Spring integration

<parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.2.3.RELEASE</version></parent>

<dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-spring-boot-starter</artifactId>

<version>1.0.0.beta3</version> </dependency></dependencies>

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 ingevikkelder. Je zult maar letter wezen. Goed, ik ben

+

UI and Views as Spring managed beans

slogan





+

UI and Views as Spring managed beans@SpringUI / @SpringView

slogan





+


Scopes

slogan





+


Scopes

@UIScope

slogan





+


Scopes

@UIScope

@ViewScope

slogan





+


Scopes

@UIScope

@ViewScope

@VaadinSessionScope

slogan





+

slogan





+

Access control

slogan





+

Access control

ViewAccessControl

slogan





+

Access control

ViewAccessControl

ViewInstanceAccessControl

slogan





+

Access control

ViewAccessControl


Allows mixing Spring MVC and

Vaadin to same “namespace”

slogan





+

Access control

ViewAccessControl


Allows mixing Spring MVC and

Vaadin to same “namespace”

Automatic with Spring Boot

slogan





+

slogan





+

Vaadin Spring Boot addon

performs autoconfiguration

slogan





+

Vaadin Spring Boot addon

performs autoconfiguration

VaadinServletConfigurationProperties

slogan





+

Vaadin Spring Integration

Demo Approx 10 minutes.

@SpringBootApplication@EnableTouchKitServletpublic 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(); }}

@TouchKitUI@Theme("drone")public class DroneUI extends UI implements InitializingBean, DisposableBean { @Autowired private DroneTemplate service;

@Autowired private ControlPanel controlPanel;

@Autowired private EventBus eventBus;

@Autowired private DroneEmergencyDialog emergencyDialog;

@Override public void afterPropertiesSet() throws Exception { eventBus.subscribe(this); }

@EventBusListenerMethod protected void onEmergencyEvent(DroneEmergencyEvent event) { this.access(() -> emergencyDialog.show(event.getEmergencyType(), this)); }

@EventBusListenerMethod protected void onLowBatteryEvent(DroneLowBatteryEvent event) { this.access(() -> emergencyDialog.show(Emergency.BATTERY, this)); }

@Override public void destroy() throws Exception { eventBus.unsubscribe(this); }}

Drone App Architecture

<<WIFI-HOTSPOT>> 192.168.1.1

AR ParrotDrone

<<WIFI-HOTSPOT>> 192.168.1.1

AR ParrotDrone

<<JVM>> <<Embedded-Jetty>>

192.168.1.2

<<WIFI-HOTSPOT>> 192.168.1.1

AR ParrotDrone


192.168.1.2<<Embedded-Jetty>>

192.168.1.2

Vaadin UISpringBoot

<<WIFI-HOTSPOT>> 192.168.1.1

AR ParrotDrone


192.168.1.2<<Embedded-Jetty>>

192.168.1.2

Vaadin UISpringBoot

<<Browser>> (localhost /192.168.1.3)

User

<<VaadinUI>>

DroneUI

<<VaadinUI>>

DroneUI

<<Widget>>

JogDial<<Widget>>

JogDial

<<Widget>>

Gauge<<Widget>>

Gauge<<Widget>>

Gauge

<<VaadinUI>>

DroneUI

<<Widget>>

JogDial<<Widget>>

JogDial

<<Widget>>

Gauge<<Widget>>

Gauge<<Widget>>

Gauge

<<Bean>>

Drone<<VaadinUI>>

DroneUI

<<Widget>>

JogDial<<Widget>>

JogDial

<<Widget>>

Gauge<<Widget>>

Gauge<<Widget>>

Gauge

<<Bean>>

DroneTemplate<<Bean>>

Drone<<VaadinUI>>

DroneUI

<<Widget>>

JogDial<<Widget>>

JogDial

<<Widget>>

Gauge<<Widget>>

Gauge<<Widget>>

Gauge<<DroneStateCall…>>

UIEventProducer

<<Bean>>

DroneTemplate<<Bean>>

Drone<<VaadinUI>>

DroneUI

<<Widget>>

JogDial<<Widget>>

JogDial

@Componentclass 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 DroneThetaEvent(this, latestState.getTheta()));

eventBus.publish(this, new DroneAltitudeEvent(this, latestState.getAltitude())); }}

Getting started

Spring Initializr

start.spring.io

EclipseDownload Vaadin plugin from Marketplace

mvn archetype:generate

-DarchetypeGroupId=

com.vaadin

-DarchetypeArtifactId=

vaadin-archetype-application

-DarchetypeVersion=

LATEST

Maven

Download for Freevaadin.com/bookPDF, ePub, HTML

9 789529 319701

ISBN 978-952-93-1970-1

9 789529 319701

ISBN 978-952-93-1970-1

Vol 1 288 pages

Vol 2 434 pages

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





4. Official Vaadin Spring integration is already in Beta

5. “Vaadin4Spring” will provide additional features

Thank you!Peter Lehto @peter_lehto

expert & trainer

remote controlling parrot ar drone with spring boot & vaadin (javacro15)

Internet