javafx 介紹
一提到java的圖形界面庫，我們通常聽到的都是swing，或者更老一點的awt，包括很多書上面介紹的也都是這兩種。很多學校、培訓班教學的也是這兩種技術。但是其實這兩種技術都已經過時很長時間了。swing雖然學起來也不算很難，但是用它來寫界面其實也很不好寫。因為它的界面和代碼沒有做到分離，所以在編寫的時候，代碼中肯定充斥著大量坐標，修改極其不易。這方面做的比較好的就是微軟的wpf，只能說誰用誰知道。
當然，雖然編寫客戶端圖形程序是java的弱項，但是java并沒有放棄這方面的努力。今天介紹的javafx就是java在編寫圖形界面程序的最新技術。如果你準備使用java編寫圖形界面程序，又沒有歷史包袱，那么強烈推薦使用javafx。
這是oracle官網關于javafx的資源和文檔。
這是官方的示例程序，我們可以參考javafx的部分來學習如何使用。下面是其中一個分形的javafx程序，點擊上面的數字可以進入不同的微觀展示，感覺有一種看病毒微觀世界的感覺，很震撼。
如何安裝
只要你安裝了最新版本的jdk 8，那么就可以使用javafx庫了。如果沒有安裝的話，那么趕快開始安裝吧。
快速上手
第一個程序
新建一個項目，然后編寫如下的類，然后編譯運行，即可看到結果。關于這個程序不用做解釋吧。如果有學習過swing以及其他圖形界面框架的經驗的話，應該非常容易理解這段代碼。當然由于javafx是新東西，所以我也順便使用java 8的新特性——lambda表達式。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
package yitian.javafxsample;import javafx.application.application;import javafx.scene.scene;import javafx.scene.control.button;import javafx.scene.layout.stackpane;import javafx.stage.stage;public class hellojavafx extends application { @override public void start(stage primarystage) throws exception { button btn = new button(); btn.settext("你好啊，世界"); btn.setonaction(event -> { system.out.println("你好，世界!"); } ); stackpane root = new stackpane(); root.getchildren().add(btn); scene scene = new scene(root, 300, 250); primarystage.settitle("hello world!"); primarystage.setscene(scene); primarystage.show(); } public static void main(string[] args) { launch(args); }} |
運行截圖如下。
用戶輸入
這個程序可以用來處理用戶登錄的情況，代碼如下，重要部分都添加了注釋。代碼的最后一部分使用setonaction函數為按鈕添加了點擊事件，當點擊按鈕的時候會顯示文本。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
public class userinput extends application { @override public void start(stage primarystage) throws exception { //網格布局 gridpane grid = new gridpane(); grid.setalignment(pos.center); //網格垂直間距 grid.sethgap(10); //網格水平間距 grid.setvgap(10); grid.setpadding(new insets(25, 25, 25, 25)); //新建場景 scene scene = new scene(grid, 300, 275); primarystage.setscene(scene); //添加標題 text scenetitle = new text("welcome"); scenetitle.setfont(font.font("tahoma", fontweight.normal, 20)); grid.add(scenetitle, 0, 0, 2, 1); //添加標簽及文本框 label username = new label("用戶名:"); grid.add(username, 0, 1); textfield usertextfield = new textfield(); grid.add(usertextfield, 1, 1); //添加標簽及密碼框 label pw = new label("密碼:"); grid.add(pw, 0, 2); passwordfield pwbox = new passwordfield(); grid.add(pwbox, 1, 2); //添加提交按鈕 button btn = new button("登錄"); hbox hbbtn = new hbox(10); hbbtn.setalignment(pos.bottom_right); hbbtn.getchildren().add(btn); grid.add(hbbtn, 1, 4); //提交文本提示 final text actiontarget = new text(); grid.add(actiontarget, 1, 6); btn.setonaction(event -> { actiontarget.setfill(color.firebrick); actiontarget.settext("已經登錄"); } ); primarystage.settitle("javafx welcome"); primarystage.show(); } public static void main(string[] args) { launch(args); }} |
程序運行截圖如下。
這個程序其實也沒什么難點，就是使用了網格布局，然后將每個元素添加到網格中。關于網格布局的屬性意義可以參考官方的圖。
用fxml設計用戶界面
現代圖形界面框架都支持將界面和代碼分離開，而且比較常用的描述語言是xml，例如qt的qml、wpf的xaml，當然javafx也有類似的語言，叫做fxml。如果需要詳細了解fxml，可以參考oracle官網的文章introduction to fxml。
下面用fxml重寫一下上面那個小例子，每個部分都做了注釋。如果學習過其他類似描述語言的話，會發現這些其實都差不多。唯一需要注意的就是布局里面的fx:controller屬性，它指定一個控制器，控制器的作用就是編寫界面對應的代碼。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<?xml version="1.0" encoding="utf-8"?><!--導入類--><?import javafx.geometry.insets?><?import javafx.scene.control.*?><?import javafx.scene.layout.*?><?import javafx.scene.text.font?><?import javafx.scene.text.text?><!--設置布局--><gridpane xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml" fx:controller="yitian.javafxsample.controller" prefheight="400.0" prefwidth="600.0" alignment="center" hgap="10" vgap="10"> <padding> <insets top="25" right="25" bottom="10" left="25"/> </padding> <!--歡迎文本--> <text text="welcome" gridpane.columnindex="0" gridpane.rowindex="0" gridpane.columnspan="2"> <font> <font name="consolas" size="20"/> </font> </text> <label text="用戶名:" gridpane.columnindex="0" gridpane.rowindex="1"/> <textfield gridpane.columnindex="1" gridpane.rowindex="1"/> <label text="密碼:" gridpane.columnindex="0" gridpane.rowindex="2"/> <passwordfield fx:id="passwordfield" gridpane.columnindex="1" gridpane.rowindex="2"/> <!--按鈕及提示文本--> <hbox spacing="10" alignment="bottom_right" gridpane.columnindex="1" gridpane.rowindex="4"> <button text="顯示密碼" onaction="#showpasswordbutton"/> </hbox> <text fx:id="hinttext" gridpane.columnindex="0" gridpane.columnspan="2" gridpane.halignment="right" gridpane.rowindex="6"/></gridpane> |
下面就是這個fxml文件對應的控制器，它是一個標準的java類。在fxml中用fx:id屬性指定的id，可以在控制器中聲明為一個類字段，通過這個字段就可以和界面組件進行交互。同樣道理，onaction聲明的事件處理程序，在控制器中就是一個方法。注意這些字段和方法都需要使用@fxml注解進行標注。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
import javafx.event.actionevent;import javafx.fxml.fxml;import javafx.scene.control.passwordfield;import javafx.scene.text.text;public class controller { @fxml private text hinttext; @fxml private passwordfield passwordfield; @fxml protected void showpasswordbutton(actionevent event) { hinttext.settext("顯示密碼:" + passwordfield.gettext()); }} |
最后要做修改的就是主程序了。在主程序中需要使用fxmlloader來加載fxml資源，其他部分沒有太大變化。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
public class usefxml extends application { @override public void start(stage primarystage) throws exception { parent root = fxmlloader.load(getclass().getresource("ui.fxml")); scene scene = new scene(root, 300, 275); primarystage.settitle("使用fxml"); primarystage.setscene(scene); primarystage.show(); } public static void main(string[] args) { launch(args); }} |
程序運行截圖如下。
如果希望修改組件樣式，javafx提供了css接口，讓我們可以直接使用css文件修改樣式。首先需要在fxml文件中添加相應樣式表的引用。文件名前面的@表示這個css文件和fxml文件在同一目錄下。
|
1
2
3
4
5
|
<gridpane> <stylesheets> <url value="@style.css"/> </stylesheets><gridpane/> |
樣式表和普通的樣式表差不多，只不過需要添加javafx特有的前綴-fx-。
|
1
2
3
|
#btnshowpassword { -fx-background-color: deeppink;} |
上面用了id選擇器，所以對應地，在fxml中也需要id屬性。
|
1
2
|
<button id="btnshowpassword" text="顯示密碼" onaction="#showpasswordbutton"/> |
自定義之后的程序如圖所示。這里只簡單修改了一下按鈕的背景色，其實可以更改的樣式有很多，包括程序背景等等，有興趣的同學可以自行嘗試。
總結
以上就是本文關于初步了解javafx的全部內容，如果有同學想使用java編寫圖形界面程序，可以考慮使用javafx，這是一個很不錯的選擇。希望對大家有所幫助。如有不足之處，歡迎留言指出。感謝朋友們對本站的支持！
原文鏈接：http://blog.csdn.net/u011054333/article/details/77725614
