背景:
下面我來介紹一下,如何用JavaFX在兩周里(實際為一周)來寫出一個界面美觀,且大氣的GUI。
首先要介紹一下JavaFX是個什么東東:剛剛接觸Java的同學一定會知道Java的圖形界面庫Swing,或者AWT,他們當然都比較老了,或者說過時了,他們都沒有做到界面與代碼分離(會有好多的坐標位置什么的),所以寫起來會麻煩,想要做的美觀的話對於新手小白來講真的是很難。我說的JavaFX還算比較新。若是會用的話還是比較得心應手的。
JavaFX也是Java的一個圖形界面庫,真的強烈給大家推薦使用JavaFX,推薦使用JavaFX,推薦使用JavaFX。。。嘿嘿,說三遍。為什么這么說呢,因為如果你掌握了使用FXML文件來設計界面,用Controller類來控制界面里面的所有的action的話,那么恭喜你你已經入門了,成功實現了界面與代碼的分離,再加上SceneBuilder(下面會說他是個啥玩意er)的幫助,那么你會很得心應手的。
環境配置:
1.強烈推薦 Intellij IDEA,我一直用的就是IDEA,在課程設計過程中,在教使用Eclipse同學們使用FXML文件的過程中,遇到了無數的麻煩,所以還請大家使用更加智能一點的IDEA吧。
2.SceneBuilder:SceneBuilder是一款用來設計界面的軟件(很小的),可以通過拖拽控件來進行頁面設計。
下載鏈接:SceneBuilder下載 具體配置下面詳解:
正常下載完成后,SceneBuilder會自動打開,不要管他,將所有的關於SceneBuilder的東西全部關閉。
打開Intellij --->點擊File--->點擊settings--->Languages&Frameworks--->JavaFX
在Path to SceneBuilder 中填入SceneBuilder的exe文件。
然后,環境就搭建好啦。
JavaFX入門:
首先,我們要建立一個新的項目,按這個醫療保險報銷系統例子來講的話就是MedicalInsuranceSystem,建立完Project后,開始我們的構建GUI界面之旅。
首先,先來熱熱身吧:
1.我們右擊src那個文件夾,然后鼠標放在new上,在點擊Java class,然后Name里輸入MySceneController就創建了一個控制器類(用來控制下面我們即將用來構建界面的FXML文件中的一系列動作,即所謂的控制代碼)。
2.再次右擊src文件夾,鼠標放在new上,在點擊FXML File,然后Name里輸入MySceneController就創建了一個可以用來寫界面的文件。(建立后你會發現你的那個文件中有一行,有這樣的fx:controller="MySceneController"代碼,然后“”中的內容被一個紅框框框住了,沒關系,只要你的Controller類(就是那個Java Class文件)和FXML文件的名稱是一樣的,就不用擔心,也不用更改;但如果不一樣的話就需要把“”中的內容改成新創立的Java Class文件一樣的名稱,推薦建立一樣的文件名稱,這樣方便你去找到對應的界面和代碼)。
3.好,做完前兩個步驟之后,我們開始界面的設計了。在左邊的文件夾中找到你新建立的FXML文件,右擊,在最下面可以看到Open In SceneBuilder,點擊后,這個文件就會在SceneBuilder中打開會出現下面的界面:
然后就可以進行界面的設計啦。下面我給出一個極其簡單的例子:
4.在左邊上面的的Library上輸入Button,找到button,點擊,拖動到AnchorPane上:
雙擊那個按鈕可以修改文本,我在這里改成ok
5.然后,我們看右邊的三個菜單欄:有Properties(屬性),Layout(布局),Code(代碼)。
我們先點擊我們之前拖動到AnchorPane上的那個button,再看右邊就會有東西出現了,然后點擊Code那一欄,看前面幾行就好(下面的留給你自己探索吧)有fx:id(這個通俗講就是這個button的名稱,就是這個button的變量名),輸入“okayButton”,還有On Action(這個是點擊button后觸發的事件,后面輸入的就是觸發的具體方法名),在這個里面輸入“okay”。
6.然后,我們把目光轉向上方的菜單欄,
我們在這里面常用的就是Preview,它可以用來預覽我們剛剛搭建好的窗口(點擊Preview--->點擊Show Preview In Window(或者直接按Ctrl+p)--->窗口就出現啦)。
還有一個就是View,這個對我們還是蠻重要的,因為有了它我們就可以不用自己在Controller類里面寫代碼骨架了(真的非常非常省力呢),點擊View--->點擊最下方的Show Sample Controller Skeleton--->會出現下面的窗口
--->點擊左下方的Copy--->回到intellij--->打開剛剛創建的MySceneBuilderController的那個Java class類--->全選--->把剛剛Copy的內容,粘貼進去(就像這樣)
但是報錯了,沒關系,這只是因為沒有導入相應的包,我們把鼠標點擊ActionEvent,然后按下快捷鍵Alt+Enter,就會出現導入包,注意一定要選javafx的那個包,不要選AWT的,導入后應該是這樣的:
可以看到,我們剛剛輸入的“okayButton”,還有點擊事件“okay”方法都在里面了,我們可以在okay方法里加些東西
意思就是我們在點擊按鈕時,會在控制台打印出“Okay”,我們來試試看。
7.但是等一下,你會發現沒辦法運行啊,嘿嘿,還有一步
我們在在src下創建一個Main類
這時才可以運行,接下來讓我們試一試吧。
窗口:
點擊button后,
Okay,大功告成。
最基本的入門就是這樣了.