瞭解過JavaFX的都知道,JavaFX自從2.0版本開始,已經完全拋棄了之前的script語言,才用純java來實現。這樣的好處就是1.讓使用Java的IDE進行JavaFX的開發成爲可能,2.Java與JavaFX的API相互調用更容易 3.JavaFX的程序部署也更簡單.
e(fx)clipse就是一個eclipse上用來開發JavaFX的插件。不僅如此,在官網上還可以下載包含e(fx)clipse插件的完整版eclipse。
官方網站爲:http://www.efxclipse.org/。
就我個人感覺,在eclipse上開發比使用netbeans要舒適的多。
另外,Oracle推出了JavaFX Scene Builder,用來進行JavaFX的可視化開發。
首先我們從官方網站下載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。
- import javafx.application.Application;
- import javafx.fxml.FXMLLoader;
- import javafx.scene.Parent;
- import javafx.scene.Scene;
- import javafx.stage.Stage;
- import javafx.stage.StageStyle;
- public class MyApp extends Application {
- public static void main(String[] args) {
- Application.launch(MyApp.class, args);
- }
- @Override
- public void start(Stage stage) throws Exception {
- Parent root = FXMLLoader.load(getClass().getResource("study.fxml"));
- Scene scene = new Scene(root, 600, 400);
- stage.initStyle(StageStyle.DECORATED);
- stage.setScene(scene);
- stage.setTitle("JavaFX記事本");
- stage.show();
- }
- }
如上圖所示,我們使用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" 前面的是包名。
那麼,下面來寫我們的事件處理類吧。
- import java.io.File;
- import javax.swing.JOptionPane;
- import javafx.event.ActionEvent;
- import javafx.fxml.FXML;
- import javafx.scene.Scene;
- import javafx.scene.control.TextArea;
- import javafx.scene.layout.AnchorPane;
- import javafx.stage.FileChooser;
- public class Test {
- @FXML
- private AnchorPane layoutPane;
- @FXML
- private TextArea fileContent;
- private File result;
- @FXML
- private void onMenuOpen(ActionEvent event) {
- FileChooser fileChooser = new FileChooser();
- result = fileChooser.showOpenDialog(layoutPane.getScene().getWindow());
- if (result != null) {
- fileContent.setText(FileTools.readFile(result));
- }
- }
- @FXML
- private void onMenuSave(ActionEvent event) {
- if(result != null){
- FileTools.writeFile(result, fileContent.getText());
- }
- }
- @FXML
- private void onMenuClose(ActionEvent event) {
- System.exit(0);
- }
- @FXML
- private void onMenuDelete(ActionEvent event) {
- fileContent.replaceSelection("");
- }
- @FXML
- private void onMenuAbout(ActionEvent event) {
- JOptionPane.showMessageDialog(null, "JavaFX記事本是一款使用JavaFX開發的記事本。" ,"關於", JOptionPane.PLAIN_MESSAGE);
- }
- @FXML
- private void onContextSelectAll(ActionEvent event) {
- fileContent.selectAll();
- }
- }
看上面的代碼,你會發現與JavaFX映射的變量和方法都有@FXML標註。而變量的名稱需要對應study.xml中控件的fx:id屬性。事件處理的方法同樣也是對應xml中定義的事件名稱。
在MenuOpen事件中打開一個文件選擇器,然後獲取選擇的文件,讀取文本文件的內容,最後設置到TextArea中。至於FileTools,則是臨時下的文本文件讀取的類。
在MenuSave事件中,將TextArea中的內容保存到剛打開的文件中。
上面還調用了Swing中的JOptionPane的顯示Message的方法。由此可見,在如今的JavaFX中可以很輕易的使用Java Api。
另外,下面的是FileTools的代碼,很簡單的文本文件讀寫。
- import java.io.BufferedReader;
- import java.io.BufferedWriter;
- import java.io.File;
- import java.io.FileReader;
- import java.io.FileWriter;
- public class FileTools {
- public static String readFile(File file) {
- StringBuilder resultStr = new StringBuilder();
- try {
- BufferedReader bReader = new BufferedReader(new FileReader(file));
- String line = bReader.readLine();
- while (line != null) {
- resultStr.append(line);
- line = bReader.readLine();
- }
- bReader.close();
- } catch (Exception e) {
- e.printStackTrace();
- }
- return resultStr.toString();
- }
- public static void writeFile(File file, String str) {
- try {
- BufferedWriter bWriter = new BufferedWriter(new FileWriter(file));
- bWriter.write(str);
- bWriter.close();
- } catch (Exception e) {
- e.printStackTrace();
- }
- }
- }
最後來運行我們的JavaFX程序吧。
是不是很簡單?
由於JavaFX Scene Builder這個JavaFX可視化工具的發佈,e(fx)clipse這樣基於eclipse的插件的出現,可以令Java程序員快速的進行JavaFX的開發,而且現在將事件層和UI層進行了很好分離,代碼整體的結構也更加的清晰了。
就讓我們期待一下JavaFX的成長吧。