閱讀(8.1k) 書簽贊(0) 我要糾錯

開發(fā)JavaFX Hello World應(yīng)用程序：編碼示例

2018-09-12 13:50 更新

在本節(jié)中，我們將IntelliJ IDEA創(chuàng)建的示例應(yīng)用程序轉(zhuǎn)換為非?；镜腏avaFX Hello World應(yīng)用程序。通過這種方式，我們展示了IDE提供的基本編碼輔助功能。（當(dāng)您從頭開始為JavaFX應(yīng)用程序開發(fā)創(chuàng)建項目時，示例應(yīng)用程序由IntelliJ IDEA自動創(chuàng)建，請參閱：為JavaFX開發(fā)創(chuàng)建項目。）

重命名Controller類

要根據(jù)需要調(diào)整示例應(yīng)用程序，您可能需要從重命名文件開始。為了了解如何操作，讓我們?yōu)镃ontroller類執(zhí)行重命名重構(gòu)。我們將此類重命名為SampleController。如果您愿意，可以使用其他名稱。

在編輯器中，將光標(biāo)放在類名中并選擇：Refactor|重命名（或者，按Shift+F6）。
將光標(biāo)放在前面Controller，并鍵入Sample。
按Enter表示您已完成重構(gòu)。

現(xiàn)在，切換到sample.fxml編輯器并注意GridPanel fx:controller屬性的值已經(jīng)更改為"sample.SampleController"。（最初是"sample.Controller"。）

以類似的方式，您可以根據(jù)需要更改其他文件的名稱。

開發(fā)用戶界面

為了向您展示IntelliJ IDEA如何幫助您編寫代碼，讓我們實現(xiàn)一種Hello World JavaFX應(yīng)用程序。

在用戶界面（UI）中，我們將定義一個按鈕，單擊該按鈕將顯示文本：Hello World!。為此，我們將在sample.fxml文件中的開始和結(jié)束標(biāo)記<GridPane>之間添加以下兩個元素：

<Button text=
      "Say 'Hello World'" onAction=
      "#sayHelloWorld"/>
<Label GridPane.rowIndex=
      "1" fx:id=
      "helloWorld"/>

我們建議您通過鍵入來查看代碼完成的工作原理。

轉(zhuǎn)到開始標(biāo)簽<GridPane>的末尾，然后按Enter開始新行。
輸入“<B”并選擇：Button。
鍵入空格，輸入“t”，然后選擇“text”。
以類似的方式，添加剩余的代碼片段。生成的代碼看起來與此類似：
如您所見，sayHelloWorld顯示為紅色，并且突出顯示helloWorld。這意味著IntelliJ IDEA無法解析相應(yīng)的引用。
要解決這些問題，讓我們使用IntelliJ IDEA建議的快速修復(fù)程序。
（在IntelliJ IDEA中，當(dāng)您引用尚不存在的字段，方法或類，然后使用快速修復(fù)來創(chuàng)建相應(yīng)的字段，方法或類時，它是標(biāo)準(zhǔn)的編碼實踐。）

完成SampleController類的代碼

現(xiàn)在我們將在SampleController類中定義該helloWorld字段。我們還將添加相應(yīng)的事件處理程序方法（sayHelloWorld），用于設(shè)置helloWorld標(biāo)簽的文本。如上所述，我們將使用IntelliJ IDEA建議的快速修復(fù)程序。

在sample.fxml，將光標(biāo)放在helloWorld。單擊黃色燈泡或按Alt+Enter。
選擇Create Field'helloWorld'。

IntelliJ IDEA切換到SampleController.java，它添加了helloWorld字段聲明的位置。

注意Label周圍的紅色邊框。您可以立即編輯字段類型。我們現(xiàn)在不打算這樣做，所以請按Enter退出重構(gòu)模式。
另請注意剛剛添加的import語句（import javafx.scene.control.Label;）和字段聲明左側(cè)的圖標(biāo)。這是一個導(dǎo)航圖標(biāo)；點擊它返回sample.fxml。
將光標(biāo)放在sayHelloWorld內(nèi)，然后按Alt+Enter。
選擇：Create Method'void sayHelloWorld（ActionEvent）'。

向SampleController.java添加相應(yīng)的方法聲明。
按Shift+Enter退出重構(gòu)模式并開始新行。
鍵入以下內(nèi)容以設(shè)置標(biāo)簽的文本：
```
helloWorld.setText("Hello World!");
```

在此步驟中，應(yīng)用程序的代碼已準(zhǔn)備就緒。讓我們運行應(yīng)用程序來查看結(jié)果。

運行應(yīng)用程序

要運行該應(yīng)用程序，請單擊工具欄上的或按Shift+F10。
應(yīng)用程序窗口現(xiàn)在包含Say'Hello World'按鈕。
單擊此按鈕可查看文本Hello World！。
關(guān)閉應(yīng)用程序窗口。

使用CSS設(shè)置UI樣式

要完成編碼示例，讓我們通過添加樣式表并在其中定義幾種格式樣式來更改UI的外觀。

在sample.fxml文件中，添加對（不存在的）CSS文件的引用sample.css。一種方法是在開始標(biāo)簽<GridPane>內(nèi)添加stylesheets屬性，例如：
```
stylesheets=
"/sample/sample.css"
```
和以前一樣，使用快速修復(fù)來創(chuàng)建CSS文件。
創(chuàng)建CSS文件時，將以下樣式定義添加到其中。
```
.root {
    -fx-background-color: gold;
}
.label {
    -fx-font-size: 20; 
}
```
第一個樣式使應(yīng)用程序窗口中的背景為“gold”，第二個樣式 - 將文本“Hello World!”的字體大小設(shè)置為20像素。
再次運行應(yīng)用程序以查看結(jié)果（Shift+F10）。