JavaFX - 不多數不啰嗦，開始肯定要來個HelloWorld

 

1.創建一個JavaFX項目

這樣項目就建好了，初次項目不包含馬賽克部分

2.新建一個圖形描述文件 - .fxml

這是描述界面組件以及布局的文件

 

 

 

接着右鍵這個.fxml文件，我這里叫MyScene.fxml，可以在菜單中找到open with SceneBuilder,打開的其實就是之前在首選項配置好的exe

點擊畫面組件區的AnchorPane，中間黑色的編輯區就會出現一個十字，然后在右手邊屬性區，找到layout，然后填寫畫布的大小，

 

 

到現在為止，就可以開始填充需要的控件了，可以在控件選擇區拖拉需要的組件，如一個按鈕Button,找不到組件的可以在上面Library的地方輸入需要的組件名查找。

 

這里可以選擇輸入Button的展示名稱，這里我輸入的Text為MyButton,

 

在Code里面找到fxid，這個ID的作用是可以在Java代碼里面，寫上button的ID就可以映射到這個button的對象，直接進行編輯，包括setText等等

 

 

同樣的再拖一個TextField出來，並且ID為myTextField

 

最后想在button上加一個事件監聽，按按鈕把時間顯示在下面的輸入框里面，我們需要點擊按鈕，在Code里面找到onAction，然后把action名填上去，這個action名就是對應Java代碼的方法名

 

 保存一下文件ctrl+s,OK，基本編輯完成了,提示一下，兩個控件都必須填好fxId,不然java里面無法找到對應的空間對象

現在這個fxml文件會看到有了變化，內容如下

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane prefHeight="267.0" prefWidth="348.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button fx:id="myButton" layoutX="126.0" layoutY="111.0" mnemonicParsing="false" onAction="#showDateTime" text="Show Data Time" />
      <TextField fx:id="myTextField" layoutX="94.0" layoutY="181.0" />
   </children>
</AnchorPane>

 

3.試跑一下

先在跑就能看到界面是長什么樣的了，但是需要改一下main.java

 

package application;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;


public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            //讀取fxml文件
            Parent root = FXMLLoader.load(getClass().getResource("/application/MyScene.fxml"));

            //窗口的標題
            primaryStage.setTitle("My Application");
            
            //主窗口加載的場景，場景里面的描述文件
            primaryStage.setScene(new Scene(root));
            
            //最后就是show time
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

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

 

開跑--------------------------------------------

結果就是：

就這么簡單，最后就是按鈕按一下，時間展示在輸入框里面

新建一個java文件,並引用Initializable接口

 

 

 

 

 

寫一些代碼

package application;

import java.net.URL;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.ResourceBundle;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;

public class MyController implements Initializable {

    //對應剛才編輯的fx:id里面id
    @FXML
    private Button myButton;

    //對應剛才編輯的fx:id里面id
    @FXML
    private TextField myTextField;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        // TODO Auto-generated method stub

    }

    public void showDateTime(ActionEvent event) {
           System.out.println("Button Clicked!");

           Date now= new Date();

           DateFormat df = new SimpleDateFormat("yyyy-dd-MM HH:mm:ss");
           String dateTimeString = df.format(now);
            // fx:id對了就可以直接使用對象，直接setText不對應，就會得到null，直接報錯
            myTextField.setText(dateTimeString);

       }

}

最后一步，就是要把這個類關聯到fxml文件里面     fx:controller="application.MyController"

ok,再次運行，點擊按鈕，就會得到你想的效果