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