66 lines
2.5 KiB
Markdown
66 lines
2.5 KiB
Markdown
# 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 ! |