JAVA JAVAFX

使用eclipse開發JavaFx專案

葉哲良 Sunny Yeh 2021/06/29 09:33:16
108

JavaFX

JavaFX可以用來設計輕量且高效能使用者圖形介面(Graphical User Interface,GUI)的應用程式(Application),更能作為RIA(Rich Internat Application)應用程序來發佈,這篇文章筆者將使用eclipse來建立一個包含簡易視窗的JavaFX應用程式。

eclipse開發JavaFX

建置JavaFX專案的方式有很多種,我們可以使用一般Java專案,也可以透過eclipse plugin e(fx)clipse建置,而本篇我們將採用maven project方式建立。

環境建置

個人開發時的環境如下

  • 作業系統 windows 10

  • Eclipse 2021-03(Eclipse IDE for java Developers)

  • java-1.8.0-openjdk-1.8.0.282-1

  • Eclipse plugin: e(fx)clipse 3.7.0

  • JavaFx Scene Builder: 8.5.0

 

  注1:因Eclipse 2021-03自帶openjdk 15.0.2_jre,請先由window->Preferences->Java->Installed JREs新增jdk指向 我們安裝的java-1.8.0-openjdk-1.8.0.282-1或如筆者一樣直接將預設的jre路徑修改指向java-1.8.0-openjdk-1.8.0.282-1,後續我們將使用java1.8來開發JavaFx專案,如下圖

 

  注2:eclipse plugin e(fx)clipse 安裝完成後,先開啟window->Preferences設定,找到javaFX項目,將安裝完成的SceneBuilder執行檔設定為SceneBuilder executable,如下圖顯示:

 

因java1.8內建JavaFX library,故這裡的JavaFX 11+SDK並不是作為在建立javaFx專案時引用為liberary路徑,無需設定(自從java11以後Oracle已將JavaFX分離唯一個獨立的項目,即便是使用java11,此處的設定也沒有效果,必須另外建立一個user library指向javaFx library路徑)。

e(fx)clipse是最早筆者用來產生javaFx專案的工具,使用e(fx)clipse建立的javaFx專案是透過Ant build產生可執行的jar檔,透過該工具的設定也可以直接由eclipse呼叫SceneBuilder,或者產生javaFx相關檔案(例如: fxml檔),所以此處安裝e(fx)clipse主要是運用它的工具,並非透過它產生JavaFX專案。

 

SceneBuilder主要用來建構應用程式的UI介面,透過SceneBuilder可以輕鬆的針對畫面進行各種元件排版與相關屬性設定,並可在SceneBuilder上進行預覽,SceneBuilder安裝後執行起來的初始畫面如下圖:

 

使用maven project建立javafx專案

目前使用Maven建立javaFx專案的型態已經有很多種了,在此就筆者使用的方式一步一步來說明。

在eclipse中,我們先選擇Maven Project,接著Next

 

此頁直接預設值Next

 

請在Filter中輸入javaFx,可以看到目前有各式各樣的JavaFX專案型態可供選擇,筆者使用com.zenjavajavafx-base-archetype來產生專案,選擇com.zenjavajavafx-base-archetypeNext

 

輸入Group IdArtifact Id,其中MyFx1就是這次範例的專案名稱,並且在organizationName自行輸入一個名稱(一定要輸入,否則無法繼續),輸入完成後Finish

 

專案完成後可以看到預設使用的JRE System Library為J2SE-1.5,先將其改為我們設定的Java1.8版本,右擊專案->Properties->Java Build Path,切換到Libraries頁籤,點擊JRE System Library,點擊Edit…,選擇Workspace default JRE

 

JavaFX基礎架構

展開MyFx1專案,在src\main\java目錄下可以看到MainApp.java以及HelloController.java,其中MainApp.java是JavaFX的執行點。

開啟MainApp.java可以看到MainApp繼承自javafx.application.Application,從main()方法進入後通過內部調用start()方法。

 

這裡我們可以看到整個JavaFX的基礎架構就如同下面這張圖:

其中Stage可以說是應用程式最上層的容器,在範例中可以看到他設定了視窗的Title,或甚至可改變應用程式的外觀(StageStyle)。而Scene是圖形化介面中所有內容物的基底容器,你可以在這個容器內放置各種JavaFX的控制元件。Node是控制元件的基礎類別,其子類包含了這個範例程式的Parent類,以及所有JavaFX控制元件。NodeNode之間可以層層套疊,依照javadoc的說法,Node的圖形化界面就像一組樹狀結構,每個Node都可以有零個或一個父Node,每個Node也可以是零個子Node或多個子Node

JavaFX除了可由原生的Code產生圖形化界面外,還支援使用XML來描述圖形化界面(稱為FXML),透過JavaFX Scene Builder來製作圖形界面僅需要拖、拉、放等動作,再設定相關屬性即可完成界面的佈局,並可透過SceneBuilder預覽完成的圖形界面,在專案中透過FXMLLoader類來載入使用FXML製作的圖形界面,如範例中的hello.fxml。

 

Hello JavaFX

此範例中已為我們產製了一個姓名輸入的Hello視窗,透過執行MainApp可以看到這個視窗的樣子。

 

在輸入完First Name與Last Name後,點擊【Say Hello】,可以看到左下角出現Hello Sunny Yeh的紅色字樣。

 

回到eclipse,我們從SceneBuilder來看看Hello.fxml。在eclipse的Project explorer視窗中右擊hello.xml->Open with SceneBuilder,卻發生一個錯誤訊息。

 

怎麼回事? 先來看一下hello.fxml內容,因為fxml屬於xml標記式語言的一種,我們可以輕易地使用一般文字編輯器來開啟,可以看到hello.xml使用MigPane,而MigPane並不屬於JavaFX基本元件(Pane通常作為Scene下一層Node,有機會再談各種Pane的運用),所以目前無法透過SceneBuilder開啟。

 

解決的方式有兩種,一是透過文字編輯器將MigPane改為JavaFX基本Pane中的一種,並移除特殊的屬性設定,筆者不建議這種方式,因為MigPane與放置其中的元件還有位置的對應關係,若非極為熟悉各元件屬性,隨意修改只會混亂整個畫面。

而解決此問題的另一個方式就是在SceneBuilder中加入 MigPane相關Library使得SceneBuilder認得這個元件,筆者採用此方式解決這個問題。展開專案的Maven Dependencies,可以看到兩個miglayout相關jar

 

將這兩個jar檔從maven repository取出,然後由外部開啟SceneBuilder,在Library旁一個小小齒輪下拉選擇JAR/FXML Manager

 

開啟Library Manager後,點擊Add Library/FXML from file system,選擇剛剛取出的兩個MigLayout相關jar檔,點擊Import Components

 

完成後如下圖,在左側Custom展開後可見到MigPane已加入

 

現在我們再從eclipse使用Open with SceneBuilder開啟Hello.fxml看看,果然成功看到Hello.fxml的圖形視窗。

注1:eclipse中Open with SceneBuilder選項只會出現在Project explorerPackage explorer等視圖中,像Navigator視圖是不會出現的。Open with SceneBuilder是由e(fx)clipse提供,若未看到此選項或無法開啟SceneBuilder請回頭檢查是否已安裝並設定好SceneBuilder執行檔位置(請參考前述的環境建置)。

注2:任何在SceneBuilder所做的修改,在SceneBuilder儲存後返回eclipse時,請務必在eclipse你自己的專案做一次更新(右擊專案 -> refresh),否則eclipse不會知道fxml檔已被外部程式修改過。

 

回頭看一下剛剛執行的應用程式,應用程式似乎套用了一張底圖,怎麼此處的SceneBuilder沒看到底層圖樣?

回到eclipseMainApp.java中我們可以看到有個style.css透過程式載入,那麼在SceneBuilder中可以嗎?畢竟css和畫面有著密不可分的關聯;這個答案是肯定的, 筆者使用以下方式呈現底圖:

第一種,我們可以在SceneBuilder中左側Document->展開Hierarchy視圖,選擇最底層的MigPane,然後在右側展開Properties視圖,往下找到Sytlesheets,點擊+後選擇專案的style.css,就可以看到css套用Hello.jxml,不過,透過程式載入與透過SceneBuilder設定只須擇一即可,若css是整個應用程式適用,建議如範例一樣,直接套用進最底層的Scene類則所有包含在Scene下的物件均會受到此css影響,筆者通常只為了要即時看到css對畫面造成的影響才會用此方式測試。

 

第二種方式是透過預覽來加入style.css,我們可以從SceneBuilder的選單Preview ->Scene Style Sheets-> Add a Style Sheet…style.css加入,加入後也可看到實際上畫面的變化,此方式不會影響實際程式的運作。

 

操作元件

最後,我們要如何控制Hello.fxml這個畫面上的欄位呢?

程式中有一個HelloController.java就是實際操控畫面的程式碼,在SceneBuilder左側Document展開Controller視圖,可以看到Controller class指向HelloController,而下方可以看到三個擁有fx:id的元件,fx:id在哪設定呢?右邊展開Code視圖,就可看到fx:id欄位,我們可以為需要透過程式控制的元件設定唯一的名稱。

 

Say Hello這個Button有個On Action的事件(Event),點擊Say Hello就可以看到在On Action中我們設定了sayHello這個事件。

 

SceneBuilder設定完成後,我們回到eclipse看看HelloController.java。

在HelloController中我們可以看到三個變數分別以@FXML這個Annotation標註,其參數名稱與元件類別分別對應到SceneBuilder中相同元件類別與fx:id的元件,JavaFX透過@FXML來綁定Hello.fxml的元件與HelloController.java的變數;除此之外,我們也看到一個sayHello()的method,而這個method正是Hello.fxmlSay Hello Button的事件內容,在點擊Say Hello Button後串接firstNameField與lastNameField文字並修改messageLabel文字。

 

編譯為可執行檔

最後透過com.zenjavajavafx-maven-plugin我們可以產生一個可執行的jar檔,也可以產生一個原生的執行檔

要產生可執行的jar,請執行maven jfx:jar(command line),而在eclipse中,我們可以右擊pom.xml -> maven build->在Goals中輸入jfx:jar後點擊Run

重新整理專案後在target\jfx\app目錄下就能看到MyFx1-jfx.jar,開啟dos command切換到此目錄下執行java -jar MyFx1-jfx.jar 就能看到應用程式執行。

javafx-maven-plugin也可以用來產生原生應用程式,透過maven jfx:native(command line)即可,而在eclipse中,同樣右擊pom.xml -> maven build->在Goals中輸入jfx:native後點擊Run

重新整理專案後在target\jfx\native目錄下就能看到MyFx1.exe,開啟dos command切換到此目錄下執行MyFx1.exe 就能看到應用程式執行。

注1:MyFx1.exe看起來只是一個原生前導程式,他其實還是去呼叫MyFx1\app\MyFx1-jfx.jar,所以筆者後來都改用maven-jar-plugin來編譯JavaFX程式,再透過launch4j包裝成windows應用程式(.exe)。

以上是筆者如何使用eclipse開發JavaFX專案的步驟,提供給想要嘗試使用JavaFX作為前台開發的朋友一個參考。

葉哲良 Sunny Yeh