Update README.md, and fixed a minor issue

This commit is contained in:
Hosein
2026-05-17 08:37:07 +03:30
parent 3dd2d84cda
commit 2cd574fe38
2 changed files with 35 additions and 24 deletions
+2 -2
View File
@@ -8,7 +8,7 @@
</list> </list>
</option> </option>
</component> </component>
<component name="ProjectRootManager" version="2" project-jdk-name="21" project-jdk-type="JavaSDK"> <component name="ProjectRootManager" version="2" languageLevel="JDK_25" project-jdk-name="25" project-jdk-type="JavaSDK">
<output url="file://$PROJECT_DIR$/out" /> <output url="file://$PROJECT_DIR$/out" />
</component> </component>
</project> </project>
+33 -22
View File
@@ -1,44 +1,55 @@
# JavaFX Workshop — Pricing Plans UI # 🎨 JavaFX Workshop — Pricing Plans UI
## Introduction ## Introduction
This workshop introduces students to **JavaFX** by building a simple pricing plans user interface. 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. Students will learn how to set up a JavaFX project with Maven, create FXML layouts, apply CSS styling, and handle basic UI events.
--- ---
## Workshop Structure ## 📚 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 |
The workshop consists of building a pricing plans page with three tiers (Basic, Pro, Enterprise) and a theme toggle button.
### Topics Covered:
- Setting up a JavaFX project with Maven
- Creating an FXML layout with containers (`VBox`, `HBox`) and controls (`Label`, `Button`)
- Writing a Controller class with `@FXML` annotations
- Handling button click events
- Switching between Dark and Light themes using CSS
- Displaying information alerts
--- ---
## Tasks ## 🛠️ 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`
1. Implement the `Main` class: ### 2️⃣ Controller.java
- Load the FXML file using `FXMLLoader` * Wire up the "Shop" buttons → show payment alerts
- Create a `Scene` and display it on the `Stage` * Implement theme toggle (Dark ↔ Light)
2. Implement the `Controller` class:
- Wire up the "Shop" buttons to show payment alerts
- Implement the theme toggle between Dark and Light modes
--- ---
## Learning Goals ## 🎓 Learning Goals
By working through this workshop, students should be able to: By working through this workshop, you'll be able to:
- Understand the structure of a JavaFX Maven project - Understand the structure of a JavaFX Maven project
- Read and write basic FXML layouts - Read and write basic FXML layouts
- Connect FXML views to Java controllers - Connect your visual design (FXML) to Java code (Controllers)
- Handle UI events with `@FXML` methods - Handle UI events with `@FXML` methods
- Apply and switch between CSS stylesheets dynamically - Switch CSS themes dynamically
- Create and show JavaFX dialogs - 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 !