Today we released Vaadin 18. It contains new component features and enhancements for Fusion and Flow.
New and enhanced components
Avatar and AvatarGroup
The new Avatar and AvatarGroup components display the user’s avatar image or their initials in a colored circle. Additionally, you can create a group of avatars laid out in a slightly overlapping compact group. You can set the number of items to display in the group. If the number of users exceeds this, the rest are aggregated into one icon indicating the number of hidden icons that can be accessed in a dropdown.
Here is a short example of using AvatarGroup in Vaadin Flow (Java). See a complete example in the Flow Components repository.
AvatarGroup avatarGroup = new AvatarGroup();
List<AvatarGroupItem> items = new ArrayList<>();
items.add(new AvatarGroupItem("Johannes Häyry"));
AvatarGroupItem avatarWithAbbr = new AvatarGroupItem();
avatarWithAbbr.setAbbreviation("SE");
items.add(avatarWithAbbr);
avatarGroup.setItems(items);
Here is a code snippet of using AvatarGroup in Vaadin Fusion (LitElement and TypeScript). There are more examples deployed as a demo app.
// The code for custom element ceremonies omitted for brevity
import "@vaadin/vaadin-avatar/vaadin-avatar-group";
import "@vaadin/vaadin-avatar/vaadin-avatar";
import { AvatarGroupItem } from "@vaadin/vaadin-avatar/vaadin-avatar-group";
/* user colors need to be in the global styles
<custom-style>
<style>
html {
--vaadin-user-color-0: #0096ea;
--vaadin-user-color-1: #2ca84f;
--vaadin-user-color-2: #ff3a49;
}
</style>
</custom-style>*/
@internalProperty()
items: AvatarGroupItem[] = [
{ name: "Sami E", colorIndex: 0 },
{ name: "Johannes Häyry", img: "images/avatar.jpg", colorIndex: 1 },
{ abbr: "MT", colorIndex: 2 },
];
render() {
return html`
<vaadin-avatar-group .items=${this.items}></vaadin-avatar-group>
`;
}
The new avatar components are available today for Vaadin 18. For Vaadin 14, we are targeting 2021.
Field helper text for input components
You can now set helper text below or above a form input field. Helper text is useful to provide the user with context about a field’s input, for example, how the input should be used. Field helpers were released in Vaadin 14.4 and are now available in Vaadin 18. Read more about them in the Vaadin 14.4 release post.
New in Vaadin Flow
LitElement replaces Polymer as the base for view templates
This change affects you if you are currently using a non-LTS version of Vaadin and define your views in Vaadin Flow using declarative programming. If you prefer using Java to configure your layouts and components (imperative programming), the introduction of LitElement does not affect you.
A few months ago (in Vaadin 17), we shipped the initial LitElement support that allowed you to create templates and bind component instances with @Id. However, for certain use cases, there was an annoying limitation in the template support: The component template’s initial state was not reflected on the server side. If you wanted to add something dynamic based on the state of the component, you could not use the initial state when using templates. In Vaadin 18, the initial element attribute values defined in the template are reflected to the component state on the server side. Any further configuration and state changes for components should be performed in the Java code.
Now with the enhanced LitElement template support and the documentation improvements, we are ready to deprecate Polymer-based view templates. LitElement and the LitTemplate class for accessing the template from the server side, is now the recommended way to use templates in a Flow application. Keep in mind that we will continue to support Polymer templates in the next LTS major version.
LitElement support in Vaadin Designer
For those who prefer a drag-and-drop tool for creating their declarative layouts, we are happy to inform you that the latest version (>= 4.6.1) of Vaadin Designer supports creating LitElement-based templates.
For Vaadin 14, we aim to support LitElement-based templates in 2021. You can find more information in the blog post: Future of HTML templates in Vaadin that details our template-support plans in the next LTS.
Improved lazy data binding for ComboBox
We’ve added the same lazy-loading and DataView improvements to combo box data binding that we added to Grid in the Vaadin 17 release. The item count query is now optional for a lazy-loading data binding. In some backend implementations, the count query is a heavy operation and avoiding it lessens the resource usage on your backend. Without knowing the maximum number of items in the combo box, the component now queries additional pages of items when the user scrolls past the item set that is already loaded in the dropdown.
ComboBox<Person> names = new ComboBox<>();
names.setItems(query -> personService.findByName(query));
names.setItemLabelGenerator(Person::getFullName);
New in Vaadin Fusion
Easier customization of login pages with Spring Security
There are three new authentication helper methods in the framework for Spring Security: login, logout and InvalidSessionMiddleware.
The login and logout helpers allow you to provide the login procedure, without a full page refresh. For example, you can customize the login view using the Vaadin LoginOverlay instead of the built-in login page from Spring Security.
InvalidSessionMiddleware lets you detect session expiration and handle it without refreshing the page and breaking the user flow. For example, you can show a login overlay to the user when the session has expired.
Form-binding support for optional fields
Previously, the client-side form binder initialized all bound fields—including optional object type fields—with “empty” values. This was problematic for fields where an empty value is not a valid option, for example a combo box with no “empty” option. Now, the client-side binder leaves optional fields uninitialized, except when binding to a nested field inside an object.
Simplified CSS importing
The webpack configuration now allows you to import styles from a CSS file straight into a LitElement web component. Previously, you had to use the unsafeCSS helper when importing styles from a CSS file, or declare styles in a TypeScript file in a tagged template literal. Now you can import the styles directly from a CSS file.
/* my-styles.css */
h1 {
color: hotpink;
}
// hello-view.ts
import headerStyles from "./my-styles.css";
import { css, customElement, html, LitElement } from "lit-element";
@customElement("hello-world-view")
export class HelloWorldView extends LitElement {
name: string = "";
static styles = [
headerStyles,
css`
:host {
display: block;
padding: 1em;
}
`,
];
render() {
return html`
<h1>Hello</h1>
`;
}
}
Upgrade or start with a new project today
The features are ready for production. You can view the detailed release notes in the Vaadin platform repository. Note! There are a couple of minor API breaking changes and instructions for replacements. To create a new project, visit Start Vaadin.