Hello JavaFX! Part 1

Java FX 架構 << 前情

想要認識JavaFX這個新朋友，最好的方式還是親自動手試試看。開發JavaFX應用程式，目前最方便的工具是NetBeans，雖然你還是可以使用Eclipse或其它開發工具，不過NetBeans和JavaFX的結合程度會好一些。在這個系列的文章中，開發環境需要使用這些軟體或資源：

如果你的JDK版本還是Java SE 6，就必須到這裡下載與安裝JavaFX SDK。
如果你想要使用NetBeans 7.1或7.2，可以參考這裡執行相關的設定。

準備好開發環境以後，就可以跟著這裡的介紹，快速的瞭解JavaFX應用程式的基本架構與設計方式，還有幾個重要的特性，例如CSS和FXML：

• Hello JavaFX！：一個最簡單的JavaFX應用程式，用來看看應用程式基本的架構
• Sign In：建立一個用來登入的畫面，可以讓使用者輸入帳號與密碼後選擇登入的按鈕，示範控制項元件的使用
• CSS：延續前一個提供登入畫面的應用程式，為它加入可以設定外觀的CSS檔案，瞭解JavaFX CSS的基本作法
• FXML：繼續登入畫面的實作，把畫面從使用程式設計的方式，改為使用FXML技術來完成，體驗這種全新的使用者介面設計方式
• Circles：使用JavaFX繪圖、動畫與特殊效果的API，製作一個簡單的示範程式
• Deployment：瞭解在完成一個JavaFX應用程式的設計以後，如何將應用程式發佈給使用者

Hello JavaFX!

延續NetBeans這個開發工具一貫的風格，使用它來建立一個JavaFX應用程式後，會幫我們準備好基本的架構和必要的東西。你只要在NetBeans中選擇建立一個新專案，然後選擇「JavaFX -> JavaFX Application」，接著輸入專案的名稱「HelloJavaFX」，最後選擇「Finish」按鈕。NetBeans在幫你建立好一個JavaFX應用程式專案，也會自動開啟預設的主程式，原始程式碼會像這樣：

package hellojavafx;

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 HelloJavaFX extends Application {

    @Override
    public void start(Stage primaryStage) {
        Button btn = new Button();
        btn.setText("Say 'Hello World'");
        btn.setOnAction(new EventHandler() {
            @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);
    }
}

在這個預先建立好的程式碼中，可以先瞭解許多JavaFX應用程式基本的架構：

• JavaFX是一套全新設計的架構與API，所以你會看到程式一開始就會import許多「javafx」套件下的API。
• 一個JavaFX應用程式的主要類別必須繼承自「javafx.application.Application」類別，「start」方法是JavaFX應用程式的進入點，就跟一般應用程式的「main」方法一樣
• JavaFX 「Stage」是應用程式最頂端的容器，會經由「start」方法的參數傳送給你；「Scene」類別用來放置畫面的內容，建立Scene物件的時候，可以指定一個畫面最頂端的容器物件，還有畫面的大小。
• 在JavaFX應用程式的畫面中，所有的元件都是用樹狀的結構設計的，在這裡使用的是「StackPane」容器，它稱為「root」。
• 容器中可以包含所有畫面需要的元件，這裡為它加入一個「Button」控制項元件。
• 如果是一個單純的JavaFX應用程式，並不需要一般應用程式的進入點「main」方法；可是以前使用Swing和AWT開發的應用程式，也可以整合JavaFX提供的元件到應用程式，加強畫面的功能，在這樣的情況下，這個應用程式就只是一般的Java應用程式，所以才需要「main」方法。

JavaFX應用程式基本的架構會像下面的圖型。「Stage」是最頂端也是只有一個的容器物件，它就是應用程式的視窗；「Scene」物件像是應用程式視窗中的畫布，所有畫面的元件都由它處理與控制，它也可以決定應用程式畫面的大小；所有畫面需要的元件都會採用樹狀的架構，這個預設的應用程式比較簡單一些，只有一個容器和一個控制項元計：

在NetBeans中要執行JavaFX應用程式，只要選擇專案目錄後，再選擇「Run」，它就會幫你處理所有的工作，稍等一下子以後，就可以看到像這樣的視窗出現在螢幕。按下這個應用程式畫面中的按鈕，會在終端機中顯示「Hello World!」的訊息：

Sign In

使用需要的控制項元件，建立一個桌面應用程式畫面，應該是最常見的應用了。JavaFX應用程式的基本架構，就像前面介紹的一樣，這個範例會加入一些常用的控制項元件，也會介紹一個常用的容器元件。這個應用程式的畫面會像這樣：

這個畫面使用一般常見的文字、標籤、欄位還有按鈕元件，建立一個讓使用者執行登入工作的視窗。畫面中提供讓使用者輸入帳號與密碼的欄位，使用者在選擇登入按鈕以後，程式會讀取輸入的內容，然後執行帳號與密碼的檢查工作。

使用前面介紹過的方式，建立一個名稱為「SignIn」的JavaFX應用程式。在NetBeans中開啟主程式「SignIn.java」以後，把「start」方法中的程式碼修改為像這樣的內容，只保留一行顯示視窗的敘述就好了：

@Override
public void start(Stage primaryStage) {
    primaryStage.show();
}

這個登入畫面的安排很適合使用「GridPane」，它就像一個表格，可以把元件放在指定的欄與列，也可以為它設定邊界與間隔：

所以接下來你可以為這個畫面建立與設定一個的「GridPane」容器，把下面的程式碼加入「start」方法中，可是要在放在「primaryStage.show();」這行敘述之前：

GridPane grid = new GridPane();
grid.setAlignment(Pos.CENTER);
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(25, 25, 25, 25));

Scene scene = new Scene(grid, 300, 275);
primaryStage.setScene(scene);

上面的程式碼在建立「GridPane」容器物件後，使用「setAlignment」方法設定所有元件的位置對齊正中央；「setHgap」與「setVgap」設定元件之間的水平與垂直間隔為10個畫素；「setPadding」方法用來設定邊界，給它一個「Insets」物件指定上、下、左、右的邊界為25個畫素。

在建立「Scene」物件時，指定「GridPane」物件為「root」，也就是畫面樹狀結構中最頂端的容器物件，同時也設定畫面的大小為300乘275；最後把「Scene」物件設定給「Stage」物件，這樣就完成這個畫面的主要設定了。

加入Text、Label與Field元件

畫面中需要顯示標題、說明和輸入帳號與密碼用的欄位元件，把下面的程式碼加在建立「Scene」物件的敘述之前：

Text scenetitle = new Text("Welcome");
scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
grid.add(scenetitle, 0, 0, 2, 1);

Label userName = new Label("User Name");
grid.add(userName, 0, 1);

final TextField userTextField = new TextField();
grid.add(userTextField, 1, 1);

Label pw = new Label("Password");
grid.add(pw, 0, 2);

final PasswordField passwordField = new PasswordField();
grid.add(passwordField, 1, 2);

畫面中顯示歡迎訊息用的標題使用「Text」元件，設定它的字型以後，使用「add」方法加入「GridPane」中第一欄與第一列的位置，並指定它佔用兩個欄位與一列的空間；欄位的說明使用「Label」元件，帳號使用「TextField」元件，密碼使用「PasswordField」元件，它們分別加入「GridPane」中對應的位置。

加入Button與Text元件

使用者輸入帳號與密碼以後，畫面要提供選擇登入的按鈕和顯示登入結果訊息的元件，把下面的程式碼加在建立「Scene」物件的敘述之前：

Button btn = new Button("Sign in");
HBox hbBtn = new HBox(10);
hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
hbBtn.getChildren().add(btn);
grid.add(hbBtn, 1, 4);

final Text actiontarget = new Text();
grid.add(actiontarget, 1, 6);

讓使用者執行登入動作的「Button」控制項元件，希望它會位置在容器中的右側，所以再使用一個「HBox」元件把按鈕元件包裝起來，它是一種簡單、好用的容器，讓在裡面的元件使用水平的方式排列，再呼叫「setAlignment」方法設定加入的按鈕元件要靠向右側；最後建立的「Text」元件是用來顯示登入成功或失敗訊息用的。

加入Button元件的事件控制

使用者按下登入按鈕以後，應用程式要執行讀取輸入的資訊與判斷是否正確的工作，把下列的程式碼加在建立「Scene」物件的敘述之前：

btn.setOnAction(new EventHandler() {
    @Override
    public void handle(ActionEvent e) {
        String userNameValue = userTextField.getText();
        String passwordValue = passwordField.getText();

        String result = "Incorrect!";

        if (userNameValue.equals("simon") && passwordValue.equals("javafx") ) {
            result = "Welcome!";
        }

        actiontarget.setFill(Color.FIREBRICK);
        actiontarget.setText(result);
    }
});

控制項元件可以使用「setOnAction」方法為它加入事件的控制，為它註冊一個「EventHandler」物件，這是JavaFX新的事件控制架構，採用Java SE 5加入的泛型設計；在「handle」方法中，先讀取使用者輸入的帳號與密碼，判斷它們是否為simon與javafx，再依照判斷的結果，設定「actiontarget」物件的內容為正確或錯誤的訊息。

執行應用程式

完成這個JavaFX應用程式了，使用一開始介紹的方式，執行它並且操作看看：

Continue…

在下一篇「Hello JavaFX! Part 2」的內容中，將會使用類似的範例，介紹JavaFX技術中兩個重要的架構，包含如何在JavaFX應用程式中套用網頁設計的CSS技術，不用修改任何程式碼，就可以改變應用程式的外觀；還有JavaFX中全新的畫面設計方式，採用FXML技術設計應用程式的畫面，它並不是Java程式碼，雖然是全新的東西，不過跟CSS技術一樣，也是JavaFX中非常棒的一種技術。

資料來源與參考資訊

• Oracle
• JavaFX

後續 >> Hello JavaFX! Part 2