javafx框架初探

做课程项目时需要做一个java编写的界面，由于javafx是比较新的框架，而且写出来的东西也要比swing要好看一些，所以就学习了一下javafx，下面是我对javafx的个人理解。

目录结构

所有代码都在src中，其中control中有public void main函数，和一些其他的服务或者控制代码；model中存放类的代码，task是我自己建的包，可以放在control中，view用来存放界面文件(.fxml)和用来控制界面和用户交互的代码(.java)。我们编写javafx项目和其他项目的不同之处主要在于主控制文件(也就是public void main所在的文件，你运行一个javafx项目都是从这里开始然后调用别的包中的文件的),view中的.fxml文件和这个.fxml文件所对应的.java文件。接下来将主要讲这三者是如何互相调用的。

MainApp.java

这是我的主控制文件的名字，你可以随意起其他名字，这里贴一份简短的代码。

package ch.makery.address;

import java.io.IOException;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class MainApp extends Application {

private Stage primaryStage;
private BorderPane rootLayout;

@Override
public void start(Stage primaryStage) {
    this.primaryStage = primaryStage;
    this.primaryStage.setTitle("AddressApp");

    initRootLayout();

    showPersonOverview();
}

/**
 * Initializes the root layout.
 */
public void initRootLayout() {
    try {
        // Load root layout from fxml file.
        FXMLLoader loader = new FXMLLoader();
        loader.setLocation(MainApp.class.getResource("view/RootLayout.fxml"));
        rootLayout = (BorderPane) loader.load();

        // Show the scene containing the root layout.
        Scene scene = new Scene(rootLayout);
        primaryStage.setScene(scene);
        primaryStage.show();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

/**
 * Shows the person overview inside the root layout.
 */
public void showPersonOverview() {
    try {
        // Load person overview.
        FXMLLoader loader = new FXMLLoader();
        loader.setLocation(MainApp.class.getResource("view/PersonOverview.fxml"));
        AnchorPane personOverview = (AnchorPane) loader.load();

        // Set person overview into the center of root layout.
        rootLayout.setCenter(personOverview);
    } catch (IOException e) {
        e.printStackTrace();
    }
}

/**
 * Returns the main stage.
 * @return
 */
public Stage getPrimaryStage() {
    return primaryStage;
}

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

}

其中public void start(Stage primaryStage) 函数用来初始化界面。在代码中初始化了primarystage并且调用initrootlayout（）在initrootlayout中加载.fxml文件显示界面框架，然后调用showpersonoverview（）加载主界面框架中的界面以及这个界面中的controller，这样便初始化出了一个可以克后台交互的界面（因为配置了controller）,接下来我们看一下controller中的代码。

Controller

import javafx.fxml.FXML;
import javafx.scene.control.Label;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import ch.makery.address.MainApp;
import ch.makery.address.model.Person;

public class PersonOverviewController {
    @FXML
    private TableView<Person> personTable;
    @FXML
    private TableColumn<Person, String> firstNameColumn;
    @FXML
    private TableColumn<Person, String> lastNameColumn;

   @FXML
    private Label firstNameLabel;
    @FXML
    private Label lastNameLabel;
    @FXML
    private Label streetLabel;
    @FXML
    private Label postalCodeLabel;
    @FXML
    private Label cityLabel;
    @FXML
    private Label birthdayLabel;

    // Reference to the main application.
    private MainApp mainApp;

    /**
     * The constructor.
     * The constructor is called before the initialize() method.
     */
    public PersonOverviewController() {
    }

    /**
     * Initializes the controller class. This method is automatically called
     * after the fxml file has been loaded.
     */
    @FXML
    private void initialize() {
        // Initialize the person table with the two columns.
        firstNameColumn.setCellValueFactory(cellData -> cellData.getValue().firstNameProperty());
        lastNameColumn.setCellValueFactory(cellData -> cellData.getValue().lastNameProperty());
    }

    /**
     * Is called by the main application to give a reference back to itself.
     * 
     * @param mainApp
     */
    public void setMainApp(MainApp mainApp) {
        this.mainApp = mainApp;

        // Add observable list data to the table
        personTable.setItems(mainApp.getPersonData());
    }
}

可以看到，这个controller中有许多 个@FXML这就代表它的下一行的函数或者private变量是要和.fxml文件交互的，如果是变量，那么每个变量都是界面文件中的一个部件（Label,Text,TextField等等）,你在这个controller中对这个部件做什么事情，程序运行时界面上就会显示相同的事情（和swing一样）,private void initialize()函数是初始化这个界面时要做的事情，比如你可以从数据库获取信息然后再是在部件上或者做一些别的事情，这时候初始化的工作就完成了，但是你点按钮或者点击别的部件并不会有反应，这时就需要你为每个需要添加动作的部件添加action（需要在JavaFX Scene Builder）中进行配置，在controller中你只需要写出这个部件被触发时要执行的函数就行了，别忘了在这个函数的上一行加上@FXML。

View

(JavaFX Scene Builder界面)

(运行效果)

veiw就是.fxml文件了，也就是界面文件，你可以在JavaFX Scene Builder中轻松的调整界面的各项参数，但是最重要的是绑定controller，配置部件所对应的的变量和action，这样你的界面就能按照你想象的那样和后台进行交互并显示合适的信息了。