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

发布于:2021-08-01 02:06:05


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

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

配置Eclipse 所使用 JDK 和 Scene Builder:


    打开 Eclipse 的设置并找到?Java | Installed JREs?。

    点击?Add…, 选择?Standard VM?并选择你安装 JDK 8 的?Directory?。

    移除其他的 JREs 或 JDKs 从而使?JDK 8 成为默认。?

    在?Java | Compiler?中设置?Compiler compliance level 到 1.8。?

    在?JavaFX?中指定你的 Scene Builder 可执行文件的路径。?


帮助链接

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


Java 8 API?- Java 标准类的文档。JavaFX 8 API?- JavaFX 类的文档。ControlsFX API?-?ControlsFX project?额外 JavaFX 控件的文档。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)是一个非常重要的软件设计原则。按照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





用Scene Builder来设计你的界面

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


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


    选中这个界面设计区域,你就可以在右边的属性设置栏中对它的尺寸进行修改:

    从Scene Builder的左边控件栏中拖拽一个?Splite Pane(Horizontal Flow)?到界面设计区域,在Builder的右边视图结构中选择刚添加的Pane,在弹出的右键菜单中选择?Fit to Parent?。

    同样从左边的控件栏中拖拽一个?TableView?到?SplitPane?的左边,选择这个TableView(而不是它的列)对它的布局进行设置,你可以在?AnchorPane?中对这个TableView四个边的外边距进行调节。(more information on Layouts).

    点击菜单中的?Preview | Show Preview in Window?可以预览你设计好的界面,试着缩放预览的界面,你会发现TableView会随着窗口的缩放而变化。

    修改TableView中的列名字,”First Name” and “Last Name”,在右边面板中的属性设置项

    选择这个?TableView?,在右边面板中将它的?Column Resize Policy?修改成?constrained-resize?(同样是在属性设置项里面)。确保这个TableView的列能够铺满所有的可用空间。

    添加一个?Label?到 *SplitePane*的右边部分,并设置它的显示文字为 “Person Details” (提示: 你可以通过搜索来找到?Label?这个控件)。 使用anchors来调节这个控件的布局位置。

    再添加一个?GridPane?*SplitePane*的右边部分, 使用anchors来调节这个控件的布局位置。

    按照下面的图添加多个 *Lables*到表格中去。

    注意: 添加一个控件到已经存在的行里面去,你可在这行的行号上右键选择 “Add Row”。

    添加3个按钮到这个?GridPane?的下面。 小提示: 选择这3个按钮,右键 *Wrap In | HBox*,那么它们会被放置到一个HBox里面。 你可能需要对这个HBox指定一个?spacing,同时也需要设置它们的右边和下边的anchors。

    那么基本已经完成了界面的设计,你可以通过?Preview?来预览一下你设计的界面,同时缩放一下窗口来检验一下各个控件的位置是否正确。



创建主应用程序

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


    在view包里面创建一个新的?FXML Document?叫做?RootLayout.fxml, 这一次,选择?BorderPane?做为它的根节点

    在Scene Builder中打开?RootLayout.fxml

    通过设置?Pref Width?为600和?Pref Height?为400来改变这个 *BorderPane*的尺寸。

    在最顶上添加一个 *MenuBar*,先不去给这个菜单添加任何的功能。


The JavaFX Main Class

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


    在工程上右键选择 *New | Other…*,然后选择 *JavaFX Main Class*。

    将这个class命名为?MainApp,将它放置到controller包中,也就是上面建的?ch.makery.address?(注意: 这个包下有两个子包,分别是view?和?model)。


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


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




一切看起来象是剧场里表演: 这里的?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?文件名是否拼写错误


欢迎关注公众号:

相关推荐

最新更新

猜你喜欢