javaFx（記事本）Demo

標籤：添加   dialog   adl   iter   control   映射   api   一個   turn   

首先我們從官方網站下載JavaFX Scene Builder。

  開啟程式，可以看到以下畫面：

 

 

   ，左上方是JavaFX控制項列表，左下方是UI層結構，中間是可視化設計地區，右邊是控制項屬性。

   

   那麼，我們就構建一個簡單的記事本程式吧！

 

   首先使用JavaFX Scene Builder 建立以下介面。

 

   這就是一個簡單的記事本的介面了。上面是一個MenuBar，中間是一個TextArea用來顯示開啟的常值內容。在

TextArea上添加了一個ContextMenu，也就是所謂的右鍵菜單。

 

   這裡要注意一點:fx:id是一個很重要的屬性，在事件邏輯層要擷取JavaFX Scene Builder編輯的XML中的控制項，需要通過fx:id來擷取。

 

  另外，還要在右邊屬性的events中指定事件的方法。

 

  如所示，Menu中的Open事件對應onMenuOpen方法。

 

 

  這樣，一個簡易記事本的介面就建立好了。我們在JavaFX Scene Builder中將它儲存為study.xml。

 

  接著，我們在e(fx)clipse中，建立一個JavaFX Project。記住要在preference裡設定JavaFX SDK的位置(類似Android開發)。

  建立一個類MyApp 繼承於javafx.application.Application。

  

[java] view plaincopy

1. import javafx.application.Application;  
2. import javafx.fxml.FXMLLoader;  
3. import javafx.scene.Parent;  
4. import javafx.scene.Scene;  
5. import javafx.stage.Stage;  
6. import javafx.stage.StageStyle;  
7.   
8. public class MyApp extends Application {  
9.   
10.     public static void main(String[] args) {  
11.         Application.launch(MyApp.class, args);  
12.     }  
13.       
14.     @Override  
15.     public void start(Stage stage) throws Exception {  
16.         Parent root = FXMLLoader.load(getClass().getResource("study.fxml"));  
17.   
18.         Scene scene = new Scene(root, 600, 400);  
19.         stage.initStyle(StageStyle.DECORATED);  
20.         stage.setScene(scene);  
21.         stage.setTitle("JavaFX記事本");  
22.         stage.show();  
23.     }  
24.   
25. }  

  

  如所示，我們使用JavaFX中提供的FXMLLoader來載入我們編輯好的JavaFX介面。study.fxml應該放在與MyApp類相同的目錄，通過getClass().getResource()擷取該類目錄的資源。

  上面的MyApp類中也出現了幾個JavaFX中的類，Parent, Scene, Stage。那麼這幾個類到底有什麼用呢？

  

  Stage是JavaFX最頂層的容器，最原始的Stage(也就是start方法後的參數)是根據系統平台進行建立的(也是跨平台的重點)。當然，你也可以在程式其他地方建立Stage。

 

  Scene是包括控制項等所有內容的容器，應用程式必須指定Scene的根節點。既可以像上面代碼中初始化時傳入根節點，也可以通過setRoot方法來設定根節點。

 

  Parent是所有包含子節點的節點的基類。它是一個繼承於Node的抽象類別。因此Loader裡其實是用到了向上轉型。

  由上面的解釋，可以很容易的知道JavaFX中是用到的樹形結構。

  另外，JavaFX使用很常見的反射機制將UI層和事件層完全分離了。查看上面的study.xml，你就可以看到根節點有一個fx:controller屬性。這個屬性就是指定事件處理的類。比如我們現在應用程式中處理事件的類為Test.java。那麼就修改fx:controller = "org.wing.javafx.project01.Test" 前面的是包名。

  那麼，下面來寫我們的事件處理類吧。

[java] 

1. import java.io.File;  
2.   
3. import javax.swing.JOptionPane;  
4.   
5. import javafx.event.ActionEvent;  
6. import javafx.fxml.FXML;  
7. import javafx.scene.Scene;  
8. import javafx.scene.control.TextArea;  
9. import javafx.scene.layout.AnchorPane;  
10. import javafx.stage.FileChooser;  
11.   
12. public class Test {  
13.     @FXML  
14.     private AnchorPane layoutPane;  
15.     @FXML  
16.     private TextArea  fileContent;  
17.     private File result;  
18.       
19.     @FXML  
20.     private void onMenuOpen(ActionEvent event) {  
21.         FileChooser fileChooser = new FileChooser();  
22.         result = fileChooser.showOpenDialog(layoutPane.getScene().getWindow());  
23.         if (result != null) {  
24.             fileContent.setText(FileTools.readFile(result));  
25.         }  
26.     }  
27.       
28.     @FXML  
29.     private void onMenuSave(ActionEvent event) {  
30.         if(result != null){  
31.             FileTools.writeFile(result, fileContent.getText());  
32.         }  
33.     }  
34.       
35.     @FXML  
36.     private void onMenuClose(ActionEvent event) {  
37.         System.exit(0);  
38.     }  
39.       
40.     @FXML  
41.     private void onMenuDelete(ActionEvent event) {  
42.         fileContent.replaceSelection("");  
43.     }  
44.       
45.     @FXML  
46.     private void onMenuAbout(ActionEvent event) {  
47.         JOptionPane.showMessageDialog(null, "JavaFX記事本是一款使用JavaFX開發的記事本。" ,"關於",  JOptionPane.PLAIN_MESSAGE);  
48.     }  
49.       
50.     @FXML  
51.     private void onContextSelectAll(ActionEvent event) {  
52.         fileContent.selectAll();  
53.     }  
54. }  

  看上面的代碼，你會發現與JavaFX映射的變數和方法都有@FXML標註。而變數的名稱需要對應study.xml中控制項的fx:id屬性。事件處理的方法同樣也是對應xml中定義的事件名稱。

  在MenuOpen事件中開啟一個檔案選取器，然後擷取選擇的檔案，讀取文字檔的內容，最後設定到TextArea中。至於FileTools，則是臨時下的文字檔讀取的類。

  在MenuSave事件中，將TextArea中的內容儲存到剛開啟的檔案中。

  上面還調用了Swing中的JOptionPane的顯示Message的方法。由此可見，在如今的JavaFX中可以很輕易的使用Java Api。

  另外，下面的是FileTools的代碼，很簡單的文字檔讀寫。

[java] 

1. import java.io.BufferedReader;  
2. import java.io.BufferedWriter;  
3. import java.io.File;  
4. import java.io.FileReader;  
5. import java.io.FileWriter;  
6.   
7. public class FileTools {  
8.       
9.     public static String readFile(File file) {  
10.         StringBuilder resultStr = new StringBuilder();  
11.         try {  
12.             BufferedReader bReader = new BufferedReader(new FileReader(file));  
13.             String line = bReader.readLine();  
14.             while (line != null) {  
15.                 resultStr.append(line);  
16.                 line = bReader.readLine();  
17.             }  
18.             bReader.close();  
19.         } catch (Exception e) {  
20.             e.printStackTrace();  
21.         }  
22.         return resultStr.toString();  
23.     }  
24.   
25.     public static void writeFile(File file, String str) {  
26.         try {  
27.           BufferedWriter bWriter = new BufferedWriter(new FileWriter(file));  
28.           bWriter.write(str);  
29.           bWriter.close();  
30.         } catch (Exception e) {  
31.             e.printStackTrace();  
32.         }  
33.     }  
34. }  

  最後就可以運行JavaFX程式了。

javaFx（記事本）Demo