【JavaFx教程】第一部分：Scene Builder

叁歲伎倆 2022-05-10 09:12 487阅读 0赞

![Screenshot AddressApp Part 1][]

### 第一部分的主题 ###

*  开始了解 JavaFX 。
 *  创建并运行一个 JavaFX 项目。
 *  使用 Scene Builder 来设计用户界面。
 *  使用 模型 - 视图 - 控制器（MVC）模式 构造基础的应用。

--------------------

### 你需要准备 ###

*  最新的 [Java JDK 8][] （包含 **JavaFX 8**）。
 *  Eclipse 4.3 或更高版本与 e(fx)clipse 插件。最简单的方法是从 [e(fx)clipse 网站][e_fx_clipse] 下载预先配置的发行版本。作为一种备选你可以使用一个 [update site][] 来给您的 Eclipse 安装。
 *  [Scene Builder 2.0][] 或更高。

### Eclipse 配置 ###

配置Eclipse 所使用 JDK 和 Scene Builder：

1.  打开 Eclipse 的设置并找到 *Java | Installed JREs* 。
2.  点击 *Add…*, 选择 *Standard VM* 并选择你安装 JDK 8 的 *Directory* 。
3.  移除其他的 JREs 或 JDKs 从而使 **JDK 8 成为默认**。 ![Preferences JDK][]
4.  在 *Java | Compiler* 中设置 **Compiler compliance level 到 1.8**。 ![Preferences Compliance][]
5.  在 *JavaFX* 中指定你的 Scene Builder 可执行文件的路径。 ![Preferences JavaFX][]

### 帮助链接 ###

你可能会想收藏下面的链接：

*  [Java 8 API][] - Java 标准类的文档。
 *  [JavaFX 8 API][] - JavaFX 类的文档。
 *  [ControlsFX API][] - [ControlsFX project][] 额外 JavaFX 控件的文档。
 *  [Oracle’s JavaFX Tutorials][Oracle_s JavaFX Tutorials] - Oracle 的 JavaFX 官方教程。

一切就绪，让我们开始吧！

--------------------

## 创建一个新的 JavaFX 项目 ##

在 Eclipse（已安装 e(fx)clipse 的）中，点击 *File | New | Other…* 并选择 \*JavaFX Project\*。 指定这个项目的名字（e.g. \*AddressApp\*）并点击 \*Finish\*。

如果 *application* 包被自动创建，那么删除它和它的内容。

### 创建包 ###

[**Model-View-Controller** (MVC)][Model-View-Controller_MVC]是一个非常重要的软件设计原则。按照MVC模式可以将我们的应用程序划分成3个部分，然后为这每一部分建立自己的包 (在源代码文件夹上右键， 选择 新建 | 包):

*  `ch.makery.address` - 放置所有的控制器类(也就是应用程序的业务逻辑)
 *  `ch.makery.address.model` - 放置所有的模型类
 *  `ch.makery.address.view` - 放置所有界面和控件类

**注意:** view包里可能会包含一些控制器类，它可以直接被单个的view引用，我们叫它 **视图-控制器**。

--------------------

## 创建FXML布局文件 ##

有两种方式来创建用户界面，一种是通过XML文件来定义，另外一种则是直接通过java代码来创建. 这两种方式你都可以在网上搜到. 我们这里将使用XML的方式来创建大部分的界面。因为这种方式将会更好的将你的业务逻辑和你的界面开来，以保持代码的简洁。在接下来的内容里，我们将会介绍使用Scene Builder(所见即所得)来编辑我们的XML布局文件，它可以避免我们直接去修改XML文件。

在view包上右键创建一个新\*FXML Document\*，把它命名为`PersonOverview`。

![New FXML Document][]

![New PersonOverview][]

--------------------

## 用Scene Builder来设计你的界面 ##

**注意:** 你可以下载这部分教程的源码，它里面已经包含了设计好的布局文件。

在`PersonOverview.fxml` 右键选择 \*Open with Scene Builder\*，那么你将会在打开的Scene Builder里面看到一个固定的界面设计区域(在整个界面的左边)。

1.  选中这个界面设计区域，你就可以在右边的属性设置栏中对它的尺寸进行修改:  
    ![Anchor Pane Size][]
2.  从Scene Builder的左边控件栏中拖拽一个 *Splite Pane(Horizontal Flow)* 到界面设计区域，在Builder的右边视图结构中选择刚添加的Pane，在弹出的右键菜单中选择 *Fit to Parent* 。  
    ![Fit to Parent][]
3.  同样从左边的控件栏中拖拽一个 *TableView* 到 *SplitPane* 的左边，选择这个TableView(而不是它的列)对它的布局进行设置，你可以在 *AnchorPane* 中对这个TableView四个边的外边距进行调节。([more information on Layouts][]).  
    ![TableView Anchors][]
4.  点击菜单中的 *Preview | Show Preview in Window* 可以预览你设计好的界面，试着缩放预览的界面，你会发现TableView会随着窗口的缩放而变化。
5.  修改TableView中的列名字，”First Name” and “Last Name”，在右边面板中的属性设置项  
    ![Column Texts][]
6.  选择这个 *TableView* ，在右边面板中将它的 *Column Resize Policy* 修改成 *constrained-resize* (同样是在属性设置项里面)。确保这个TableView的列能够铺满所有的可用空间。  
    ![Column Resize Policy][]
7.  添加一个 *Label* 到 \*SplitePane\*的右边部分，并设置它的显示文字为 “Person Details” (提示: 你可以通过搜索来找到 *Label* 这个控件)。 使用anchors来调节这个控件的布局位置。  
    ![Person Details Label][]
8.  再添加一个 *GridPane* \*SplitePane\*的右边部分, 使用anchors来调节这个控件的布局位置。  
    ![GridPane Layout][]
9.  按照下面的图添加多个 \*Lables\*到表格中去。
10. *注意: 添加一个控件到已经存在的行里面去，你可在这行的行号上右键选择 “Add Row”。*  
    ![Add labels][]
11. 添加3个按钮到这个 *GridPane* 的下面。 小提示: 选择这3个按钮，右键 \*Wrap In | HBox\*，那么它们会被放置到一个HBox里面。 你可能需要对这个HBox指定一个 *spacing*,同时也需要设置它们的右边和下边的anchors。  
    ![Button Group][]
12. 那么基本已经完成了界面的设计，你可以通过 *Preview* 来预览一下你设计的界面，同时缩放一下窗口来检验一下各个控件的位置是否正确。  
    ![Preview][]

--------------------

## 创建主应用程序 ##

我们还需要新建一个\*FXML\*文件来做为主布局文件，它将包含菜单栏并存放我们之前创建的布局文件 `PersonOverview.fxml` 。

1.  在view包里面创建一个新的 *FXML Document* 叫做 `RootLayout.fxml`, 这一次，选择 *BorderPane* 做为它的根节点  
    ![New RootLayout][]
2.  在Scene Builder中打开 `RootLayout.fxml`。
3.  通过设置 *Pref Width* 为600和 *Pref Height* 为400来改变这个 \*BorderPane\*的尺寸。  
    ![RootLayout Size][]
4.  在最顶上添加一个 \*MenuBar\*，先不去给这个菜单添加任何的功能。  
    ![MenuBar][]

### The JavaFX Main Class ###

现在，我们需要创建一个 **main java class** 用来加载 `RootLayout.fxml` ，同时添加 `PersonOverview.fxml` 到\*RootLayout.fxml\*中去，这个main class将做为我们这个应用程序的入口。

1.  在工程上右键选择 \*New | Other…\*，然后选择 \*JavaFX Main Class\*。  
    ![New JavaFX Main Class][]
2.  将这个class命名为 `MainApp`，将它放置到controller包中，也就是上面建的 `ch.makery.address` (注意: 这个包下有两个子包，分别是`view` 和 `model`)。  
    ![New JavaFX Main Class][New JavaFX Main Class 1]

你可能注意到了IDE生成的 `MainApp.java` 继承自 `Application` 同时包含了两个方法， 这是一个JavaFX应用程序的最基本的代码结构，这里最重要的方法是 `start(Stage primaryStage)` ，它将会在应用程序运行时通过内部的 `main` 方法自动调用。

正如你所看到的，这个`start(...)` 方法会接收一个 `Stage` 类型的参数，下面的图向你展示了一个JavaFX应用程序的基本结构。

![New FXML Document][New FXML Document 1]  
*Image Source: [http://www.oracle.com][http_www.oracle.com]*

**一切看起来象是剧场里表演**: 这里的 `Stage` 是一个主容器，它就是我们通常所认为的窗口（有边，高和宽，还有关闭按钮）。在这个 `Stage` 里面，你可以放置一个 `Scene`，当然你可以切换别的 `Scene`，而在这个 `Scene` 里面，我们就可以放置各种各样的控件。

更详细的信息，你可以参考 [Working with the JavaFX Scene Graph][].

--------------------

打开 `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);
        }
    }

代码中的注释会给你一些小提示，注明代码的含义。

如果你现在就运行这个程序，那么你将会看到和这篇文章开头所展示的图片那样的界面。

### 你有可能遇见的问题 ###

如果你的应用程序找不到你所指定的 `fxml` 布局文件，那么系统会提示以下的错误：

`java.lang.IllegalStateException: Location is not set.`

你可以检查一下你的 `fxml` 文件名是否拼写错误

## 欢迎关注公众号： ##

# ![70][] #

[Screenshot AddressApp Part 1]: /images/20220510/557ff9e8ef4a4d7b8cd40a23c4c94c95.png
[Java JDK 8]: http://www.oracle.com/technetwork/java/javase/downloads/index.html
[e_fx_clipse]: http://efxclipse.bestsolution.at/install.html#all-in-one
[update site]: http://www.eclipse.org/efxclipse/install.html
[Scene Builder 2.0]: http://www.oracle.com/technetwork/java/javase/downloads/javafxscenebuilder-info-2157684.html
[Preferences JDK]: /images/20220510/b73e8c97a5da45659c15fb0e2c3c27af.png
[Preferences Compliance]: /images/20220510/4d2ca01c51fd4841a065a005df61d0ba.png
[Preferences JavaFX]: /images/20220510/5d0c19cff4194300af57ebc7badad38f.png
[Java 8 API]: http://docs.oracle.com/javase/8/docs/api/
[JavaFX 8 API]: http://docs.oracle.com/javase/8/javafx/api/
[ControlsFX API]: https://controlsfx.bitbucket.io/
[ControlsFX project]: http://fxexperience.com/controlsfx/
[Oracle_s JavaFX Tutorials]: http://docs.oracle.com/javase/8/javafx/get-started-tutorial/get_start_apps.htm
[Model-View-Controller_MVC]: http://zh.wikipedia.org/wiki/MVC
[New FXML Document]: /images/20220510/83889e0725124fb9a546d2566ed7d1a5.png
[New PersonOverview]: /images/20220510/cc6b97d0dc3d4f83899ab67f4c4d8c41.png
[Anchor Pane Size]: /images/20220510/592e307faa1d4c478ce1d263c0e94d97.png
[Fit to Parent]: /images/20220510/25fba8e74013442aa527bb038bb83379.png
[more information on Layouts]: http://docs.oracle.com/javase/8/javafx/layout-tutorial/builtin_layouts.htm
[TableView Anchors]: /images/20220510/3d9d5eff92364ea6adf1ebb1717a956d.png
[Column Texts]: /images/20220510/9c9992d5b83547dd8ed876a585fcc317.png
[Column Resize Policy]: /images/20220510/bb08e880b9684e1896e909813b770071.png
[Person Details Label]: /images/20220510/2de417c349e24cfdaf926c0a12728391.png
[GridPane Layout]: /images/20220510/e821df277d6345d7b79cb65ad77b3726.png
[Add labels]: /images/20220510/94d579ededbc454a9c2c645788f0cc6a.png
[Button Group]: /images/20220510/d5ac388bd86d405c8d177600a8aeb3a3.png
[Preview]: /images/20220510/8750bd554d4d46539edd53a04cf277fb.png
[New RootLayout]: /images/20220510/f605849713344ff299b2135c40b6af50.png
[RootLayout Size]: /images/20220510/a22c14a433aa49538eb38e68c1b297fc.png
[MenuBar]: /images/20220510/8d3e554657e14444a32d88a2bc30bcf8.png
[New JavaFX Main Class]: /images/20220510/8c914ed333d4435d94c48167e4cbb581.png
[New JavaFX Main Class 1]: /images/20220510/7fe7a7bbe7d5450b8c5d3b849fcd427f.png
[New FXML Document 1]: /images/20220510/14af79ce1a3e4f12b928e0f3c2bbe027.png
[http_www.oracle.com]: http://www.oracle.com/
[Working with the JavaFX Scene Graph]: http://docs.oracle.com/javase/8/javafx/scene-graph-tutorial/scenegraph.htm
[70]: /images/20220510/6eb46af678ae45a38614c5f4b78e7fa0.png