commit 9d4ecd0b0dc69c8bc368e3e8aea7ac2589b2de83 Author: MobinAbedian Date: Sat May 16 15:49:09 2026 +0330 Initialize WS-06-intro-to-javafx with empty exercise template diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..73f71aa --- /dev/null +++ b/.gitignore @@ -0,0 +1,41 @@ +target/ +!.mvn/wrapper/maven-wrapper.jar +!**/src/main/**/target/ +!**/src/test/**/target/ +.kotlin + +### IntelliJ IDEA ### +.idea/modules.xml +.idea/jarRepositories.xml +.idea/compiler.xml +.idea/libraries/ +*.iws +*.iml +*.ipr + +### Eclipse ### +.apt_generated +.classpath +.factorypath +.project +.settings +.springBeans +.sts4-cache + +### NetBeans ### +/nbproject/private/ +/nbbuild/ +/dist/ +/nbdist/ +/.nb-gradle/ +build/ +!**/src/main/**/build/ +!**/src/test/**/build/ + +### VS Code ### +.vscode/ + +### Mac OS ### +.DS_Store + +examples*.txt diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..ab1f416 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,10 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Ignored default folder with query files +/queries/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/encodings.xml b/.idea/encodings.xml new file mode 100644 index 0000000..d8a7215 --- /dev/null +++ b/.idea/encodings.xml @@ -0,0 +1,7 @@ + + + + + + + diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..17743a3 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,14 @@ + + + + + + + + + + diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..dcb6b8c --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + diff --git a/README.md b/README.md new file mode 100644 index 0000000..8241547 --- /dev/null +++ b/README.md @@ -0,0 +1,44 @@ +# JavaFX Workshop — Pricing Plans UI + +## Introduction +This workshop introduces students to **JavaFX** by building a simple pricing plans user interface. +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 + +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 + +1. Implement the `Main` class: + - Load the FXML file using `FXMLLoader` + - Create a `Scene` and display it on the `Stage` + +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 + +By working through this workshop, students should be able to: + +- Understand the structure of a JavaFX Maven project +- Read and write basic FXML layouts +- Connect FXML views to Java controllers +- Handle UI events with `@FXML` methods +- Apply and switch between CSS stylesheets dynamically +- Create and show JavaFX dialogs diff --git a/pom.xml b/pom.xml new file mode 100644 index 0000000..8fb278a --- /dev/null +++ b/pom.xml @@ -0,0 +1,46 @@ + + + 4.0.0 + + com.example + WS-06-intro-to-javafx + 1.0-SNAPSHOT + + + 21 + 21 + UTF-8 + 21 + + + + + org.openjfx + javafx-controls + ${javafx.version} + + + + org.openjfx + javafx-fxml + ${javafx.version} + + + + + + + org.openjfx + javafx-maven-plugin + 0.0.8 + + + workshop.Main + + + + + + diff --git a/src/main/java/workshop/Controller.java b/src/main/java/workshop/Controller.java new file mode 100644 index 0000000..207b77d --- /dev/null +++ b/src/main/java/workshop/Controller.java @@ -0,0 +1,37 @@ +package workshop; + +import javafx.fxml.FXML; +import javafx.scene.control.Label; +import javafx.scene.control.Button; + +public class Controller { + @FXML private Label titleLabel; + @FXML private Button themeToggle; + + private boolean isDark = true; + + @FXML + private void buyBasic() { + // TODO: Call showAlert() with a message indicating the user entered the payment gateway + } + + @FXML + private void buyPro() { + // TODO: Call showAlert() with a message indicating the user entered the payment gateway + } + + @FXML + private void buyEnterprise() { + // TODO: Call showAlert() with a message indicating the user entered the payment gateway + } + + @FXML + private void toggleTheme() { + // TODO: Toggle the isDark flag. If dark, switch to style.css and set button text to "Switch to Light Mode" + // TODO: If light, switch to light.css and set button text to "Switch to Dark Mode" + } + + private void showAlert(String message) { + // TODO: Create a new Alert of type INFORMATION with the given message and display it + } +} diff --git a/src/main/java/workshop/Main.java b/src/main/java/workshop/Main.java new file mode 100644 index 0000000..1f433d4 --- /dev/null +++ b/src/main/java/workshop/Main.java @@ -0,0 +1,17 @@ +package workshop; + +import javafx.application.Application; +import javafx.stage.Stage; + +public class Main extends Application { + @Override + public void start(Stage stage) throws Exception { + // TODO: Load the FXML file using FXMLLoader.load() and get the Parent root + // TODO: Create a Scene with the root (width=750, height=450) and add the stylesheet "/style.css" + // TODO: Set the stage title to "Pricing Plans", set the scene, and call stage.show() + } + + public static void main(String[] args) { + // TODO: Launch the JavaFX application by calling launch() + } +} diff --git a/src/main/resources/light.css b/src/main/resources/light.css new file mode 100644 index 0000000..3185b91 --- /dev/null +++ b/src/main/resources/light.css @@ -0,0 +1,80 @@ +.root { + -fx-background-color: #f5f5f5; + -fx-font-family: "DejaVu Sans", "Segoe UI", sans-serif; +} + +.title { + -fx-font-size: 28px; + -fx-font-weight: bold; + -fx-text-fill: #1a1a2e; +} + +.toggle-btn { + -fx-background-color: #1a1a2e; + -fx-text-fill: white; + -fx-font-size: 12px; + -fx-font-weight: bold; + -fx-padding: 8 16; + -fx-background-radius: 6; + -fx-cursor: hand; +} + +.toggle-btn:hover { + -fx-background-color: #2d2d5e; +} + +.card { + -fx-background-color: #ffffff; + -fx-padding: 25 20; + -fx-spacing: 12; + -fx-alignment: CENTER; + -fx-background-radius: 12; + -fx-border-radius: 12; + -fx-border-color: #e0e0e0; + -fx-border-width: 2; + -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.1), 8, 0, 0, 4); + -fx-cursor: hand; +} + +.card:hover { + -fx-border-color: #4CAF50; + -fx-effect: dropshadow(gaussian, rgba(76, 175, 80, 0.4), 16, 0, 0, 6); +} + +.card:hover .plan-name { + -fx-font-weight: bold; +} + +.plan-name { + -fx-font-size: 22px; + -fx-font-weight: normal; + -fx-text-fill: #1a1a2e; +} + +.price { + -fx-font-size: 16px; + -fx-font-weight: bold; + -fx-text-fill: #4CAF50; +} + +.desc { + -fx-font-size: 12px; + -fx-text-fill: #666666; + -fx-text-alignment: center; +} + +.shop-btn { + -fx-background-color: #4CAF50; + -fx-text-fill: white; + -fx-font-size: 14px; + -fx-font-weight: bold; + -fx-padding: 10 30; + -fx-background-radius: 8; + -fx-cursor: hand; +} + +.shop-btn:hover { + -fx-background-color: #45a049; + -fx-scale-x: 1.05; + -fx-scale-y: 1.05; +} diff --git a/src/main/resources/pricing.fxml b/src/main/resources/pricing.fxml new file mode 100644 index 0000000..b54db3b --- /dev/null +++ b/src/main/resources/pricing.fxml @@ -0,0 +1,39 @@ + + + + + + + + + + + + +