第十三章：Java圖形使用者界面程式設計

Java圖形使用者界面（Graphical User Interface，GUI）程式設計是一種建立互動式應用程式界面的技術。通過使用GUI，開發人員可以建立具有按鈕、文本框、複選框等可視化元件的應用程式。在本章中，我們将介紹Java中的GUI概念和基礎，了解GUI類庫的使用以及如何處理界面事件和監聽器。我們還将通過執行個體示範來展示GUI的應用，例如建立一個簡單的電腦、畫闆和音樂播放器。

13.1 Java的圖形使用者界面概念和基礎

圖形使用者界面是使用者與計算機程式進行互動的界面，它使用圖形和可視化元素來顯示和操作資料。Java提供了多個GUI類庫，包括AWT（Abstract Window Toolkit）、Swing和JavaFX。這些類庫提供了豐富的元件和功能，用于建立各種類型的使用者界面。

AWT是Java最早引入的GUI類庫，它提供了一組基本的元件，如按鈕、文本框、标簽等。Swing則是建立在AWT之上的一個更進階的GUI類庫，它提供了更豐富、更靈活的元件，同時具有跨平台性能。JavaFX是Java的最新GUI類庫，它提供了現代化的界面設計和豐富的動畫效果。

在開始GUI程式設計之前，我們需要了解一些基礎概念。GUI界面由多個元件組成，這些元件可以是容器（Container）或非容器（Component）。容器用于組織和布局其他元件，而非容器則用于顯示和處理使用者互動。

布局管理器（Layout Manager）是用于管理容器中元件位置和大小的工具。Java提供了多種布局管理器，例如FlowLayout、BorderLayout、GridLayout和GridBagLayout。每種布局管理器都有不同的特點，可以根據需要選擇合适的布局方式。

13.2 Java的圖形使用者界面類庫

Java的GUI類庫提供了豐富的元件和類，用于建立和管理使用者界面。在本節中，我們将介紹一些常用的GUI類群組件。

13.2.1 AWT元件

AWT（Abstract Window Toolkit）是Java最早引入的GUI類庫，它提供了一組基本的GUI元件。下面是一些常用的AWT元件：

• Frame：頂級視窗容器，用于建立應用程式的主視窗。
• Panel：面闆容器，可以包含其他元件。
• Button：按鈕元件，用于觸發事件。
• Label：标簽元件，用于顯示文本或圖像。
• TextField：文本框元件，允許使用者輸入和編輯文本。
• TextArea：文本區域元件，可以顯示多行文本。
• Checkbox：複選框元件，允許使用者進行多項選擇。
• RadioButton：單選按鈕元件，允許使用者在一組選項中進行單項選擇。
• List：清單元件，用于顯示清單中的項目。
• ComboBox：下拉清單元件，結合了文本框和清單的功能。
• Scrollbar：滾動條元件，用于滾動顯示内容。

以上隻是一小部分AWT元件的例子，AWT還提供了其他類型的元件和布局管理器，可以根據需要選擇适合的元件來建構使用者界面。

13.2.2 Swing元件

Swing是建立在AWT之上的一個更進階的GUI類庫，它提供了豐富、靈活的元件，并具有更好的外觀和跨平台性能。下面是一些常用的Swing元件：

• JFrame：頂級視窗容器，與AWT的Frame類似，用于建立應用程式的主視窗。
• JPanel：面闆容器，與AWT的Panel類似，可以包含其他元件。
• JButton：按鈕元件，與AWT的Button類似。
• JLabel：标簽元件，與AWT的Label類似。
• JTextField：文本框元件，與AWT的TextField類似。
• JTextArea：文本區域元件，與AWT的TextArea類似。
• JCheckBox：複選框元件，與AWT的Checkbox類似。
• JRadioButton：單選按鈕元件，與AWT的RadioButton類似。
• JList：清單元件，與AWT的List類似。

Swing元件的命名以字母J開頭，例如JFrame、JButton，以便與AWT元件進行區分。Swing還提供了更多進階的元件，如JTable（表格元件）、JTree（樹元件）和JScrollPane（滾動面闆元件），以及各種布局管理器，如FlowLayout、BorderLayout和GridLayout。

13.2.3 JavaFX元件

JavaFX是Java的最新GUI類庫，它提供了現代化的界面設計和豐富的動畫效果。JavaFX的元件和布局管理器與Swing類似，但具有更好的性能和可擴充性。下面是一些常用的JavaFX元件：

• Stage：頂級視窗容器，類似于Swing的JFrame和AWT的Frame。
• Scene：場景容器，用于承載和管理GUI元素。
• Button：按鈕元件，類似于Swing的JButton。
• Label：标簽元件，類似于Swing的JLabel。
• TextField：文本框元件，類似于Swing的JTextField。
• TextArea：文本區域元件，類似于Swing的JTextArea。
• CheckBox：複選框元件，類似于Swing的JCheckBox。
• RadioButton：單選按鈕元件，類似于Swing的JRadioButton。
• ListView：清單視圖元件，用于顯示清單中的項目。
• ComboBox：下拉清單元件，類似于Swing的JComboBox。

JavaFX還提供了更多的元件和布局管理器，如TableView（表格視圖元件）、TreeView（樹視圖元件）和ScrollPane（滾動面闆元件）。它還支援CSS樣式和動畫效果，使得使用者界面更具吸引力和互動性。

13.3 Java的圖形使用者界面事件處理和監聽器

在GUI程式設計中，使用者與界面的互動通常會觸發各種事件，例如按鈕點選、滑鼠移動、鍵盤輸入等。Java提供了事件處理機制和監聽器來處理這些事件并執行相應的操作。

事件處理機制涉及三個主要部分：事件源（Event Source）、事件對象（Event Object）和事件監聽器（Event Listener）。事件源是産生事件的元件，例如按鈕或文本框。事件對象封裝了事件的資訊，例如事件類型、事件源等。事件監聽器是用于接收和處理事件的對象，它實作了特定的事件監聽接口。

Java中的事件監聽器接口包括ActionListener、MouseListener、KeyListener等，每個接口對應不同類型的事件。通過注冊事件監聽器，我們可以捕獲特定事件的發生，并執行相應的操作，例如響應按鈕點選、處理滑鼠點選等。

事件處理的基本步驟如下：

1. 建立事件監聽器對象，并實作相應的事件監聽接口。
2. 将事件監聽器對象注冊到事件源上，通過添加事件監聽器的方式。
3. 在事件監聽器中實作事件處理方法，根據事件類型執行相應的操作。

下面是一個簡單的示例，示範了如何使用事件監聽器處理按鈕點選事件：

import java.awt.*;
import java.awt.event.*;

public class ButtonClickExample {
    public static void main(String[] args) {
        // 建立視窗和按鈕
        Frame frame = new Frame("Button Click Example");
        Button button = new Button("Click Me");

        // 注冊事件監聽器
        button.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
          System.out.println("Button Clicked!");
            }
        });

        // 将按鈕添加到視窗中
        frame.add(button);

        // 設定視窗大小和可見性
        frame.setSize(300, 200);
        frame.setVisible(true);
    }
}           

在這個示例中，我們建立了一個名為"Button Click Example"的視窗，并在視窗中添加了一個名為"Click Me"的按鈕。通過注冊ActionListener事件監聽器，并實作其中的actionPerformed方法，當按鈕被點選時，會在控制台輸出一條消息"Button Clicked!"。

注意：在編寫JavaFX應用程式時，事件處理和監聽器的方式與AWT和Swing略有不同。JavaFX使用的是基于事件驅動的程式設計模型，可以通過setOnAction方法來注冊事件監聽器，然後在監聽器中實作相應的操作。

13.4 Java的圖形使用者界面執行個體

通過前面的介紹，我們已經了解了Java的圖形使用者界面程式設計基礎和事件處理機制。在本節中，我們将展示幾個簡單的Java圖形使用者界面執行個體，以幫助你更好地了解和應用這些概念。

電腦應用

首先，我們來建立一個簡單的電腦應用。這個應用程式包含一些按鈕和一個文本框，使用者可以通過點選按鈕來進行基本的數學運算。下面是示例代碼：

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class CalculatorApp extends Application {
    private TextField display;

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Calculator");

        GridPane grid = new GridPane();
        grid.setPadding(new Insets(10));
        grid.setHgap(5);
        grid.setVgap(5);

        display = new TextField();
        display.setPrefWidth(200);
        grid.add(display, 0, 0, 4, 1);

        Button button1 = new Button("1");
        button1.setOnAction(e -> appendText("1"));
        grid.add(button1, 0, 1);

        Button button2 = new Button("2");
        button2.setOnAction(e -> appendText("2"));
        grid.add(button2, 1, 1);

        Button button3 = new Button("3");
        button3.setOnAction(e -> appendText("3"));
        grid.add(button3, 2, 1);

        // 其他按鈕的定義和事件處理

        Scene scene = new Scene(grid, 220, 200);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private void appendText(String text) {
        display.setText(display.getText() + text);
    }
}
           

在這個例子中，我們使用了JavaFX庫來建構使用者界面。CalculatorApp類繼承自Application，并實作了start方法，這是JavaFX應用程式的入口點。

在start方法中，我們建立了一個GridPane布局，并将各個按鈕和文本框添加到布局中。每個按鈕都有對應的點選事件處理，通過setOnAction方法注冊了一個Lambda表達式。點選按鈕時，Lambda表達式中的代碼會被執行，調用appendText方法向文本框中追加文本。

通過Scene和Stage，我們将布局顯示在一個視窗中，并設定了視窗的标題和尺寸。最後，通過調用show方法顯示視窗。

畫闆應用

接下來，我們建立一個簡單的畫闆應用，允許使用者在畫布上繪制圖形。使用者可以選擇畫筆顔色和線條粗細，并通過滑鼠在畫布上繪制圖形。下面是示例代碼：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene           

在start方法中，我們建立了一個Canvas對象作為畫布，并設定了畫布的寬度和高度。然後，我們為畫布注冊了滑鼠事件監聽器和繪圖事件監聽器。

在滑鼠事件監聽器中，我們記錄滑鼠按下和釋放的坐标，并使用這些坐标進行繪圖。在繪圖事件監聽器中，我們使用GraphicsContext對象的方法進行繪圖操作，例如繪制線條、繪制矩形等。

通過Scene和Stage，我們将畫布顯示在一個視窗中，并設定了視窗的标題和尺寸。最後，通過調用show方法顯示視窗。

這個簡單的畫闆應用允許使用者通過滑鼠在畫布上繪制圖形，實作了基本的繪圖功能。

音樂播放器應用

最後，我們建立一個簡單的音樂播放器應用，允許使用者選擇并播放音樂檔案。使用者可以通過浏覽檔案系統選擇音樂檔案，并通過點選按鈕進行播放和暫停。下面是示例代碼：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;
import javafx.stage.FileChooser;
import javafx.stage.Stage;

import java.io.File;

public class MusicPlayerApp extends Application {
    private MediaPlayer mediaPlayer;
    private Label statusLabel;

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Music Player");

        Button openButton = new Button("Open");
        openButton.setOnAction(e -> openFile(primaryStage));

        Button playButton = new Button("Play");
        playButton.setOnAction(e -> playMusic());

        Button pauseButton = new Button("Pause");
        pauseButton.setOnAction(e -> pauseMusic());

        statusLabel = new Label("No file selected.");

        Scene scene = new Scene(new VBox(10, openButton, playButton, pauseButton, statusLabel), 200, 150);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private void openFile(Stage primaryStage) {
        FileChooser fileChooser = new FileChooser();
        fileChooser.getExtensionFilters().add(new FileChooser.ExtensionFilter("Audio Files", "*.mp3", "*.wav"));
        File file = fileChooser.showOpenDialog(primaryStage);

        if (file != null) {
            statusLabel.setText("File selected: " + file.getName());
            Media media = new Media(file.toURI().toString());
            mediaPlayer = new MediaPlayer(media);
        }
    }

    private void playMusic() {
        if (mediaPlayer != null) {
            mediaPlayer.play();
        }
    }

    private void pauseMusic() {
        if (mediaPlayer != null) {
            mediaPlayer.pause();
        }
    }
}
           

在這個例子中，我們使用了JavaFX的Media和MediaPlayer類來實作音樂播放功能。MusicPlayerApp類繼承自Application，并實作了start方法，這是JavaFX應用程式的入口點。

在start方法中，我們建立了三個按鈕和一個标簽，并為每個按鈕注冊了點選事件處理。點選"Open"按鈕時，會調用openFile方法，該方法打開檔案選擇對話框，允許使用者選擇音樂檔案。選中檔案後，會建立一個Media對象和一個MediaPlayer對象，用于播放音樂。

點選"Play"按鈕時，會調用playMusic方法，該方法播放音樂。

點選"Pause"按鈕時，會調用pauseMusic方法，該方法暫停音樂。

通過Scene和Stage，我們将按鈕和标簽顯示在一個視窗中，并設定了視窗的标題和尺寸。最後，通過調用show方法顯示視窗。

這個簡單的音樂播放器應用允許使用者選擇音樂檔案并播放、暫停音樂。

總結

本章介紹了Java圖形使用者界面程式設計的基礎知識，并提供了幾個簡單的應用執行個體，包括電腦應用、畫闆應用和音樂播放器應用。通過這些執行個體，我們可以更好地了解和應用Java圖形使用者界面程式設計的概念和技術。

希望本章的内容能夠幫助你入門Java圖形使用者界面程式設計，并激發你對Java程式設計的興趣。如果你想深入學習和探索Java圖形使用者界面程式設計，可以進一步學習JavaFX和Swing等相關的庫和架構。

請随時提問，我将很樂意為你解答。