翻譯自??Customization of UI Controls

本章介紹了UI控件自定義的各個方面，并總結(jié)了Oracle提供的一些提示和技巧，以幫助您修改UI控件的外觀和行為。

您可以通過應(yīng)用層疊樣式表（CSS），重新定義默認(rèn)行為和使用單元工廠來學(xué)習(xí)如何從UIControlSamples項(xiàng)目中的示例應(yīng)用程序自定義控件。對于更具體的情況，當(dāng)應(yīng)用程序的任務(wù)需要無法使用javafx.scene.control包的類實(shí)現(xiàn)的獨(dú)特功能時，請擴(kuò)展Control類以創(chuàng)建自己的控件。

應(yīng)用CSS

您可以通過重新定義JavaFX?caspian樣式表的樣式定義來更改UI控件的外觀。使用CSS為JavaFX應(yīng)用程序設(shè)置外觀說明了在JavaFX應(yīng)用程序中修改樣式并啟用它們的一般概念和方法。

考慮開發(fā)人員在JavaFX論壇上經(jīng)常請求的一些特定任務(wù)。

雖然Tooltip該類沒有任何屬性或方法來更改工具提示的默認(rèn)顏色，但您可以修改CSS類的-fx-background-color屬性，.tooltip如例27-1所示。

示例27-1更改工具提示的背景顏色

.tooltip { -fx-background-color: linear-gradient(#e2ecfe, #99bcfd); } .page-corner {-fx-background-color: linear-gradient(from 0% 0% to 50% 50%,#3278fa,#99bcfd); }

該.page-cornerCSS類定義了提示的右下角的顏色。將示例27-1中的代碼添加到TooltipSample的樣式表并將樣式表應(yīng)用于場景時，工具提示將其顏色更改為藍(lán)色。請參見圖27-1以評估效果。

圖27-1具有藍(lán)色背景顏色的工具提示

請注意，修改工具提示的默認(rèn)樣式時，新外觀將應(yīng)用于應(yīng)用程序中的所有工具提示。

另一個流行的設(shè)計(jì)任務(wù)是更改控件的默認(rèn)標(biāo)記。例如，類的默認(rèn)樣式CheckBox定義了所選狀態(tài)的傳統(tǒng)復(fù)選標(biāo)記。您可以重新定義標(biāo)記的形狀及其顏色，如例27-2所示。

示例27-2復(fù)選框的替代標(biāo)記

.check-box .mark {-fx-shape: "M2,0L5,4L8,0L10,0L10,2L6,5L10,8L10,10L8,10L5,6L2,10L0,10L0,8L4,5L0,2L0,0Z"; } .check-box:selected .mark {-fx-background-color: #0181e2; }

該-fx-shape屬性為標(biāo)記設(shè)置新的SVG路徑，-fx-background-color屬性定義其顏色。在CheckBoxSample應(yīng)用程序中啟用修改后的樣式表時，所選復(fù)選框包含X標(biāo)記而不是復(fù)選標(biāo)記，如圖27-2所示。

圖27-2帶有修改的復(fù)選框樣式的ComboBoxSample

許多開發(fā)人員詢問如何克服視覺風(fēng)格TableView和ListView控件的限制。默認(rèn)情況下，將顯示這些控件中的所有行，無論它們是否為空。使用適當(dāng)?shù)腃SS設(shè)置，您可以為所有空行設(shè)置特定顏色。例27-3為TableView控件實(shí)現(xiàn)此任務(wù)。

示例27-3在表視圖中設(shè)置空行的顏色

.table-row-cell:empty {-fx-background-color: lightyellow; }.table-row-cell:empty .table-cell {-fx-border-width: 0px; }

第一種CSS樣式確定所有空行，無論它們是偶數(shù)還是奇數(shù)，都應(yīng)該具有淺黃色背景。當(dāng)table-row-cell為空時，第二個CSS語句將刪除在所有表格單元格右側(cè)繪制的垂直邊框。

在TableViewSample應(yīng)用程序中啟用示例27-3中的CSS樣式時，Address Book表如圖27-3所示。

圖27-3將ColorView添加到空行的TableViewSample

您甚至可以設(shè)置null空單元格的背景顏色值。在這種情況下，樣式表將使用表視圖的默認(rèn)背景顏色。請參見圖27-4以評估效果。

圖27-4將空背景顏色添加到空行的TableViewSample

您可以為UI控件設(shè)置更多CSS屬性，以更改其形狀，顏色方案和應(yīng)用的效果。有關(guān)可用CSS屬性和類的更多信息，請參閱“?JavaFX CSS參考指南”。

?

改變默認(rèn)行為

許多開發(fā)人員要求使用特定的API來限制文本字段中的輸入，例如，僅允許數(shù)字值。例27-4提供了一個帶有數(shù)字文本字段的簡單應(yīng)用程序。

示例27-4禁止文本字段中的字母

import javafx.application.Application; import javafx.event.ActionEvent; import javafx.event.EventHandler; import javafx.geometry.Insets; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.control.*; import javafx.scene.layout.GridPane; import javafx.scene.layout.HBox; import javafx.stage.Stage;public class CustomTextFieldSample extends Application {final static Label label = new Label();@Overridepublic void start(Stage stage) {Group root = new Group();Scene scene = new Scene(root, 300, 150);stage.setScene(scene);stage.setTitle("Text Field Sample");GridPane grid = new GridPane();grid.setPadding(new Insets(10, 10, 10, 10));grid.setVgap(5);grid.setHgap(5);scene.setRoot(grid);final Label dollar = new Label("$");GridPane.setConstraints(dollar, 0, 0);grid.getChildren().add(dollar);final TextField sum = new TextField() {@Overridepublic void replaceText(int start, int end, String text) {if (!text.matches("[a-z, A-Z]")) {super.replaceText(start, end, text); }label.setText("Enter a numeric value");}@Overridepublic void replaceSelection(String text) {if (!text.matches("[a-z, A-Z]")) {super.replaceSelection(text);}}};sum.setPromptText("Enter the total");sum.setPrefColumnCount(10);GridPane.setConstraints(sum, 1, 0);grid.getChildren().add(sum);Button submit = new Button("Submit");GridPane.setConstraints(submit, 2, 0);grid.getChildren().add(submit);submit.setOnAction(new EventHandler<ActionEvent>() {@Overridepublic void handle(ActionEvent e) {label.setText(null);}});GridPane.setConstraints(label, 0, 1);GridPane.setColumnSpan(label, 3);grid.getChildren().add(label);scene.setRoot(grid);stage.show();}public static void main(String[] args) {launch(args);} }

要重新定義類的默認(rèn)實(shí)現(xiàn)TextField，必須覆蓋從類繼承的replaceText和replaceSelection方法TextInputControl。

當(dāng)用戶嘗試在Sum文本字段中輸入任何字母時，不會出現(xiàn)符號，并顯示警告消息。圖27-5說明了這種情況。

圖27-5嘗試輸入字母符號

但是，當(dāng)用戶嘗試輸入數(shù)值時，它們會出現(xiàn)在字段中，如圖27-6所示。

圖27-6輸入數(shù)字值

?

實(shí)施細(xì)胞工廠

通過使用單元工廠的機(jī)制，可以完全定制四個UI控件的外觀甚至行為。您可以將電池工廠TableView，ListView，TreeView，和ComboBox。單元工廠用于生成單元實(shí)例，用于表示這些控件的任何單個項(xiàng)。

在Cell類擴(kuò)展了Labeled類，它提供了所有必需的屬性和方法，實(shí)行最典型的使用情況-顯示和編輯文本。但是，當(dāng)應(yīng)用程序的任務(wù)需要在列表或表中顯示圖形對象時，您可以使用該graphic屬性并將其放置Node在單元格中（有關(guān)自定義單元格的更多信息，請參閱Cell類API規(guī)范）。

例如，示例27-5中的代碼片段為列表視圖創(chuàng)建了一個單元工廠，并重新定義了updateItem方法中單元格的內(nèi)容，以便列表顯示不同顏色的矩形。

示例27-5為ListView控件實(shí)現(xiàn)單元工廠

list.setCellFactory(new Callback<ListView<String>, ListCell<String>>() {Override public ListCell<String> call(ListView<String> list) {return new ColorRectCell();} }); ... static class ColorRectCell extends ListCell<String> {@Override public void updateItem(String item, boolean empty) {super.updateItem(item, empty);Rectangle rect = new Rectangle(100, 20);if (item != null) {rect.setFill(Color.web(item));setGraphic(rect);} else {setGraphic(null);}} }

圖27-7顯示了此自定義列表在UIControlSamples項(xiàng)目的ListViewSample中的外觀。

圖27-7帶有顏色矩形的列表視圖

本教程廣泛使用單元工廠機(jī)制來自定義UI控件。表27-1總結(jié)了可用于在應(yīng)用程序上實(shí)現(xiàn)單元工廠的編碼模板。

表27-1單元工廠編碼模式

控制編碼模式

ListView，?ComboBox	list.setCellFactory(new Callback<ListView<String>, ListCell<String>>() { @Override public ListCell<String> call(ListView<String> list) {//cell implementation } });
TableView	column.setCellFactory(new Callback<TableColumn,TableCell>() {public TableCell call(TableColumn p) {//cell implementation } });
TreeView	? ?tree.setCellFactory(new Callback<TreeView<String>,? ? ? TreeCell<String>>(){ ? ? ? ? ? ? @Override ? ? ? ? ? ? public TreeCell<String> call(TreeView<String> p) { ? ? ? ? ? ? ? ? //cell implementation ? ? ? ? ? ? } });

?

您可以使用單元工廠機(jī)制自定義這些控件，也可以使用預(yù)提供的單元編輯器實(shí)現(xiàn)來提供可視化底層的特定數(shù)據(jù)模型。表27-2列出了JavafX API中可用的相應(yīng)類。

表27-2列表視圖，樹視圖和表視圖控件的單元編輯器類

控制單元格編輯器類

列表顯示	CheckBoxListCell ChoiceBoxListCell ComboBoxListCell TextFieldListCell
樹視圖	CheckBoxTreeCell ChoiceBoxTreeCell ComboBoxTreeCell TextFieldTreeCell
表視圖	CheckBoxTableCell ChoiceBoxTableCell ComboBoxTableCell ProgressBarTableCell TextFieldTableCell

每個單元格編輯器類在單元格內(nèi)繪制一個特定節(jié)點(diǎn)。例如，CheckBoxListCell該類CheckBox在列表單元格內(nèi)繪制一個節(jié)點(diǎn)。

要評估更多單元工廠和單元編輯器用例，請參閱表視圖，樹視圖和組合框章節(jié)。

?

相關(guān)文檔和資源?

• 使用CSS進(jìn)行皮膚應(yīng)用

• JavaFX CSS參考指南

• JavaFX新聞，演示和洞察力

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的JavaFX UI控件教程（二十八）之UI控件的自定义的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。