0
# Vaadin Core
1

2
Vaadin Core is a comprehensive Java web framework platform that enables developers to build modern, full-stack web applications entirely in Java without writing HTML, CSS, or JavaScript directly. It provides a rich set of UI components (40+ components including buttons, grids, forms, charts, and layouts), themes (Lumo and Material), data binding capabilities, server-side rendering with Flow, client-side support with Lit templates and React integration, and push notification capabilities for real-time updates.
3

4
## Package Information
5

6
- **Package Name**: vaadin-core
7
- **Maven Group ID**: com.vaadin
8
- **Maven Artifact ID**: vaadin-core
9
- **Package Type**: maven
10
- **Language**: Java (with JavaScript/TypeScript frontend components)
11
- **Version**: 24.9.4
12
- **Java Version Requirement**: Java 17+
13
- **Installation**: Add to Maven pom.xml:
14

15
```xml
16
<dependency>
17
    <groupId>com.vaadin</groupId>
18
    <artifactId>vaadin-core</artifactId>
19
    <version>24.9.4</version>
20
</dependency>
21
```
22

23
## Spring Boot Integration
24

25
Vaadin has first-class Spring Boot support. Add the Spring Boot starter:
26

27
```xml
28
<dependency>
29
    <groupId>com.vaadin</groupId>
30
    <artifactId>vaadin-spring-boot-starter</artifactId>
31
</dependency>
32
```
33

34
> **Note**: For Vaadin 24.9.4, it is recommended to use Spring Boot 3.3.0 or higher to avoid dependency conflicts with Jackson libraries. Earlier versions of Spring Boot (e.g., 3.2.x) may encounter version conflicts during the Maven build process.
35

36
Then use Spring annotations in views:
37

38
```java
39
@Route("dashboard")
40
@SpringComponent
41
@UIScope
42
public class DashboardView extends VerticalLayout {
43
    @Autowired
44
    public DashboardView(UserService userService) {
45
        // Service injection
46
    }
47
}
48
```
49

50
## Core Imports
51

52
Vaadin uses package-based imports. The main packages developers interact with:
53

54
```java
55
// Component base classes
56
import com.vaadin.flow.component.*;
57
import com.vaadin.flow.component.orderedlayout.*;
58
import com.vaadin.flow.component.html.*;
59

60
// Routing
61
import com.vaadin.flow.router.*;
62

63
// Common components
64
import com.vaadin.flow.component.button.*;
65
import com.vaadin.flow.component.textfield.*;
66
import com.vaadin.flow.component.grid.*;
67
import com.vaadin.flow.component.dialog.*;
68
import com.vaadin.flow.component.notification.*;
69

70
// Data binding
71
import com.vaadin.flow.data.binder.*;
72
import com.vaadin.flow.data.provider.*;
73
```
74

75
## Quick Start
76

77
```java
78
import com.vaadin.flow.component.button.Button;
79
import com.vaadin.flow.component.notification.Notification;
80
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
81
import com.vaadin.flow.component.textfield.TextField;
82
import com.vaadin.flow.router.Route;
83

84
@Route("")
85
public class HelloWorldView extends VerticalLayout {
86
    public HelloWorldView() {
87
        TextField nameField = new TextField("Your name");
88
        Button greetButton = new Button("Say hello", event -> {
89
            String name = nameField.getValue();
90
            Notification.show("Hello, " + name + "!");
91
        });
92

93
        add(nameField, greetButton);
94
    }
95
}
96
```
97

98
## Architecture
99

100
Vaadin Core is built around several key architectural layers:
101

102
- **Flow Framework** - Server-side Java framework that manages UI state, handles events, and synchronizes with the browser
103
- **Component System** - Hierarchical component model where all UI elements extend from `Component` base class
104
- **Router** - Declarative routing system using `@Route` annotations for navigation
105
- **Data Binding** - `Binder` class provides two-way data binding between UI components and Java beans
106
- **Data Providers** - Abstract backend data access for grids, lists, and other data-bound components
107
- **Themes** - Lumo (default) and Material Design themes with CSS custom properties
108
- **Server Push** - WebSocket-based server push for real-time updates
109
- **Frontend Integration** - Support for Lit templates and React components
110

111
## Documentation
112

113
- [Core Framework](./core-framework.md) - Routing, components, lifecycle, configuration
114
- [Components](./components.md) - UI components: inputs, displays, navigation, dialogs, HTML elements
115
- [Data Integration](./data-integration.md) - Data binding, providers, forms
116
- [Layouts](./layouts.md) - Layout components and organization
117
- [Themes & Styling](./themes-styling.md) - Theming, CSS, customization
118
- [Security](./security.md) - Authentication, authorization, Spring Security
119
- [Advanced](./advanced.md) - Collaboration, login, messages, frontend integration
120

121
## Quick Component Reference
122

123
### Input Components
124
| Component | Description | Location |
125
|-----------|-------------|----------|
126
| `Button` | Clickable button with text/icon | [Components](./components.md#button) |
127
| `TextField` | Single-line text input | [Components](./components.md#textfield) |
128
| `TextArea` | Multi-line text input | [Components](./components.md#textarea) |
129
| `PasswordField` | Password input with reveal | [Components](./components.md#specialized-text-fields) |
130
| `EmailField` | Email-validated input | [Components](./components.md#specialized-text-fields) |
131
| `NumberField` | Numeric input (double) | [Components](./components.md#specialized-text-fields) |
132
| `IntegerField` | Numeric input (integer) | [Components](./components.md#specialized-text-fields) |
133
| `Checkbox` | Single checkbox | [Components](./components.md#checkbox) |
134
| `CheckboxGroup` | Multiple checkboxes | [Components](./components.md#checkbox) |
135
| `RadioButtonGroup` | Radio button group | [Components](./components.md#radiobuttongroup) |
136
| `ComboBox` | Dropdown with search | [Components](./components.md#combobox-and-select) |
137
| `MultiSelectComboBox` | Multi-select dropdown | [Components](./components.md#combobox-and-select) |
138
| `Select` | Simple dropdown | [Components](./components.md#combobox-and-select) |
139
| `DatePicker` | Date selection | [Components](./components.md#date-and-time-pickers) |
140
| `TimePicker` | Time selection | [Components](./components.md#date-and-time-pickers) |
141
| `DateTimePicker` | Date and time selection | [Components](./components.md#date-and-time-pickers) |
142
| `Upload` | File upload component | [Components](./components.md#upload) |
143
144
### Display Components
145
| Component | Description | Location |
146
|-----------|-------------|----------|
147
| `Grid` | Data grid/table | [Components](./components.md#display-components) |
148
| `ProgressBar` | Progress indicator | [Components](./components.md#display-components) |
149
| `Avatar` | User avatar | [Components](./components.md#display-components) |
150
| `Icon` | Icon component | [Components](./components.md#display-components) |
151
152
### Navigation Components
153
| Component | Description | Location |
154
|-----------|-------------|----------|
155
| `Tabs` | Tab navigation | [Components](./components.md#navigation-components) |
156
| `Tab` | Individual tab | [Components](./components.md#navigation-components) |
157
| `TabSheet` | Tabbed content | [Components](./components.md#navigation-components) |
158
| `MenuBar` | Menu bar | [Components](./components.md#navigation-components) |
159
| `SideNav` | Side navigation | [Components](./components.md#navigation-components) |
160
| `SideNavItem` | Side nav item | [Components](./components.md#navigation-components) |
161
162
### Dialog & Overlay Components
163
| Component | Description | Location |
164
|-----------|-------------|----------|
165
| `Dialog` | Modal dialog | [Components](./components.md#dialogs--overlays) |
166
| `ConfirmDialog` | Confirmation dialog | [Components](./components.md#dialogs--overlays) |
167
| `Notification` | Toast notification | [Components](./components.md#dialogs--overlays) |
168
169
### Layout Components
170
| Component | Description | Location |
171
|-----------|-------------|----------|
172
| `VerticalLayout` | Vertical arrangement | [Layouts](./layouts.md#basic-layouts) |
173
| `HorizontalLayout` | Horizontal arrangement | [Layouts](./layouts.md#basic-layouts) |
174
| `AppLayout` | Application layout | [Layouts](./layouts.md#app-layout) |
175
| `FormLayout` | Responsive form layout | [Layouts](./layouts.md#form-layout) |
176
| `SplitLayout` | Resizable split panel | [Layouts](./layouts.md#split--accordion) |
177
| `Accordion` | Collapsible panels | [Layouts](./layouts.md#split--accordion) |
178
| `AccordionPanel` | Accordion panel | [Layouts](./layouts.md#split--accordion) |
179
| `Details` | Expandable details | [Layouts](./layouts.md#split--accordion) |
180
| `Card` | Card container | [Layouts](./layouts.md#card--scroller) |
181
| `Scroller` | Scrollable container | [Layouts](./layouts.md#card--scroller) |
182
| `FlexLayout` | Flexbox layout | [Layouts](./layouts.md#card--scroller) |
183
184
### HTML Components
185
| Component | Description | Location |
186
|-----------|-------------|----------|
187
| `Div` | Div container | [Components](./components.md#html-components) |
188
| `Span` | Span element | [Components](./components.md#html-components) |
189
| `H1`, `H2`, `H3`, `H4`, `H5`, `H6` | Headings | [Components](./components.md#html-components) |
190
| `Paragraph` | Paragraph text | [Components](./components.md#html-components) |
191
| `Anchor` | Link/anchor | [Components](./components.md#html-components) |
192
| `Image` | Image element | [Components](./components.md#html-components) |
193
194
### Data Integration
195
| Class/Interface | Description | Location |
196
|----------------|-------------|----------|
197
| `Binder` | Two-way data binding | [Data Integration](./data-integration.md#binder) |
198
| `DataProvider` | Data provider interface | [Data Integration](./data-integration.md#dataprovider) |
199
| `ListDataProvider` | List-based provider | [Data Integration](./data-integration.md#dataprovider) |
200
| `HierarchicalDataProvider` | Tree data provider | [Data Integration](./data-integration.md#hierarchical-dataprovider) |
201
| `ValueProvider` | Value extraction | [Data Integration](./data-integration.md#binder) |
202
| `ItemLabelGenerator` | Label generation | [Data Integration](./data-integration.md#binder) |
203
204
### Advanced Components
205
| Component | Description | Location |
206
|-----------|-------------|----------|
207
| `CollaborationEngine` | Real-time collaboration | [Advanced](./advanced.md#collaboration-engine) |
208
| `CollaborationAvatarGroup` | Collaborative avatars | [Advanced](./advanced.md#collaboration-engine) |
209
| `CollaborationBinder` | Collaborative form | [Advanced](./advanced.md#collaboration-engine) |
210
| `MessageList` | Chat message list | [Advanced](./advanced.md#messages) |
211
| `MessageInput` | Chat input | [Advanced](./advanced.md#messages) |
212
213
### Framework & Routing
214
| Class/Annotation | Description | Location |
215
|------------------|-------------|----------|
216
| `@Route` | Route annotation | [Core Framework](./core-framework.md#routing) |
217
| `@PageTitle` | Page title | [Core Framework](./core-framework.md#routing) |
218
| `RouterLink` | Navigation link | [Core Framework](./core-framework.md#routing) |
219
| `Component` | Base component class | [Core Framework](./core-framework.md#component-base-classes) |
220
| `UI` | Main UI class | [Core Framework](./core-framework.md#routing) |
221
| `Binder` | Data binder | [Data Integration](./data-integration.md#binder) |
222
223
## Common Patterns
224

225
### Creating Views with Routing
226

227
```java
228
@Route("products")
229
@PageTitle("Products")
230
public class ProductsView extends VerticalLayout {
231
    public ProductsView() {
232
        add(new H1("Products"));
233
        // View content
234
    }
235
}
236
```
237

238
### Form Binding
239

240
```java
241
Binder<Person> binder = new Binder<>(Person.class);
242
TextField firstName = new TextField("First Name");
243
TextField lastName = new TextField("Last Name");
244
EmailField email = new EmailField("Email");
245

246
binder.forField(firstName)
247
    .asRequired("First name is required")
248
    .bind(Person::getFirstName, Person::setFirstName);
249
binder.forField(lastName)
250
    .bind(Person::getLastName, Person::setLastName);
251
binder.forField(email)
252
    .bind(Person::getEmail, Person::setEmail);
253

254
binder.setBean(person);
255
```
256

257
### Grid with Data Provider
258

259
```java
260
Grid<Customer> grid = new Grid<>(Customer.class);
261
grid.setColumns("name", "email", "status");
262
grid.setDataProvider(DataProvider.fromCallbacks(
263
    query -> customerService.fetch(query.getOffset(), query.getLimit()).stream(),
264
    query -> customerService.count()
265
));
266
```
267

268
### Event Handling
269

270
```java
271
Button button = new Button("Save", event -> {
272
    // Handle click event
273
    Notification.show("Saved!");
274
});
275

276
textField.addValueChangeListener(event -> {
277
    String oldValue = event.getOldValue();
278
    String newValue = event.getValue();
279
    // Handle value change
280
});
281
```
282

283
## Key Features
284

285
- **Type-Safe**: All UI code is Java with compile-time checking
286
- **Server-Side Rendering**: UI state managed on server, automatic synchronization with browser
287
- **Real-Time Updates**: Built-in server push via WebSocket
288
- **Responsive**: Components adapt to screen size automatically
289
- **Accessible**: WCAG 2.1 compliant components
290
- **Themeable**: Lumo and Material themes with CSS custom properties
291
- **Progressive Web App**: Built-in PWA support
292
- **Security**: Integration with Spring Security and Jakarta EE security
293
- **Testing**: TestBench library for end-to-end UI testing
294

295
## Browser Support
296

297
- Chrome (latest)
298
- Firefox (latest)
299
- Safari (latest)
300
- Edge (latest)
301

302
## Additional Resources
303

304
- Official Documentation: https://vaadin.com/docs/latest/
305
- API JavaDoc: https://vaadin.com/api/
306
- Component Examples: https://vaadin.com/docs/latest/components
307
- GitHub Repository: https://github.com/vaadin/platform
308