55 lines
1.9 KiB
Markdown
55 lines
1.9 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!).
|
|
Students will learn how to set up a JavaFX project with Maven, create FXML layouts, apply CSS styling, and handle basic UI events.
|
|
|
|
---
|
|
|
|
## 📚 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
|
|
### 1️⃣ 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`
|
|
|
|
### 2️⃣ Controller.java
|
|
* Wire up the "Shop" buttons → show payment alerts
|
|
* Implement theme toggle (Dark ↔ Light)
|
|
|
|
|
|
---
|
|
|
|
## 🎓 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 ! |