Vaadin: Build Modern Web Applications with Java and LLM

Set up Vaadin development environment by installing JDK 21, IntelliJ Community Edition, and Vaadin project; import it into IntelliJ and run the Spring Boot app on port 8080.

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

Remove unused dependencies and test components from the pom.xml, including the integration testing profile, to slim down the Vaadin 24+ and Spring AI project and run it on port 8080.

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 number field, a numeric input component with min, max, step, placeholder, and prefix/suffix, and leverage value change, focus, and blur listeners to build dynamic price inputs.

Learn to style a Vaadin number field using theme variants, inline styles, css, custom css variables, and shadow dom, applying classes, focus colors, borders, and slot-based tweaks.

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.

Learn to build div and span components in Vaadin, set text and titles, add, replace, or remove child components, and apply styles and class names.

Explore Vaadin layout to organize and position UI components, manage spacing and alignment, and group related elements like form fields and toolbars, while creating responsive designs for multiple screen sizes.

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 Vaadin checkboxes and checkbox groups to handle binary and multi-select options, including select all, indeterminate states, and labeled items, with practical examples.

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.

Create and customize accordion panels in vaadin 24+ to organize content, forms, and FAQs, with collapsible headers, tooltips, and open/change events.

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.

Style avatars by applying theme variance and size variants from x small to x large, add class names, and craft avatar group overlays with abbreviations.

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.

Explore Vaadin time picker for intuitive time selection via dropdown or input, with min/max validation, locale aware formatting, and use cases in scheduling and reservations.

Explore creating and customizing Vaadin icons using built-in, Lumo, SVG, Font Awesome, and custom resources. Learn sizing, color, classes, and practical UI uses.

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.

Explore list box and multi-select list box to render single or multiple selections. Learn to customize items, set values, handle events, and label generation with a practical Vaadin walkthrough.

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.

Explore the message input component for chat like interfaces, featuring a text input, send button, and event listener to add messages to a message list in real time.

Explore the Vaadin 24+ and Spring AI message list for chat interfaces, rendering messages with text or HTML content, sender, avatar, and timestamp.

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.

Style the Vaadin multi-select combobox using button variants, css, inline styles, css variables, and shadow dom. Inspect and customize labels, input, chips, toggle and clear buttons, and the overlay.

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.

Explore radio button groups, mutual exclusivity, and data binding, with label generation and value change listeners in Vaadin 24+ and Spring AI applications.

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 how to implement the Vaadin upload component for single and multiple files, with drag and drop, file type restrictions, memory buffers, success and failure listeners, and server storage.

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.

Explore building navigation with a responsive menu bar in Vaadin 24+ and Spring AI apps, including multi-level menus, event handling, submenus, checkable items, icons, and item states.

Style Vaadin menu bar using shadow dom with custom styles, CSS, and class names; build and import a style sheet to customize menu bar buttons, overlay, and disabled states.

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.

Explore lazy loading in a Vaadin grid using a backend data provider, with a search field for filtering by first name and profession, plus sorting by age and gender.

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.

Demonstrates a Vaadin 24+ and Spring AI task solution with a header, content, and footer, featuring an accordion, a split layout, a grid with filtering, and a 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.

Bind fields to a person object, enforce validators for name length greater than six characters, email format, and required fields, then validate and save with notification.

Explore type conversion in Vaadin binder, using string to integer converters, default converters, and building a custom converter with convertToModel and convertToPresentation, including error handling and validation messages.

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 the after navigation event in Vaadin's navigation lifecycle, triggered after landing on a new view, to update UI, set focus, and log events in the about us view.

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.

Handle route not found errors by implementing a before enter event that returns a 404, displaying a custom error notification, and optionally forwarding to a route like the contact view.

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 enable spring security in vaadin apps, implement a login view, and secure views with anonymous allowed, permit all, roles allowed, and deny all, using in-memory users.

Configure Marvin, the dependency package manager, to package your Vaadin app for production by downloading and setting Marvin_home and PATH, then restart the IDE and verify the version.

Deploy a Vaadin app on a Windows EC2 instance by packaging as a jar, installing Java 17, transferring the jar, and running it as a service on port 9080.

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.

Terminate the running linux-based EC2 instance to prevent charges, then delete the attached security group once the instance is fully terminated to remove unneeded AWS dependencies.

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 ChatGPT, a generative AI built on GPT, to chat, generate code, and build a Spring Boot CRUD app, plus image generation with DALL-E GPT.

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.