Overview.asciidoc

title	order	layout
Overview	1	page

Vaadin Framework

Vaadin is a Java web framework for building modern web apps and websites. You can create UIs in Java, or use HTML templates to create the UI, and then bind it to any backend using Java.

Vaadin features:

• An architecture that lets you concentrate on the UI. No need to think about client-server communication.

• A set of carefully crafted UI components that focus on both the end-user and developer experience.

• Powerful abstraction layers to build your own reusable UI components with either Java or HTML templates.

• Data binding API to connect UI components to any backend using type-safe Java.

• Router API to create hierarchical page structures for the user to navigate.

The Vaadin documentation is arranged in the following sections and we recommend reading it in this order.

Introduction

• Introduction to Vaadin Flow

• Core Concepts

• Compatibility and Versioning

• Getting started with Vaadin Flow

Installing Development Tools

• Overview

• Working with a Toolchain

Development Workflow

• Workflow Overview

• Setting Up Live Reload Using Spring Boot

• Setting Up Live Reload Using JRebel

• Setting Up Live Reload Using HotswapAgent

• Automatic Restart with Jetty Maven Plugin

• Automatic Restart with TomEE Maven Plugin

• Run on Server in IntelliJ IDEA Ultimate

Router and Navigation

• Routing on Client Side and Server Side

• Defining Routes with @Route

• Navigation Lifecycle

• Router Layouts and Nested Router Targets

• URL Parameters for Navigation Targets

• URL generation

• Navigating Between Routes

• Updating Page Title on Navigation

• Router Exception Handling

• Getting Registered Routes

• Dynamic Route Registration

Using Vaadin Components

• Using Vaadin Components

• Component Basic Features

• Component Enabled State

• Grid

• Using Icons

Binding Data to Components

• Binder overview

• Validating and Converting User Input

• Loading from and Saving to Business Objects

• Binding Beans to Forms

• Showing a list of data with Data Providers

Importing JavaScript

• Importing JavaScript

Creating Components

• Creating A Simple Component Using the Element API

• Creating a Component Based on Many Elements

• Using API Helpers for Defining Component Properties

• Creating a Component Using Existing Components

• Using Events with Components

• Creating a Component Which Can Contain Other Components

• Component Lifecycle Callbacks

Manipulating DOM with Element API

• Element Properties and Attributes

• Listening to User Events

• Retrieving User Input

• Dynamic styling

• Shadow root in server-side Element

Drag and Drop

• Generic Drag and Drop

• Making Any Component Draggable

• Creating a Drop Target

Integrating Web Components

• Integrating a Web Component

• Creating Java API for a Web Component

• Debugging a Web Component Integration

• Creating Another type of Add-on

• Creating an In-project Web Component

• Introduction to Web Components

Building Views with Templates

• Using Templates from Server-side Java Code

• Creating A Simple Component Using the Template API

• Binding Template Components

• Combining Templates and Binders

• Using sub-templates

• Dynamically Adding Server-side Components to Templates

• Styling Templates

• Detecting Component Mappings

• Mapped Components Limitations

• PolymerTemplate, Creating a Simple Component Using the Template API

• PolymerTemplate, Combining Templates and Binders

• PolymerTemplate, Dynamically Adding Server-side Components to Templates

• PolymerTemplate, Styling Templates

• PolymerTemplate, Handling User Events

• PolymerTemplate, Binding Model Data

• PolymerTemplate, Using Model Beans

• PolymerTemplate, Using Model Encoders

• PolymerTemplate, Creating Contents Dynamically Based on Items List

• PolymerTemplate, Using Parent Layout

Creating UI in TypeScript

• Quick Start Guide

• Starting the Application in TypeScript

• Creating Routes in TypeScript

• Accessing Java Backend in TypeScript

• Main Layout in TypeScript

• Client Side Exceptions

• Configuring Security for TypeScript Views

• Adding a Login Form with Spring Security

• Adding a Custom Login Form with Spring Security

• Checking Authentication

• Appendix: Intro to TypeScript in Vaadin 15

• Appendix: Type Conversion between Java and TypeScript

• Appendix: Customizing Serialization

• Appendix: TypeScript Endpoints Generator

• Appendix: TypeScript Client

• Appendix: Client Middleware

• Appendix: Handle session expiration

• Appendix: Endpoint Methods Validation

• Appendix: Endpoint URLs

Client-Side Form Binding

• Binding Data to Client-Side Forms

• Loading From and Saving To Business Objects

• Validating User Input

• Reacting to Form State Changes

• Binding Arrays

• Appendix: Client-Side Form Binding Reference

• Appendix: Binding Data to Vaadin Components

• Appendix: Using a Custom Web Component Field

Using Vaadin with Spring

• Use Vaadin with Spring

• Use Vaadin with Spring MVC

• Routing with Spring

• Vaadin Spring Scopes

• Vaadin Spring Configuration

• Getting Started with Spring and Vaadin

Using Vaadin with CDI

• Use Vaadin with CDI

• Components instantiated by the framework

• Vaadin CDI contexts

• Observable Vaadin events

• Vaadin service interfaces as a CDI bean

• Getting Started with CDI and Vaadin

Vaadin Portlet Support

• Vaadin Portlet Support Overview

• Creating Vaadin Portlets

• Handling Portlet Phases

• Inter-portlet Communication

• Creating Multi-Module Portlet Project

• Adding a Vaadin Portlet Module to an Existing Maven Multi-Module Project

• Vaadin Portlet CDI Support

• Demonstration: Address Book

Deploying Vaadin Applications

• Taking your Application into Production

• Deploying to Jetty

• Advanced production mode topics

Embedding Flow Applications

• Embedding Introduction

• Properties of Embedded Web Components

• Theming an Embedded Application

• Embedded Application Push Configuration

• Securing an Embedded Application

• Embedding a Vaadin Application

• Preserving Contents of Embedded Applications on Refresh

• Limitations in Embedded Application

Progressive Web Applications (PWA)

• Introduction

• Creating PWA with Flow

• Application Icons

• Web App Manifest

• Service Worker

• Offline experience

Migrating from Vaadin 8 to Vaadin platform

• Migrating from Vaadin 8 to Vaadin platform

• Migration Strategies

• Differences between Vaadin platform and Vaadin 8 Applications

• Routing and Navigation

• Components in Vaadin platform

  • Component Set

  • Basic Component Features

  • Layouts in Vaadin platform

• Themes and Theming Applications

• Add-ons, Integrations and Tools

Advanced Topics

• Application Lifecycle

• Application Localization (I18N)

• Modifying the Bootstrap Page

• Flow runtime configuration

• Customizing the Loading Indicator

• Server Push Configuration

• Asynchronous Updates

• Creating Collaborative Views

• Modifying how dependencies are loaded with DependencyFilters

• Configure RequestHandlers, IndexHtmlRequestListeners and DependencyFilters using VaadinServiceInitListener

• Showing Dynamic Content

• History API

• Using stream resources

• UIInitListener

• Preserving view state between browser refreshes

• Differences between pnpm and npm