Preface

序

2014年 3月 Oracle發表 JavaFX 8，新增 Modena主題、Date Picker、Tree Table、

3D API、列印功能與精簡事件語法等功能，最重要的是，自 Java S.E. 7 Update 6起，將 JavaFX併入 Java S.E. 之中，因此透過相同的 Java編譯器與直譯器則可編譯與執行 JavaFX程式，讓 JavaFX變得更為方便。

2014 Java Developer Day特別邀請 Oracle Java技術傳教士（Java Evangelist at Oracle）－Stephen Chin 分享 JavaFX 8 的新技術與實例應用，除了以 Java Applet、Java Web Start 與視窗應用程式等形式執行之外，並示範 JavaFX 8 在

Raspberry Pi與樂高機器人之應用，由此可以預見 JavaFX未來的發展。

JavaFX以「Write Once, Deploy Anywhere」的概念開發應用程式，可同時以 Java Applet、Java Web Start與視窗應用程式的形式執行，除了提供類似於 Java Swing的 GUI物件之外，JavaFX為強調動畫與多媒體效果，增加了圖表、多媒體、CSS樣式、效果、2D、3D等功能，並改進原有 Java Swing繁複的程式架構，讓 JavaFX變得更為精簡。

本書涵蓋 JavaFX 8所有物件與新功能，並深入解說 JavaFX 3D與如何以 Lambda Expression處理事件。書中內容及範例均經筆者再三著墨與測試，希望讀者能有所收獲，書中部份範例可參考筆者之教學網站：

https://sites.google.com/site/leohkkimo/demo

黃嘉輝

2014年 11月於 臺北商業大學企業管理學系

Chapter 2

JavaFX 程式

本章將介紹 JavaFX的程式架構。

2-1 JavaFX 程式架構

JavaFX 1.X是以 JavaFX Script的形式撰寫程式，其副檔名為 fx：

import javafx.stage.Stage;

import javafx.scene.Scene;

import javafx.scene.text.Text;

import javafx.scene.text.Font;

Stage {

title: "First JavaFX"

width: 250

height: 80

scene: Scene {

content: Text {

font: Font {

size: 16

}

x: 10,

y: 30

content: "Hello World - JavaFX"

}

}

}

Chapter 2 JavaFX 程式

26

接著以 JavaFX編譯器（javafxc.exe）編譯 JavaFX Script，由於 JavaFX 1.X同時支援桌上型應用程式（Desktop Profile）與手機應用程式（Mobile Profile），因此其編譯方式可分為：

類型 編譯方式 輸出目錄

預設方式 javafxc *.fx 預設

桌上型應用程式 javafxc -profile desktop -d desktop *.fx desktop

手機應用程式 javafxc -profile mobile -d mobile *.fx mobile

執行 JavaFX類別，則以 JavaFX直譯器（javafx.exe）執行類別檔案，執行方式亦可分為：

類型 執行方式

預設方式 javafx JavaFXApplication

顯示啟動圖像 javafx -splash:spash.jpg JavaFXApplication

桌上型應用程式 javafx -profile desktop JavaFXApplication

但由於 JavaFX Script與傳統 Java差異甚多，開發人員需花費較多的時間學習，也因此 JavaFX Script並未受到很大的重視。

至 JavaFX 2.0，Oracle將 JavaFX重新改寫，以 Java語法取代原 JavaFX Script語法與移除支援手機的 Mobile版本，並正式併入 Java S.E. 7 Update 6中，將原有的 JavaFX 編譯器（javafxc.exe）與直譯器（javafx.exe），以 Java 編譯器（javac.exe）與直譯器（java.exe）取代，因此可使用同一個編譯器編譯 Java與

JavaFX程式。

開發 JavaFX 應用程式需繼承 javafx.application.Application 抽象類別，

Application抽象類別類似於 Java Swing的 JApplet類別，以其「生命週期」執

行 JavaFX，分別為：

init()：初始化 JavaFX應用程式。

start()：為 JavaFX應用程式的進入點，在此為 Java Applet。

launch()：啟動獨立（Standalone）的 JavaFX應用程式，在此為視窗程式。

stop()：當 JavaFX應用程式結束之前，將執行 stop()方法。

2-1 JavaFX 程式架構

27

其程式架構如下：

import javafx.application.Application; import javafx.scene.Scene; import javafx.stage.Stage; ... // 繼承 javafx.application.Application抽象類別

public class JavaFXHelloWorld extends Application { @Override public void start(Stage primaryStage) { ... } public static void main(String[] args) { launch(args); } }

JavaFX 同樣以 main()方法為進入點，但由於 JavaFX 可同時以視窗程式、Java Applet 或以 Java Web Start 啟動等形式執行，因此其程式同時包含 main()與

start()方法。

由於視窗程式是以 main()方法為進入點，因此在 main()中執行 Application抽象

類別的 launch()方法，啟動獨立的 JavaFX 應用程式，則以視窗的形式執行

JavaFX 程式。若是以 Java Applet 形式執行，則將不會執行 main()，而是由

Application 抽象類別的 start()方法開始，因此上述的程式架構可同時滿足視

窗程式、Java Applet與以 Java Web Start啟動等形式，一舉數得。

請參考範例 2-1：

import javafx.application.Application; import javafx.scene.Scene; import javafx.stage.Stage; import javafx.scene.text.Text; import javafx.scene.Group; // 繼承 javafx.application.Application抽象類別

public class JavaFXHelloWorld extends Application { @Override public void start(Stage primaryStage) {

Chapter 2 JavaFX 程式

28

Text text = new Text("JavaFX 8 Hello World"); text.setX(50); text.setY(50); Group group = new Group(); group.getChildren().add(text); // 設定 Scene的 Layout Pane

Scene scene = new Scene(group); // 設定 Stage的標題

primaryStage.setTitle("JavaFX 8 Hello World"); // 設定 Stage的寬度

primaryStage.setWidth(250); // 設定 Stage的高度

primaryStage.setHeight(150); primaryStage.setScene(scene); primaryStage.setResizable(false); // 顯示 Stage

primaryStage.show(); } public static void main(String[] args) { launch(args); } }

JavaFX 以樹狀架構的方式組合物件，如同分層堆疊一般，各節點稱為 Node，節點並分為以下三類：

Root：最上層的容器。

Parent：置放物件的容器。

Leaf：容器中的物件。

其中 javafx.stage.Stage類別為 JavaFX最上層的容器（Container），類似於 Java Swing的 JRootPane類別，用以置放 Scene或 SubScene物件。javafx.scene.Scene

類別則是 JavaFX Scene Graph，可藉以繪圖或配置各類 GUI物件。

程式完成之後，同樣以 Java編譯器（javac.exe）與直譯器（java.exe）編譯 JavaFX程式與執行類別檔案。

2-1 JavaFX 程式架構

29

以下為以視窗的形式執行範例 2-1，與 Java Swing不同的是，JavaFX會自動處理部份視窗事件如關閉視窗：

由於 JavaFX可同時以 Java Applet、Java Web Start與視窗應用程式的形式執行，因此其建立 Java Archive（JAR）的方式與一般的 Java程式不同，並非以 jar.exe建立，而是以 javafxpackager.exe建立 JavaFX的 JAR與相關檔案，稱為 JavaFX Packager。

JavaFX Packager除了將類別、圖像等檔案建立 JAR檔案之外，並分別產生執行

Java Applet與 Java Web Start所需的 HTML網頁與 JNLP檔案，可省去開發人員自行建立的步驟，此一概念稱為「Write Once, Deploy Anywhere」。

以 JavaFX Packager建立 JAR的方式可分為：

語法 類型

javafxpackager -createbss 將 CSS檔案轉為 Binary格式

javafxpackager -createjar 僅建立 JAR檔案

javafxpackager -deploy 除了 JAR之外，並產生 HTML與 JNLP檔案

javafxpackager -makeall 依序編譯 JavaFX 程式、建立 JAR、產生 HTML 與 JNLP檔案

javafxpackager -signJar 對 JAR進行電子簽署的認證動作

例如以下指令將同時建立 JAR、HTML與 JNLP檔案，並設定輸出目錄為 dist、

Java Applet於網頁中的寬度與高度分別為 250與 150：

javafxpackager -deploy -appclass JavaFXHelloWorld -srcdir . -outdir dist

-outfile JavaFXHelloWorld -width 250 -height 150 -name JavaFXHelloWorld -v

Chapter 2 JavaFX 程式

30

以下為 JavaFX Packager 所產生的 HTML 網頁內容，與一般以<APPLET...>

</APPLET>標籤定義 Java Applet不同，此外並包含執行 JNLP的超連結：

<html><head> <SCRIPT src="http://java.com/js/dtjava.js"></SCRIPT> <script> function launchApplication(jnlpfile) { dtjava.launch ( { url : 'JavaFXHelloWorld.jnlp' }, { javafx : '2.2+' }, {} ); return false; } </script> <script> function javafxEmbed() { dtjava.embed ( { url : 'JavaFXHelloWorld.jnlp', placeholder : 'javafx-app-placeholder', width : 250, height : 150 }, { javafx : '2.2+' }, {} ); } <!-- Embed FX application into web page once page is loaded --> dtjava.addOnloadCallback(javafxEmbed); </script> </head><body> <h2>Test page for <b>JavaFXHelloWorld</b></h2> <b>Webstart:</b> <a href='JavaFXHelloWorld.jnlp' onclick="return launchApplication('JavaFXHelloWorld.jnlp');"> click to launch this app as webstart </a><br><hr><br>

2-1 JavaFX 程式架構

31

<!-- Applet will be inserted here --> <div id='javafx-app-placeholder'></div> </body></html>

以下為 JavaFX Packager所產生的 JNLP內容，除了原有的 JNLP標籤之外，並新增<jfx:javafx-runtime>與<jfx:javafx-desc>之 XML標籤，分別定義 JavaFX執行 Runtime Environment的版本與 JavaFX類別名稱及長寬：

<?xml version="1.0" encoding="utf-8"?> <jnlp spec="1.0" xmlns:jfx=http://javafx.com href="JavaFXHelloWorld.jnlp"> <information> <title>Sample JavaFX Application</title> <vendor>Unknown vendor</vendor> <description>JavaFX 8.0 application.</description> <offline-allowed/> </information> <resources> <jfx:javafx-runtime version="2.2+" href="http://javadl.sun.com/webapps/download/ GetFile/javafx-latest/windows-i586/javafx2.jnlp"/> </resources> <resources> <j2se version="1.6+" href="http://java.sun.com/products/autodl/j2se"/> </resources> <applet-desc width="250" height="150" main-class="com.javafx.main.NoJavaFXFallback" name="JavaFXHelloWorld" > <param name="requiredFXVersion" value="2.2+"/> </applet-desc> <jfx:javafx-desc width="250" height="150" main-class="JavaFXHelloWorld" name="JavaFXHelloWorld" /> <update check="background"/> </jnlp>

除了上述兩種格式之外，另外尚有 GroovyFX、ScalaFX與 Visage，同樣可開發

JavaFX應用程式，其程式長度更為精簡。請分別參考以下網站之介紹：

GroovyFX：http://groovyfx.org

ScalaFX：https://code.google.com/p/scalafx

Visage：https://code.google.com/p/visage

Chapter 2 JavaFX 程式

32

以下為以 GroovyFX改寫範例 2-1：

start { stage(title: 'JavaFX 8 Hello World', visible: true) { scene(width: 250, height: 150) { group() { text(x: 50, y: 50, text: "JavaFX 8 Hello World") } } } }

以下為以 ScalaFX改寫範例 2-1：

object HelloJavaOne extends JFXApp { stage = new Stage { title = "JavaFX 8 Hello World" width = 250 height = 150 scene = new Scene { Text { x = 50 y = 50 text = "JavaFX 8 Hello World" } } } }

以下為以 Visage改寫範例 2-1：

Stage {

title: "JavaFX 8 Hello World"

width: 250

height: 150

scene: Scene {

content: Text {

x: 50

y: 50

text: "JavaFX 8 Hello World"

}

}

}

2-2 NetBeans Project

33

2-2 NetBeans Project

在設計 JavaFX應用程式時，可使用 NetBeans IDE建立、編輯、編譯、執行、除錯及維護專案與程式，以縮短程式的開發時程，本書範例大部份均以 NetBeans IDE開發，以 NetBeans IDE建立 JavaFX專案的步驟如下：

執行 NetBeans IDE 8.0，下圖為 NetBeans IDE 8.0開發環境的開始畫面：

點選「File」→「New Project」選單建立新專案，並於「New Project」對話盒中選取「JavaFX Application」，點選「Next」按鈕至下一步：

Chapter 2 JavaFX 程式

34

接著輸入專案名稱（Project Name）及專案資料夾，點選「Finish」按鈕完成專案建立，其中專案名稱為 JavaFX的預設類別名稱，NetBeans並以全部小寫的專案名稱做為專案的套件（Package）名稱：

NetBeans 將在專案資料夾下分別產生 build.xml、manifest.mf 檔案與

src、nbproject目錄，其中 src目錄置放 JavaFX程式，nbproject目錄置放編譯 JavaFX程式與建立 JAR檔案所需的相關設定檔案。此外，並在

NetBeans中顯示所產生的 JavaFX程式，預設內容如下：

package javafxapplication;

import javafx.application.Application;

import javafx.event.ActionEvent;

import javafx.event.EventHandler;

import javafx.scene.Scene;

import javafx.scene.control.Button;

import javafx.scene.layout.StackPane;

import javafx.stage.Stage;

public class JavaFXApplication extends Application {

@Override

public void start(Stage primaryStage) {

Button btn = new Button();

btn.setText("Say 'Hello World'");

btn.setOnAction(new EventHandler<ActionEvent>() {

2-2 NetBeans Project

35

@Override

public void handle(ActionEvent event) {

System.out.println("Hello World!");

}

});

StackPane root = new StackPane();

root.getChildren().add(btn);

Scene scene = new Scene(root, 300, 250);

primaryStage.setTitle("Hello World!");

primaryStage.setScene(scene);

primaryStage.show();

}

public static void main(String[] args) {

launch(args);

}

}

修改程式內容如範例 2-1，接著點選「Run」→「Build Project」選單，依序編譯 JavaFX程式、建立 JAR檔案、產生執行 Java Applet與 Java Web Start所需的 HTML網頁與 JNLP檔案，NetBeans並在專案資料夾下新增 build與 dist目錄，其中 build目錄置放 JavaFX類別檔案，dist目錄置放 JAR、HTML與 JNLP檔案。此外，亦可點選「Run」→「Run Project」選單編譯及執行專案，執行結果如下圖所示：

Chapter 2 JavaFX 程式

36

由於 JavaFX可同時以視窗程式、Java Applet或以 Java Web Start啟動等形式執行，因此在執行專案之前，可選擇工具列的「Set Project Configuration」，分別包括「<default config>」、「Run as WebStart」與「Run in Browser」等選項，以選擇不同模式執行 JavaFX專案，如下圖所示：

欲開啟 JavaFX專案，可點選「File」→「Open Project」選單，NetBeans將顯示開啟檔案對話盒，如下圖所示，選擇 JavaFX專案並點選「Open Project」按鈕開啟：

請參考範例 2-2。

2-3 JavaFX Scene Builder 與 FXML

以 NetBeans開發 Java Swing應用程式，可使用 NetBeans的 GUI配置工具配置

Java Swing物件，待完成物件配置之後，NetBeans會自動產生相對應的 Java程式碼。

Oracle 為加速 JavaFX 圖形介面的開發，推出 JavaFX Scene Builder，如同

NetBeans一般，藉由拖曳的方式配置物件，待完成配置之後，並儲存成 FXML格式檔案，其副檔名為 fxml，FXML類似於 Java S.E. 5.0新增的 Synth Look and Feel，最大特色是以 XML 描述物件配置與樣式，JavaFX 程式在執行階段只需

2-3 JavaFX Scene Builder 與 FXML

37

讀取 FXML 檔案，則可設定 JavaFX 的物件配置，且配置或樣式改變，也僅需修改 FXML檔案，不需修改 JavaFX程式。

JavaFX Scene Builder具有以下特色：

以拖曳的方式配置物件。

以所見即所得（What You See is What You Get）的方式編輯物件配置，並自動產生 FXML程式碼。

與 NetBeans、Eclipse、IntelliJ IDEA等緊密整合。

支援 CSS（Cascading Style Sheets Styling）設定物件樣式。

支援跨平臺如 Microsoft Windows、Mac OS X、UNIX、Linux等作業系統。

JavaFX Scene Builder已與 NetBeans、Eclipse、IntelliJ IDEA等緊密整合，因此可由 NetBeans、Eclipse、IntelliJ IDEA等建立含有 FXML的專案。以 NetBeans為例，依前一章的步驟，依序執行 NetBeans，接著點選「File」→「New Project」選單建立新專案，並於「New Project」對話盒中選取「 JavaFX FXML Application」，點選「Next」按鈕至下一步：

接著輸入專案名稱及專案資料夾，點選「Finish」按鈕完成專案建立。NetBeans會在 src目錄下產生 JavaFXApplication.java、FXMLDocumentController.java與

FXMLDocument.fxml。

Chapter 2 JavaFX 程式

38

以 JavaFX Scene Builder 2.0配置物件的步驟如下：

點選 NetBeans專案中的 FXMLDocument.fxml，以 JavaFX Scene Builder 2.0開啟，下圖為 JavaFX Scene Builder 2.0的開始畫面：

其中 JavaFX Scene Builder 2.0包括以下區域：

物件面板（Library Panel）：位於 JavaFX Scene Builder 2.0左上方，以顯示 JavaFX 所有的 GUI 物件，並分成 Containers、Controls、Menu、Miscellaneous、Shapes、Charts與 3D等類別，其中 3D為 JavaFX 8新增之物件，包括 AmbientLight、 ParallelCamera、 PerspectiveCamera、

PointLight類別，請參考第 21章之說明。

階層面板（Hierarchy Panel）：位於 JavaFX Scene Builder 2.0的左下方，以顯示配置物件的階層關係。

內容面板（Content Panel）：位於 JavaFX Scene Builder 2.0的中間區域，可藉由拖曳的方式，自物件面板中拖曳物件至內容面板以配置 物件。

屬性面板（Property Panel）：位於 JavaFX Scene Builder 2.0的右側，以設定物件的屬性。

配置面板（Layout Panel）：位於屬性面板的下方，以設定物件的位置。

程式面板（Code Panel）：位於配置面板的下方，以設定物件對應的程式。

2-3 JavaFX Scene Builder 與 FXML

39

接著選擇物件如標籤，並拖曳至內容面板中，此時屬性面板將顯示標籤

的所有屬性如標籤文字、字型、文字顏色、對齊方式等。接著依序以相

同的方式拖曳物件至內容面板，此時階層面板將顯示所有物件的樹狀關

係，其中最上層的容器為 GridPane，如下圖所示：

JavaFX Scene Builder 2.0新增主題預覽（Theme Preview）功能，可點選「Preview」→「JavaFX Theme」選單選擇不同的主題，包括：

Modena (FX8)

Modena Touch (FX8)

Modena High Contrast - Black on White (FX8)

Modena High Contrast - White on Black (FX8)

Modena High Contrast - Yellow on Black (FX8)

Caspian (FX2)

Caspian Embedded (FX2)

Caspian Embedded QVGA (FX2)

如下圖所示：

Chapter 2 JavaFX 程式

40

待完成物件配置之後，點選「File」→「Save」選單儲存為 FXML檔案，其內容如下所示：

<?import java.lang.*?>

<?import java.net.*?>

<?import javafx.geometry.*?>

<?import javafx.scene.control.*?>

<?import javafx.scene.layout.*?>

<?import javafx.scene.text.*?>

<GridPane alignment="CENTER" styleClass="root"

hgap="10.0" vgap="10.0"

xmlns="http://javafx.com/javafx/8"

xmlns:fx="http://javafx.com/fxml/1"

fx:controller="javafxapplication.FXMLDocumentController">

<padding>

<Insets bottom="25.0" left="25.0" right="25.0" top="25.0" />

</padding>

<children>

<Text id="welcome-text" text="Welcome to JavaFX 8"

GridPane.columnIndex="0" GridPane.columnSpan="2"

GridPane.rowIndex="0" />

<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" />

<HBox alignment="BOTTOM_RIGHT" spacing="10.0"

GridPane.columnIndex="1" GridPane.rowIndex="4">

<children>

<Button fx:id="button" text="Login" />

</children>

</HBox>

</children>

<columnConstraints>

<ColumnConstraints />

<ColumnConstraints />

</columnConstraints>

<rowConstraints>

<RowConstraints />

<RowConstraints />

<RowConstraints />

<RowConstraints />

2-3 JavaFX Scene Builder 與 FXML

41

<RowConstraints />

</rowConstraints>

</GridPane>

接著在 JavaFX 程式中以 javafx.fxml.FXMLLoader 類別的 load()方法將

FXML檔案的內容載入至 JavaFX程式中，由於在 JavaFX Scene Builder 2.0中設定最上層的容器為 GridPane類別，為避免因變更最上層容器而

需要修改原 JavaFX程式，因此可將載入 FXML內容轉換為 Parent抽象

類別，如此不論最上層容器為何，均不需修改 JavaFX程式。由於 FXML已處理所有的物件配置，因此 JavaFX程式變得更為精簡：

try { // 載入 FXML內容並轉換為 Parent

Parent root = FXMLLoader.load(

getClass().getResource("FXMLDocument.fxml"));

Scene scene = new Scene(root);

primaryStage.setTitle("JavaFX 8 Hello World");

primaryStage.setScene(scene);

// Show Stage

primaryStage.show();

}

catch (IOException ex) {...}

...

FXML可搭配處理事件，首先建立一處理事件的 Controller類別，並將此 Controller類別與 FXML檔案置於同一目錄，例如：

package javafxapplication;

import javafx.scene.control.TextField;

import javafx.event.ActionEvent;

import javafx.fxml.FXML;

import javafx.fxml.Initializable;

import java.net.URL;

import java.util.ResourceBundle;

public class FXMLDocumentController implements Initializable {

Chapter 2 JavaFX 程式

42

@FXML

private TextField textfield;

@FXML

private void handleButtonAction(ActionEvent event) {

textfield.setText("JavaFX 8 Hello World");

}

...

}

接著在 JavaFX Scene Builder 2.0的程式面板中，分別設定文字欄位與按鈕的 fx:id 為 textfield 與 button，並設定按鈕的 On Action 事件為handleButtonAction，如下圖所示：

FXML的內容將變更為：

<TextField GridPane.columnIndex="1" GridPane.rowIndex="1"

fx:id="textfield" />

...

<children>

<Button fx:id="button" text="Login" onAction="#handleButtonAction" />

</children>

...

此事件為上述 Controller類別中所定義的事件程式，當點選按鈕時，則以此自訂 Controller類別的 handleButtonAction 程式處理按鈕事件，並

顯示文字於文字欄位中，請參考範例 2-3。

2-3 JavaFX Scene Builder 與 FXML

43

除了處理事件的 Controller類別之外，FXML支援以 CSS設定物件樣式，首先將 CSS樣式定義於 CSS檔案中，並將此 CSS檔案與 FXML檔案置於同一目錄， 例如：

.background {

-fx-background-image: url("images/javafx.jpg");

-fx-background-repeat: repeat;

-fx-background-color:

linear-gradient(#38424b 0%, #1f2429 20%, #191d22 100%),

linear-gradient(#20262b, #191d22),

radial-gradient(center 50% 0%, radius 100%,

rgba(114,131,148,0.9), rgba(255,255,255,0));

}

.top-segment {

-fx-background-color: rgba(255, 255, 255, 0.05);

-fx-border-color: rgba(0, 0, 0, 0.5);

-fx-border-width: 1, 1.5;

-fx-border-insets: -1, 0;

}

.title {

-fx-font-size: 16;

}

.label {

-fx-font-family: "Verdana";

-fx-font-size: 12;

-fx-text-fill: rgba(162, 21, 35, 1);

-fx-effect: dropshadow(one-pass-box, rgba(0,0,0,0.6),0,0.0,0,1);

}

Chapter 2 JavaFX 程式

44

.button .text {

-fx-effect: dropshadow(one-pass-box, rgba(0,0,0,0.8),0,0.0,0,-1);

}

.button {

-fx-background-color:

rgba(255, 255, 255, 0.08),

rgba(0,0,0,0.8),

#090a0c,

linear-gradient(#4a5661 0%, #1f2429 20%, #1f242a 100%),

linear-gradient(#242a2e, #23282e),

radial-gradient(center 50% 0%, radius 100%,

rgba(135,142,148,0.9), rgba(255,255,255,0));

-fx-background-radius: 7, 6, 5, 4, 3, 5;

-fx-background-insets: -3 -3 -4 -3, -3, 0, 1, 2, 0;

-fx-font-family: "Verdana";

-fx-text-fill: blue;

-fx-text-fill: linear-gradient(white, #d0d0d0);

-fx-padding: 10 20 10 20;

}

.button:focused, .button:hover {

-fx-background-color:

rgba(255, 255, 255, 0.08),

rgba(0, 0, 0, 0.8), #090a0c,

linear-gradient(#4a5661 0%, #1f2429 20%, #1f242a 100%),

linear-gradient(#3f4950, #23282e),

radial-gradient(center 50% 0%, radius 100%,

rgba(135,142,148,0.9), rgba(255,255,255,0));

}

.text-field {

-fx-background-color: rgba(255, 255, 255, 0.3);

-fx-background-insets: 0 0 -1 0, 0, 1.5;

-fx-background-radius: 6, 5, 4;

-fx-padding: 6 10 4 10;

-fx-effect: innershadow(gaussian, rgba(0,0,0,0.8),5,0,0,2);

-fx-font-family: "Verdana";

}

.text-field:focused {

-fx-prompt-text-fill: darkgrey;

-fx-background-color: rgba(235, 235, 235, 0.5);

}

2-4 JavaFX 主題樣式

45

接著在 JavaFX Scene Builder 2.0 的屬性面板中，設定最上層容器 GridPane 的

Stylesheets為上述的 CSS檔案，並設定 GridPane的 Style Class為 CSS檔案中所定義的 root與 background，如下圖所示：

如此則完成以 CSS 設定物件樣式，其中 JavaFX 程式完全不需任何修改，請參考範例 2-4。

2-4 JavaFX 主題樣式

JavaFX 支援主題（Theme），大部份的作業系統或軟體皆提供此功能，以 Microsoft Windows 7作業系統為例，可於「控制台」→「外觀及個人化」→「變更佈景主題」中設定，預設為 Aero 主題，其主題設定檔為 aero.theme，位於

Windows\Resources\Themes目錄下。