Practical JavaFX: GUI Architecture for Beginners

Install IntelliJ IDEA community edition to begin JavaFX development, download the free edition, and configure desktop shortcut, context menu, file associations, and path for command-line access.

Open IntelliJ IDEA, create a new JavaFX project with Gradle and JDK 21 (eclipse tamarin), fix a runtime error by resyncing, then run an app with a button showing text.

Discover how JavaFX UIs come from code or FXML, an XML-based language, and are edited with Scene Builder, including VBox and HBox layouts and an anchor pane.

Download and install the JavaFX Scene Builder, compare the standalone and IntelliJ versions, configure the destination folder, and open fxml files in Scene Builder from IntelliJ to streamline UI design.

Explore the hello application class in JavaFX, uncovering the stage, scene, and node structure, and explain how the start method, init, and main launch sequence initialize the UI.

Walk through the start method in javaFX, loading the fxml with the fxml loader via getResource, building the scene graph, attaching the scene to the stage, and showing it.

Explore the hello controller class in JavaFX, learning how the FXML loader connects UI elements via fx:id and @FXML, handles on action events, and updates labels and button states.

Explore the self checkout's mvc architecture, detailing the model, view, and controller roles, data objects like product, item, money, and receipt, and the four views from welcome to receipt.

Develop the welcome screen for a self checkout app using JavaFX. Create the welcome FXML and welcome controller; apply CSS for fonts and colors with a VBox layout.

Create the self checkout application class in the base package, extend application, and implement start to load the welcome fxml, build a 720×480 scene, and show the stage.

Finish the welcome screen by wiring the start button to the next screen, and address accessibility for the controller and modules in FXML loading.

Create the scan items screen in JavaFX with a VBox layout, featuring a top bar, center ListView and total, and a bottom AnchorPane with Cancel and Pay.

Learn to switch between the welcome and scan items screens in JavaFX by handling action events and setting a new scene loaded from FXML.

Implement a navigator to manage stage and switch scenes, loading resources by path, with error handling and a single global instance via the self checkout application to enable centralized navigation.

Create a self-contained barcode scanner device that scans barcodes, looks up products, and adds them to a list displayed on screen.

Create the barcode scanner UI in scene builder with a text field, a scan button, and a label, wire the controller and on action handlers before loading FXML.

Implement the observer pattern to connect a barcode scanner with a single event listener. The scan items controller implements the interface and handles on barcode scanned events.

Refactor object initialization to decouple user interface creation from core components and ensure the barcode scanner is created before navigation, preventing nulls and respecting the JavaFX application thread.

Create a product model and a product repository with a ready-made list of products in memory. Implement a find by barcode method to retrieve a product during barcode scans.

Display scanned product names in a list view named LV items and note that screen changes may destroy data, and barcode entry remains tedious.

Add dynamic product buttons to the barcode scanner using a flow pane inside a vbox, populating buttons from the product repository in initialize and wiring actions with lambdas.

Create reusable custom components by defining an article view as a self-contained VBox-based node, enabling instantiation, composition, and easy customization via constructors, padding, and color.

Learn to build reusable JavaFX components with FXML by loading an article view and resolving root conflicts with a root placeholder. Wire events with lambdas to confirm interactions.

Create a custom ListView item component in JavaFX by building a reusable item view with name, price, and delete button, wiring FXML, controllers, and dynamic sizing.

Create a checkout model with a list property and binding to keep the user interface in sync, add products to checkout, and reset the checkout when returning to welcome screen.

Bind the list view to the checkout's items property so scanned items update automatically, with initialize binding the list view after the fxml is loaded to ensure type-matched products.

Customize ListView items by creating a cell factory and overriding updateItem to display an item view with name and price, using setGraphic for efficient rendering.

Identify and fix item removal by introducing an item class that represents each scanned item and references its product, turning the list into distinct item objects to correctly handle duplicates.

Create a styles.css in resources, attach it to the root node, and use style classes like top bar and button, with selectors, inheritance, and hover and pressed states.

Set a white root background and light blue bottom bar using a bottom bar style class; enforce fixed heights and button sizing with css selectors.

Download material design icons, add them to resources/icons, insert image views in cancel and pay buttons, resize to 24 by 24, and align icons to the right.

Style the JavaFX list view with css to toggle white and gray stripes for filled rows, keep empty cells white, and refine selected state using list cell selectors.

Define looked up colors in the root CSS to reuse colors across the JavaFX app, then use color primary and color primary light for consistent theming.

Build a payment screen using an fxml view and a controller, arranging a border pane with a top bar and a center grid pane showing payment due, paid, and total.

Create a coin machine class in the devices package that accepts coins, uses a code-based UI with buttons for British coin values, and configures the scene and owner.

Wire the coin button to fire a coin inserted event with setOnAction. Register a listener with a connect method, call on coin inserted, and guard against null.

Learn how to implement a coin-based payment flow in JavaFX by wiring a coin machine to a payment controller, tracking total with a SimpleObjectProperty<BigDecimal>, and binding UI updates.

Introduce a money class to replace BigDecimal for monetary values, enforcing immutability and two decimal places via setscale with half up rounding; include constructors and an add method.

Use an object binding to observe the items list and recalculate the total money as items change, then bind the label to display the updated total.

Create a money binding for payment due by subtracting paid from total, with dependencies on total and paid, then bind the label text to this binding.

Learn to keep payment due non-negative using JavaFX map and lambda, with money comparisons via compareTo, and implement max and min helpers for clean zeroing.

Bind the change label to the payment due with a map and lambda; show a dash if positive, or the absolute change if overpaid, and set zero for exact payment.

Master controller lifecycles in a JavaFX GUI by implementing an abstract controller with on destroy, ensuring the navigator disconnects devices when screens change.

Create a left-hand payment panel with two views: payment options and payment details, via a custom component and view swapping using FXML, controllers, and scene logic.

Build and switch between payment options and payment info views in JavaFX using fxml, scene builder, and a VBox layout with computed sizing and styles.

Implement coin acceptance in the payment controller by returning true or false from add money to indicate accepted or rejected coins, and update the coin machine and log view accordingly.

Develop a greedy coin dispense algorithm that minimizes coins by using the largest denomination first and subtracting its value from the change, implemented with two loops.

Create the receipt screen with fxml and scene builder, using vbox and hbox layouts, labels and yes/no buttons, styled by receipt styles, and navigate from the payment screen to receipt.

Create a receipt printer UI in JavaFX by embedding a WebView, loading HTML content into its web engine to render receipts, and adjust layout to resemble a real printer.

Develop a receipt class that converts checkout items to receipt items using a receipt item record with quantity, name, price each, and price combined, then format and print the receipt.

Refactor the receipt generation by creating a generate receipt items method and a generate content HTML method to build an HTML table from receipt items and print the receipt.

Format the receipt in a JavaFX app by adding price each, testing with random items, and styling with CSS for padding and alignment; finalize with a total row using colspan.