Initialize WS-06-intro-to-javafx with empty exercise template

2026-05-16 15:49:09 +03:30
commit 9d4ecd0b0d
12 changed files with 421 additions and 0 deletions
@@ -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
@@ -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/
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Encoding">
+    <file url="file://$PROJECT_DIR$/src/main/java" charset="UTF-8" />
+    <file url="file://$PROJECT_DIR$/src/main/resources" charset="UTF-8" />
+  </component>
+</project>
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ExternalStorageConfigurationManager" enabled="true" />
+  <component name="MavenProjectsManager">
+    <option name="originalFiles">
+      <list>
+        <option value="$PROJECT_DIR$/pom.xml" />
+      </list>
+    </option>
+  </component>
+  <component name="ProjectRootManager" version="2" project-jdk-name="21" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
@@ -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
@@ -0,0 +1,46 @@
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+
+    <modelVersion>4.0.0</modelVersion>
+
+    <groupId>com.example</groupId>
+    <artifactId>WS-06-intro-to-javafx</artifactId>
+    <version>1.0-SNAPSHOT</version>
+
+    <properties>
+        <maven.compiler.source>21</maven.compiler.source>
+        <maven.compiler.target>21</maven.compiler.target>
+        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
+        <javafx.version>21</javafx.version>
+    </properties>
+
+    <dependencies>
+        <dependency>
+            <groupId>org.openjfx</groupId>
+            <artifactId>javafx-controls</artifactId>
+            <version>${javafx.version}</version>
+        </dependency>
+
+        <dependency>
+            <groupId>org.openjfx</groupId>
+            <artifactId>javafx-fxml</artifactId>
+            <version>${javafx.version}</version>
+        </dependency>
+    </dependencies>
+
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.openjfx</groupId>
+                <artifactId>javafx-maven-plugin</artifactId>
+                <version>0.0.8</version>
+
+                <configuration>
+                    <mainClass>workshop.Main</mainClass>
+                </configuration>
+            </plugin>
+        </plugins>
+    </build>
+
+</project>
@@ -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
+    }
+}
@@ -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()
+    }
+}
@@ -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;
+}
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.control.Button?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.layout.HBox?>
+<?import javafx.scene.layout.VBox?>
+
+<VBox spacing="20" alignment="CENTER" xmlns:fx="http://javafx.com/fxml" fx:controller="workshop.Controller">
+    <padding><Insets top="30" right="30" left="30" bottom="20"/></padding>
+
+    <HBox spacing="10" alignment="CENTER">
+        <Label fx:id="titleLabel" text="Choose Your Plan" styleClass="title" />
+        <Button fx:id="themeToggle" text="Switch to Light Mode" onAction="#toggleTheme" styleClass="toggle-btn" />
+    </HBox>
+
+    <HBox spacing="25" alignment="CENTER" HBox.hgrow="ALWAYS">
+        <VBox styleClass="card" prefWidth="200">
+            <Label text="Basic" styleClass="plan-name" />
+            <Label text="$9.99 / month" styleClass="price" />
+            <Label text="Single user, basic features" styleClass="desc" wrapText="true" />
+            <Button text="Shop" onAction="#buyBasic" styleClass="shop-btn" />
+        </VBox>
+
+        <VBox styleClass="card" prefWidth="200">
+            <Label text="Pro" styleClass="plan-name" />
+            <Label text="$19.99 / month" styleClass="price" />
+            <Label text="Up to 5 users, advanced features" styleClass="desc" wrapText="true" />
+            <Button text="Shop" onAction="#buyPro" styleClass="shop-btn" />
+        </VBox>
+
+        <VBox styleClass="card" prefWidth="200">
+            <Label text="Enterprise" styleClass="plan-name" />
+            <Label text="Contact us" styleClass="price" />
+            <Label text="Unlimited users, custom solutions" styleClass="desc" wrapText="true" />
+            <Button text="Shop" onAction="#buyEnterprise" styleClass="shop-btn" />
+        </VBox>
+    </HBox>
+</VBox>
@@ -0,0 +1,80 @@
+.root {
+    -fx-background-color: #1a1a2e;
+    -fx-font-family: "DejaVu Sans", "Segoe UI", sans-serif;
+}
+
+.title {
+    -fx-font-size: 28px;
+    -fx-font-weight: bold;
+    -fx-text-fill: #ffffff;
+}
+
+.toggle-btn {
+    -fx-background-color: #4CAF50;
+    -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: #45a049;
+}
+
+.card {
+    -fx-background-color: #3a3a5c;
+    -fx-padding: 25 20;
+    -fx-spacing: 12;
+    -fx-alignment: CENTER;
+    -fx-background-radius: 12;
+    -fx-border-radius: 12;
+    -fx-border-color: transparent;
+    -fx-border-width: 2;
+    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.3), 8, 0, 0, 4);
+    -fx-cursor: hand;
+}
+
+.card:hover {
+    -fx-border-color: #4CAF50;
+    -fx-effect: dropshadow(gaussian, rgba(76, 175, 80, 0.5), 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: #ffffff;
+}
+
+.price {
+    -fx-font-size: 16px;
+    -fx-font-weight: bold;
+    -fx-text-fill: #4CAF50;
+}
+
+.desc {
+    -fx-font-size: 12px;
+    -fx-text-fill: #aaaaaa;
+    -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;
+}