The latest feature update for Vaadin 14 includes much-requested component features and development-time improvements. Read on for more about the improved Dialog, pnpm build tool, DateTimePicker component and other new features.
The features described in this post are available today in 14.2.0 and will be available in a few weeks in Vaadin 16.
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. You can use modal dialogs to create a classic MDI application (similar to what you can do with Swing JDesktopPane). In the example video, the UI mimics Gmail’s new message window.
Call setModal(false) to set a dialog to modeless. Note that you need to handle the closing, because ESC or clicking outside won’t close a modeless dialog.
Users can resize a dialog by dragging 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 with the server.
import com.vaadin.flow.component.dialog.Dialog;
public class MyDialog extends Dialog {
public MyDialog() {
setDraggable(true);
setModal(false);
setResizable(true);
}
}
Improving the reliability and speed of frontend builds
Automatic Node.js install
Starting from versions 14.2 and 16, the Node.js install (which includes npm) happens automatically. It is installed to a .vaadin folder inside the home folder, and reused from there for all Vaadin projects. As before, Node is only used to build the frontend side of things; it does not run after you deploy for production!
Frontend dependency management that just works - pnpm
Behind the scenes, npm has been used to manage frontend dependencies since 14.0. Now, we’ve added support for pnpm, which introduces the following benefits:
- Shorter build time, compared to npm on your local machine and CI system, because pnpm only downloads packages once and reuses them from a local cache.
- No need to delete package.json, lock file or the node_modules folder when updating the Vaadin version in your project.
In 14.2, npm is still used by default, but we encourage you to test pnpm and give us your feedback. Trying pnpm is easy: there is no migration, just enable it by using a configuration property or Maven plugin configuration. You can learn more about pnpm here. Vaadin 16 will use pnpm by default.
Faster development-mode frontend builds
Starting from 14.2, the transpilation of JavaScript code to ES5 (required by IE11) is not done by default in development mode, but you can still enable it with configuration, if necessary. For production builds with the build-frontend goal, it is still done by default.
Skipping transpilation reduces the initial frontend compilation significantly and trims a few seconds from subsequent frontend compilations too.
DateTimePicker 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");
Enhanced Java API for FlexLayout
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. For example, you can control component flex-wrap, which defines whether items must display in a single line or can flow into multiple lines.
The API for FlexLayout has been enhanced with more CSS properties that are accessible as methods. New methods allow you to set align-content, flex-basis and flex-direction. It is no longer necessary to use the low-level Element API for these. See the MDN web docs and the Vaadin FlexLayout API docs for more about using Flexbox.
Create scrollable areas with Scroller
Scroller is a new component 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);
Get started
Try the new features and let us know what you think! Create a new Vaadin 14 project, download an example or just update the Vaadin version number to 14.2.0 in your Vaadin 14 project pom.xml. If you're new to Vaadin, we recommend the comprehensive tutorial Building Modern Web Apps with Spring Boot and Vaadin.