JavaFX 項目實戰 —— 自己的英語工具箱 （一）

演示：

支持托盤後臺運行、全局快捷鍵換出、單詞本地查詢、雙擊單詞朗讀等功能：

自己剛學JavaFx，有問題歡迎指出討論！希望幫到了大家！

一、新建JavaFX項目:

Controller文件存放界面的Button、TextFiled等等控件的事件代碼。可以看到在sample.fxml中指定了相應控件的 controller 爲 sample.Controller

sample.fxml文件存放控件的各種屬性、佈局的定義，這種界面邏輯代碼分離的思想非常漂亮。

Main文件存放JavaFx的基本框架和程序啓動入口。

二、界面佈局

JavaFx的界面佈局存放在sample.fxml中，強烈推薦安裝一個JavaFXSceneBuilder ，有了它就可以所見即所得的編寫界面了。

https://pan.baidu.com/s/1c0Ah54k


我的佈局代碼爲：

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

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.control.ComboBox?>

<SplitPane fx:id="Panel" dividerPositions="0.5" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" orientation="VERTICAL" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
  <items>
      <TextField fx:id="input" prefHeight="0.0" prefWidth="598.0" style="-fx-font-size: 30;" />
      <ListView fx:id="listView" prefHeight="373.0" prefWidth="598.0" style="-fx-font-size: 30;" />
  </items>
</SplitPane>

三、單詞庫讀取

網上下載一份單詞庫，當然你也可以去用爬蟲爬取。
格式大概如下：

a	art.一(個)；每一(個)；(同類事物中)任一個
abandon	vt.離棄，丟棄；遺棄，拋棄；放棄
abdomen	n.腹，下腹(胸部到腿部的部分)
...

然後導入到程序裏面：

public class Word {
    public List<String> words = new ArrayList<>();

    public Word() {
        String file = "a.txt"; // 你的單詞文件存放路徑
        BufferedReader br = null;//構造一個BufferedReader類來讀取文件
        try {
            br = new BufferedReader(new FileReader(file));
            String temp = null;
            while ((temp = br.readLine()) != null)
                if (!temp.equals(""))
                    words.add(temp);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    // 通用的查找函數
    public static List<String> search(String keyword, Collection<String> tCollection, BiFunction<String, String, Boolean> matcher) {
        return (tCollection == null || matcher == null) ?
                Collections.emptyList() :
                tCollection.stream()
                        .filter(t -> matcher.apply(t, keyword))
                        .collect(Collectors.toList());
    }
}

四、GUI事件處理

JavaFx常用有兩種事件處理方式，一種是在.fxml定義好Action，然後在Controller裏面實現該事件處理。這一種方式好處是代碼清晰，但是不夠靈活。

另一種方式是在.fxml定義好控件的id，然後在Main類裏面直接用下面的方式取得控件。TextField input = (TextField) root.lookup("#input");然後就可以爲所欲爲了。

首先在JavaFXSceneBuilder 裏面指定控件id。其實就是.fxml文件裏面的TextField變成了 fx:id=“input”：

修改代碼爲：

public class Main extends Application {
    private Word word = new Word();

    @Override
    public void start(Stage primaryStage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));

        primaryStage.setTitle("Demo");
        primaryStage.setScene(new Scene(root));
        primaryStage.setHeight(80);
        primaryStage.setResizable(false);//窗口不可改變高度 寬度 這樣就不用調節自適應了
        primaryStage.setOpacity(0.8);//設置透明度 0爲完全透明 1爲完全不透明 默認是1
        primaryStage.initStyle(StageStyle.UNDECORATED);//設定窗口無邊框
        primaryStage.show();

        // 一定show();完再lookup
        TextField input = (TextField) root.lookup("#input");
        ListView<String> listview = (ListView<String>) root.lookup("#listView");

        input.textProperty().addListener((observable, oldValue, newValue) -> {
            String trimed = newValue.trim();
            if (trimed.length() > 0) {
                List<String> searchResult = Word.search(trimed, word.words, String::contains);
                listview.getItems().clear();
                listview.getItems().addAll(searchResult);
                primaryStage.setHeight(400);
            } else {
                primaryStage.setHeight(80);
            }
        });
    }

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

基本框架已經搭建好了，托盤和快捷鍵、單詞朗讀功能還沒有實現，就留到下一節吧！有問題歡迎留言評論！