Initialize WS-06-intro-to-javafx with empty exercise template
This commit is contained in:
MobinAbedian
+41
@@ -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
|
||||
Generated
+10
@@ -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/
|
||||
Generated
+7
@@ -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>
|
||||
Generated
+14
@@ -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>
|
||||
Generated
+6
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user