GUI, Graphics, Databases & Spring

Before we start

Why this matters

Outline · Lecture 24

Topics in this chapter

Select a topic to jump to the slide that explains it.

1. JavaFX application structure
2. Components and layouts
3. Event handling
4. Simple interface design
5. Graphical drawing
6. Animation
7. Database connection with JDBC
8. Introduction to Spring

Concept 1 of 5

A JavaFX application

A JavaFX application

public class HelloFX extends Application {
    @Override
    public void start(Stage stage) {
        Label msg = new Label("Hello, JavaFX");
        Button btn = new Button("Click me");
        btn.setOnAction(e -> msg.setText("Clicked!"));

        VBox root = new VBox(10, msg, btn);    // layout pane
        stage.setScene(new Scene(root, 300, 150));
        stage.setTitle("First FX app");
        stage.show();
    }
    public static void main(String[] args) { launch(args); }
}

Concept 2 of 5

Components (controls)

Interactive

JavaFX layout playground

Concept 3 of 5

Event handling

// 1. lambda (most common)
btn.setOnAction(e -> System.out.println("clicked"));

Concept 3 of 5

Event handling (cont.)

// 2. anonymous class implementing EventHandler<ActionEvent>
btn.setOnAction(new EventHandler<ActionEvent>() {
    @Override
    public void handle(ActionEvent e) { System.out.println("clicked"); }
});

// other events
field.setOnKeyPressed(e -> System.out.println(e.getCode()));
canvas.setOnMouseClicked(e -> System.out.println(e.getX() + "," + e.getY()));

Code example

Designing a simple interface

┌ Grade calculator ─────────────┐
│ Marks:  [ 76            ]     │
│         [ Get grade ]         │
│         A                     │
└───────────────────────────────┘

Layout pane + controls + one event handler with exception handling: every OOP idea in one small form.

Step through the code

Trace: an event handler runs later

Registering a handler runs nothing. Choose what the user types, then watch the click call the lambda.

Step through the code

Trace: an event handler runs later (cont.)

Interactive · code example

Drawing graphics on a Canvas

Canvas canvas = new Canvas(400, 250);
GraphicsContext gc = canvas.getGraphicsContext2D();
gc.setFill(Color.LIGHTBLUE);   gc.fillRect(0, 0, 400, 250);
gc.setFill(Color.GOLD);        gc.fillOval(300, 30, 60, 60);
gc.setFill(Color.FORESTGREEN); gc.fillRect(0, 190, 400, 60);
gc.setFill(Color.SIENNA);      gc.fillRect(80, 120, 120, 70);
gc.setFill(Color.DARKRED);
gc.fillPolygon(new double[]{70, 140, 210}, new double[]{120, 70, 120}, 3);
gc.setFill(Color.KHAKI);       gc.fillRect(125, 150, 30, 40);
gc.setStroke(Color.BLACK);     gc.setLineWidth(2);
gc.strokeLine(0, 190, 400, 190);
gc.setFill(Color.BLACK);       gc.fillText("My house", 110, 215);

Interactive

Animation with AnimationTimer

Concept 4 of 5

Connecting to a database with JDBC

Concept 4 of 5

Connecting to a database with JDBC (cont.)

1. Add the driver (e.g. MySQL Connector/J) to the project.
2. DriverManager.getConnection(url, user, password) opens a Connection.
3. Create a PreparedStatement with ? placeholders and fill them with setString, setInt, …
4. executeQuery() returns a ResultSet (SELECT); executeUpdate() returns a row count (INSERT/UPDATE/DELETE).
5. Close everything — try-with-resources does it for you.

Step through the code

Trace: a ResultSet cursor, row by row

Follow the objects JDBC creates and the cursor moving through the result, then everything closing in reverse order.

Step through the code

Trace: a ResultSet cursor, row by row (cont.)

Interactive

JDBC query walk-through

Code example

Inserting rows safely

String url = "jdbc:mysql://localhost:3306/gub";
String sql = "INSERT INTO students(name, dept, cgpa) VALUES (?, ?, ?)";
try (Connection con = DriverManager.getConnection(url, "root", "secret");
     PreparedStatement ps = con.prepareStatement(sql)) {
    ps.setString(1, "Farhan");
    ps.setString(2, "CSE");
    ps.setDouble(3, 3.80);
    int rows = ps.executeUpdate();
    System.out.println(rows + " row inserted");
} catch (SQLException e) {
    System.out.println("DB error: " + e.getMessage());
}

1 row inserted

Code example

Inserting rows safely (cont.)

Concept 5 of 5

Introduction to Spring

@SpringBootApplication
public class GradeApp {
    public static void main(String[] args) {
        SpringApplication.run(GradeApp.class, args);
    }
}

@Service
class GradeService {
    String letter(int m) { return m >= 80 ? "A+" : m >= 70 ? "A" : "below A"; }
}

@RestController
class GradeController {
    private final GradeService service;
    GradeController(GradeService service) {   // injected by Spring
        this.service = service;

Concept 5 of 5

Introduction to Spring (cont.)

    }
    @GetMapping("/grade/{marks}")
    String grade(@PathVariable int marks) { return service.letter(marks); }
}

GET http://localhost:8080/grade/85   →   A+

• Spring is the most widely used Java framework for back-end and web applications.
• Inversion of Control / Dependency Injection: you declare what an object needs (a constructor parameter); Spring creates the objects and wires them together.
• Spring Boot adds sensible defaults and an embedded web server, so a REST API is a few annotated classes.
• Spring Data JPA maps classes to database tables, replacing most hand-written JDBC.

Worked example 1 of 3

Worked example 1

Worked example 2 of 3

Worked example 2

tf.setOnAction(e -> lb.setText("Length: " + tf.getText().length()));

Worked example 3 of 3

Worked example 3

List<Student> list = new ArrayList<>();
try (ResultSet rs = ps.executeQuery()) {
    while (rs.next())
        list.add(new Student(rs.getString("name"), rs.getDouble("cgpa")));
}

Practice

Practice (1 of 2)

Try each one on paper first, then check your answer.

gc.setFill(Color.RED);
gc.fillOval(60, 60, 80, 80);   // top-left corner, width, height

Practice

Practice (2 of 2)

Try each one on paper first, then check your answer.

Check yourself

Quiz

Summary

Summary

• A JavaFX app is a Stage showing a Scene whose root is a tree of nodes: layout panes and controls.
• Layouts (HBox, VBox, GridPane, BorderPane, FlowPane, StackPane) position controls; events call handlers, usually lambdas.
• Canvas + GraphicsContext draw shapes and text; AnimationTimer redraws ~60 times a second for animation.
• JDBC: Connection → PreparedStatement → ResultSet, closed with try-with-resources.
• Spring Boot builds back-end services from annotated classes wired together by dependency injection.