The latest feature update for Vaadin 14 is in beta. The update includes the most-wanted new component features. Read on for more about the new DateTimePicker component, dialog features, and improvements to the layout API.
In addition, Vaadin 14.2 introduces several developer-experience improvements, including build tool enhancements and an improved turnaround time for applying code changes. Read Improving the developer experience for Java developers for more details. All the features in Vaadin 14.2 will be available also in the upcoming Vaadin 16 (beta on May 6th, 2020).
Modeless, resizable and draggable dialogs
Dialogs can now be modeless, resizable and draggable.
Example code for the dialog used in the video
A modeless dialog is one that opens on a parent UI, but the parent remains active and can still receive focus and other UI interactions. A modeless dialog allows simultaneous interaction with multiple other dialogs and with the UI behind it. It is useful when you need information from the main UI for whatever you're doing in the dialog. You could, for example, create a floating note pad in which you can type notes while working in the main UI. Call setModal(false) to set a dialog to modeless. Note that you need to handle the closing, because ESC or outside clicking won’t close a modeless dialog.
Users can resize a dialog from any of the edges. Call setResizable(true) to enable resizing. There is a listener you can hook up for the resize event. By default, the new size is synced to the server.
Calling setDraggable(true) allows users to move the dialog. The position is not synchronized to the server.
import com.vaadin.flow.component.dialog.Dialog;
public class MyDialog extends Dialog {
public MyDialog() {
setDraggable(true);
setModal(false);
setResizable(true);
}
}
A new component combines date and time
The new DateTimePicker component is a composite of DatePicker and TimePicker, but it produces a single LocalDateTime value, which you can use in form data binding. Previously you had to have two separate fields for time and date, and if the data model used for binding had a single DateTime property (instead of a separate date and time), you also needed to split and join them manually.
import java.time.Duration;
import java.time.LocalDateTime;
import com.vaadin.flow.component.datetimepicker.DateTimePicker;
DateTimePicker dateTimePicker = new DateTimePicker();
dateTimePicker.setMin(LocalDateTime.now());
dateTimePicker.setStep(Duration.ofMinutes(30));
dateTimePicker.setDatePlaceholder("Pick a date");
dateTimePicker.setTimePlaceholder("Pick a time");
More Flexbox properties available in the FlexLayout Java API
The API for FlexLayout has been enhanced with more CSS properties that are accessible as methods. It is no longer necessary to use the low-level Element API. New methods include setAlignContent, setFlexBasis and setFlexDirection. FlexLayout is intended for developers who want to work with Flexbox layouting in Java. It provides a more direct API to CSS Flexbox than HorizontalLayout and VerticalLayout does. For example, you can control component flex wrap, which defines whether items must display in a single line or can flow into multiple lines. See the MDN web docs for more about Flexbox.
Create scrollable areas with Scroller
Scroller is a new component in 14.2 that allows you to create a scrollable area. You can set the area as scrollable in a vertical and/or horizontal direction. Previously, creating the same behavior involved manually setting CSS overflow on either a separate stylesheet or through the styling Java API.
import com.vaadin.flow.component.orderedlayout.Scroller;
import com.vaadin.flow.component.orderedlayout.Scroller.ScrollDirection;
Scroller scroller = new Scroller(myContent, ScrollDirection.BOTH);
Try the new features and let us know what you think! Download a Vaadin 14 starter and update the Vaadin version number to 14.2.0.beta1. Make sure you have the pre-release repositories in your pom.xml.
<repositories>
<repository>
<id>vaadin-prerelease</id>
<url>https://maven.vaadin.com/vaadin-prereleases</url>
</repository>
</repositories>
<pluginRepositories>
<pluginRepository>
<id>vaadin-prerelease</id>
<url>https://maven.vaadin.com/vaadin-prereleases</url>
</pluginRepository>
</pluginRepositories>
Edit 2020-04-23: Added a mention about Vaadin 16.