JavaFX UI Controls Part 1

JavaFX Layout Part 2 << 前情

JavaFX 2重新設計所有的畫面元件，包含現在應用程式中常見的各種元件，而且全部的元件都支援CSS，可以很容易設定它們的外觀。一般的應用程式會把畫面的元件分為容器與控制項元件，JavaFX把容器稱為「Parent」，在「JavaFX Layout」的兩篇文章已經介紹過它們。

其它像是文字、按鈕這類的元件，JavaFX把它們稱為「Controls」，這個部份會分為兩篇文章，第一篇說明顯示處理進度的「ProgressBar」和「ProgressIndicator」元件；第二篇會說明在應用程式中很常用來顯示與管理資料的「TableView」元件。在認識這些元件以後，就可以瞭解JavaFX 2提供的Controls元件基本的用法，而且會說明如何使用CSS設定它們的外觀。

ProgressIndicator

在一般的應用程式中，經常會執行一些需要花費一點時間的工作，例如從網路或資料庫中讀取需要顯示在畫面的資料。在應用程式執行這些工作的時候，如果只是簡單的在畫面上顯示「讀取中，請稍候…」的訊息，好像也是可以讓使用者知道應用程式現在正在處理一些工作，不過現在的使用者應該很習慣在畫面上看到類似這樣的呈現方式：

在應用程式處理一些工作的過程中，應該要儘量把處理的進度顯示在畫面上，就算是沒有辦法知道明確的進度，也應該使用現在使用者比較習慣的方式顯示處理中的畫面。ProgressIndicator元件可以在畫面上顯示處理中或是明確的處理進度，如果是短暫或無法取得處理進度，可以使用這個程式片段建立一個ProgressIndicator物件，再依照需要設定它的大小：

ProgressIndicator pi = new ProgressIndicator();
// 設定寬與高
pi.setPrefSize(80, 80);

ProgressIndicator元件也很適合在畫面上顯示靜態的進度資訊，例如顯示業務員的業績達成率。呼叫ProgressIndicator物件的「setProgress」方法可以設定它的進度，參數指定一個0.0到1.0的double數字，1.0表示100%：

ProgressIndicator pi = new ProgressIndicator();
// 設定進度為50%
pi.setProgress(0.5);

ProgressIndicator元件搭配的CSS樣式類別是「progress-indicator」，這個樣式類別包含設定進度顏色的「-fx-progress-color」。這個CSS設定檔裡面的片段設定進度顏色為橘色，另外加入文字的設定樣式：

.progress-indicator {
    -fx-progress-color: #ff8800;
    -fx-font-size: 16px;
    -fx-font-weight: bold;
}

在程式碼中使用這樣的程式片段設定CSS檔案，畫面中的ProgressIndicator元件就會套用CSS檔案中的設定：

Scene scene = new Scene(root);
String cssFile = getClass().getResource("MyStyle.css").toExternalForm();        
scene.getStylesheets().add(cssFile);        
primaryStage.setScene(scene);        
primaryStage.show();

使用這樣的設定方式，所有的ProgressIndicator元件都會使用同樣的設定，如果需要設定元件使用不同的進度顏色，可以在CSS設定檔中加入這樣的的設定，自己為顏色的設定取一個樣式的名稱：

.green-ind  { -fx-progress-color: #669900; }
.red-ind    { -fx-progress-color: #cc0000; }

在程式碼中使用這樣的程式片段設定ProgressIndicator元件套用的顏色設定：

Scene scene = new Scene(root);
String cssFile = getClass().getResource("MyStyle.css").toExternalForm();        
scene.getStylesheets().add(cssFile);

ProgressIndicator p4 = new ProgressIndicator();
p4.getStyleClass().add("red-ind");

ProgressIndicator p5 = new ProgressIndicator();
p5.getStyleClass().add("green-ind");

這個畫面使用上面介紹的作法，設定ProgressIndicator元件共同與特定的進度顏色設定：

ProgressBar

ProgressBar是比較傳統與簡單的顯示進度元件，使用與設定的方式跟ProgressIndicator元件幾乎一樣，不過它是一個長條形的區塊，可以設定它的寬與高，如果沒有呼叫「setProgress」方法設定進度，它會左右滑動表示正在處理工作。呼叫ProgressBar物件的「setProgress」方法可以設定它的進度，參數指定一個0.0到1.0的double數字，1.0表示100%。這個程式片段建立幾個ProgressBar元件，為它們設定不同的進度和寬與高：

ProgressBar b1 = new ProgressBar();
b1.setPrefHeight(16);

ProgressBar b2 = new ProgressBar();
b2.setProgress(0.5);
b2.setPrefWidth(300);
b2.setPrefHeight(24);

ProgressBar b3 = new ProgressBar();
b3.setProgress(0.8);
b3.setPrefWidth(600);
b3.setPrefHeight(30);

ProgressBar元件搭配的CSS樣式類別是「progress-bar」，這個樣式類別包含設定進度顏色的「-fx-accent」。使用這樣的設定方式，所有的ProgressBar元件都會使用同樣的設定，如果需要設定元件使用不同的進度顏色，可以在CSS設定檔裡面建立自己的樣式的名稱。這個CSS設定檔裡面設定通用與特定的進度顏色：

.progress-bar { 
    -fx-accent: #ff8800;
}

.green-bar  { -fx-accent: #669900; }
.red-bar    { -fx-accent: #cc0000; }

在程式碼中使用這樣的程式片段設定ProgressBar元件套用的顏色設定：

Scene scene = new Scene(root);
String cssFile = getClass().getResource("MyStyle.css").toExternalForm();        
scene.getStylesheets().add(cssFile);

ProgressBar b2 = new ProgressBar();
b2.getStyleClass().add("green-bar");

ProgressBar b3 = new ProgressBar();
b3.getStyleClass().add("red-bar");

這個畫面使用上面介紹的作法，設定ProgressBar元件共同與特定的進度顏色設定：

下一篇「JavaFX UI Controls Part 2」的文章會介紹比較重量級的元件「TableView」，這是經常在應用程式中用來顯示資料的元件。

後續 >> JavaFX UI Controls Part 2