翻譯自??Customization of UI Controls

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

您可以通過應用層疊樣式表（CSS），重新定義默認行為和使用單元工廠來學習如何從UIControlSamples項目中的示例應用程序自定義控件。對于更具體的情況，當應用程序的任務需要無法使用javafx.scene.control包的類實現的獨特功能時，請擴展Control類以創建自己的控件。

應用CSS

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

考慮開發人員在JavaFX論壇上經常請求的一些特定任務。

雖然Tooltip該類沒有任何屬性或方法來更改工具提示的默認顏色，但您可以修改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的樣式表并將樣式表應用于場景時，工具提示將其顏色更改為藍色。請參見圖27-1以評估效果。

圖27-1具有藍色背景顏色的工具提示

請注意，修改工具提示的默認樣式時，新外觀將應用于應用程序中的所有工具提示。

另一個流行的設計任務是更改控件的默認標記。例如，類的默認樣式CheckBox定義了所選狀態的傳統復選標記。您可以重新定義標記的形狀及其顏色，如例27-2所示。

示例27-2復選框的替代標記

.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屬性為標記設置新的SVG路徑，-fx-background-color屬性定義其顏色。在CheckBoxSample應用程序中啟用修改后的樣式表時，所選復選框包含X標記而不是復選標記，如圖27-2所示。

圖27-2帶有修改的復選框樣式的ComboBoxSample

許多開發人員詢問如何克服視覺風格TableView和ListView控件的限制。默認情況下，將顯示這些控件中的所有行，無論它們是否為空。使用適當的CSS設置，您可以為所有空行設置特定顏色。例27-3為TableView控件實現此任務。

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

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

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

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

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

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

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

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

?

改變默認行為

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

示例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);} }

要重新定義類的默認實現TextField，必須覆蓋從類繼承的replaceText和replaceSelection方法TextInputControl。

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

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

但是，當用戶嘗試輸入數值時，它們會出現在字段中，如圖27-6所示。

圖27-6輸入數字值

?

實施細胞工廠

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

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

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

示例27-5為ListView控件實現單元工廠

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項目的ListViewSample中的外觀。

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

本教程廣泛使用單元工廠機制來自定義UI控件。表27-1總結了可用于在應用程序上實現單元工廠的編碼模板。

表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 ? ? ? ? ? ? } });

?

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

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

控制單元格編輯器類

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

每個單元格編輯器類在單元格內繪制一個特定節點。例如，CheckBoxListCell該類CheckBox在列表單元格內繪制一個節點。

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

?

相關文檔和資源?

• 使用CSS進行皮膚應用

• JavaFX CSS參考指南

• JavaFX新聞，演示和洞察力

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。