Vaadin: Build Modern Web Applications with Java and LLM

Package a Vaadin application for production with maven using the production profile, and run the generated jar on port 8080 to verify hello world.

Explore how the Vaadin button functions as a customizable, event-driven UI component, with single/double click, keyboard triggers, disable-on-click, and integrations in forms, dialogs, and layouts.

Explore styling Vaadin buttons with built-in themes, CSS classes, inline styles, and shadow DOM; apply multiple theme variants, add icons, and target per-button styling with class selectors.

Learn to implement text field components in Vaadin 24+ by configuring labels, placeholders, and validation rules, and handling value change events with prefixes, suffixes, and tooltips.

Explore how to style text fields in Vaadin 24+ using theme variants, inline CSS, CSS variables, and shadow DOM to customize labels, helper text, focus, borders, and icons.

Explore Vaadin's email field component, which validates standard email formats, shows error messages, and supports placeholders, labels, tooltips, and required indicators for forms like registration, login, and subscription.

Explore the password field component, including input masking, reveal and clear buttons, alphanumeric validation, and password strength feedback via helper text with eager and lazy value changes.

Explore password field styling through theme variants, text field variants, inline styling, CSS variables, and shadow dom with practical implementations.

Build and customize a Vaadin vertical layout by adding components to primary and secondary layouts, and tune spacing, padding, margins, height, alignment, and visible state for responsive behavior.

Style a vertical layout using a dedicated style sheet, apply the real primary class to set a background, and compare inline styling via get style and set background to gray.

Explore horizontal layout in Vaadin 24+ by arranging three buttons in a row, adjusting height, width, alignment, even spacing, and responsive behavior with flex grow, margins, and padding.

Explore styling the horizontal layout by creating and importing a style sheet, applying the layout primary class to change the background, and using inline styling via the primary style set method.

Explore form layout to create responsive forms with multiple columns, position labels above or beside inputs, and control columns with responsive steps and column spans.

Style a form layout with a dedicated style sheet, import it into main.css, apply the fl primary class, and manage disabled states and form items like first and last name.

Explore split layout with two resizable panels and a draggable splitter, featuring a primary form layout and a secondary vertical layout with a text area and orientation options.

Explore the text area component, a multiline input with auto height, placeholder, and character limits; implement value change listeners and helper text for real-time feedback.

Explore styling a text area using modern theme variants, inline styles, CSS, custom CSS variables, and shadow dom, then apply variants and customize labels, helper text, and error messages.

Explore styling checkboxes using custom styles with shadow Dom, CSS variables, and themes, then apply per-checkbox classes, label slots, and group styles to handle checked, focus, and intermediate states.

Explore how to create and customize Vaadin ComboBox components, including string, boolean, integer, and custom employee items, with labels, item renderers, value change listeners, and dynamic filtering.

Learn to style Vaadin combo boxes using built-in variants, customize style properties, and apply css to components, including overlays and inner elements, with practical live coding.

Explore Vaadin dialog components, including customizable and confirmed dialogs, to create modal windows with text and forms. Learn to customize headers, content, and button behavior in Java web apps.

Style Vaadin dialogs using custom styles with shadow dom, theme variants, and CSS variables, then adjust padding, headers, overlays, and slots for a polished dialog UI.

Style accordions in a Vaadin 24+ app using modern themed variants, css variables, and shadow dom. Customize the heading, panel, and toggle, and apply per-accordion classes for open-state colors.

Explore implementing and customizing Vaadin avatars: create named avatars with abbreviations, colors, and images, and build an avatar group with a max visible items setting for scalable branding.

Explore the Vaadin date picker, learning calendar and manual input, localization, custom date formats, range validation with min and max dates, and internalization via locale settings.

Explore styling the date picker with custom styles using shadow DOM, CSS variables, and component parts like label, input, and overlay, through practical IDE implementation.

Learn how to create and display images in a Vaadin app using an image class, set source paths, and stream resources with alt text, then style the image with css.

Explore badges in the Vaadin modding framework, learn to display notification counts, status indicators, and labeled tags using themes, icons, and styling like success, error, and primary.

Learn to style a Vaadin list box using shadow dom with a dedicated css file and a scoped class name, adjusting borders, colors, and disabled states for modular ui.

Style the message list using shadow DOM, custom styles, and CSS variables, adjusting colors for parts like message, header, content, and time to create a cohesive UI.

Explore Vaadin's multi-select combo box, enabling multiple item selection, customizable item templates, searchability, and advanced features like rendering, label generators, and value change handling for both string and employee objects.

Explore Vaadin notifications with configurable duration and position. Learn to use variants like Lumo error and primary, and customize via CSS and class names.

Explore how a progress bar visually indicates task progress in a responsive web app, with intermediate mode, programmatic value from 0.0 to 1.0, and css customization for dynamic, real-time updates.

Style progress bars in Vaadin using theme variants, CSS and custom variables, including shadow DOM, then create and apply a style sheet to adjust progress bar value and bar colors.

Learn to style radio buttons with custom styles using shadow dom, via a dedicated stylesheet and class-based scoping. Implement label, slot, and helper styling within a button radio button group.

Explore the Vaadin select component, a single-value dropdown with customizable appearance, icons, item templates, keyboard accessibility, and dynamic rendering for rich items like employees.

Learn to style vaadin 24+ select components using themes, css variables, and shadow dom by inspecting elements, creating component styles, and applying scoped class names for precise control.

Explore styling the Vaadin 24+ upload field with custom styles using shadow DOM, CSS variables, and inline styles, including the image upload component, its button, drop label, and icons.

Master Vaadin tabs to organize content with a tab component, enabling horizontal or vertical layouts, dynamic content switching, and css styling for cohesive interfaces.

Learn to style tabs using CSS, including inline styles and shadow dom, with a tab sheet class to scope colors for labels, selected, and disabled states and navigation buttons.

Explore Vaadin grid's capabilities for handling large data sets with lazy loading, virtual scrolling, sorting, filtering, and columns; bind to data sources, render custom cells, and enable selection and tooltips.

Create a Vaadin grid filter by wiring a search text field to a data view, filtering by first name, last name, age, gender, and salary, with updates on value changes.

Build a Vaadin 24+ and spring ai web app UI with a central menu, left navigation, a lazy-loaded grid filtered by first name and profession, and a detail form.

Bind UI fields to a backend pojo with a binder, enabling two-way binding, data synchronization, validation, and type conversion, and manage read/write bean operations through practical examples.

Learn how to bind UI components to Java POJOs with a binder and toggle a field to read-only by passing null to the setter in the bind method.

Create a custom string to double converter to bind a text field to a double amount via a binder, with error messages such as could not convert string to double.

Discover how binder enables dynamic forms that bind to different data models at runtime, with centralized validation ensuring valid input before saving and improving maintainability.

Explore Vaadin routing, a url-based navigation system that maps routes to views via route annotations, enabling navigation between home, contact us, and about us.

Explore the Vaadin navigation life cycle, including before leave and before enter events, with practical examples of postponing navigation, showing confirm dialogs, and guarding views with authentication.

Explore parent and nested routes using router layout, showing how a main layout serves as a parent and child routes inherit its components for pages like dashboard, reports, and settings.

Explore server side navigation in Vaadin 24+, using UI.navigate and UI.getCurrent to move between views, router links, standard anchors, and click listeners for seamless in-place page updates.

Explore retrieving registered routes through route configuration, get URL calls, and route parameters to navigate between user and service views using anchors and path construction.

Explore dynamic operation on routes with Vaadin: register routes, set dynamic page titles, assign aliases and parent layouts, query available routes, and remove routes within a session.

Learn how route alias enables multiple paths to the same view using the route alias annotation, creating routes like home, main, and xyz that map to a single home view.

Learn how to clean up an AWS EC2 Windows instance by stopping, terminating, deleting security groups, and removing key pairs to avoid ongoing charges.

Package the Vaadin project into a my-app.jar, deploy to an Ubuntu EC2 instance, install OpenJDK 17, transfer the jar, and run it as a systemd service with port 9080 open.

Explore the foundations of artificial intelligence, from machine learning and neural networks to generative AI, transformers, and large language models, with examples like ChatGPT, DALL-E, and Stable Diffusion.

Explore Spring AI, an application framework that connects enterprise data and APIs to AI models, enabling retrieval augmented generation with chat, embedding, and vector store integrations.

Navigate the OpenAI dashboard to create a new API key, review pricing for GPT models, and learn to secure a secret key with appropriate permissions for your web app.

Learn to build a Vaadin AI chat bot using Spring AI and OpenAI, wiring a chat client, messages, and asynchronous request handling to avoid UI blocking.

Explore Spring AI's chat model API to integrate OpenAI-powered chat completions, compare models like GPT-3.5-turbo and GPT-4, and experiment with prompts and multi-modal image inputs.

Learn how a Vaadin and Spring AI based RAG pipeline builds a document-aware chat by uploading PDFs, chunking text, creating embeddings, storing in Pinecone, and generating answers with OpenAI models.

Build an ai web app that transcribes a YouTube video, translates to English, creates embeddings stored in Pinecone, and enables chat with the video using a rag pipeline.