JavaFX Workshop — Pricing Plans UI

Introduction

Ready to dip your toes into the world of JavaFX? In this workshop, you'll build a pricing plans page — the kind you see on every modern SaaS website (a simple version of them!).


What You'll Learn

Concept How you'll use it
JavaFX + Maven Setting up the project structure
FXML Designing layouts without hardcoding
Controllers Connecting UI to Java logic
Event Handling Making buttons actually do something
CSS Styling Making it look good (dark mode included!)
Dialogs Showing payment alerts

Your TODO List

Install VS Code extension for better JavaFx CSS Support

  • There is an extension for better JavaFx CSS support in vscode-extension folder
  • You can install that with this command on your IntelliJ terminal:

code --install-extension "vscode-extension\css-helper-for-javafx-1.0.1.vsix"

  • (Optional) Also after that open your VS Code press CTRL+SHIFT+P, enter user settings, open settings.json and finally add this line there:

"css.lint.vendorPrefix": "ignore",

Main.java

  • Load the FXML file using FXMLLoader
  • Create a Scene, set its title, attach CSS file to it, and show it on the Stage

Controller.java

  • Wire up the "Shop" buttons → show payment alerts
  • Implement theme toggle (Dark ↔ Light)
  • (Optional) Create initialize function and use it to set prices during runtime. (you will need to reference the prices label in the fxml)
  • (Optional) Make the plan prices go 1 dollar up each time user clicks on the shop button.

Note: Optional tasks are for your further practice and doesn't have extra points.


Learning Goals

By working through this workshop, you'll be able to:

  • Understand the structure of a JavaFX Maven project
  • Read and write basic FXML layouts
  • Connect your visual design (FXML) to Java code (Controllers)
  • Handle UI events with @FXML methods
  • Switch CSS themes dynamically
  • Create and show JavaFX dialogs

Notes

Always run your Javafx app from the Launcher.java, Launching from the Main.class (where you have extended from Jfx Application) sometimes doesn't work due to building issues, and you get error of not finding Javafx.

Don't forget to set your jdk in the Project Structure > SDK !

S
Description
No description provided
Readme
326 KiB
Languages
CSS 54%
Java 46%