//起因：因為即便是使用了JavaFX Scene Builder來直接圖形化排版，但是仍然對應javaAPI,了解整體結構還是很有必要的，這是有清晰邏輯的基礎。

environment:{

　　Spring Tool Suite

　　Version: 3.8.4.RELEASE
　　Build Id: 201703310825
　　Platform: Eclipse Neon.3 (4.6.3)

}

1. way1:File->New->Project->JavaFX->JavaFX Project->(輸入你的工程名)->finish

• 運行一下->得到一個空窗口->打開src/application/Main.java:{繼承了Application，重寫了start(Stage)方法{說下結構-}}
• primaryStage為主窗體-----類似swing裏的JFrame
• Scene為場景-------需要添加一個布局面板，像一張鋪平在桌面上的布，但不能直接放東西，需要布局來規範東西放置方式
• root-------------為布局--layout---綁定在場景上，
• 添加子空間，在fx裏是以節點的方式添加的，如果你學過樹結構，就是那樣的，所以得使用root.getChildren得到列表。
• 還有就是添加控件必須在使用布局面板生成場景前
• 場景綁定在舞臺上---顯示舞臺就出來效果了
• 怎麽啟動？main方法裏的launch方法是Application的靜態方法，來繼承實現了Application的類
• 默認寫的layout是BorderPane但是剛學不會加，改成了FlowPane...
• 

   1 package application;
   2     
   3 import javax.swing.JOptionPane;
   4 import javafx.application.Application;
   5 //import javafx.event.ActionEvent;
   6 import javafx.stage.Stage;
   7 import javafx.scene.Scene;
   8 //import javafx.scene.control.Alert;
   9 //import javafx.scene.control.Alert.AlertType;
   
  
  10 import javafx.scene.control.Button;
  11 //import javafx.scene.control.Dialog;
  12 //import javafx.scene.layout.BorderPane;
  13 import javafx.scene.layout.FlowPane;
  14 public class Main extends Application {
  15     @Override
  16     public void start(Stage primaryStage) {
  17         try {
  18             FlowPane root = new FlowPane();
  19             //-----------------test-----------------add----------(
  20             Button button = new Button("hello JavaFX");
  21             root.getChildren().add(button);
  22             button.setOnAction((event)->{//lambda表達式
  23                 //不會用FX的彈出對話框
  24                 JOptionPane.showMessageDialog(null, "Hello JavaFX");
  25             });
  26             //-----------------test-----------------add----------)
  27             Scene scene = new Scene(root,400,400);
  28             scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
  29             primaryStage.setScene(scene);
  30             primaryStage.show();
  31         } catch(Exception e) {
  32             e.printStackTrace();
  33         }
  34     }
  35     
  36     public static void main(String[] args) {
  37         launch(args);
  38         
  39     }
  40 }

  View Code

  2.way2:way1不要直接Finish，next到最後，Declarative UI->language:FXML

• 從Main.java的start(Stage)中可以看出，布局面板是通過加載Sample.fxml得到，就可以通過修改.fxml來更改布局
• Main.java:

   1 package application;
   2     
   3 import javafx.application.Application;
   4 import javafx.stage.Stage;
   5 import javafx.scene.Scene;
   6 import javafx.scene.layout.FlowPane;
   7 import javafx.fxml.FXMLLoader;
   8 
   9 
  10 public class Main extends Application {
  11     @Override
  12     public void start(Stage primaryStage) {
  13         try {
  14             FlowPane root = (FlowPane)FXMLLoader.load(getClass().getResource("Sample.fxml"));
  15             Scene scene = new Scene(root,400,400);
  16             scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
  17             primaryStage.setScene(scene);
  18             primaryStage.show();
  19         } catch(Exception e) {
  20             e.printStackTrace();
  21         }
  22     }
  23     
  24     public static void main(String[] args) {
  25         launch(args);
  26     }
  27 }

  View Code
• 文件介紹：

javaFX制作helloWorld的幾種方式