如何更改 JavaFX 可编辑文本字段的背景 combobox/datepicker
How to change the background of the textfield in a JavaFX editable combobox/datepicker
我有一个检查表单输入(文本字段、组合框和日期选择器)的函数,如果其中任何一个为空,它会将背景颜色更改为浅红色
public void checkForm() {
if (clientIdInput.getText().equals("")) {
clientIdInput.setStyle("-fx-background-color: #F5D3D0");
}
if(clientNameInput.getText().equals("")) {
clientNameInput.setStyle("-fx-background-color: #F5D3D0");
}
if(clientPhoneNumberInput.getText().equals("")) {
clientPhoneNumberInput.setStyle("-fx-background-color: #F5D3D0");
}
if(trainerIdInput.getText().equals("")) {
trainerIdInput.setStyle("-fx-background-color: #F5D3D0");
}
if(trainerNameInput.getText().equals("")) {
trainerNameInput.setStyle("-fx-background-color: #F5D3D0");
}
if(membershipTypeOptions.getValue() == null) {
membershipTypeOptions.setStyle("-fx-background-color: #F5D3D0");
}
if(membershipStartDateInput.getValue() == null) {
membershipStartDateInput.setStyle("-fx-background-color: #F5D3D0");
}
if(membershipEndDateInput.getValue() == null) {
membershipEndDateInput.setStyle("-fx-background-color: #F5D3D0");
}
if(paymentMethodOptions.getValue() == null) {
paymentMethodOptions.setStyle("-fx-background-color: #F5D3D0");
}
if(paymentAmountInput.getText().equals("")) {
paymentAmountInput.setStyle("-fx-background-color: #F5D3D0");
}
}
除了日期选择器和可编辑组合框,它工作正常,因为它们似乎有一个文本框位于顶部,不受 -fx-background-color 属性 的影响。所以我的问题基本上就是如何使两个背景具有相同的颜色?作为一个小问题,是否有比 10 个 if 语句更有效的方法来实现此功能的目的?
下面是函数运行后的样子:
我可以用查找到的颜色 -fx-control-inner-background
替换 -fx-background-color
,默认样式表使用它来为文本字段着色。
package org.jamesd.examples.validate;
import java.util.function.Predicate;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ComboBox;
import javafx.scene.control.Control;
import javafx.scene.control.DatePicker;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class App extends Application {
@Override
public void start(Stage stage) {
TextField tf1 = new TextField();
TextField tf2 = new TextField();
ComboBox<String> combo1 = makeCombo();
ComboBox<String> combo2 = makeCombo();
DatePicker dp1 = new DatePicker();
DatePicker dp2 = new DatePicker();
VBox root = new VBox(10, tf1, tf2, combo1, combo2, dp1, dp2);
root.setAlignment(Pos.CENTER);
root.setPadding(new Insets(10));
Button submit = new Button("Submit");
submit.setOnAction(e -> {
if (! (validate(tf -> tf.getText().isEmpty(), tf1, tf2)) &&
(! validate(cb -> cb.getValue() == null, combo1, combo2, dp1, dp2)) ) {
System.out.println("Success!");
}
});
root.getChildren().add(submit);
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
}
private ComboBox<String> makeCombo() {
ComboBox<String> combo = new ComboBox<>();
combo.getItems().addAll("One", "Two", "Three");
combo.setEditable(true);
return combo ;
}
private <C extends Control> boolean validate(Predicate<C> invalidTest, C... controls) {
boolean result = true ;
for (C control : controls) {
if (invalidTest.test(control)) {
control.setStyle("-fx-control-inner-background: #F5D3D0;");
result = false ;
} else {
control.setStyle("");
}
}
return result ;
}
public static void main(String[] args) {
launch();
}
}
一种让您有更多控制权的方法是在控件上设置自定义 CSS 伪类,然后使用外部样式表。
我有一个检查表单输入(文本字段、组合框和日期选择器)的函数,如果其中任何一个为空,它会将背景颜色更改为浅红色
public void checkForm() {
if (clientIdInput.getText().equals("")) {
clientIdInput.setStyle("-fx-background-color: #F5D3D0");
}
if(clientNameInput.getText().equals("")) {
clientNameInput.setStyle("-fx-background-color: #F5D3D0");
}
if(clientPhoneNumberInput.getText().equals("")) {
clientPhoneNumberInput.setStyle("-fx-background-color: #F5D3D0");
}
if(trainerIdInput.getText().equals("")) {
trainerIdInput.setStyle("-fx-background-color: #F5D3D0");
}
if(trainerNameInput.getText().equals("")) {
trainerNameInput.setStyle("-fx-background-color: #F5D3D0");
}
if(membershipTypeOptions.getValue() == null) {
membershipTypeOptions.setStyle("-fx-background-color: #F5D3D0");
}
if(membershipStartDateInput.getValue() == null) {
membershipStartDateInput.setStyle("-fx-background-color: #F5D3D0");
}
if(membershipEndDateInput.getValue() == null) {
membershipEndDateInput.setStyle("-fx-background-color: #F5D3D0");
}
if(paymentMethodOptions.getValue() == null) {
paymentMethodOptions.setStyle("-fx-background-color: #F5D3D0");
}
if(paymentAmountInput.getText().equals("")) {
paymentAmountInput.setStyle("-fx-background-color: #F5D3D0");
}
}
除了日期选择器和可编辑组合框,它工作正常,因为它们似乎有一个文本框位于顶部,不受 -fx-background-color 属性 的影响。所以我的问题基本上就是如何使两个背景具有相同的颜色?作为一个小问题,是否有比 10 个 if 语句更有效的方法来实现此功能的目的?
下面是函数运行后的样子:
我可以用查找到的颜色 -fx-control-inner-background
替换 -fx-background-color
,默认样式表使用它来为文本字段着色。
package org.jamesd.examples.validate;
import java.util.function.Predicate;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ComboBox;
import javafx.scene.control.Control;
import javafx.scene.control.DatePicker;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class App extends Application {
@Override
public void start(Stage stage) {
TextField tf1 = new TextField();
TextField tf2 = new TextField();
ComboBox<String> combo1 = makeCombo();
ComboBox<String> combo2 = makeCombo();
DatePicker dp1 = new DatePicker();
DatePicker dp2 = new DatePicker();
VBox root = new VBox(10, tf1, tf2, combo1, combo2, dp1, dp2);
root.setAlignment(Pos.CENTER);
root.setPadding(new Insets(10));
Button submit = new Button("Submit");
submit.setOnAction(e -> {
if (! (validate(tf -> tf.getText().isEmpty(), tf1, tf2)) &&
(! validate(cb -> cb.getValue() == null, combo1, combo2, dp1, dp2)) ) {
System.out.println("Success!");
}
});
root.getChildren().add(submit);
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
}
private ComboBox<String> makeCombo() {
ComboBox<String> combo = new ComboBox<>();
combo.getItems().addAll("One", "Two", "Three");
combo.setEditable(true);
return combo ;
}
private <C extends Control> boolean validate(Predicate<C> invalidTest, C... controls) {
boolean result = true ;
for (C control : controls) {
if (invalidTest.test(control)) {
control.setStyle("-fx-control-inner-background: #F5D3D0;");
result = false ;
} else {
control.setStyle("");
}
}
return result ;
}
public static void main(String[] args) {
launch();
}
}
一种让您有更多控制权的方法是在控件上设置自定义 CSS 伪类,然后使用外部样式表。