java程序設計任務式教程 課件 7-JavaFX圖形用戶界面

JaVa程序設計任務式教程01任務7-1模擬購物車添加商品功能02任務7-2模擬購物結(jié)賬功能04任務7-4使用FXML實現(xiàn)購物滿意度問卷調(diào)查目錄CONTNETS單元七

JavaFX圖形用戶界面03任務7-3購物滿意度問卷調(diào)查單元目標能夠創(chuàng)建第一個JavaFX程序。能夠使用JavaFX屬性與屬性綁定模擬購物車添加商品的功能。能夠使用JavaFX常用布局與事件處理模擬購物結(jié)賬功能。能夠使用JavaFX基礎控件與列表控件實現(xiàn)購物滿意度問卷調(diào)查。能夠使用FXML實現(xiàn)購物滿意度問卷調(diào)查。培養(yǎng)學生在JavaFX應用程序的設計和開發(fā)中運用創(chuàng)新思維，創(chuàng)造出具有獨特性和競爭力的產(chǎn)品。培養(yǎng)學生保持對JavaFX及其相關技術棧的關注和學習，不斷提升學生的技術水平和專業(yè)素養(yǎng)。知識目標能力目標素養(yǎng)目標學習目標理解JavaFX舞臺、場景、場景圖和節(jié)點。掌握第一個JavaFX程序的創(chuàng)建方式，以及JavaFX屬性與屬性綁定的方式。掌握JavaFX常用布局的使用方式，以及JavaFX的事件處理機制與動作事件的處理。掌握JavaFX基礎控件、列表控件與菜單控件。掌握FXML文件的基本結(jié)構(gòu)，以及FXML與Java代碼的交互方式。01任務7-1模擬購物車添加商品功能JavaFX簡介舞臺和場景場景圖和節(jié)點第一個JavaFX程序JavaFX屬性JavaFX屬性綁定任務7-1模擬購物車添加商品功能-JavaFX基礎JavaFX簡介Sun公司在2007年推出了JavaFX技術實現(xiàn)GUI的開發(fā)，它運行在JVM上，使用自己的編程語言，成為JavaFXScript。JavaFX是一個功能強大的JavaGUI工具包，它提供了豐富的圖形和多媒體API，使得開發(fā)者能夠創(chuàng)建出具有動態(tài)效果和豐富交互性的桌面和移動應用程序任務7-1模擬購物車添加商品功能-JavaFX基礎舞臺和場景在JavaFX中，舞臺（Stage）和場景（Scene）是兩個核心的概念，它們共同構(gòu)成了JavaFX應用程序的用戶界面。舞臺是JavaFX應用程序的頂級容器，代表了應用程序的主窗口，它是用戶與應用程序進行交互的窗口界面，處理諸如窗口的最小化、最大化、關閉等操作，同時能夠控制應用程序的外觀和行為。一個JavaFX應用程序可以有多個舞臺，但通常只有一個主舞臺，場景是JavaFX應用程序中的一個可視化容器，用于承載各種用戶界面元素，如按鈕、標簽、文本框等。場景可以包含在舞臺中，也可以在舞臺之間進行切換。一個JavaFX應用程序中可以包含多個場景，每個場景可以有自己的布局和控件。任務7-1模擬購物車添加商品功能-JavaFX基礎舞臺和場景控制舞臺的外觀和行為的常用方法有以下3個，具體介紹如下setTitle(Stringtitle)：設置舞臺的標題。setScene(Scenescene)：設置舞臺的場景。show()：顯示舞臺。場景通常通過其構(gòu)造函數(shù)來創(chuàng)建，指定其根節(jié)點、寬和高等屬性。創(chuàng)建場景的構(gòu)造函數(shù)有以下3個，具體介紹如下Scene(Parentroot)：使用指定的根節(jié)點創(chuàng)建一個場景對象，根節(jié)點對象可以是任何的Parent對象，通常使用某種面板（布局）對象作為根節(jié)點。Scene(Parentroot,doublewidth,doubleheight)：創(chuàng)建一個場景對象，width和height參數(shù)分別指定場景的寬度和高度。Scene(Parentroot,doublewidth,doubleheight,Paintfill)：創(chuàng)建一個場景對象，fill指定場景的背景填充顏色。任務7-1模擬購物車添加商品功能-JavaFX基礎舞臺和場景舞臺、場景、面板和控件之間的關系是舞臺是窗口，場景是舞臺上的內(nèi)容，面板是場景中的容器，控件是面板上的交互元素。舞臺、場景、面板和控件的關系如圖任務7-1模擬購物車添加商品功能-JavaFX基礎場景圖和節(jié)點JavaFX的圖形用戶界面通常稱為場景圖，場景圖是一個層次化的樹形結(jié)構(gòu)，其中每個節(jié)點（Node）都是這個結(jié)構(gòu)的一部分。這些節(jié)點可以是可視化的元素，例如矩形、圓形、文本或圖像等，也可以是容器節(jié)點在JavaFX應用程序中，通常會創(chuàng)建一個Scene對象，它是場景圖的根。然后，開發(fā)者會將各種節(jié)點添加到這個場景中，從而構(gòu)建出完整的GUI。這些節(jié)點可以通過CSS進行樣式化，并可以添加事件處理器來處理用戶交互。此外，JavaFX還提供了FXML，它是一種基于XML的語言，用于聲明性地定義場景圖任務7-1模擬購物車添加商品功能-JavaFX基礎第一個JavaFX程序JavaFX的圖形用戶界面通常稱為場景圖，場景圖是一個層次化的樹形結(jié)構(gòu)，其中每個節(jié)點（Node）都是這個結(jié)構(gòu)的一部分。這些節(jié)點可以是可視化的元素，例如矩形、圓形、文本或圖像等，也可以是容器節(jié)點在JavaFX應用程序中，通常會創(chuàng)建一個Scene對象，它是場景圖的根。然后，開發(fā)者會將各種節(jié)點添加到這個場景中，從而構(gòu)建出完整的GUI。這些節(jié)點可以通過CSS進行樣式化，并可以添加事件處理器來處理用戶交互。此外，JavaFX還提供了FXML，它是一種基于XML的語言，用于聲明性地定義場景圖任務7-1模擬購物車添加商品功能-JavaFX基礎第一個JavaFX程序如例7-1所示，首先在Eclipse中創(chuàng)建名為Chapter07的程序，在該程序的src文件夾中創(chuàng)建名為com.example.gui包，然后在該包中創(chuàng)建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程序");//創(chuàng)建一個標簽

11 StackPanerootNode=newStackPane();//創(chuàng)建面板作為根節(jié)點

12 rootNode.getChildren().add(label);//將標簽添加到根節(jié)點上

13 //創(chuàng)建場景，場景的寬為300像素，高為150像素，將根節(jié)點設置到場景中

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應用程序的入口點。當創(chuàng)建一個JavaFX應用程序時，創(chuàng)建的類需要繼承Application類并重寫start()方法，以便設置和顯示用戶界面。Application類的生命周期有3個方法，分別是init()方法、start()方法和stop()方法，這3個方法的具體介紹如下所示。

init()方法：應用程序初始化方法，用于執(zhí)行各種初始化操作，但是不能創(chuàng)建舞臺和場景對象，如果程序沒有初始化部分，可以不需要重寫該方法。

start()方法：調(diào)用init()方法后，會調(diào)用該方法開始執(zhí)行程序，在該方法中可構(gòu)建和設置場景。該方法是抽象方法，必須要重寫。

stop()方法：應用程序停止方法，在該方法中可以釋放和關閉有關資源，如果沒有動作執(zhí)行，不需要重寫該方法。當運行JavaFX應用程序時，需要定義一個main()方法，在該方法中調(diào)用launch()方法啟動JavaFX應用程序，launch()方法不僅創(chuàng)建Application類的實例，還調(diào)用start()方法。任務7-1模擬購物車添加商品功能-JavaFX屬性與綁定JavaFX屬性JavaFX提供了一種強大的屬性機制，允許開發(fā)者創(chuàng)建響應式用戶界面。JavaFX提供了各種Property子類來創(chuàng)建屬性，這些子類提供了get()和set()方法來獲取和設置屬性的值。根據(jù)屬性值的數(shù)據(jù)類型不同，屬性的類型也會有所不同，對于數(shù)據(jù)類型double、float、int、String等對應的屬性類型為DoubleProperty、FloatProperty、IntegerProperty、StringProperty；對于集合類型List、Set和Map對應的屬性類型為ListProperty、SetProperty、MapProperty；所有這些屬性類型都為抽象類，它們對應的實現(xiàn)類為SimpleXxxProperty，例如StringProperty對應的實現(xiàn)類SimpleStringProperty，這些實現(xiàn)類都定義在perty包中，通過這些實現(xiàn)類可以創(chuàng)建不同數(shù)據(jù)類型的屬性。任務7-1模擬購物車添加商品功能-JavaFX屬性與綁定JavaFX屬性1.導入包假設創(chuàng)建一個字符串類型的屬性，我們首先需要導入SimpleStringProperty類對應的包，示例代碼如下。importperty.SimpleStringProperty;2.創(chuàng)建屬性使用SimpleStringProperty類創(chuàng)建屬性，假設創(chuàng)建一個字符串類型的屬性name，示例代碼如下。//第一種方式創(chuàng)建屬性SimpleStringPropertyname=newSimpleStringProperty(this,"myStringProperty","");//第二種方式創(chuàng)建屬性SimpleStringPropertyname=newSimpleStringProperty();任務7-1模擬購物車添加商品功能-JavaFX屬性與綁定JavaFX屬性3.獲取和設置屬性值使用get()和set()方法獲取和設置屬性的值，示例代碼如下。StringcurrentName=name.get();//獲取屬性name的值name.set("小明");//設置屬性name的值4.監(jiān)聽屬性值的變化通過調(diào)用addListener()方法來監(jiān)聽屬性值的變化，示例代碼如下。name.addListener((observable,oldValue,newValue)->{ System.out.println("name的改變從"+oldValue+"改變?yōu)?+newValue);});上述示例代碼中，oldValue表示修改之前的屬性值，newValue表示新屬性值。任務7-1模擬購物車添加商品功能-JavaFX屬性與綁定JavaFX屬性綁定JavaFX屬性可以與其他屬性或表達式進行綁定，以便當原始屬性的值發(fā)生變化時，綁定屬性的值也會自動更新。假設將創(chuàng)建的anotherProperty的值與前面創(chuàng)建的屬性name的值綁定在一起，需要使用bind()方法，示例代碼如下SimpleStringPropertyanotherProperty=newSimpleStringProperty();//將name的值與anotherProperty的值綁定在一起name.bind(anotherProperty);需要注意的是，在綁定屬性之前，需要確保沒有監(jiān)聽器或約束在嘗試改變屬性的值，否則可能會導致循環(huán)依賴或無限循環(huán)。如果之前綁定了屬性，現(xiàn)在需要解除綁定，可以使用unbind()方法，示例代碼如下name.unbind();//解綁屬性任務7-1模擬購物車添加商品功能-JavaFX屬性與綁定JavaFX屬性綁定如例7-2所示，通過一個例子演示屬性的綁定，首先在創(chuàng)建ExampleProperty類，在該類中通過屬性綁定監(jiān)聽屬性值的變化。詳見ExampleProperty.java1packagecom.example.gui;2importperty.StringProperty;3importperty.SimpleStringProperty;4publicclassExampleProperty{5 publicstaticvoidmain(String[]args){6//創(chuàng)建兩個SimpleStringProperty實例

7StringPropertyanotherProperty=newSimpleStringProperty();8StringPropertyname=newSimpleStringProperty();9name.addListener((observable,oldValue,newValue)->{10 System.out.println("name屬性的值從"+oldValue+11"改變?yōu)?+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屬性綁定屬性基本用法例子的運行結(jié)果如圖1.在Chapter07程序中創(chuàng)建com.example.task包，用于存放本單元中每個任務的代碼文件。2.在com.example.task包中創(chuàng)建ShoppingCartApp類，用于實現(xiàn)購物車添加商品的功能。3.定義2個SimpleIntegerProperty類型的屬性totalNum與cardNum，分別用于存儲商品購買的總數(shù)量與購物車中商品的總數(shù)量。4.調(diào)用addListener()方法監(jiān)聽商品購買總數(shù)量的屬性totalNum。5.調(diào)用nextInt()方法輸入要購買的商品（牙刷與毛巾）的數(shù)量。6.調(diào)用bind()方法將屬性totalNum與cardNum綁定在一起。7.調(diào)用set()方法改變屬性cardNum的值，并調(diào)用println()方法輸出屬性cardNum的值。代碼參考教材中的ShoppingCartApp.java任務7-1模擬購物車添加商品功能-任務實現(xiàn)運行上述程序，控制臺會輸出要購買牙刷與毛巾數(shù)量的提示信息，輸入完要購買的數(shù)量之后，按下Enter鍵，程序會計算購物車中商品的總數(shù)量，控制臺輸出的信息如圖任務7-1模擬購物車添加商品功能-任務實現(xiàn)02任務7-2模擬購物結(jié)賬功能水平布局垂直布局網(wǎng)格布局流式布局其他布局事件處理機制動作事件處理任務7-2模擬購物結(jié)賬功能-JavaFX常用布局水平布局在JavaFX中，水平布局是使用HBox（HorizontalBox）類來實現(xiàn)的，水平布局中可以添加多個控件，這些控件都是按照水平方向（從左到右）排列的。HBox類中常用的構(gòu)造方法如下所示HBox(doublespacing)：創(chuàng)建一個水平布局，spacing用于指定布局中控件之間的間距。HBox(Node·children)：創(chuàng)建一個水平布局，children用于指定布局中包含的控件。HBox(doublespacing,Node...children)：創(chuàng)建一個水平布局，并指定布局中的控件與控件之間的間距。常用的方法如下所示。setPadding(Insetsvalue)：設置水平布局中控件與布局邊界之間的距離，參數(shù)Insets分別指定上、右、下、左間距，默認值是Insets.EMPTY。setSpacing(doublevalue)：設置水平布局中控件之間的間距。setStyle(Stringvalue)：設置水平布局的樣式，類似于HTML元素的style屬性。如例7-3所示，演示水平布局，首先在Chapter07程序的com.example.gui包中創(chuàng)建ExampleHorizontalLayout類，在該類中演示JavaFX的水平布局，詳見ExampleHorizontalLayout.java任務7-2模擬購物結(jié)賬功能-JavaFX常用布局1packagecom.example.gui;2......//省略導入包

3publicclassExampleHorizontalLayoutextendsApplication{4 @Override5 publicvoidstart(StageprimaryStage)throwsException{6 //創(chuàng)建一個BorderPane作為根布局

7 BorderPanerootPane=newBorderPane();8 HBoxhBox=newHBox();//創(chuàng)建水平布局

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 //創(chuàng)建場景并添加到舞臺

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}水平布局的運行結(jié)果如圖任務7-2模擬購物結(jié)賬功能-JavaFX常用布局任務7-2模擬購物結(jié)賬功能-JavaFX常用布局垂直布局垂直布局是使用VBox（VerticalBox）類來實現(xiàn)的，垂直布局中可以添加多個控件，這些控件都是按照垂直方向（從上到下）排列的。VBox類中定義的構(gòu)造方法、屬性各種常用方法與HBox類中的類似任務7-2模擬購物結(jié)賬功能-JavaFX常用布局垂直布局如例7-4所示，演示垂直布局，首先在Chapter07程序的com.example.gui包中創(chuàng)建ExampleVerticalLayout類，在該類中演示JavaFX的垂直布局，詳見ExampleVerticalLayout.java1packagecom.example.gui;2......//省略導入包

3publicclassExampleVerticalLayoutextendsApplication{4 @Override5 publicvoidstart(StageprimaryStage)throwsException{6 //創(chuàng)建一個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//創(chuàng)建場景并添加到舞臺

18Scenescene=newScene(rootPane,250,100);19primaryStage.setScene(scene);20primaryStage.setTitle("垂直布局");21primaryStage.show();22 }23 publicstaticvoidmain(String[]args){24 launch(args);25 }26}任務7-2模擬購物結(jié)賬功能-JavaFX常用布局垂直布局垂直布局的運行結(jié)果如圖任務7-2模擬購物結(jié)賬功能-JavaFX常用布局網(wǎng)絡布局在JavaFX中，網(wǎng)格布局是一種通過創(chuàng)建二維網(wǎng)格來排列和管理子組件的布局方式，由GridPane類實現(xiàn)。網(wǎng)格布局非常靈活，允許精確控制組件在網(wǎng)格中的位置和大小。任務7-2模擬購物結(jié)賬功能-JavaFX常用布局網(wǎng)絡布局GridPane類只有一個默認的構(gòu)造方法，創(chuàng)建GridPane對象后可以設置它的屬性，常用的方法如下

setHgap(doublevalue)：設置控件水平間距。

setVgap(doublevalue)：設置控件垂直間距。

setPadding(Insetsvalue)：設置內(nèi)容與邊界的距離。

add(Nodechild,intcolumnIndex,introwIndex)：將控件添加到指定的單元格中。columnIndex與rowIndex分別為單元格列號和行號，網(wǎng)格窗口中左上角單元格的列號和行號為0。

add(Nodechild,intcolumnIndex,introwIndex,intcolspan,introwspan)：將控件添加到指定的單元格中。該方法用于一個控件占用多個單元格的情況，colspan為控件跨越的列數(shù)，rowspan為控件跨越的行數(shù)。

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

setConstraints(Nodechild,intcolumnIndex,introwIndex,int,colspan,introwspan)：將控件添加到多個單元格中。

setGridLinesVisible(Booleanvalue)：設置是否顯示網(wǎng)格線，默認值為false，表示不顯示網(wǎng)格線。任務7-2模擬購物結(jié)賬功能-JavaFX常用布局網(wǎng)絡布局如例7-5所示，演示網(wǎng)格布局，首先在Chapter07程序的com.example.gui包中創(chuàng)建ExampleGridLayout類，在該類中演示JavaFX的網(wǎng)格布局，詳見ExampleGridLayout.java1packagecom.example.gui;2......//省略導入包

3publicclassExampleGridLayoutextendsApplication{4 @Override5 publicvoidstart(StageprimaryStage)throwsException{6 //創(chuàng)建一個BorderPane作為根布局

7BorderPanerootPane=newBorderPane();8//使用網(wǎng)格布局

9GridPanecenterGrid=newGridPane();10centerGrid.setHgap(10);//網(wǎng)格之間的水平間距10像素

11centerGrid.setVgap(10);//網(wǎng)格之間的垂直間距10像素

12centerGrid.setAlignment(Pos.CENTER);13centerGrid.add(newButton("網(wǎng)格按鈕1"),0,0);14centerGrid.add(newButton("網(wǎng)格按鈕2"),1,0);15centerGrid.add(newButton("網(wǎng)格按鈕3"),0,1);16centerGrid.add(newButton("網(wǎng)格按鈕4"),1,1);17rootPane.setCenter(centerGrid);18//創(chuàng)建場景并添加到舞臺

19Scenescene=newScene(rootPane,250,100);20primaryStage.setScene(scene);21primaryStage.setTitle("網(wǎng)格布局");22primaryStage.show();23}24publicstaticvoidmain(String[]args){25launch(args);26}27}任務7-2模擬購物結(jié)賬功能-JavaFX常用布局網(wǎng)絡布局網(wǎng)格布局的運行結(jié)果如圖任務7-2模擬購物結(jié)賬功能-JavaFX常用布局流式布局流式布局是指布局中的元素按照其在流中的順序排列，當元素填滿一行或一列時，它會移動到下一行或列，可以設置布局的行和列的間距，也可以設置布局邊與節(jié)點之間的距離。FlowPane類常用的構(gòu)造方法如下所示。

FlowPane(doublehgap,doublevgap)：創(chuàng)建一個流式布局，并指定子控件之間的水平間距和垂直間距。

FlowPane(doublehgap,doublevgap,Node···children)：創(chuàng)建一個流式布局，指定控件之間的水平和垂直間距，還指定包含的初始子控件。

FlowPane(Orientationorientation)：創(chuàng)建一個流式布局，并指定子控件排列的方向（水平或垂直)，以及控件之間間距為0。任務7-2模擬購物結(jié)賬功能-JavaFX常用布局流式布局如例7-6所示，演示如何使用FlowPane類實現(xiàn)流式布局。首先在Chapter07程序的com.example.gui包中創(chuàng)建ExampleFlowLayout類，在該類中使用FlowPane類實現(xiàn)流式布局，詳見xampleFlowLayout.java1packagecom.example.gui;2......//省略導入包

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

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

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

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

10 root.setPadding(newInsets(10));//設置內(nèi)邊距

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模擬購物結(jié)賬功能-JavaFX常用布局流式布局上述代碼中，第13~16行代碼使用for循環(huán)向流式布局中添加10個按鈕，這些按鈕會按照它們在流式布局中的順序水平排列。流式布局中按鈕水平排列的運行結(jié)果如左下圖如果想讓流式布局中的按鈕垂直排列，可以將例7-7中第8行的注釋去掉，第9行添加注釋，再次運行程序，流式布局中按鈕垂直排列的運行結(jié)果如右下圖任務7-2模擬購物結(jié)賬功能-JavaFX常用布局其他布局JavaFX中還有其他常用布局包括邊框布局、錨點布局、堆疊布局和分割面板布局，下面介紹這4種布局:邊框布局、錨點布局、堆疊布局、分割面板布局邊框布局在JavaFX中，邊框布局主要由BorderPane類實現(xiàn)，邊框布局允許將內(nèi)容添加到五個區(qū)域，分別是頂部（top）、右側(cè)（right）、底部（bottom）、左側(cè)（left）和中心（center）。任務7-2模擬購物結(jié)賬功能-JavaFX常用布局其他布局邊框布局邊框布局的示例代碼如下。

1//創(chuàng)建一個BorderPane2BorderPaneborderPane=newBorderPane();3borderPane.setPadding(newInsets(10,10,10,10));//設置邊距

4//創(chuàng)建并設置頂部內(nèi)容

5ButtontopButton=newButton("頂部區(qū)域");6borderPane.setTop(topButton);7//創(chuàng)建并設置左側(cè)內(nèi)容

8ButtonleftButton=newButton("左側(cè)區(qū)域");9borderPane.setLeft(leftButton);10//創(chuàng)建并設置右側(cè)內(nèi)容

11ButtonrightButton=newButton("右側(cè)區(qū)域");12borderPane.setRight(rightButton);13//創(chuàng)建并設置底部內(nèi)容

14ButtonbottomButton=newButton("底部區(qū)域");15borderPane.setBottom(bottomButton);16//創(chuàng)建并設置中心內(nèi)容

17StackPanecenterPane=newStackPane();18centerPane.setAlignment(Pos.CENTER);//設置內(nèi)容在StackPane中居中

19ButtoncenterButton=newButton("中心區(qū)域");20centerPane.getChildren().add(centerButton);21borderPane.setCenter(centerPane);任務7-2模擬購物結(jié)賬功能-JavaFX常用布局其他布局錨點布局錨點布局主要由AnchorPane類實現(xiàn)，它允許將控件錨定到布局面板的特定位置，通過設置控件與布局面板邊緣的像素距離來定位控件。假設將一個按鈕放置在AnchorPane的左下角，并且距離底部和右側(cè)各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模擬購物結(jié)賬功能-JavaFX常用布局其他布局堆疊布局堆疊布局主要由StackPane類實現(xiàn)，它通過將多個組件按照一定順序垂直堆疊，形成一個垂直排列的界面。堆疊布局的示例代碼如下。

1 //創(chuàng)建一個StackPane容器

2 StackPanestackPane=newStackPane();3 //創(chuàng)建3個按鈕，作為StackPane的子節(jié)點

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

8 stackPane.getChildren().addAll(button1,button2,button3);任務7-2模擬購物結(jié)賬功能-JavaFX常用布局其他布局分割面板布局分割面板布局由SplitPane類實現(xiàn)，它是一種用戶界面設計布局，將窗口或容器區(qū)域分割成兩個或多個可調(diào)整大小的區(qū)域，以便同時顯示和管理不同的內(nèi)容或控件。這種布局方式常用于需要同時顯示和操作多個數(shù)據(jù)或視圖的情況下。假設將左側(cè)面板與右側(cè)面板通過一個分割條分割，示例代碼如下。

1 //創(chuàng)建兩個VBox作為SplitPane的初始部分

2 VBoxleftPane=newVBox(5,newButton("左側(cè)面板內(nèi)容1"),3 newButton("左側(cè)面板內(nèi)容"));4 leftPane.setPadding(newInsets(10));5 leftPane.setAlignment(Pos.TOP_LEFT);6 VBoxrightPane=newVBox(5,newButton("右側(cè)面板內(nèi)容1"),7 newButton("右側(cè)面板內(nèi)容"));8 rightPane.setPadding(newInsets(10));9 rightPane.setAlignment(Pos.TOP_LEFT);10 //創(chuàng)建一個水平的SplitPane，并添加兩個VBox11 SplitPanehorizontalSplitPane=newSplitPane();12 horizontalSplitPane.getItems().addAll(leftPane,rightPane);13 //設置分割條的位置（從左到右的比例）

14 horizontalSplitPane.setDividerPositions(0.3f);任務7-2模擬購物結(jié)賬功能-JavaFX常用布局其他布局如例7-7所示，演示邊框布局、錨點布局、堆疊布局和分割面板布局的使用。首先在Chapter07程序的com.example.gui包中創(chuàng)建ExampleOtherLayout類，在該類中實現(xiàn)如何使用不同的布局管理器展示不同的效果，詳見ExampleOtherLayout.java1packagecom.example.gui;2......//省略導入包

3publicclassExampleOtherLayoutextendsApplication{4@Override5publicvoidstart(StageprimaryStage){6//創(chuàng)建一個BorderPane作為根布局

7BorderPanerootPane=newBorderPane();8rootPane.setPadding(newInsets(10));9//頂部：菜單條使用BorderPane的頂部區(qū)域

10MenuBarmenuBar=newMenuBar();11MenumenuFile=newMenu("文件");12MenuItemopenItem=newMenuItem("打開");13menuFile.getItems().add(openItem);14menuBar.getMenus().add(menuFile);15rootPane.setTop(menuBar);16//左側(cè)：側(cè)邊欄BorderPane的左側(cè)區(qū)域，AnchorPane來定位控件

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

28//第一個區(qū)域：使用StackPane來堆疊控件

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

33stackPane1.getChildren().addAll(button1,button2);34//第二個區(qū)域：使用另一個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//創(chuàng)建一個場景并設置給舞臺

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模擬購物結(jié)賬功能-JavaFX常用布局其他布局其他布局的運行結(jié)果如圖任務7-2模擬購物結(jié)賬功能-JavaFX事件處理事件處理機制JavaFX中的事件處理專門用于響應用戶的操作，例如，響應用戶的單擊鼠標、按下鍵盤等操作。在JavaFX事件處理的過程中，主要涉及到三個對象，分別是事件源（EventSource）、事件對象（Event）和監(jiān)聽器（Listener），具體介紹如下。事件源：事件發(fā)生的場所，通常是產(chǎn)生事件的組件，例如窗口、按鈕、菜單等。事件對象：封裝了GUI組件上發(fā)生的特定事件（通常是用戶的一次操作）。監(jiān)聽器：負責監(jiān)聽事件源上發(fā)生的事件，并對各種事件做出相應處理的對象（對象中包含事件處理器）。任務7-2模擬購物結(jié)賬功能-JavaFX事件處理事件處理機制事件源、事件對象和監(jiān)聽器在整個事件處理過程中都起著非常重要的作用，它們彼此之間有著非常緊密的聯(lián)系。下面用一個圖例來描述事件處理的工作流程，如圖任務7-2模擬購物結(jié)賬功能-JavaFX事件處理動作事件處理ActionEvent表示某種動作的事件，如按鈕被單擊、菜單項被選擇等都會發(fā)生對應的動作事件。動作事件的處理包括兩部分內(nèi)容，分別是注冊事件處理器和實現(xiàn)事件處理，其中，注冊事件處理器的方法有2個，分別是使用控件調(diào)用的setOnAction()方法和Node類定義的addEventHandler()方法，這兩個方法的語法格式如下所示。setOnAction(EventHandler<ActionEvent>handler)addEventHandler(ActionEventeventType,EventHandler<ActionEvent>handler)上述語法格式中的參數(shù)handler是事件處理器對象，eventType是事件類型。當處理ActionEvent事件時，可以使用常見的三種方式來實現(xiàn)，分別是通過內(nèi)部類實現(xiàn)、匿名內(nèi)部類實現(xiàn)和Lambda表達式實現(xiàn)任務7-2模擬購物結(jié)賬功能-JavaFX事件處理動作事件處理通過內(nèi)部類實現(xiàn)動作事件假設使用內(nèi)部類實現(xiàn)ok按鈕與cancel按鈕的單擊事件，示例代碼如下//使用兩種方式分別注冊ok按鈕和cancel按鈕的事件處理器ok.setOnAction(newButtonHandler());cancel.addEventHandler(ActionEvent.ACTION,newButtonHandler());//內(nèi)部類實現(xiàn)事件處理classButtonHandlerimplementsEventHandler<ActionEvent>{ publicvoidhandle(ActionEventevent){ if((Button)(event.getSource())==ok){ //處理ok按鈕的單擊事件的代碼

}elseif(event.getSource()==cancel){ //處理cancel按鈕的單擊事件的代碼

} }}任務7-2模擬購物結(jié)賬功能-JavaFX事件處理動作事件處理通過匿名內(nèi)部類實現(xiàn)動作事件假設使用匿名內(nèi)部類實現(xiàn)button按鈕的單擊事件，示例代碼如下。button.setOnAction(newEventHandler<ActionEvent>(){@Overridepublicvoidhandle(ActionEventevent){//處理動作事件的代碼

}});任務7-2模擬購物結(jié)賬功能-JavaFX事件處理動作事件處理通過Lambda表達式實現(xiàn)動作事件假設使用Lambda表達式實現(xiàn)button按鈕的單擊事件，示例代碼如下。button.setOnAction(event->{ //處理動作事件的代碼});1.在Chapter07程序的com.example.task包中創(chuàng)建一個水果實體類Fruit，用于封裝購買的水果信息，這些信息包括水果名稱、圖片路徑和水果價格。2.在com.example.task包中創(chuàng)建CheckOutApp類繼承Application類，用于實現(xiàn)購物結(jié)賬功能。3.在CheckOutApp類中創(chuàng)建createFruitBox()方法，在該方法中創(chuàng)建一個包含水果圖片、名稱和價格的VBox（垂直布局）。4.在CheckOutApp類中創(chuàng)建createCheckoutBox()方法，在該方法中創(chuàng)建一個包含“結(jié)賬”按鈕與總價信息的VBox。5.在CheckOutApp類中創(chuàng)建start()方法，在該方法中將放置好水果信息的垂直布局與放置好結(jié)賬信息的垂直布局放在一個水平布局中，并將水平布局加載到根布局中。6.在main()方法中調(diào)用launch()方法啟動程序。代碼參考教材中的Fruit.javaCheckOutApp.java任務7-2模擬購物結(jié)賬功能-任務實現(xiàn)上述代碼中的Label、Button和ImageView控件會在任務7-3中詳細講解，此處只做簡單的使用。運行CheckOutApp類，程序會彈出一個購物結(jié)賬窗口，如圖任務7-2模擬購物結(jié)賬功能-任務實現(xiàn)單擊“結(jié)賬”按鈕，程序會將已購買的蘋果和香蕉的價格加起來作為總價顯示在“結(jié)賬”按鈕下方，如圖03任務7-3購物滿意度問卷調(diào)查ImageView控件Label控件Button控件CheckBox控件RadioButton控件文本輸入控件列表控件菜單控件任務7-3購物滿意度問卷調(diào)查-JavaFX基礎控件ImageView控件ImageView控件用于顯示圖像，支持圖像的縮放、旋轉(zhuǎn)等變換ImageView控件的常用方法方法名稱說明ImageView()創(chuàng)建一個ImageView對象，不與任何圖像關聯(lián)ImageView(Imageimage)使用指定的圖像創(chuàng)建一個ImageView對象ImageView(StringfileURL)使用指定的文件或URL加載圖像創(chuàng)建一個ImageView對象setFitHeight(doublevalue)設置圖像高度setFitWidth(doublevalue)設置圖像寬度setRotate(doublevalue)設置圖像的旋轉(zhuǎn)角度，以度為單位。value的值為正值表示順時針旋轉(zhuǎn)，為負值表示逆時針旋轉(zhuǎn)setPreserveRatio(booleanvalue)指定圖像是否保持其原始縱橫比。默認情況下，value值為true，表示圖像在縮放時將保持其原始比例，否則，圖像在縮放時失去其原始比例setViewport(Rectangle2Dvalue)用于定義圖像的可見區(qū)域（視口），通過調(diào)整視口的位置和大小，可以實現(xiàn)圖像的滾動和裁剪效果setOpacity(doublevalue)設置圖像的透明度，value是一個介于0.0（完全透明）和1.0（完全不透明）之間的雙精度浮點數(shù)任務7-3購物滿意度問卷調(diào)查-JavaFX基礎控件ImageView控件如例7-8所示，演示ImageView控件的使用，首先在Chapter07程序中創(chuàng)建resources文件夾，該文件夾用于存放資源文件，將需要顯示在ImageView控件上的圖片hamster.png導入到resources文件夾中。然后在程序的com.example.gui包中創(chuàng)建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：半透明并調(diào)整視口

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

22//調(diào)整視口到(50,50)開始，寬度和高度都為10023imageView2.setViewport(newjavafx.geometry.Rectangle2D(240,100));25//第三個ImageView：自定義尺寸并旋轉(zhuǎn)

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

28imageView3.setFitWidth(150);//自定義寬度

29imageView3.setRotate(30);//旋轉(zhuǎn)30度

30//垂直布局

31VBoxvbox=newVBox(10);32vbox.getChildren().addAll(imageView1,imageView2,imageView3);33vbox.setAlignment(Pos.CENTER);34vbox.setPadding(newInsets(10));……任務7-3購物滿意度問卷調(diào)查-JavaFX基礎控件Label控件Label控件用于顯示不可編輯的文本和圖片，它可以設置文本的字體、顏色、對齊方式、下劃線、刪除線等。Label控件的常用方法方法名稱說明Label()創(chuàng)建一個空標簽Label(Stringtext)使用指定文本創(chuàng)建一個標簽Label(Stringtext,Nodegraphic)使用指定文本和圖形創(chuàng)建一個標簽，graphic可以是一個形狀、圖像或其他控件setGraphic(Nodevalue)設置標簽的圖形，該圖形可以是圖片或形狀setAlignment(Posvalue)設置標簽中文本和圖形的對齊方式，對齊方式使用Pos枚舉常量指定，例如Pos.CENTER表示居中對齊setContentDisplay(ContentDisplayvalue)設置標簽中文本與圖形內(nèi)容的顯示方式，顯示方式用枚舉常量ContentDisplay指定，例如ContentDisplay.LEFT表示文本或圖形在標簽的左側(cè)顯示setText(Stringvalue)設置標簽中的文本setFont(Fontfont)設置標簽中文本的字體setTextFill(Paintvalue)設置文本顏色setUnderline(booleanvalue)設置文本是否加下畫線setWrapText(booleanvalue)設置如果文本超過了寬度，是否要換行任務7-3購物滿意度問卷調(diào)查-JavaFX基礎控件Label控件如例7-9所示，演示Label控件的使用，首先將需要顯示在Label控件上的圖片clock.png導入到程序Chapter07的resources文件夾中。然后在程序的com.example.gui包中創(chuàng)建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//創(chuàng)建一個按鈕，并設置按鈕的圖形和內(nèi)容

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//創(chuàng)建布局容器和場景

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

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

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

35Scenescene=newScene(root,300,200);//創(chuàng)建一個場景并設置大小

36scene.setFill(Color.WHITE);//設置場景背景色為白色

37//設置主舞臺的場景并顯示

38primaryStage.setScene(scene);39primaryStage.setTitle("按鈕示例");40primaryStage.show();41}……任務7-3購物滿意度問卷調(diào)查-JavaFX基礎控件Button控件Button控件用于顯示按鈕，是JavaFX中的一個基本控件，既可以顯示文本，又可以顯示圖形，同時也允許用戶通過單擊來觸發(fā)某個動作或事件Button控件的常用方法方法名稱說明Button()創(chuàng)建一個沒有文本信息的按鈕Button(Stringtext)創(chuàng)建帶指