0-Overview

🧭 Topic: UI Introduction

Quick Overview :

This topic introduces JavaFX, a powerful library for building modern Graphical User Interfaces (GUI) on the desktop. It covers the architecture, FXML for layout design, CSS for styling, and event handling for user interaction, with practical application in building music player interfaces.

---

📌 Covered in This Topic

What is JavaFX?

• A powerful library for building Graphical User Interfaces (GUI) on the desktop
• Hardware-accelerated graphics
• Clean separation between design and logic
• The modern successor to the legacy Swing library

The Three Pillars of JavaFX

• FXML: Defines where buttons and text go (layout)
• CSS: Sets colors, fonts, and hover effects (styling)
• Java: Controls what happens on user clicks (logic)

The Architecture: Stage & Scene

JavaFX apps follow a strict structural theater hierarchy:

1. Stage: The outer window frame container
2. Scene: The content “canvas” set inside the stage
3. Nodes: Individual visual components inside the scene graph

The “Main” Code Skeleton

public class Main extends Application {
    @Override
    public void start(Stage stage) {
        VBox root = new VBox();
        Scene scene = new Scene(root, 400, 300);
        stage.setTitle("My App");
        stage.setScene(scene);
        stage.show();
    }
}

Adding UI Nodes

Label label = new Label("Welcome!");
Button button = new Button("Submit");
root.getChildren().addAll(label, button);

Event Handling (Interaction)

Using Lambda Expressions to handle clicks concisely:

button.setOnAction(event -> {
    label.setText("Success!");
});

Layouts: VBox & HBox

• HBox: Horizontal arrangement with spacing
• VBox: Vertical arrangement with spacing

HBox hbox = new HBox(10); // 10px spacing
hbox.getChildren().addAll(yesBtn, noBtn);
VBox vbox = new VBox(15);
vbox.getChildren().addAll(chooseLbl, hbox);

What is FXML?

• An XML-based markup language used to declare the user interface structure
• Separation of Concerns: Keeps visual look and design decoupled from programmatic logic
• Allows developers to use Scene Builder for intuitive drag-and-drop design
• Every XML element instantiates a real JavaFX Class behind the scenes

Anatomy of an FXML Document

<VBox fx:controller="sample.Controller" alignment="CENTER" spacing="15">
    <Button fx:id="myButton" text="Click Me" onAction="#handleBtnClick"/>
</VBox>

Key FXML Attributes:

• fx:controller: Links the FXML view to a Java logic handler class
• fx:id: Names the object handle for Java code access
• onAction: Hooks the element’s trigger to a specific controller method

Architecture Summary

Concept	File Type	Core Responsibility
App Frame	Main.java	Stage & Scene Lifecycle
Layout UI	.fxml	Hierarchical Tree of Nodes
Interaction	Controller.java	Event Handlers & Logic
Appearance	.css	Skinning, Colors & Animations

Styling with CSS

button {
    -fx-background-color: #22c55e;
    -fx-text-fill: white;
    -fx-border-radius: 15;
}
.button:hover {
    -fx-scale-x: 1.1;
}

Design Patterns in UI

• MVC Pattern: Model-View-Controller separation
  • Model: Data and business logic
  • View: UI representation (FXML)
  • Controller: Mediates between Model and View

---

📑 Slides & Materials

• 🧑‍🏫 TA Workshop Slides (PDF)
• 🎥 Assignment Explanation Videos

---

🛠️ Workshop & Assignments

💬 Workshop: Pricing Plans UI

• 📂 WS-06-intro-to-javafx Repository
• Objective: Build a modern SaaS-style pricing page
• Features:
  • Three pricing cards arranged in HBox
  • Custom CSS with hover scale effects
  • Dark/Light theme toggle
  • Payment dialogs
• Tasks:
  • Main.java: Load FXML, create Scene, attach CSS
  • Controller.java: Wire up “Shop” buttons, implement theme toggle
  • Optional: Initialize prices dynamically, increment prices on click
• Important: Run from Launcher.java, set JDK in Project Structure
• VS Code Extension: Install CSS helper for better JavaFX CSS support

🧮 Assignment: Music Player UI

• 📂 HW-07-JavaFX Repository
• Objective: Build a simple music player interface
• Core Requirements:
  • Design UI: Display at least three songs with title, artist, duration, Play button, Add to Playlist button
  • Connect Controller: Link UI to MusicController class methods
  • Display Current Song: Update “Now Playing” label when Play is clicked
  • Implement Playlist: Add songs to ArrayList when “Add to Playlist” clicked
  • Create Playlist Page: Add “View Playlist” button that switches to a new scene with ListView display
• Bonus Tasks:
  • Actual audio playback using Media and MediaPlayer
  • Visual feedback (row style changes, button text updates)
  • Dark/Light mode toggle with CSS switching

---

🔗 Repository Links

Repository	Description
📂 WS-06-intro-to-javafx	Workshop: Build a pricing plans UI with JavaFX
📂 HW-07-JavaFX	Assignment: Create a music player interface with playlist functionality

---

🌐 Additional Resources

• JavaFX Official Documentation
• JavaFX Scene Builder
• JavaFX CSS Reference Guide
• FXML Introduction
• JavaFX Media API

---

⏩ Navigation

• ⬅️ Previous Topic: Exceptions & Files
• ➡️ Next Topic: Multithread

---

Tip :

JavaFX’s separation of concerns (FXML for layout, CSS for styling, Java for logic) is a key design pattern. Take time to understand how these three components interact. Start with the workshop to grasp the basics, then apply that knowledge to the assignment. For the music player, focus on getting the UI structure and event handling working before attempting the bonus audio features. Remember to always launch from Launcher.java to avoid build issues!