The Vaadin Flow Framework is a Java web framework that allows building reactive web applications. It uses Java and web components to create user interfaces that can be deployed as static web pages. Key features include: - It is based on Vaadin 8 and uses modern web standards like web components. - Applications are built with plain Java/JavaServer Faces classes that get compiled to JavaScript and HTML. - The sample application shows entity classes for trips, a TripList class that displays trips in a grid, and a TripMap class that displays routes on a map. Styling and interactions between the grid and map are also demonstrated.

1. Vaadin Flow Framework
in a Nutshell
JOONAS LEHTINEN

2. VAADIN 10

3. Vaadin 8

4. Java
Web

5. Java
Web

6. E l e m e n t s
F l o w

9. Application,java
@SpringBootApplication
@ServletComponentScan
@EnableJpaRepositories
@EntityScan
public class Application {
public static void main(String[] args) {
SpringApplication.
run(Application.class, args);
}
}

10. Trip,java
@Entity
public class Trip {
@Id
@GeneratedValue
private long id;
private LocalDate date;
private String start;
private String end;
// setters and getters
}

11. TripList,java
@Route(value = "")
public class TripList extends Div {
}

12. TripList,java
@Route(value = "")
public class TripList extends Div {
@PostConstruct
public void init() {
add(new Text("Hello World"));
}
}

13. TripList,java
@Route(value = "")
public class TripList extends Div {
private Grid<Trip> grid = new Grid<>();
@PostConstruct
public void init() {
grid.addColumn(Trip::getFormattedDate).setHeader("Date");
grid.addColumn(Trip::getStart).setHeader("From");
grid.addColumn(Trip::getEnd).setHeader("To");
add(grid);
}

14. TripList,java
@Route(value = "")
public class TripList extends Div {
@Autowired
private TripRepository repository;
private Grid<Trip> grid = new Grid<>();
@PostConstruct
public void init() {
grid.addColumn(Trip::getFormattedDate).setHeader("Date");
grid.addColumn(Trip::getStart).setHeader("From");
grid.addColumn(Trip::getEnd).setHeader("To");
grid.setDataProvider(
SpringDataProviderBuilder.forRepository(repository)
.withDefaultSort("date", SortDirection.DESCENDING).build());

16. TripMap.java
@HtmlImport("DirectionSearch.html")
@Tag("direction-search")
public class TripMap extends Component {
}

17. TripList,java
@StyleSheet("styles.css")
@Route(value = "")
public class TripList extends Div
implements HasStyle {
// …
private TripMap map = new TripMap();
@PostConstruct
public void init() {
setClassName("trip-list");
grid.addColumn(Trip::getFormattedDate).setHeader("Date");
// …
add(map, grid);
}
}

18. styles.css
html { font-family: sans-serif; }
.trip-list {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.trip-list vaadin-grid {
width: 500px;
height: 70vh;
margin: 9px;
}

19. TripList,java
@PostConstruct
public void init() {
setClassName("trip-list");
grid.addColumn(Trip::getFormattedDate).setHeader("Date");
grid.addColumn(Trip::getStart).setHeader("From");
grid.addColumn(Trip::getEnd).setHeader("To");
grid.setDataProvider(
SpringDataProviderBuilder.forRepository(repository)
.withDefaultSort("date", SortDirection.DESCENDING).build());
grid.asSingleSelect().
addValueChangeListener(
selected ->
map.showTrip(selected.getValue())
);
add(grid);

20. TripMap.java
@HtmlImport("DirectionSearch.html")
@Tag("direction-search")
public class TripMap extends Component {
public void showTrip(Trip trip) {
if (trip == null) {
show("", "");
} else {
show(trip.getStart(), trip.getEnd());
}
}
private void show(String start, String end) {
JsonObject properties = Json.createObject();
properties.put("start", start);
properties.put("end", end);
getElement().callFunction("setProperties", properties);
}
}

21. Thank you!