第 5 課：對 UI 對象應用數據綁定

 第 5 課：對 UI 對象應用數據綁定

本課介紹 JavaFX 中的數據綁定功能。使用此機制後，當一個變量發生變化時，另一個變量會隨之更新（根據您定義的兩個變量之間的關係）。有關數據綁定概念的更多信息，請參閱學習 JavaFX Script 編程語言中的數據綁定和觸發課程。

 

目錄

-	創建應用程序窗口
-	添加圓
-	將填充模式添加到圓中
-	添加滑塊
-	定義綁定關係

 

在編程過程中，通常需要在另一個參數發生變化時更新某個特定參數。在 JavaFX Script 編程語言中，您可以通過數據綁定機制來完成此操作。您可以定義任意兩個變量之間的關係，以便當一個變量發生變化時另一個變量會隨之更新。JavaFX 將跟蹤任何變化並進行必要的更新。這種關係連同更新機制稱爲數據綁定。

要了解數據綁定的工作原理，請按如下所示創建一個簡單的應用程序：

 

圖 1：啓動後的數據綁定示例

 

具體的思路是，繪製一個滑塊和一個圓，該圓的圓心綁定到滑塊的值。圓的內部使用徑向漸變模式進行繪製。在您移動滑塊時，圓也隨之移動。靜止漸變填充使圓顯示出日蝕各個階段的效果。

 

圖 2：圓的位置根據滑塊的位置進行變化

 

創建一個擴展名爲 .fx 的文件，例如 sample.fx。在任何時間，您都可以使用以下命令編譯您的代碼：

javafxc sample.fx

您可以使用以下命令運行編譯的代碼：

javafx sample

創建應用程序窗口

創建一個標題爲 "Data Binding" 的應用程序窗口，其寬度爲 220 像素，高度爲 170 像素。有關詳細信息，請參見使用聲明性語法。以下代碼可創建此窗口。

import javafx.stage.Stage;

Stage {
    title: "Data Binding"
    width: 220
    height: 170
    visible: true
}

儘管這些代碼很短，但它是一個完整的 JavaFX 應用程序，其輸出如下所示。

 

圖 3：應用程序窗口

 

添加圓

您可以向您的應用程序窗口添加對象，方法是：將這些對象放在 Stage 的 scene 中。有關更多詳細信息，請參見在圖形場景中顯示 UI 對象。有關 Circle 類的詳細信息，請參見使用聲明性語法。

1. 爲 javafx.scene.shape.Circle 和 javafx.scene.paint.Color 類添加 import 語句。
2. 通過添加 Circle 對象字面值定義場景的 content 變量。
   
   

   import javafx.scene.Scene;
   import javafx.scene.shape.Circle;
   import javafx.scene.paint.Color;
   
   Stage {
       title: "Data Binding"
       width: 220
       height: 170
       visible: true
       scene: Scene {
       content: Circle {
           centerX: 50 centerY : 60 radius: 50
           stroke: Color.YELLOW}
       }
   }

    
   默認情況下，圓的內部是黑色的，場景的背景是白色的。在此步驟中，輸出如下所示。
   
   
    

   圖 4：添加到場景的圓

    
    
   
3. 設置 fill 變量的值，以更改背景顏色。
   
   

   scene: Scene {
      fill: Color.LIGHTGRAY
      ...
   }

    
   

將填充模式添加到圓中

您可以通過將稱爲徑向漸變的特定填充模式添加到圓中來增加示例的視覺吸引力。使用此模式後，當滑塊移動時會顯示出日蝕的效果。

要實現此繪製功能，請使用 RadialGradient 類。您可以通過使用 Stop 類來指定兩種或更多種顏色，並且 RadialGradient 類將在它們之間提供一個插值。通過定義圓心和半徑來指定一個可控制漸變模式的圓。您還可以在應用了第一種顏色的圓內定義焦點。最後一種顏色應用於圓的周界線。

對於徑向漸變填充模式，您可以爲圓心、半徑和焦點指定絕對值。在這種情況下，您需要將 proportional 變量設置爲 false。如果將 proportional 變量設置爲 true，則圓心、半徑和焦點的值範圍應該是 0.0 到 1.0，並且徑向漸變將進行縮放以填充它所應用到的形狀。

stops 變量爲徑向漸變填充模式定義了一個顏色序列。使用方括號指定一個序列，使用逗號分隔其中的各個元素。

1. 爲 javafx.scene.paint 軟件包中的 RadialGradient 和 Stop 類添加 import 語句。
2. 使用 RadialGradient 對象字面值定義 fill 實例變量。
3. 使用 centerX、centerY 和 radius 變量爲圓心和半徑指定絕對值。
4. 通過使用 focusX 和 focusY 變量指定焦點。
5. 將 proportional 變量設置爲 false。
6. 將 stops 變量定義爲紅色和白色的序列。
   
   

   import javafx.scene.paint.RadialGradient;
   import javafx.scene.paint.Stop;
   
   content: Circle {
       centerX: 50 centerY : 60 radius: 50
       stroke: Color.YELLOW
       fill: RadialGradient {
           centerX: 50 centerY : 60 radius: 50
           focusX: 50 focusY: 30
           proportional: false
           stops: [
               Stop {offset: 0 color: Color.RED},
               Stop {offset: 1 color: Color.WHITE}
           ]
       }
   }

    
   編譯並運行此修改後的代碼會產生以下結果。
   
   
    

   圖 5：使用徑向漸變模式填充的圓

    
    
   

添加滑塊

javafx.ext.swing 軟件包中的 SwingSlider 類提供了一個滑塊控件。將此滑塊添加到場景中，並將其放在圓的下方。默認情況下，滑塊將顯示在點 (0,0) 處。您可以使用 translateX 和 translateY 實例變量來指定在場景中按 X 軸和 Y 軸方向平移座標的距離。

1. 爲 javafx.ext.swing.SwingSlider 類添加 import 語句。
2. 將 SwingSlider 對象字面值添加到場景的 content 變量中。
3. 指定滑塊的最小值和最大值，並將當前值設置爲零。
   
   

   import javafx.ext.swing.SwingSlider;
   
   content: [
       Circle {
          ...
       },
       SwingSlider {minimum: 0 maximum: 60 value : 0}
   ]

    
   
4. 使用 translateX 和 translateY 實例變量指定滑塊在場景內的位置。
   
   

   content: [
       Circle {
          ...
       },
       SwingSlider {
           minimum: 0 
           maximum: 60 
           value : 0
           translateX: 10
           translateY: 110
       }
   ]

    
   

 

圖 6：已添加到應用程序窗口的滑塊

 

定義綁定關係

最後，將圓心與滑塊值綁定。滑塊顯示在應用程序窗口中，您可以通過移動圓鈕來更改其值。但是，您無法引用滑塊值（該值是綁定所必需的）。解決辦法是定義一個 slider 變量，然後引用 slider.value。

1. 創建 slider 變量。
   
   

   var slider = SwingSlider{minimum: 0 maximum: 60 value: 0 translateX: 10 translateY: 110};

    
   
2. 定義綁定關係。
   
   

   Circle {
       centerX: bind slider.value+50 centerY: 60 radius: 50
     ...

    
   

bind 運算符會跟蹤右側的值的任何變化。當滑塊值發生變化時，圓心會隨之更新，JavaFX 會自動在新的位置顯示圓。由於徑向漸變填充的位置不發生變化，因此您可以看到圓是如何相對於初始填充進行移動的。

最後，讓我們來看一看數據綁定示例的完整代碼。編譯、運行和探究運行中的數據綁定。

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.ext.swing.SwingSlider;

import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.paint.Stop;
import javafx.scene.paint.RadialGradient;

var slider = SwingSlider{minimum: 0 maximum: 60 value: 0 translateX: 10 translateY: 110};

Stage {
    title: "Data Binding"
    width: 220
    height: 170
    scene: Scene { 
        fill: Color.LIGHTGRAY;
        content: [ 
            slider, 
            Circle {
                centerX: bind slider.value+50 centerY: 60 radius: 50
	            stroke: Color.YELLOW
	            fill: RadialGradient {
	                centerX: 50 centerY: 60 radius: 50
	                focusX: 50 focusY: 30
	                proportional: false
	                stops: [
	                    Stop {offset: 0 color: Color.RED},
	                    Stop {offset: 1 color: Color.WHITE},
	                ]
                }
           }
      ]
  }
  visible: true
}

總結

在本課中，您學習瞭如何創建數據綁定關係。在一個變量需要根據另一個變量的變化而更新時，可在您的應用程序中使用數據綁定機制。