JavaFX入门

当我开始工作时,我的任务之一就是每周都要为广告系列产品进行手动操作。第二周之后,我想我必须使用基于GUI的桌面程序来自动执行此任务,而不是手动使用一些资料库脚本。然后,我开始寻找我应该选择的解决方案。最后,我最终决定使用JavaFX。这是我的JavaFX之旅的起点。在我的JavaFX系列文章中,我将尝试描述如何创建JavaFX应用程式,如何使用其核心组件,如何与资料库通信等。

在开始JavaFX系列之前,我要感谢MarkoJakob。我从他的教程系列中学到了很多东西,我建议查看教程系列。

让我们开始吧!

什么是JavaFX?

它是下一代GUI工具包,您可以使用JavaFX创建丰富的GUI应用程式。您还可以使用CSS自定义样式,并使用XML进行编辑。此外,它还包含一个名为SceneBuilder的拖放设计编辑器。使用SceneBuilder设计GUI更容易。您可以拖放GUI元素,然后使用CSS修改其样式,或使用XML编辑它们。欲了解更多详情,请访问这里。

先决条件

·安装最新的JAVAJDK8。

·安装IntelliJ,Eclipse或NetbeansIDE(我更喜欢IntelliJ)

·安装SceneBuilder。

·安装OracleExpressEdition。

创建一个JavaFX项目

打开IntelliJ,点击File->>NewProject,然后点击JavaFX,然后点击Next按钮。

键入「First_JavaFX_Project」作为项目名称,并设置您的项目位置,然后点击完成按钮。

感谢IntelliJ,它会自动创建一个JavaFX项目结构,并将一个示例HelloWorld代码放入Main类。

我们将基于MVC(模型-视图-控制器)原理编写我们的代码。因此,我使用了三个(加上一个「util」包)包。这些是控制器,模型和视图。我们应该将.fxml文件移动到控制器包中的视图包和控制器类中。另外,我添加了一个额外的软体包并将其称为

util。用于资料库连接操作的实用程序类(如DBUtil)。「模型」包包含「模型」和「数据访问对象」类。示例应用程式结构如下图所示。

另外,我们需要设置SceneBuilder路径。要做到这一点,转到文件->>设置,在搜索栏中键入「JavaFX」。然后,如下所示复制并粘贴SceneBuilder路径,然后单击确定。另外,请检查这个连结。

设置SceneBuilder路径后,进入sample.fxml文件并右键单击,然后您会看到「在SceneBuilder中打开」选项。当您单击此选项时,所选的fxml文件将在SceneBuilder中打开。你也可以在这里检查。

我们已经完成了我们的设置。对于我们的第一个例子,我们将使用OracleDB和默认HR模式。在第二篇文章中,我们将做一些DML(资料库操作)操作,如创建,读取,更新,删除,插入等。我也解释了如何安装和使用Oracle

Express在这篇文章的末尾。

现在,我们转到我们项目的视图文件夹,手动创建EmployeeOperations.fxml和RootLayout.fxml文件。为此,请右键单击滑鼠并创建一个新的空文本文件,并将其名称更改为EmployeeOperations.fxml

(在下一篇文章中,我将更名为EmployeeView.fxml)。对RootLayout.fxml执行相同的操作。如果你愿意,你可以用SceneBuilder来做到这一点。最后,在视图文件夹中,我们将有这两个.fxml文件。

转到WindowsStart并键入SceneBuilder,然后按Enter,SceneBuilder将打开。

之后,点击「文件->>打开」,打开EmployeeOperations.fxml文件。

其实有两种方式来设计用户界面。其中之一是使用IntelliJ操作.fxml文件或使用SceneBuilder来设计UI。在第一次创建和设计用户界面时使用SceneBuilder更加容易和合理。我通常在后期使用intelliJ来操作UI。

首先,打开EmployeeOperations.fxml文件,并将AnchorPane拖放到SceneBuilder的中间窗格中。然后,如果你想要,你可以使用右窗格来修改它的属性。

您可以使用左窗格的控制项部分添加TextField,Label,TextArea和按钮来设计您的UI,如下所示。下图是UI的草稿版本,而不是最终版本。

您也可以将UI元素分组。选择你想要分组的UI元素,然后点击「Arrange>Wrapin

」,然后点击相应的选项。如果元素是垂直列出的,则选择VBox。如果他们横向上市,那么选择HBox。

分组这些元素后,可以使用右窗格「布局」部分的「间距」选项更改元素的空间。

然后,为了在代码中使用这些组件,应该在右窗格中设置fx:id值,如下所示。

如果要设置提示文字和默认文字,可以使用右侧窗格中的「属性」部分。您可以更改提示文本和文本值,如下所示。

在设计用户界面时,可以通过键入Ctrl+P来检查其状态。

有关布局设计的更多信息,你应该去看望在这里和(我建议你去DZone。他们解释布局设计得非常好。)

现在,我们来设计RootLayout。打开RootLayout.fxml与SceneBuilder。

这次拖放BorderPane。

然后,将MenuBar添加到TOP插槽。

下面显示了RootLayout的最终设计。

我们的目标是将EmployeeOperations.fxml显示到RootLayout.fxml中。现在,我想简要地解释一下JavaFX的应用程式结构。我们生成的主类代码如下所示。

classMain

Java

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

packagesample;

importjavafx.application.Application;

importjavafx.fxml.FXMLLoader;

importjavafx.scene.Parent;

importjavafx.scene.Scene;

importjavafx.stage.Stage;

publicclassMainextendsApplication{

@Override

publicvoidstart(StageprimaryStage)throwsException{

Parentroot=FXMLLoader.load(getClass().getResource("view/sample.fxml"));

primaryStage.setTitle("HelloWorld");

primaryStage.setScene(newScene(root,300,275));

primaryStage.show();

}

publicstaticvoidmain(String[fusion_builder_containerhundred_percent="yes"overflow="visible"][fusion_builder_row][fusion_builder_column

type="1_1"background_position="left

top"background_color=""border_size=""border_color=""border_style="solid"spacing="yes"background_image=""background_repeat="no-repeat"padding=""margin_top="0px"margin_bottom="0px"class=""id=""animation_type=""animation_speed="0.3"animation_direction="left"hide_on_mobile="no"center_content="no"min_height="none"][]args){

launch(args);

}

}

这是默认(生成)主类,它扩展了应用程式类。它有开始和主要方法。该密钥的方法是在这里开始的方法。在main方法中可以看到,应用程式启动时会自动调用stage参数。

如下图所示,主容器是Stage,它由场景和场景组成,包含各种JavaFX元素,如文本栏位,按钮等。所有的JavaFX应用程式结构都是这样的。你可以在这里找到更多的信息。

如果我们更改主类代码,如下所示,我们可以在RootLayout边框窗格中打开「员工操作」视图。我试图添加评论,使代码更容易理解。

classMain

Java

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

packagesample;

importjavafx.application.Application;

importjavafx.fxml.FXMLLoader;

importjavafx.scene.Scene;

importjavafx.scene.layout.AnchorPane;

importjavafx.scene.layout.BorderPane;

importjavafx.stage.Stage;

importjava.io.IOException;

//MainclasswhichextendsfromApplicationClass

publicclassMainextendsApplication{

//ThisisourPrimaryStage(Itcontainseverything)

privateStageprimaryStage;

//ThisistheBorderPaneofRootLayout

privateBorderPanerootLayout;

@Override

publicvoidstart(StageprimaryStage){

//1)Declareaprimarystage(Everythingwillbeonthisstage)

this.primaryStage=primaryStage;

//Optional:Setatitleforprimarystage

this.primaryStage.setTitle("SWTestAcademy-SampleJavaFXApp");

//2)InitializeRootLayout

initRootLayout();

//3)DisplaytheEmployeeOperationsView

showEmployeeOperationsView();

}

//Initializestherootlayout.

publicvoidinitRootLayout(){

try{

//First,loadrootlayoutfromRootLayout.fxml

FXMLLoaderloader=newFXMLLoader();

loader.setLocation(Main.class.getResource("view/RootLayout.fxml"));

rootLayout=(BorderPane)loader.load();

//Second,showthescenecontainingtherootlayout.

Scenescene=newScene(rootLayout);//WearesendingrootLayouttotheScene.

primaryStage.setScene(scene);//Setthesceneinprimarystage.

//Third,showtheprimarystage

primaryStage.show();//Displaytheprimarystage

}catch(IOExceptione){

e.printStackTrace();

}

}

//Showstheemployeeoperationsviewinsidetherootlayout.

publicvoidshowEmployeeOperationsView(){

try{

//First,loadEmployeeOperationsViewfromEmployeeOperations.fxml

FXMLLoaderloader=newFXMLLoader();

loader.setLocation(Main.class.getResource("view/EmployeeOperations.fxml"));

AnchorPaneemployeeOperationsView=(AnchorPane)loader.load();

//SetEmployeeOperationsviewintothecenterofrootlayout.

rootLayout.setCenter(employeeOperationsView);

}catch(IOExceptione){

e.printStackTrace();

}

}

publicstaticvoidmain(String[]args){

launch(args);

}

}

结果:

注意:以上UI设计是草稿版本,下一篇文章我们将会改变并完成。在这篇文章中,我不想关注我们UI的最终设计。

当您单击的IntelliJ任何.fxml文件,你可以看到它的内容,如下图所示。

在开始编码之前,我想解释一下如何安装OracleExpressDatabase

首先,您应该访问此连结并安装OracleDatabaseExpressEdition11g第2版。

安装OracleExpress后,请转到此连结并打开HR帐户样本用户帐户。在本教程中,我们将使用HR模式及其表格。

然后,尝试使用TOAD或OracleSQLDeveloper连接资料库。(我更喜欢TOAD)

您可以在下图中看到如何使用TOAD连接DB。

现在,我们准备开始编码