java程序设计任务式教程 课件 7-JavaFX图形用户界面

JaVa程序设计任务式教程01任务7-1模拟购物车添加商品功能02任务7-2模拟购物结账功能04任务7-4使用FXML实现购物满意度问卷调查目录CONTNETS单元七

JavaFX图形用户界面03任务7-3购物满意度问卷调查单元目标能够创建第一个JavaFX程序。能够使用JavaFX属性与属性绑定模拟购物车添加商品的功能。能够使用JavaFX常用布局与事件处理模拟购物结账功能。能够使用JavaFX基础控件与列表控件实现购物满意度问卷调查。能够使用FXML实现购物满意度问卷调查。培养学生在JavaFX应用程序的设计和开发中运用创新思维，创造出具有独特性和竞争力的产品。培养学生保持对JavaFX及其相关技术栈的关注和学习，不断提升学生的技术水平和专业素养。知识目标能力目标素养目标学习目标理解JavaFX舞台、场景、场景图和节点。掌握第一个JavaFX程序的创建方式，以及JavaFX属性与属性绑定的方式。掌握JavaFX常用布局的使用方式，以及JavaFX的事件处理机制与动作事件的处理。掌握JavaFX基础控件、列表控件与菜单控件。掌握FXML文件的基本结构，以及FXML与Java代码的交互方式。01任务7-1模拟购物车添加商品功能JavaFX简介舞台和场景场景图和节点第一个JavaFX程序JavaFX属性JavaFX属性绑定任务7-1模拟购物车添加商品功能-JavaFX基础JavaFX简介Sun公司在2007年推出了JavaFX技术实现GUI的开发，它运行在JVM上，使用自己的编程语言，成为JavaFXScript。JavaFX是一个功能强大的JavaGUI工具包，它提供了丰富的图形和多媒体API，使得开发者能够创建出具有动态效果和丰富交互性的桌面和移动应用程序任务7-1模拟购物车添加商品功能-JavaFX基础舞台和场景在JavaFX中，舞台（Stage）和场景（Scene）是两个核心的概念，它们共同构成了JavaFX应用程序的用户界面。舞台是JavaFX应用程序的顶级容器，代表了应用程序的主窗口，它是用户与应用程序进行交互的窗口界面，处理诸如窗口的最小化、最大化、关闭等操作，同时能够控制应用程序的外观和行为。一个JavaFX应用程序可以有多个舞台，但通常只有一个主舞台，场景是JavaFX应用程序中的一个可视化容器，用于承载各种用户界面元素，如按钮、标签、文本框等。场景可以包含在舞台中，也可以在舞台之间进行切换。一个JavaFX应用程序中可以包含多个场景，每个场景可以有自己的布局和控件。任务7-1模拟购物车添加商品功能-JavaFX基础舞台和场景控制舞台的外观和行为的常用方法有以下3个，具体介绍如下setTitle(Stringtitle)：设置舞台的标题。setScene(Scenescene)：设置舞台的场景。show()：显示舞台。场景通常通过其构造函数来创建，指定其根节点、宽和高等属性。创建场景的构造函数有以下3个，具体介绍如下Scene(Parentroot)：使用指定的根节点创建一个场景对象，根节点对象可以是任何的Parent对象，通常使用某种面板（布局）对象作为根节点。Scene(Parentroot,doublewidth,doubleheight)：创建一个场景对象，width和height参数分别指定场景的宽度和高度。Scene(Parentroot,doublewidth,doubleheight,Paintfill)：创建一个场景对象，fill指定场景的背景填充颜色。任务7-1模拟购物车添加商品功能-JavaFX基础舞台和场景舞台、场景、面板和控件之间的关系是舞台是窗口，场景是舞台上的内容，面板是场景中的容器，控件是面板上的交互元素。舞台、场景、面板和控件的关系如图任务7-1模拟购物车添加商品功能-JavaFX基础场景图和节点JavaFX的图形用户界面通常称为场景图，场景图是一个层次化的树形结构，其中每个节点（Node）都是这个结构的一部分。这些节点可以是可视化的元素，例如矩形、圆形、文本或图像等，也可以是容器节点在JavaFX应用程序中，通常会创建一个Scene对象，它是场景图的根。然后，开发者会将各种节点添加到这个场景中，从而构建出完整的GUI。这些节点可以通过CSS进行样式化，并可以添加事件处理器来处理用户交互。此外，JavaFX还提供了FXML，它是一种基于XML的语言，用于声明性地定义场景图任务7-1模拟购物车添加商品功能-JavaFX基础第一个JavaFX程序JavaFX的图形用户界面通常称为场景图，场景图是一个层次化的树形结构，其中每个节点（Node）都是这个结构的一部分。这些节点可以是可视化的元素，例如矩形、圆形、文本或图像等，也可以是容器节点在JavaFX应用程序中，通常会创建一个Scene对象，它是场景图的根。然后，开发者会将各种节点添加到这个场景中，从而构建出完整的GUI。这些节点可以通过CSS进行样式化，并可以添加事件处理器来处理用户交互。此外，JavaFX还提供了FXML，它是一种基于XML的语言，用于声明性地定义场景图任务7-1模拟购物车添加商品功能-JavaFX基础第一个JavaFX程序如例7-1所示，首先在Eclipse中创建名为Chapter07的程序，在该程序的src文件夹中创建名为com.example.gui包，然后在该包中创建ExampleHello类继承Application类，详见ExampleHello.java1packagecom.example.gui;2importjavafx.application.Application;3importjavafx.scene.Scene;4importjavafx.scene.control.Label;5importjavafx.scene.layout.StackPane;6importjavafx.stage.Stage;7publicclassExampleHelloextendsApplication{8 @Override9 publicvoidstart(StageprimaryStage)throwsException{10 Labellabel=newLabel("第一个JavaFX程序");//创建一个标签

11 StackPanerootNode=newStackPane();//创建面板作为根节点

12 rootNode.getChildren().add(label);//将标签添加到根节点上

13 //创建场景，场景的宽为300像素，高为150像素，将根节点设置到场景中

14 Scenescene=newScene(rootNode,300,150);15 primaryStage.setScene(scene);//将场景设置到舞台中

16 primaryStage.setTitle("JavaFX程序");//设置舞台窗口标题

17 primaryStage.show();//显示舞台窗口

18 }19 publicstaticvoidmain(String[]args){20 launch(args);//启动JavaFX程序

21 }22}任务7-1模拟购物车添加商品功能-JavaFX基础第一个JavaFX程序上述代码中，Application类是JavaFX应用程序的入口点。当创建一个JavaFX应用程序时，创建的类需要继承Application类并重写start()方法，以便设置和显示用户界面。Application类的生命周期有3个方法，分别是init()方法、start()方法和stop()方法，这3个方法的具体介绍如下所示。

init()方法：应用程序初始化方法，用于执行各种初始化操作，但是不能创建舞台和场景对象，如果程序没有初始化部分，可以不需要重写该方法。

start()方法：调用init()方法后，会调用该方法开始执行程序，在该方法中可构建和设置场景。该方法是抽象方法，必须要重写。

stop()方法：应用程序停止方法，在该方法中可以释放和关闭有关资源，如果没有动作执行，不需要重写该方法。当运行JavaFX应用程序时，需要定义一个main()方法，在该方法中调用launch()方法启动JavaFX应用程序，launch()方法不仅创建Application类的实例，还调用start()方法。任务7-1模拟购物车添加商品功能-JavaFX属性与绑定JavaFX属性JavaFX提供了一种强大的属性机制，允许开发者创建响应式用户界面。JavaFX提供了各种Property子类来创建属性，这些子类提供了get()和set()方法来获取和设置属性的值。根据属性值的数据类型不同，属性的类型也会有所不同，对于数据类型double、float、int、String等对应的属性类型为DoubleProperty、FloatProperty、IntegerProperty、StringProperty；对于集合类型List、Set和Map对应的属性类型为ListProperty、SetProperty、MapProperty；所有这些属性类型都为抽象类，它们对应的实现类为SimpleXxxProperty，例如StringProperty对应的实现类SimpleStringProperty，这些实现类都定义在perty包中，通过这些实现类可以创建不同数据类型的属性。任务7-1模拟购物车添加商品功能-JavaFX属性与绑定JavaFX属性1.导入包假设创建一个字符串类型的属性，我们首先需要导入SimpleStringProperty类对应的包，示例代码如下。importperty.SimpleStringProperty;2.创建属性使用SimpleStringProperty类创建属性，假设创建一个字符串类型的属性name，示例代码如下。//第一种方式创建属性SimpleStringPropertyname=newSimpleStringProperty(this,"myStringProperty","");//第二种方式创建属性SimpleStringPropertyname=newSimpleStringProperty();任务7-1模拟购物车添加商品功能-JavaFX属性与绑定JavaFX属性3.获取和设置属性值使用get()和set()方法获取和设置属性的值，示例代码如下。StringcurrentName=name.get();//获取属性name的值name.set("小明");//设置属性name的值4.监听属性值的变化通过调用addListener()方法来监听属性值的变化，示例代码如下。name.addListener((observable,oldValue,newValue)->{ System.out.println("name的改变从"+oldValue+"改变为"+newValue);});上述示例代码中，oldValue表示修改之前的属性值，newValue表示新属性值。任务7-1模拟购物车添加商品功能-JavaFX属性与绑定JavaFX属性绑定JavaFX属性可以与其他属性或表达式进行绑定，以便当原始属性的值发生变化时，绑定属性的值也会自动更新。假设将创建的anotherProperty的值与前面创建的属性name的值绑定在一起，需要使用bind()方法，示例代码如下SimpleStringPropertyanotherProperty=newSimpleStringProperty();//将name的值与anotherProperty的值绑定在一起name.bind(anotherProperty);需要注意的是，在绑定属性之前，需要确保没有监听器或约束在尝试改变属性的值，否则可能会导致循环依赖或无限循环。如果之前绑定了属性，现在需要解除绑定，可以使用unbind()方法，示例代码如下name.unbind();//解绑属性任务7-1模拟购物车添加商品功能-JavaFX属性与绑定JavaFX属性绑定如例7-2所示，通过一个例子演示属性的绑定，首先在创建ExampleProperty类，在该类中通过属性绑定监听属性值的变化。详见ExampleProperty.java1packagecom.example.gui;2importperty.StringProperty;3importperty.SimpleStringProperty;4publicclassExampleProperty{5 publicstaticvoidmain(String[]args){6//创建两个SimpleStringProperty实例

7StringPropertyanotherProperty=newSimpleStringProperty();8StringPropertyname=newSimpleStringProperty();9name.addListener((observable,oldValue,newValue)->{10 System.out.println("name属性的值从"+oldValue+11"改变为"+newValue);12});13//将name属性与anotherProperty属性绑定在一起

14name.bind(anotherProperty);15//改变anotherProperty属性的值

16anotherProperty.set("小明");17//输出name属性的值

18System.out.println("name属性的值为"+name.get());19}20}任务7-1模拟购物车添加商品功能-JavaFX属性与绑定JavaFX属性绑定属性基本用法例子的运行结果如图1.在Chapter07程序中创建com.example.task包，用于存放本单元中每个任务的代码文件。2.在com.example.task包中创建ShoppingCartApp类，用于实现购物车添加商品的功能。3.定义2个SimpleIntegerProperty类型的属性totalNum与cardNum，分别用于存储商品购买的总数量与购物车中商品的总数量。4.调用addListener()方法监听商品购买总数量的属性totalNum。5.调用nextInt()方法输入要购买的商品（牙刷与毛巾）的数量。6.调用bind()方法将属性totalNum与cardNum绑定在一起。7.调用set()方法改变属性cardNum的值，并调用println()方法输出属性cardNum的值。代码参考教材中的ShoppingCartApp.java任务7-1模拟购物车添加商品功能-任务实现运行上述程序，控制台会输出要购买牙刷与毛巾数量的提示信息，输入完要购买的数量之后，按下Enter键，程序会计算购物车中商品的总数量，控制台输出的信息如图任务7-1模拟购物车添加商品功能-任务实现02任务7-2模拟购物结账功能水平布局垂直布局网格布局流式布局其他布局事件处理机制动作事件处理任务7-2模拟购物结账功能-JavaFX常用布局水平布局在JavaFX中，水平布局是使用HBox（HorizontalBox）类来实现的，水平布局中可以添加多个控件，这些控件都是按照水平方向（从左到右）排列的。HBox类中常用的构造方法如下所示HBox(doublespacing)：创建一个水平布局，spacing用于指定布局中控件之间的间距。HBox(Node·children)：创建一个水平布局，children用于指定布局中包含的控件。HBox(doublespacing,Node...children)：创建一个水平布局，并指定布局中的控件与控件之间的间距。常用的方法如下所示。setPadding(Insetsvalue)：设置水平布局中控件与布局边界之间的距离，参数Insets分别指定上、右、下、左间距，默认值是Insets.EMPTY。setSpacing(doublevalue)：设置水平布局中控件之间的间距。setStyle(Stringvalue)：设置水平布局的样式，类似于HTML元素的style属性。如例7-3所示，演示水平布局，首先在Chapter07程序的com.example.gui包中创建ExampleHorizontalLayout类，在该类中演示JavaFX的水平布局，详见ExampleHorizontalLayout.java任务7-2模拟购物结账功能-JavaFX常用布局1packagecom.example.gui;2......//省略导入包

3publicclassExampleHorizontalLayoutextendsApplication{4 @Override5 publicvoidstart(StageprimaryStage)throwsException{6 //创建一个BorderPane作为根布局

7 BorderPanerootPane=newBorderPane();8 HBoxhBox=newHBox();//创建水平布局

9 //设置布局边界的上、右、下、左与布局中控件之间的间距

10 hBox.setPadding(newInsets(10,8,10,8));11 hBox.setStyle("-fx-background-color:#445588;");12 hBox.getChildren().addAll(newLabel("水平布局"),13newButton("按钮1"),newButton("按钮2"));14 rootPane.setTop(hBox);15 //创建场景并添加到舞台

16 Scenescene=newScene(rootPane,250,100);17 primaryStage.setScene(scene);18 primaryStage.setTitle("水平布局");19 primaryStage.show();20 }21 publicstaticvoidmain(String[]args){22 launch(args);23 }24}水平布局的运行结果如图任务7-2模拟购物结账功能-JavaFX常用布局任务7-2模拟购物结账功能-JavaFX常用布局垂直布局垂直布局是使用VBox（VerticalBox）类来实现的，垂直布局中可以添加多个控件，这些控件都是按照垂直方向（从上到下）排列的。VBox类中定义的构造方法、属性各种常用方法与HBox类中的类似任务7-2模拟购物结账功能-JavaFX常用布局垂直布局如例7-4所示，演示垂直布局，首先在Chapter07程序的com.example.gui包中创建ExampleVerticalLayout类，在该类中演示JavaFX的垂直布局，详见ExampleVerticalLayout.java1packagecom.example.gui;2......//省略导入包

3publicclassExampleVerticalLayoutextendsApplication{4 @Override5 publicvoidstart(StageprimaryStage)throwsException{6 //创建一个BorderPane作为根布局

7BorderPanerootPane=newBorderPane();8//使用垂直布局

9VBoxleftBox=newVBox(10);//垂直间距10像素

10leftBox.setAlignment(Pos.TOP_LEFT);11leftBox.getChildren().addAll(12newLabel("垂直布局"),13newButton("按钮1"),14newButton("按钮2")15);16rootPane.setLeft(leftBox);17//创建场景并添加到舞台

18Scenescene=newScene(rootPane,250,100);19primaryStage.setScene(scene);20primaryStage.setTitle("垂直布局");21primaryStage.show();22 }23 publicstaticvoidmain(String[]args){24 launch(args);25 }26}任务7-2模拟购物结账功能-JavaFX常用布局垂直布局垂直布局的运行结果如图任务7-2模拟购物结账功能-JavaFX常用布局网络布局在JavaFX中，网格布局是一种通过创建二维网格来排列和管理子组件的布局方式，由GridPane类实现。网格布局非常灵活，允许精确控制组件在网格中的位置和大小。任务7-2模拟购物结账功能-JavaFX常用布局网络布局GridPane类只有一个默认的构造方法，创建GridPane对象后可以设置它的属性，常用的方法如下

setHgap(doublevalue)：设置控件水平间距。

setVgap(doublevalue)：设置控件垂直间距。

setPadding(Insetsvalue)：设置内容与边界的距离。

add(Nodechild,intcolumnIndex,introwIndex)：将控件添加到指定的单元格中。columnIndex与rowIndex分别为单元格列号和行号，网格窗口中左上角单元格的列号和行号为0。

add(Nodechild,intcolumnIndex,introwIndex,intcolspan,introwspan)：将控件添加到指定的单元格中。该方法用于一个控件占用多个单元格的情况，colspan为控件跨越的列数，rowspan为控件跨越的行数。

setConstraints(Nodechild,intcolumnIndex,introwIndex)：将控件添加到指定的单元格中。

setConstraints(Nodechild,intcolumnIndex,introwIndex,int,colspan,introwspan)：将控件添加到多个单元格中。

setGridLinesVisible(Booleanvalue)：设置是否显示网格线，默认值为false，表示不显示网格线。任务7-2模拟购物结账功能-JavaFX常用布局网络布局如例7-5所示，演示网格布局，首先在Chapter07程序的com.example.gui包中创建ExampleGridLayout类，在该类中演示JavaFX的网格布局，详见ExampleGridLayout.java1packagecom.example.gui;2......//省略导入包

3publicclassExampleGridLayoutextendsApplication{4 @Override5 publicvoidstart(StageprimaryStage)throwsException{6 //创建一个BorderPane作为根布局

7BorderPanerootPane=newBorderPane();8//使用网格布局

9GridPanecenterGrid=newGridPane();10centerGrid.setHgap(10);//网格之间的水平间距10像素

11centerGrid.setVgap(10);//网格之间的垂直间距10像素

12centerGrid.setAlignment(Pos.CENTER);13centerGrid.add(newButton("网格按钮1"),0,0);14centerGrid.add(newButton("网格按钮2"),1,0);15centerGrid.add(newButton("网格按钮3"),0,1);16centerGrid.add(newButton("网格按钮4"),1,1);17rootPane.setCenter(centerGrid);18//创建场景并添加到舞台

19Scenescene=newScene(rootPane,250,100);20primaryStage.setScene(scene);21primaryStage.setTitle("网格布局");22primaryStage.show();23}24publicstaticvoidmain(String[]args){25launch(args);26}27}任务7-2模拟购物结账功能-JavaFX常用布局网络布局网格布局的运行结果如图任务7-2模拟购物结账功能-JavaFX常用布局流式布局流式布局是指布局中的元素按照其在流中的顺序排列，当元素填满一行或一列时，它会移动到下一行或列，可以设置布局的行和列的间距，也可以设置布局边与节点之间的距离。FlowPane类常用的构造方法如下所示。

FlowPane(doublehgap,doublevgap)：创建一个流式布局，并指定子控件之间的水平间距和垂直间距。

FlowPane(doublehgap,doublevgap,Node···children)：创建一个流式布局，指定控件之间的水平和垂直间距，还指定包含的初始子控件。

FlowPane(Orientationorientation)：创建一个流式布局，并指定子控件排列的方向（水平或垂直)，以及控件之间间距为0。任务7-2模拟购物结账功能-JavaFX常用布局流式布局如例7-6所示，演示如何使用FlowPane类实现流式布局。首先在Chapter07程序的com.example.gui包中创建ExampleFlowLayout类，在该类中使用FlowPane类实现流式布局，详见xampleFlowLayout.java1packagecom.example.gui;2......//省略导入包

3publicclassExampleFlowLayoutextendsApplication{4 @Override5 publicvoidstart(StageprimaryStage){6 FlowPaneroot=newFlowPane();//创建流式布局

7 //设置布局中控件的排列方向

8//root.setOrientation(Orientation.VERTICAL);//垂直排列

9 root.setOrientation(Orientation.HORIZONTAL);//水平排列

10 root.setPadding(newInsets(10));//设置内边距

11 root.setVgap(8);//设置子控件之间在垂直方向的间距

12 root.setHgap(8);//设置子控件之间在水平方向的间距

13 for(inti=0;i<10;i++){14 Buttonbutton=newButton("按钮"+(i+1));15 root.getChildren().add(button);16 }17 Scenescene=newScene(root,300,150);//设置场景大小

18 primaryStage.setTitle("流式布局");19 primaryStage.setScene(scene);20 primaryStage.show();21 }22 publicstaticvoidmain(String[]args){23 launch(args);24 }25 }任务7-2模拟购物结账功能-JavaFX常用布局流式布局上述代码中，第13~16行代码使用for循环向流式布局中添加10个按钮，这些按钮会按照它们在流式布局中的顺序水平排列。流式布局中按钮水平排列的运行结果如左下图如果想让流式布局中的按钮垂直排列，可以将例7-7中第8行的注释去掉，第9行添加注释，再次运行程序，流式布局中按钮垂直排列的运行结果如右下图任务7-2模拟购物结账功能-JavaFX常用布局其他布局JavaFX中还有其他常用布局包括边框布局、锚点布局、堆叠布局和分割面板布局，下面介绍这4种布局:边框布局、锚点布局、堆叠布局、分割面板布局边框布局在JavaFX中，边框布局主要由BorderPane类实现，边框布局允许将内容添加到五个区域，分别是顶部（top）、右侧（right）、底部（bottom）、左侧（left）和中心（center）。任务7-2模拟购物结账功能-JavaFX常用布局其他布局边框布局边框布局的示例代码如下。

1//创建一个BorderPane2BorderPaneborderPane=newBorderPane();3borderPane.setPadding(newInsets(10,10,10,10));//设置边距

4//创建并设置顶部内容

5ButtontopButton=newButton("顶部区域");6borderPane.setTop(topButton);7//创建并设置左侧内容

8ButtonleftButton=newButton("左侧区域");9borderPane.setLeft(leftButton);10//创建并设置右侧内容

11ButtonrightButton=newButton("右侧区域");12borderPane.setRight(rightButton);13//创建并设置底部内容

14ButtonbottomButton=newButton("底部区域");15borderPane.setBottom(bottomButton);16//创建并设置中心内容

17StackPanecenterPane=newStackPane();18centerPane.setAlignment(Pos.CENTER);//设置内容在StackPane中居中

19ButtoncenterButton=newButton("中心区域");20centerPane.getChildren().add(centerButton);21borderPane.setCenter(centerPane);任务7-2模拟购物结账功能-JavaFX常用布局其他布局锚点布局锚点布局主要由AnchorPane类实现，它允许将控件锚定到布局面板的特定位置，通过设置控件与布局面板边缘的像素距离来定位控件。假设将一个按钮放置在AnchorPane的左下角，并且距离底部和右侧各100像素，示例代码如下1 Buttonbutton=newButton("左下角按钮");2 AnchorPaneanchorPane=newAnchorPane();3 AnchorPane.setBottomAnchor(button,100.0);4 AnchorPane.setRightAnchor(button,100.0);5 anchorPane.getChildren().add(button);任务7-2模拟购物结账功能-JavaFX常用布局其他布局堆叠布局堆叠布局主要由StackPane类实现，它通过将多个组件按照一定顺序垂直堆叠，形成一个垂直排列的界面。堆叠布局的示例代码如下。

1 //创建一个StackPane容器

2 StackPanestackPane=newStackPane();3 //创建3个按钮，作为StackPane的子节点

4 Buttonbutton1=newButton("按钮1");5 Buttonbutton2=newButton("按钮2");6 Buttonbutton3=newButton("按钮3");7 //将按钮添加到StackPane中，后添加的按钮会位于最前面

8 stackPane.getChildren().addAll(button1,button2,button3);任务7-2模拟购物结账功能-JavaFX常用布局其他布局分割面板布局分割面板布局由SplitPane类实现，它是一种用户界面设计布局，将窗口或容器区域分割成两个或多个可调整大小的区域，以便同时显示和管理不同的内容或控件。这种布局方式常用于需要同时显示和操作多个数据或视图的情况下。假设将左侧面板与右侧面板通过一个分割条分割，示例代码如下。

1 //创建两个VBox作为SplitPane的初始部分

2 VBoxleftPane=newVBox(5,newButton("左侧面板内容1"),3 newButton("左侧面板内容"));4 leftPane.setPadding(newInsets(10));5 leftPane.setAlignment(Pos.TOP_LEFT);6 VBoxrightPane=newVBox(5,newButton("右侧面板内容1"),7 newButton("右侧面板内容"));8 rightPane.setPadding(newInsets(10));9 rightPane.setAlignment(Pos.TOP_LEFT);10 //创建一个水平的SplitPane，并添加两个VBox11 SplitPanehorizontalSplitPane=newSplitPane();12 horizontalSplitPane.getItems().addAll(leftPane,rightPane);13 //设置分割条的位置（从左到右的比例）

14 horizontalSplitPane.setDividerPositions(0.3f);任务7-2模拟购物结账功能-JavaFX常用布局其他布局如例7-7所示，演示边框布局、锚点布局、堆叠布局和分割面板布局的使用。首先在Chapter07程序的com.example.gui包中创建ExampleOtherLayout类，在该类中实现如何使用不同的布局管理器展示不同的效果，详见ExampleOtherLayout.java1packagecom.example.gui;2......//省略导入包

3publicclassExampleOtherLayoutextendsApplication{4@Override5publicvoidstart(StageprimaryStage){6//创建一个BorderPane作为根布局

7BorderPanerootPane=newBorderPane();8rootPane.setPadding(newInsets(10));9//顶部：菜单条使用BorderPane的顶部区域

10MenuBarmenuBar=newMenuBar();11MenumenuFile=newMenu("文件");12MenuItemopenItem=newMenuItem("打开");13menuFile.getItems().add(openItem);14menuBar.getMenus().add(menuFile);15rootPane.setTop(menuBar);16//左侧：侧边栏BorderPane的左侧区域，AnchorPane来定位控件

17AnchorPanesidebar=newAnchorPane();18sidebar.setBackground(newBackground(newBackgroundFill(19Color.LIGHTGRAY,null,Insets.EMPTY)));20ButtonsidebarButton=newButton("侧边栏内容");21AnchorPane.setTopAnchor(sidebarButton,10.0);22AnchorPane.setLeftAnchor(sidebarButton,10.0);23sidebar.getChildren().add(sidebarButton);24rootPane.setLeft(sidebar);25//右侧：分割面板使用SplitPane26SplitPanesplitPane=newSplitPane();27splitPane.setDividerPositions(0.3f,0.7f);//设置分割位置

28//第一个区域：使用StackPane来堆叠控件

29StackPanestackPane1=newStackPane();30Buttonbutton1=newButton("按钮1在StackPane1中");31Buttonbutton2=newButton("按钮2在StackPane1中");32//按钮会堆叠在一起

33stackPane1.getChildren().addAll(button1,button2);34//第二个区域：使用另一个StackPane35StackPanestackPane2=newStackPane();36Buttonbutton3=newButton("按钮3在StackPane2中");37Buttonbutton4=newButton("按钮4在StackPane2中");38//按钮会堆叠在一起

39stackPane2.getChildren().addAll(button3,button4);40//添加两个StackPane到SplitPane41splitPane.getItems().addAll(stackPane1,stackPane2);42rootPane.setCenter(splitPane);43//创建一个场景并设置给舞台

44Scenescene=newScene(rootPane,800,600);45//设置舞台的标题并显示舞台

46primaryStage.setTitle("其他布局");47primaryStage.setScene(scene);48primaryStage.show();49}50 publicstaticvoidmain(String[]args){51 launch(args);52 }53}任务7-2模拟购物结账功能-JavaFX常用布局其他布局其他布局的运行结果如图任务7-2模拟购物结账功能-JavaFX事件处理事件处理机制JavaFX中的事件处理专门用于响应用户的操作，例如，响应用户的单击鼠标、按下键盘等操作。在JavaFX事件处理的过程中，主要涉及到三个对象，分别是事件源（EventSource）、事件对象（Event）和监听器（Listener），具体介绍如下。事件源：事件发生的场所，通常是产生事件的组件，例如窗口、按钮、菜单等。事件对象：封装了GUI组件上发生的特定事件（通常是用户的一次操作）。监听器：负责监听事件源上发生的事件，并对各种事件做出相应处理的对象（对象中包含事件处理器）。任务7-2模拟购物结账功能-JavaFX事件处理事件处理机制事件源、事件对象和监听器在整个事件处理过程中都起着非常重要的作用，它们彼此之间有着非常紧密的联系。下面用一个图例来描述事件处理的工作流程，如图任务7-2模拟购物结账功能-JavaFX事件处理动作事件处理ActionEvent表示某种动作的事件，如按钮被单击、菜单项被选择等都会发生对应的动作事件。动作事件的处理包括两部分内容，分别是注册事件处理器和实现事件处理，其中，注册事件处理器的方法有2个，分别是使用控件调用的setOnAction()方法和Node类定义的addEventHandler()方法，这两个方法的语法格式如下所示。setOnAction(EventHandler<ActionEvent>handler)addEventHandler(ActionEventeventType,EventHandler<ActionEvent>handler)上述语法格式中的参数handler是事件处理器对象，eventType是事件类型。当处理ActionEvent事件时，可以使用常见的三种方式来实现，分别是通过内部类实现、匿名内部类实现和Lambda表达式实现任务7-2模拟购物结账功能-JavaFX事件处理动作事件处理通过内部类实现动作事件假设使用内部类实现ok按钮与cancel按钮的单击事件，示例代码如下//使用两种方式分别注册ok按钮和cancel按钮的事件处理器ok.setOnAction(newButtonHandler());cancel.addEventHandler(ActionEvent.ACTION,newButtonHandler());//内部类实现事件处理classButtonHandlerimplementsEventHandler<ActionEvent>{ publicvoidhandle(ActionEventevent){ if((Button)(event.getSource())==ok){ //处理ok按钮的单击事件的代码

}elseif(event.getSource()==cancel){ //处理cancel按钮的单击事件的代码

} }}任务7-2模拟购物结账功能-JavaFX事件处理动作事件处理通过匿名内部类实现动作事件假设使用匿名内部类实现button按钮的单击事件，示例代码如下。button.setOnAction(newEventHandler<ActionEvent>(){@Overridepublicvoidhandle(ActionEventevent){//处理动作事件的代码

}});任务7-2模拟购物结账功能-JavaFX事件处理动作事件处理通过Lambda表达式实现动作事件假设使用Lambda表达式实现button按钮的单击事件，示例代码如下。button.setOnAction(event->{ //处理动作事件的代码});1.在Chapter07程序的com.example.task包中创建一个水果实体类Fruit，用于封装购买的水果信息，这些信息包括水果名称、图片路径和水果价格。2.在com.example.task包中创建CheckOutApp类继承Application类，用于实现购物结账功能。3.在CheckOutApp类中创建createFruitBox()方法，在该方法中创建一个包含水果图片、名称和价格的VBox（垂直布局）。4.在CheckOutApp类中创建createCheckoutBox()方法，在该方法中创建一个包含“结账”按钮与总价信息的VBox。5.在CheckOutApp类中创建start()方法，在该方法中将放置好水果信息的垂直布局与放置好结账信息的垂直布局放在一个水平布局中，并将水平布局加载到根布局中。6.在main()方法中调用launch()方法启动程序。代码参考教材中的Fruit.javaCheckOutApp.java任务7-2模拟购物结账功能-任务实现上述代码中的Label、Button和ImageView控件会在任务7-3中详细讲解，此处只做简单的使用。运行CheckOutApp类，程序会弹出一个购物结账窗口，如图任务7-2模拟购物结账功能-任务实现单击“结账”按钮，程序会将已购买的苹果和香蕉的价格加起来作为总价显示在“结账”按钮下方，如图03任务7-3购物满意度问卷调查ImageView控件Label控件Button控件CheckBox控件RadioButton控件文本输入控件列表控件菜单控件任务7-3购物满意度问卷调查-JavaFX基础控件ImageView控件ImageView控件用于显示图像，支持图像的缩放、旋转等变换ImageView控件的常用方法方法名称说明ImageView()创建一个ImageView对象，不与任何图像关联ImageView(Imageimage)使用指定的图像创建一个ImageView对象ImageView(StringfileURL)使用指定的文件或URL加载图像创建一个ImageView对象setFitHeight(doublevalue)设置图像高度setFitWidth(doublevalue)设置图像宽度setRotate(doublevalue)设置图像的旋转角度，以度为单位。value的值为正值表示顺时针旋转，为负值表示逆时针旋转setPreserveRatio(booleanvalue)指定图像是否保持其原始纵横比。默认情况下，value值为true，表示图像在缩放时将保持其原始比例，否则，图像在缩放时失去其原始比例setViewport(Rectangle2Dvalue)用于定义图像的可见区域（视口），通过调整视口的位置和大小，可以实现图像的滚动和裁剪效果setOpacity(doublevalue)设置图像的透明度，value是一个介于0.0（完全透明）和1.0（完全不透明）之间的双精度浮点数任务7-3购物满意度问卷调查-JavaFX基础控件ImageView控件如例7-8所示，演示ImageView控件的使用，首先在Chapter07程序中创建resources文件夹，该文件夹用于存放资源文件，将需要显示在ImageView控件上的图片hamster.png导入到resources文件夹中。然后在程序的com.example.gui包中创建ExampleImageView类，在该类中设置ImageView控件的样式，详见ExampleImageView.java……try{8//加载小仓鼠图像

9input1=newFileInputStream("resources/hamster.png");10input2=newFileInputStream("resources/hamster.png");11input3=newFileInputStream("resources/hamster.png");12Imageimage1=newImage(input1);13Imageimage2=newImage(input2);14Imageimage3=newImage(input3);15//第一个ImageView：显示原图，宽和高分别是200像素

16ImageViewimageView1=newImageView(image1);17imageView1.setFitHeight(200);//容器高度为20018imageView1.setFitWidth(200);//容器宽度为20019//第二个ImageView：半透明并调整视口

20ImageViewimageView2=newImageView(image2);21imageView2.setOpacity(0.5);//半透明

22//调整视口到(50,50)开始，宽度和高度都为10023imageView2.setViewport(newjavafx.geometry.Rectangle2D(240,100));25//第三个ImageView：自定义尺寸并旋转

26ImageViewimageView3=newImageView(image3);27imageView3.setFitHeight(150);//自定义高度

28imageView3.setFitWidth(150);//自定义宽度

29imageView3.setRotate(30);//旋转30度

30//垂直布局

31VBoxvbox=newVBox(10);32vbox.getChildren().addAll(imageView1,imageView2,imageView3);33vbox.setAlignment(Pos.CENTER);34vbox.setPadding(newInsets(10));……任务7-3购物满意度问卷调查-JavaFX基础控件Label控件Label控件用于显示不可编辑的文本和图片，它可以设置文本的字体、颜色、对齐方式、下划线、删除线等。Label控件的常用方法方法名称说明Label()创建一个空标签Label(Stringtext)使用指定文本创建一个标签Label(Stringtext,Nodegraphic)使用指定文本和图形创建一个标签，graphic可以是一个形状、图像或其他控件setGraphic(Nodevalue)设置标签的图形，该图形可以是图片或形状setAlignment(Posvalue)设置标签中文本和图形的对齐方式，对齐方式使用Pos枚举常量指定，例如Pos.CENTER表示居中对齐setContentDisplay(ContentDisplayvalue)设置标签中文本与图形内容的显示方式，显示方式用枚举常量ContentDisplay指定，例如ContentDisplay.LEFT表示文本或图形在标签的左侧显示setText(Stringvalue)设置标签中的文本setFont(Fontfont)设置标签中文本的字体setTextFill(Paintvalue)设置文本颜色setUnderline(booleanvalue)设置文本是否加下画线setWrapText(booleanvalue)设置如果文本超过了宽度，是否要换行任务7-3购物满意度问卷调查-JavaFX基础控件Label控件如例7-9所示，演示Label控件的使用，首先将需要显示在Label控件上的图片clock.png导入到程序Chapter07的resources文件夹中。然后在程序的com.example.gui包中创建ExampleLabel类，在该类中设置Label控件的样式，具体代码详见ExampleLabel.java……8 try{9 //加载咖啡的图像

10 input=newFileInputStream("resources/coffee.png");11 Imageimage=newImage(input);12 coffee=newImageView(image);13 coffee.setFitHeight(54);14 coffee.setFitWidth(64);15 }catch(FileNotFoundExceptione){16 e.printStackTrace();17 }18//创建一个按钮，并设置按钮的图形和内容

19ButtonbrewButton=newButton("冲泡咖啡",coffee);20//为按钮添加单击事件处理器

21brewButton.setOnAction(event->{22//模拟咖啡机冲泡咖啡的过程

23System.out.println("咖啡机开始冲泡咖啡...");24try{25Thread.sleep(2000);//模拟2秒的冲泡时间

26}catch(InterruptedExceptione){27e.printStackTrace();28}29System.out.println("咖啡已冲泡完成！");30});31//创建布局容器和场景

32StackPaneroot=newStackPane();//使用StackPane作为根容器

33root.setAlignment(Pos.CENTER);//布局居中

34root.getChildren().add(brewButton);//添加按钮到容器中

35Scenescene=newScene(root,300,200);//创建一个场景并设置大小

36scene.setFill(Color.WHITE);//设置场景背景色为白色

37//设置主舞台的场景并显示

38primaryStage.setScene(scene);39primaryStage.setTitle("按钮示例");40primaryStage.show();41}……任务7-3购物满意度问卷调查-JavaFX基础控件Button控件Button控件用于显示按钮，是JavaFX中的一个基本控件，既可以显示文本，又可以显示图形，同时也允许用户通过单击来触发某个动作或事件Button控件的常用方法方法名称说明Button()创建一个没有文本信息的按钮Button(Stringtext)创建带指