2. 程式人生 > >JavaFX入門（七）之使用FXML建立使用者介面

JavaFX入門（七）之使用FXML建立使用者介面

阿新 • • 發佈：2018-12-15

本教程展示了使用JavaFX FXML的好處，JavaFX FXML是一種基於XML的語言，它提供了構建與程式碼的應用程式邏輯分開的使用者介面的結構。

如果您從一開始就開始使用本文件，那麼您已經瞭解瞭如何使用JavaFX建立登入應用程式。在這裡，您使用FXML建立相同的登入使用者介面，將應用程式設計與應用程式邏輯分離，從而使程式碼更易於維護。您在本教程中構建的登入使用者介面如圖6-1所示。

圖6-1登入使用者介面

本教程使用NetBeans IDE。確保您使用的NetBeans IDE版本支援JavaFX 8.有關詳細資訊，請參閱Java SE下載頁面的“認證系統配置”部分。

1、設定專案

您的第一個任務是在NetBeans IDE中設定JavaFX FXML專案：

  1. 從“ 檔案”選單中，選擇“ 新建專案”。

  2. 在JavaFX應用程式類別中，選擇JavaFX FXML Application。單擊下一步。

  3. 將專案命名為FXMLExample，然後單擊Finish。

    NetBeans IDE開啟一個FXML專案，其中包含基本Hello World應用程式的程式碼。該應用程式包括三個檔案：

    • FXMLExample.java. 該檔案負責FXML應用程式所需的標準Java程式碼。

    • FXMLDocument.fxml. 這是您在其中定義使用者介面的FXML原始檔。

    • FXMLDocumentController.java. 這是用於處理滑鼠和鍵盤輸入的控制器檔案。

  4. 重新命名FXMLDocumentController.java為F，XMLExampleController.java以使該名稱對此應用程式更有意義。

    1. 在“專案”視窗中，右鍵單擊“ FXMLDocumentController.java”，然後選擇“ 重構”，然後選擇“ 重新命名”。

    2. 輸入FXMLExampleController，然後單擊“ 重構”。

  5. 重新命名FXMLDocument.fxml為fxml_example.fxml.

    1. 右鍵單擊FXMLDocument.fxml並選擇“ 重新命名”。

    2. 輸入fxml_example並單擊“ 確定”。

2、載入FXML原始檔

您編輯的第一個檔案是FXMLExample.java檔案。此檔案包含用於設定應用程式主類和定義舞臺和場景的程式碼。更具體的FXML，該檔案使用FXMLLoader該類，該類負責載入FXML原始檔並返回結果物件圖。

在例6-1中進行粗體顯示的更改。

例6-1 FXMLExample.java

    @Override
    public void start(Stage stage) throws Exception {
       Parent root = FXMLLoader.load(getClass().getResource("fxml_example.fxml"));
    
        Scene scene = new Scene(root, 300, 275);
    
        stage.setTitle("FXML Welcome");
        stage.setScene(scene);
        stage.show();
    }

一個好的做法是在建立場景時設定場景的高度和寬度，在本例中為300乘275; 否則場景預設為顯示其內容所需的最小尺寸。

3、修改匯入語句

接下來，編輯該fxml_example.fxml檔案。此檔案指定應用程式啟動時顯示的使用者介面。第一項任務是修改import語句，使程式碼如例6-2所示。

示例6-2 XML宣告和匯入語句

<?xml version="1.0" encoding="UTF-8"?>

<?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

與在Java中一樣，類名可以是完全限定的（包括包名），也可以使用import語句匯入它們，如例6-2所示。如果您願意，可以使用引用類的特定import語句。

4、建立GridPane佈局

NetBeans生成的Hello World應用程式使用AnchorPane佈局。對於登入表單，您將使用GridPane佈局，因為它使您能夠建立靈活的行和列網格，以在其中佈置控制元件。

刪除AnchorPane佈局及其子項，並將其替換GridPane為示例6-3中的佈局。

示例6-3 GridPane佈局

<GridPane fx:controller="fxmlexample.FXMLExampleController" 
    xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10">
<padding><Insets top="25" right="25" bottom="10" left="25"/></padding>

</GridPane>

在此應用程式中，GridPane佈局是FXML文件的根元素，因此具有兩個屬性。fx:controller在標記中指定基於控制器的事件處理程式時，該屬性是必需的。該xmlns:fx屬性始終是必需的，並指定fx名稱空間。

程式碼的其餘部分控制網格窗格的對齊和間距。alignment屬性將網格的預設位置從場景的左上角更改為中心。在gap效能管理行和列之間的間距，而padding物業管理圍繞網格窗格邊緣的空間。

在調整視窗大小時，網格窗格中的節點將根據其佈局約束進行調整大小。在此示例中，當您增大或縮小視窗時，網格將保留在中心。填充屬性確保在使視窗變小時網格周圍有填充。

5、新增文字和密碼欄位

回顧圖6-1，您可以看到登入表單需要標題“歡迎”以及用於從使用者收集資訊的文字和密碼欄位。例6-4中的程式碼是GridPane佈局的一部分，必須放在</GridPane>語句的上方。

示例6-4文字，標籤，TextField和密碼欄位控制元件

<Text text="Welcome" 
        GridPane.columnIndex="0" GridPane.rowIndex="0"
        GridPane.columnSpan="2"/>
 
    <Label text="User Name:"
        GridPane.columnIndex="0" GridPane.rowIndex="1"/>
 
    <TextField 
        GridPane.columnIndex="1" GridPane.rowIndex="1"/>
 
    <Label text="Password:"
        GridPane.columnIndex="0" GridPane.rowIndex="2"/>
 
    <PasswordField fx:id="passwordField" 
        GridPane.columnIndex="1" GridPane.rowIndex="2"/>

第一行建立一個Text物件並將其文字值設定為Welcome。的GridPane.columnIndex和GridPane.rowIndex屬性對應的放置Text在網格控制。網格中行和列的編號從零開始，Text控制元件的位置設定為（0,0），這意味著它位於第一行的第一列中。該GridPane.columnSpan屬性設定為2，使歡迎標題跨越網格中的兩列。當您新增樣式表以將文字的字型大小增加到32磅時，您將在本教程後面需要這個額外的寬度。

下一行建立一個Label物件，其中第User Name0列，第1行為文字，第1列為第1行TextField，右側為物件。另一行Label和PasswordField物件以類似方式建立並新增到網格中。

使用網格佈局時，可以顯示網格線，這對於除錯非常有用。在這種情況下，通過在語句後新增語句gridLinesVisible來將屬性設定為。然後，當您執行應用程式時，您會看到網格列和行的行以及間隙屬性，如圖6-2所示。true<gridLinesVisible>true</gridLinesVisible><padding></padding>

圖6-2帶網格線的登入表單

6、新增按鈕和文字

應用程式所需的最後兩個控制元件是Button用於提交資料的Text控制元件和用於在使用者按下按鈕時顯示訊息的控制元件。程式碼在例6-5中。之前新增此程式碼</GridPane>。

例6-5 HBox，Button和Text

<HBox spacing="10" alignment="bottom_right" 
        GridPane.columnIndex="1" GridPane.rowIndex="4">
        <Button text="Sign In"     
        onAction="#handleSubmitButtonAction"/>
</HBox>

<Text fx:id="actiontarget"
       GridPane.columnIndex="0" GridPane.columnSpan="2"
 GridPane.halignment="RIGHT" GridPane.rowIndex="6"/>

HBox需要一個窗格來設定按鈕的對齊方式，該方框與應用於GridPane佈局中其他控制元件的預設對齊方式不同。該alignment屬性設定為bottom_right，將空間底部的節點垂直放置，並在空間的右邊緣水平放置。該HBox窗格將新增到第1列第4行的網格中。

該HBox窗格有一個孩子，一個Button與text屬性設定為Sign in和onAction設定屬性handleSubmitButtonAction()。雖然FXML是定義應用程式使用者介面結構的便捷方式，但它並未提供實現應用程式行為的方法。您可以handleSubmitButtonAction()在本教程的下一部分“ 新增程式碼來處理事件”中實現Java程式碼中的方法行為。

分配一個fx:id值到一個元素，如在對所述程式碼中所示Text的控制，建立在文件的名稱空間的變數，該變數可以參考從程式碼的其他地方。雖然不是必需的，但定義控制器欄位有助於闡明控制器和標記的關聯方式。

7、新增程式碼來處理事件

現在，Text當用戶按下按鈕時，控制元件會顯示一條訊息。你在FXMLExampleController.java檔案中這樣做。刪除NetBeans IDE生成的程式碼，並將其替換為例6-6中的程式碼。

例6-6 FXMLExampleController.java

package fxmlexample;
 
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.text.Text;
 
public class FXMLExampleController {
    @FXML private Text actiontarget;
    
    @FXML protected void handleSubmitButtonAction(ActionEvent event) {
        actiontarget.setText("Sign in button pressed");
    }

}

該@FXML註釋被用於標記非公共控制器成員欄位和處理程式方法用於通過FXML標記使用。該handleSubmtButtonAction方法將actiontarget變數設定為Sign in button pressed使用者按下按鈕時。

您現在可以執行該應用程式以檢視完整的使用者介面。圖6-3顯示了在兩個欄位中鍵入文字並單擊“登入”按鈕時的結果。如果您有任何問題，那麼您可以將您的程式碼與FXMLLogin示例進行比較。

圖6-3 FXML登入視窗

8、使用指令碼語言處理事件

作為使用Java程式碼建立事件處理程式的替代方法，您可以使用提供與JSR 223相容的指令碼引擎的任何語言來建立處理程式。這些語言包括JavaScript，Groovy，Jython和Clojure。

您可以選擇立即嘗試使用JavaScript。

  1. 在檔案中fxml_example.fxml，在XML doctype宣告之後新增JavaScript宣告。

    <?language javascript?>

  2. 在Button標記中，更改函式的名稱，以使呼叫如下所示：

    onAction="handleSubmitButtonAction(event);"

  3. fx:controller從GridPane標記中刪除屬性，並將JavaScript函式<script>直接新增到其下的標記中，如例6-7所示。

    例6-7 FXML中的JavaScript

    <GridPane xmlns:fx="http://javafx.com/fxml" 
              alignment="center" hgap="10" vgap="10">
         <fx:script>
             function handleSubmitButtonAction() {
                 actiontarget.setText("Calling the JavaScript");
             }
         </fx:script>

    或者，您可以將JavaScript函式放在外部檔案（例如fxml_example.js）中，幷包含如下指令碼：

    <fx:script source="fxml_example.js"/>

圖6-4使用JavaScript登入應用程式

如果您正在考慮使用FXML指令碼語言，請注意IDE可能不支援在除錯期間單步執行指令碼程式碼。

9、使用CSS設定應用程式樣式

最後的任務是通過新增層疊樣式表（CSS）使登入應用程式看起來很有吸引力。

  1. 建立樣式表。

    1. 在“專案”視窗中，右鍵單擊“源包”下的fxmlexample資料夾，然後選擇“ 新建”，再選擇“ 其他”。

    2. 在“新建檔案”對話方塊中，選擇“ 其他”，然後選擇“ 層疊樣式表”，並單擊“ 下一步”。

    3. 輸入Login並單擊Finish。

    4. 將Login.css檔案的內容複製到CSS檔案中。該Login.css檔案包含在可下載的LoginCSS.zip檔案中。有關CSS檔案中的類的說明，請參閱使用JavaFX CSS的花式表單。

  2. 通過右鍵單擊background.jpg檔案並將其儲存到fxmlexample資料夾，下載背景的灰色亞麻影象。

  3. 開啟fxml_example.fxml檔案並在GridPane佈局標記結束之前新增樣式表元素，如例6-8所示。

    例6-8樣式表

    <stylesheets>
    <URL value="@Login.css" />
  </stylesheets>

</GridPane>

    URL中樣式表名稱前面的@符號表示樣式表與FXML檔案位於同一目錄中。

  4. 要使用網格窗格的根樣式，請將樣式類新增到GridPane佈局的標記中，如例6-9所示。

    示例6-9設定GridPane的樣式

    <GridPane fx:controller="fxmlexample.FXMLExampleController" 
    xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10" 
    styleClass="root">

  5. welcome-text為Welcome Text物件建立一個ID，使其使用#welcome-textCSS檔案中定義的樣式，如例6-10所示。

    示例6-10文字ID

    <Text id="welcome-text" text="Welcome" 
        GridPane.columnIndex="0" GridPane.rowIndex="0" 
        GridPane.columnSpan="2"/>

  6. 執行該應用程式。圖6-5顯示了程式化的應用程式。如果遇到問題，請檢視可下載的FXMLExample.zip檔案中包含的程式碼

    圖6-5樣式化登入應用程式

     

10、從這往哪兒走

既然您熟悉FXML，請檢視FXML 簡介，它提供了有關構成FXML語言的元素的更多資訊。該文件包含在API文件的javafx.fxml包中。

您還可以通過fxml_example.fxml在Scene Builder中開啟檔案並進行修改來試用JavaFX Scene Builder工具。此工具為JavaFX應用程式的UI設計提供了視覺化佈局環境，並自動為佈局生成FXML程式碼。請注意，儲存時可能會重新格式化FXML檔案。有關此工具的更多資訊，請參閱JavaFX Scene Builder入門。使用CSS進行Skinning和JavaFX Scene Builder使用者指南的CSS Analyzer部分，還可以為您提供有關如何為FXML佈局設定外觀的資訊。

相關推薦

JavaFX入門（七）之使用FXML建立使用者介面

本教程展示了使用JavaFX FXML的好處，JavaFX FXML是一種基於XML的語言，它提供了構建與程式碼的應用程式邏輯分開的使用者介面的結構。 如果您從一開始就開始使用本文件，那麼您已經瞭解瞭如何使用JavaFX建立登入應用程式。在這裡，您使用FXML建立相同的

JavaFX入門（一）之前言概述

1、JavaFX概述 本章概述了可以使用JavaFX API構建的應用程式型別，下載JavaFX庫的位置以及有關正在交付的關鍵JavaFX功能的高階資訊。 JavaFX是一組圖形和媒體包，使開發人員能夠設計，建立，測試，除錯和部署在不同平臺上一致執行的富客戶端應用程式

JavaFX入門（二）之JavaFX體系結構

本章提供了JavaFX體系結構和生態系統的高階描述。 圖2-1說明了JavaFX平臺的架構元件。圖中的部分描述了每個元件以及這些部件如何互連。JavaFX公共API下面是執行JavaFX程式碼的引擎。它由包含JavaFX高效能圖形引擎的子元件組成，稱為Prism; 一個

JavaFX入門（四）之Hello World，JavaFX樣式

教你建立和構建JavaFX應用程式的最佳方法是使用“Hello World”應用程式。本教程的另一個好處是，它使您能夠測試您的JavaFX技術是否已正確安裝。 本教程中使用的工具是NetBeans IDE 7.4。在開始之前，請確保您使用的NetBeans IDE版本支

JavaFX入門（五）之在JavaFX中建立表單

在開發應用程式時，建立表單是一項常見活動。本教程將向您介紹屏幕布局的基礎知識，如何將控制元件新增到佈局窗格以及如何建立輸入事件。 在本教程中，您將使用JavaFX構建如圖4-1所示的登入表單。 圖4-1登入表單   本入門教程中使用的工具是NetBeans

JavaFX入門（六）之帶有JavaFX CSS的花式表單

本教程通過新增級聯樣式表（CSS）使您的JavaFX應用程式看起來很有吸引力。您開發設計，建立.css檔案並應用新樣式。 在本教程中，您將獲取一個使用標籤，按鈕和背景顏色的預設樣式的登入表單，並通過一些簡單的CSS修改將其轉換為程式化的應用程式，如圖5-1所示。

React Native入門（七）之列表元件的使用(2)關於FlatList的一切

前言 在上一篇部落格中瞭解了列表元件的相關內容，主要是靜態的展示了一個列表資料，瞭解了ScrollVIew，FlatList和SectionList的基本用法，本篇文章就深入的瞭解一個常用的一個列表元件FlatList的用法！ 屬性 新增頭部元件

極客react之Ant Design Pro系列快速入門（七）-- 使用新的佈局

定義一個新的佈局 loayout資料夾定義佈局的js檔案和less樣式檔案 /common/router.js中定義使用新佈局的路徑 '/data': { component: dynamicWrapper(app, [], () => import('..

資料探勘入門系列教程（七）之樸素貝葉斯進行文字分類

資料探勘入門系列教程（七）之樸素貝葉斯進行文字分類 貝葉斯分類演算法是一類分類演算法的總和，均以貝葉斯定理為基礎，故稱之為貝葉斯分類。而樸素貝葉斯分類演算法就是其中最簡單的分類演算法。 樸素貝葉斯分類演算法 樸素貝葉斯分類演算法很簡單很簡單，就一個公式如下所示： P(B|A) = \frac{P(A|B) P

軟件測試基本方法（七）之驗收測試

用戶界面 基本 設計 意見 改錯 用戶需求 target 行業 alt 驗收測試是在功能測試和系統測試之後進行的，所以驗收測試的前提條件是系統或軟件產品已通過了內部測試。然後和用戶一起驗收軟件，在真實環境下執行軟件，看是否存在與用戶需求不一致的問題或違背產品規

Spring入門（三）之IoC

使用 bsp martin 需要 容器 nbsp 依賴註入 tin 這就是 一、IoC定義 　　IoC，即控制反轉。開發者在使用類的實例之前，需要先創建對象的實例。但是IoC將創建實例的任務交給IoC容器，這樣開發應用代碼時只需要直接使用類的實例，這就是IoC。在討論控制反

Shell入門（四）之數組

定義 col 元素 array 多維 開始 code logs shel 一、一維數組 　　bash支持一維數組（不支持多維數組），並且沒有限定數組的大小。 　　類似與C語言，數組元素的下標由0開始編號。 二、定義數組 在Shell中，用括號來表示數組，數組元素用"空格

WPF自學入門（七）WPF 初識Binding

依賴項 RM opacity 自身 date 數據傳遞 one 忽略 chang 今天記錄一下Binding的基礎和具體的使用方法，說起這個Binding，在WPF中，Binding是很重要的特征，在傳統的Windows軟件來看，大多數都是UI驅動程序的模式，

數據庫（七）之連接

font eat 模式 pwd color 聯合 空值 sele ont select A.班級名, A.班級人數, B.姓名, B.聯系方式 from 班級信息 A, 輔導員信息 B where A.輔導員 = B.輔導員編號 for xml raw 基本連接 　

Selenium框架切換-----Selenium快速入門（七）

type eset 9.png 說了 int 否則 work .html 切換 　　上一篇說了窗口的切換，本篇說說框架的切換。 　　切換框架：是指切換html中的iframe標簽元素或者frame標簽元素，註意，並不包括frameset 　　以下是常用的方法： 方法

python入門（七）class類

class 類 類是面向對象一個載體類的定義： class A (object): pass 全局變量 函數1。。。 def....(self): 函數2.。。。 def....(): 類裏面有

C++標準庫（七）之iterator

控制 ins opera access 指向 begin 任務 multiset fse iterator iterator模式：提供一種方法，使之能依次訪問容器內的各個元素，而又不暴露該聚合物內部的表述方式。 STL的中心思想是將算法與數據結構分離，彼此獨立設計，最後在用

筆記67 Spring Boot快速入門（七）

判斷瀏覽器 業務 src tar rate sort col font list SpringBoot+Restful+JSON 一、Restful風格 　　在Web開發的過程中，method常用的值是get和post。可事實上，method值還可以是put和delete等

PHP常見概念混淆（七）之self、static、parent的區別

sta parent tst 執行 pub call 例子 turn function 前言 首先，這個 static 符號跟 static（靜態）關鍵字不是一個東西。這三個符號在PHP對象中共有兩種用法: 在類內部，可以使用 new self、 new static、

區塊鏈快速入門（七）——比特幣

sca 速度 場景 重要 安全性 硬件 比較 一周 uri 區塊鏈快速入門（七）——比特幣 一、比特幣簡介 比特幣(BitCoin，BTC)是基於區塊鏈技術的一種數字貨幣實現，比特幣網絡是歷史上首個經過大規模長時間檢驗的數字貨幣系統。自2009 年正式上線以來，比特幣價