FullStack Vaadin (14-24+) - Practical Solutions

Explore the Maven project configuration for a Spring Boot app, including the Spring Boot starter, BOM dependency management, Java 11 requirements, and MongoDB, timely, Web, dev tools, and Lombok dependencies.

Overview of a single page app for storing material items, with item listing, selection, add/remove, and export to Excel or PDF, plus MongoDB and Grid Avaz storage.

Build a single page app with vaadin by creating a to do UI in a vertical layout, override onAttach, and map a URL path in a spring boot app.

Implement in-memory data storage for to-do items using a simple memory repository, building items with Lombok, initializing ten items via a post construct setup, and exposing them for UI display.

Display ten to-do items from an in-memory repository in a Vaadin grid, wiring the repository with Spring Boot, configuring columns, and binding items in the on attach method.

Explore how Vaadin renders the user interface using plain Java classes and a vertical layout, without direct html, css, or javascript, based on in-memory data.

Implement dynamic author information from the url using a before enter observer, fetch the name from the url, and display the author in the header as the user interacts.

Build a single-page app that lets users add items via a toolbar button, open a dialog to enter a title, save to an in-memory repo, and refresh the grid.

Implement the remove selected items feature in a Vaadin grid by adding selection checkboxes, enabling multi selection, removing items from the in-memory repo, and refreshing the grid to reflect changes.

Explore how the backend automatically translates selections into frontend ui changes without html, javascript, or css, generating on-the-fly html and reflecting updates without endpoints.

Implement a dynamic page title by defining a get page title method that returns the browser tab text, updated from URL data during before enter.

Implement select all and deselect all buttons for a Vaadin grid, wiring plus and minus icons to a click listener and enabling multi-select to reflect changes in the user interface.

Create a single page application with Vaadin that reflects backend changes in real time using an in-memory repo and spring autowire, with dynamic UI visibility and no endpoints.

Explore how Vaadin push enables real-time UI synchronization between users in a single-page app, automatically updating item lists as John and Jane make changes.

Use Vaadin @Push to broadcast updates to all connected users in real time. Implement a broadcaster to register subscribers and push add or remove item events from the back end.

Implement push technology with a Vaadin broadcaster to enable real-time updates in a to-do app, wiring @Push into the UI, managing registrations, and notifying connected users.

Use the @Push broadcaster to broadcast items added or removed to all listeners in real time via websockets, with attach/detach registration for accurate updates.

Implement push in Vaadin by building a broadcaster with a push annotation, register listeners, and broadcast backend changes to all connected UIs via web socket for immediate refresh.

Implement dynamic exporting of user-selected to-do items to an Excel file, include the items in the file, and deliver the file to the browser as a download via the backend.

Create a Maven-based project by adding the Apache POI dependency to enable Excel file formats and Microsoft API support such as PowerPoint, using a small subset of features.

Add an export to excel button in the toolbar, wrap it in an anchor for download, and implement exporting selected items to an Excel file with Apache POI.

Build a backend service to generate an Excel workbook from selected items and wire it into the controller, creating sheets, rows, and cells to display a list.

Connect the backend Excel export service to a screen button, generating an Excel file from selected items and delivering it to the browser via a stream resource for download.

Apply rich styling to an Excel export by creating and reusing a cell style, defining fonts, colors, borders, and applying them to cells to mirror the Excel user interface.

Export selected items to an MS Excel file by creating rows and cells for author name, title, and body, and apply bold header styling.

Explore what we are not doing: no ui to backend communication while selecting items; the backend generates and sends an excel file from the selected data to the browser.

Implement pdf export for the selected item in a vaadin single page app using maven dependencies, including flying saucer for html to pdf rendering and support for signatures and barcodes.

Build a backend html to pdf utility using the iText renderer, exposing a static method that converts html to pdf and returns a byte array output stream.

Build a backend pdf generator service that renders html to pdf using a thymeleaf template engine, passes a to-do list and title via a context, and outputs a binary pdf.

Create a thymeleaf HTML template for PDF generation by configuring resources/templates/pdf, wiring the title context into an h2 tag, and rendering HTML via the PDF generation service.

Implement a pdf download button in the Vaadin UI by wrapping a pdf generation service and connecting the button to a stream resource that serves a selected items pdf.

Render an HTML table from selected items and export them to PDF, displaying name, title, and body with a header and columns.

See how the framework handles backend-to-frontend communication internally, enabling item selection to trigger a pdf button and generate a pdf via a built-in pdf generator service through browser standards.

Apply CSS-like styles to HTML to format PDFs, using a styles section to set background color, font weight, and borders on tables, converting HTML to PDF.

Embed images into PDFs by converting them to base64 with an image utils class and rendering them in HTML within the PDF generator.

Create a dynamic barcode on the fly using Google libraries and embed it into a pdf by converting the barcode to a base64 png and rendering via html.

Explore how a Vaadin app exports data to excel and pdf, embeds images into pdfs, and auto-updates the user interface via push, all from a single user interface file.

Move from in-memory data storage to persistent MongoDB using Spring Data, storing items as documents; configure host, port, and database name in application.properties for a quick switch.

Implement MongoDB in the boarding app by defining a MongoDB entity and id, creating a repository, and building a DB service with in-memory and MongoDB implementations wired via Spring profiles.

Run the app with the MongoDB profile and verify the MongoDB service and to-do collection are active, then add and remove items via the UI with changes persisting in MongoDB.

Switch between in-memory and MongoDB storage in a Vaadin Spring Boot app by setting an active profile. The UI updates automatically across users as data persists.

Explore GridFS and its use for storing file uploads within a MongoDB backed UI, enabling upload and download features using the existing Spring Data MongoDB starter.

Implement a backend attachment service to upload and store files in GridFS using GridFS operations in Spring Boot, retrieving by MongoDB object id.

Develops a Vaadin frontend file upload using a multi-file upload and memory buffer, connecting to an attachment service to store files in GridFS on MongoDB and broadcast updates.

Explore what we are not implementing: no endpoints or upload mechanism, only a drag-and-drop file upload element with a backend listener and in-memory file data, all in one maintainable class.

Implement a backend-driven download panel for GridFS files in Vaadin, listing all stored files and providing anchor links that stream files to the browser for download.

Build and update a frontend download panel for files stored in GridFS, displaying each file with a download anchor and button, refreshed in real time via a broadcaster.

Enhance the backend by adding a delete attachment method to remove files from GridFS using their ID, enabling upload, download, and real-time UI updates across clients.

Add a delete button with a remove icon beside each attachment in the download panel, wire a click listener to delete the file from GridFS, and broadcast to connected users.

Store file metadata with GridFS using a DBObject map for name, size, file type, and access control; perform an atomic upload with GridFS store to keep metadata with the file.