JavaFX 簡介

JavaFX 介紹
一提到Java的圖形界面庫，我們通常聽到的都是Swing，或者更老一點的AWT，包括很多書上面介紹的也都是這兩種。很多學校、培訓班教學的也是這兩種技術。但是其實這兩種技術都已經過時很長時間了。Swing雖然學起來也不算很難，但是用它來寫界面其實也很不好寫。因為它的界面和代碼沒有做到分離，所以在編寫的時候，代碼中肯定充斥着大量坐標，修改極其不易。這方面做的比較好的就是微軟的WPF，只能說誰用誰知道。

當然，雖然編寫客戶端圖形程序是Java的弱項，但是Java並沒有放棄這方面的努力。今天介紹的JavaFX就是Java在編寫圖形界面程序的最新技術。如果你准備使用Java編寫圖形界面程序，又沒有歷史包袱，那么強烈推薦使用JavaFX。

這是Oracle官網關於JavaFX的資源和文檔。

這是官方的示例程序，我們可以參考JavaFX的部分來學習如何使用。

 

如何安裝
只要你安裝了最新版本的JDK 8，那么就可以使用JavaFX庫了。如果沒有安裝的話，那么趕快開始安裝吧。

快速上手
第一個程序
新建一個項目，然后編寫如下的類，然后編譯運行，即可看到結果。關於這個程序不用做解釋吧。如果有學習過Swing以及其他圖形界面框架的經驗的話，應該非常容易理解這段代碼。當然由於JavaFX是新東西，所以我也順便使用Java 8的新特性——lambda表達式。

 

package yitian.javafxsample;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class HelloJavaFX extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        Button btn = new Button();
        btn.setText("你好啊，世界");
        btn.setOnAction(event -> {
            System.out.println("你好，世界!");
        });

        StackPane root = new StackPane();
        root.getChildren().add(btn);

        Scene scene = new Scene(root, 300, 250);

        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }


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

 

運行截圖如下。

 

 

用戶輸入
這個程序可以用來處理用戶登錄的情況，代碼如下，重要部分都添加了注釋。代碼的最后一部分使用setOnAction函數為按鈕添加了點擊事件，當點擊按鈕的時候會顯示文本。

 

public class UserInput extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        //網格布局
        GridPane grid = new GridPane();
        grid.setAlignment(Pos.CENTER);
        //網格垂直間距
        grid.setHgap(10);
        //網格水平間距
        grid.setVgap(10);
        grid.setPadding(new Insets(25, 25, 25, 25));
        //新建場景
        Scene scene = new Scene(grid, 300, 275);
        primaryStage.setScene(scene);
        //添加標題
        Text scenetitle = new Text("Welcome");
        scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
        grid.add(scenetitle, 0, 0, 2, 1);
        //添加標簽及文本框
        Label userName = new Label("用戶名:");
        grid.add(userName, 0, 1);

        TextField userTextField = new TextField();
        grid.add(userTextField, 1, 1);
        //添加標簽及密碼框
        Label pw = new Label("密碼:");
        grid.add(pw, 0, 2);

        PasswordField pwBox = new PasswordField();
        grid.add(pwBox, 1, 2);
        //添加提交按鈕
        Button btn = new Button("登錄");
        HBox hbBtn = new HBox(10);
        hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
        hbBtn.getChildren().add(btn);
        grid.add(hbBtn, 1, 4);
        //提交文本提示
        final Text actiontarget = new Text();
        grid.add(actiontarget, 1, 6);

        btn.setOnAction(event -> {
            actiontarget.setFill(Color.FIREBRICK);
            actiontarget.setText("已經登錄");
        });

        primaryStage.setTitle("JavaFX Welcome");
        primaryStage.show();
    }

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

程序運行截圖如下。

 

 

這個程序其實也沒什么難點，就是使用了網格布局，然后將每個元素添加到網格中。關於網格布局的屬性意義可以參考官方的圖。

 

 

用FXML設計用戶界面
現代圖形界面框架都支持將界面和代碼分離開，而且比較常用的描述語言是XML，例如QT的QML、WPF的XAML，當然JavaFX也有類似的語言，叫做FXML。如果需要詳細了解FXML，可以參考Oracle官網的文章Introduction to FXML。

下面用FXML重寫一下上面那個小例子，每個部分都做了注釋。如果學習過其他類似描述語言的話，會發現這些其實都差不多。唯一需要注意的就是布局里面的fx:controller屬性，它指定一個控制器，控制器的作用就是編寫界面對應的代碼。

 

<?xml version="1.0" encoding="UTF-8"?>
<!--導入類-->
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>
<!--設置布局-->
<GridPane xmlns="http://javafx.com/javafx"
          xmlns:fx="http://javafx.com/fxml"
          fx:controller="yitian.javafxsample.Controller"
          prefHeight="400.0" prefWidth="600.0"
          alignment="center" hgap="10" vgap="10">
    <padding>
        <Insets top="25" right="25" bottom="10" left="25"/>
    </padding>
    <!--歡迎文本-->
    <Text text="Welcome"
          GridPane.columnIndex="0" GridPane.rowIndex="0"
          GridPane.columnSpan="2">
        <font>
            <Font name="Consolas" size="20"/>
        </font>
    </Text>

    <Label text="用戶名:"
           GridPane.columnIndex="0" GridPane.rowIndex="1"/>

    <TextField
            GridPane.columnIndex="1" GridPane.rowIndex="1"/>

    <Label text="密碼:"
           GridPane.columnIndex="0" GridPane.rowIndex="2"/>

    <PasswordField fx:id="passwordField"
                   GridPane.columnIndex="1" GridPane.rowIndex="2"/>
    <!--按鈕及提示文本-->
    <HBox spacing="10" alignment="bottom_right"
          GridPane.columnIndex="1" GridPane.rowIndex="4">
        <Button text="顯示密碼"
                onAction="#showPasswordButton"/>
    </HBox>

    <Text fx:id="hintText"
          GridPane.columnIndex="0" GridPane.columnSpan="2"
          GridPane.halignment="RIGHT" GridPane.rowIndex="6"/>
</GridPane>

 

下面就是這個FXML文件對應的控制器，它是一個標准的Java類。在FXML中用fx:id屬性指定的ID，可以在控制器中聲明為一個類字段，通過這個字段就可以和界面組件進行交互。同樣道理，onAction聲明的事件處理程序，在控制器中就是一個方法。注意這些字段和方法都需要使用@FXML注解進行標注。

 

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.PasswordField;
import javafx.scene.text.Text;


public class Controller {
    @FXML
    private Text hintText;
    @FXML
    private PasswordField passwordField;

    @FXML
    protected void showPasswordButton(ActionEvent event) {
        hintText.setText("顯示密碼:" + passwordField.getText());
    }
}

 

最后要做修改的就是主程序了。在主程序中需要使用FXMLLoader來加載FXML資源，其他部分沒有太大變化。

 

public class UseFxml extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("ui.fxml"));

        Scene scene = new Scene(root, 300, 275);
        primaryStage.setTitle("使用FXML");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

 

程序運行截圖如下。

 

 

如果希望修改組件樣式，JavaFX提供了CSS接口，讓我們可以直接使用CSS文件修改樣式。首先需要在FXML文件中添加相應樣式表的引用。文件名前面的@表示這個CSS文件和FXML文件在同一目錄下。

<GridPane>
    <stylesheets>
        <URL value="@style.css"/>
    </stylesheets>
<GridPane/>

樣式表和普通的樣式表差不多，只不過需要添加JavaFX特有的前綴-fx-。

#btnShowPassword {
    -fx-background-color: deeppink;
}

上面用了ID選擇器，所以對應地，在FXML中也需要ID屬性。

<Button id="btnShowPassword" text="顯示密碼"
                onAction="#showPasswordButton"/>

自定義之后的程序如圖所示。這里只簡單修改了一下按鈕的背景色，其實可以更改的樣式有很多，包括程序背景等等，有興趣的同學可以自行嘗試。

 

JavaFx在線文檔：https://docs.oracle.com/javafx/2/api/index.html

以上就是這篇文章的內容了。如果有同學想使用Java編寫圖形界面程序，可以考慮使用JavaFX，這是一個很不錯的選擇。

參考地址