Update README.md, and fixed a minor issue
This commit is contained in:
Generated
+2
-2
@@ -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>
|
||||
@@ -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 !
|
||||
Reference in New Issue
Block a user