Hello JavaFX! Part 1
想要認識JavaFX這個新朋友,最好的方式還是親自動手試試看。開發JavaFX應用程式,目前最方便的工具是NetBeans,雖然你還是可以使用Eclipse或其它開發工具,不過NetBeans和JavaFX的結合程度會好一些。在這個系列的文章中,開發環境需要使用這些軟體或資源:
如果你的JDK版本還是Java SE 6,就必須到這裡下載與安裝JavaFX SDK。 準備好開發環境以後,就可以跟著這裡的介紹,快速的瞭解JavaFX應用程式的基本架構與設計方式,還有幾個重要的特性,例如CSS和FXML:
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應用程式基本的架構會像下面的圖型。「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應用程式了,使用一開始介紹的方式,執行它並且操作看看: 在下一篇「Hello JavaFX! Part 2」的內容中,將會使用類似的範例,介紹JavaFX技術中兩個重要的架構,包含如何在JavaFX應用程式中套用網頁設計的CSS技術,不用修改任何程式碼,就可以改變應用程式的外觀;還有JavaFX中全新的畫面設計方式,採用FXML技術設計應用程式的畫面,它並不是Java程式碼,雖然是全新的東西,不過跟CSS技術一樣,也是JavaFX中非常棒的一種技術。 資料來源與參考資訊 |
Beneb Siny
09/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);
}
});
這裡有錯誤啦