Hello JavaFX! Part 1 by Michael | CodeData
top

Hello JavaFX! Part 1

分享:

Java FX 架構 << 前情

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

軟體或資源 需要的版本
NetBeans IDE 7.3
Java Development Kit (JDK) 7 update 10 或更新的版本
JavaFX SDK (已經包含在JDK裡面) 2.2.4 或更新的版本

如果你的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」物件像是應用程式視窗中的畫布,所有畫面的元件都由它處理與控制,它也可以決定應用程式畫面的大小;所有畫面需要的元件都會採用樹狀的架構,這個預設的應用程式比較簡單一些,只有一個容器和一個控制項元計:
hello-java-fx-part1-1

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

Sign In

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

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

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

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

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

hello-java-fx-part1-4

所以接下來你可以為這個畫面建立與設定一個的「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應用程式了,使用一開始介紹的方式,執行它並且操作看看:

hello-java-fx-part1-5

hello-java-fx-part1-6
Continue…

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

資料來源與參考資訊

後續 >> Hello JavaFX! Part 2

分享:
按讚!加入 CodeData Facebook 粉絲群

留言

留言請先。還沒帳號註冊也可以使用FacebookGoogle+登錄留言

Beneb Siny09/03

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);
}
});

這裡有錯誤啦

關於作者

張益裕。目前的工作是講師與作者,專長是教育訓練課程規劃、教材編製與課程推廣,技術書籍與專欄寫作。涵蓋的領域有OOAD、Java程式設計、JavaFX、Java Embedded、Android與SQL。已出版電子書Google Play圖書Pubu

熱門論壇文章

熱門技術文章