Model-View-Controller (MVC) and JavaFX

Notes:

Introduction

This week we will move from dialog-based programs toward full graphical user interfaces (GUIs). You will learn the structure and purpose of the Model–View–Controller (MVC) pattern, how to build GUIs with JavaFX, and how to use SceneBuilder to visually create layouts and connect them to your Java code. We will also see how Cascading Style Sheets (CSS) allow us to separate visual style from logic.

Learning Goals

By the end of this week, you should be able to:

Understand the Model–View–Controller (MVC) architecture pattern.
Build JavaFX applications using SceneBuilder and FXML files.
Use CSS to style and maintain a consistent interface.
Connect user actions from the View to logic in the Controller.

The MVC Pattern

The MVC pattern organizes an application into three connected components. Each plays a distinct role in separating data, presentation, and logic. This design helps you maintain, test, and expand software more easily.

Model – The data and business logic.
View – The user interface (typically FXML in JavaFX).
Controller – The logic that connects user actions to the model.

For example, in JavaFX, you might load an interface and controller like this:

FXMLLoader loader = new FXMLLoader(getClass().getResource("MainView.fxml"));
Parent root = loader.load();
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();

Why MVC Matters

MVC is not just a structure—it’s a way to think about programs. By separating concerns, each part can change independently without breaking others. It enables multiple developers to work on different layers concurrently.

Keeps logic, data, and interface modular.
Makes testing and debugging easier.
Allows multiple views for the same model (for example, GUI and command-line versions).
Reduces coupling so that UI changes don’t affect business logic.

JavaFX Overview

JavaFX provides a modern framework for building desktop GUIs in Java. It replaces older Swing and AWT toolkits and uses an XML-based format called FXML to define layouts. You can create these layouts visually using SceneBuilder, then connect the interface to Java code through a controller class.
Basic JavaFX Application Example:

public class Main extends Application {
	@Override
	public void start(Stage stage) throws Exception {
		Parent root =
FXMLLoader.load(getClass().getResource("MainView.fxml"));
		stage.setScene(new Scene(root));
		stage.show();
	}
	public static void main(String[] args) { launch(args); }
}

SceneBuilder Workflow

SceneBuilder lets you drag and drop UI components, set their fx:id values, and connect them to a controller. You can then load the resulting FXML file directly into your JavaFX app.

Create a new FXML layout in SceneBuilder.
Assign fx:id values to controls (e.g., buttons, text fields).
Specify the Controller class (for example, controller.MainController).
Load the FXML file in your Java application using FXMLLoader.
Attach a CSS file for consistent styling.

Styling with CSS

JavaFX supports external CSS files, allowing you to define color, spacing, and font styles outside your code. This approach helps maintain a clean separation between logic and design.

Example CSS snippet (styles.css):

.button {
	-fx-background-color: maroon;
	-fx-text-fill: white;
}
Label {
	-fx-font-size: 16px;
}

Attach the CSS file to your scene using code:

scene.getStylesheets().add("styles.css");

Example MVC Project Structure

Here’s a typical folder structure for a small JavaFX project following the MVC pattern:

📂 src/
┣ 📜 Main.java (launches application)
┣ 📂 model/Student.java (data model)
┣ 📂 view/MainView.fxml (layout file)
┣ 📂 controller/MainController.java (handles events)
┗ 📜 styles.css (styling rules)

In-Class Activities

We will build our understanding through interactive sessions this week:

Monday: Introduce MVC and SceneBuilder concepts.
Wednesday: Build a simple GUI (Contact Form) using SceneBuilder.
Friday: Extend the GUI in groups by adding new views or event handling.