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>
</option>
</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" />
</component>
</project>
</project>
+33 -22
View File
@@ -1,44 +1,55 @@
# JavaFX Workshop — Pricing Plans UI
# 🎨 JavaFX Workshop — Pricing Plans UI
## 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.
---
## 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:
- Load the FXML file using `FXMLLoader`
- Create a `Scene` and display it on the `Stage`
### 2️⃣ Controller.java
* Wire up the "Shop" buttons → show payment alerts
* 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
- 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
- Apply and switch between CSS stylesheets dynamically
- 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 !