JavaFX: Đường viền màu đỏ cho trường văn bản

Question

Tôi có biểu mẫu có trường văn bản và tôi muốn cung cấp cho họ đường viền màu đỏ nếu tôi nhấp vào "lưu" nhưng ví dụ: không có gì được nhập vào trường bắt buộc, chữ cái cho trường "ngày sinh", ....

My files: EditController.java, error.css

Tôi đã cố gắng:

tfFirstName.getStyleClass().add("error"); 

, để xoá bỏ nó nếu họ nhập một cái gì đó có giá trị:

tfFirstName.getStyleClass().remove("error"); 

và trong css:

.text-field.error { 
-fx-border-color: red ; 
-fx-border-width: 2px ; 
} 

Nhưng nó không thay đổi gì cả.

Đáng ngạc nhiên,

tfFirstName.setStyle("-fx-border-color: red ; -fx-border-width: 2px ;"); 

(và một chuỗi rỗng để thoát khỏi nó) chỉ hoạt động tốt nhưng nó không phải là "đẹp" nếu tôi muốn bổ sung thêm để nó sau này.

Có ai biết cách sửa css không?

Answer 1

Hãy thử

.text-field.error { 
    -fx-text-box-border: red ; 
    -fx-focus-color: red ; 
} 

Các bộ đầu tiên màu biên giới khi nó không tập trung, thứ hai khi nó được tập trung.

Với điều này trong stylesheet text-field-red-border.css, ví dụ sau hoạt động:

import java.util.Collections; 

import javafx.application.Application; 
import javafx.beans.value.ChangeListener; 
import javafx.beans.value.ObservableValue; 
import javafx.collections.ObservableList; 
import javafx.scene.Scene; 
import javafx.scene.control.Label; 
import javafx.scene.control.TextField; 
import javafx.scene.layout.GridPane; 
import javafx.stage.Stage; 

public class ValidatingTextFieldExample extends Application { 

    @Override 
    public void start(Stage primaryStage) { 
     GridPane root = new GridPane(); 
     TextField nameTF = new TextField(); 
     TextField emailTF = new TextField(); 

     root.add(new Label("Name:"), 0, 0); 
     root.add(nameTF, 1, 0); 
     root.add(new Label("Email:"), 0, 1); 
     root.add(emailTF, 1, 1); 

     setUpValidation(nameTF); 
     setUpValidation(emailTF); 

     Scene scene = new Scene(root, 250, 150); 
     scene.getStylesheets().add(getClass().getResource("text-field-red-border.css").toExternalForm()); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 

    private void setUpValidation(final TextField tf) { 
     tf.textProperty().addListener(new ChangeListener<String>() { 

      @Override 
      public void changed(ObservableValue<? extends String> observable, 
        String oldValue, String newValue) { 
       validate(tf); 
      } 

     }); 

     validate(tf); 
    } 

    private void validate(TextField tf) { 
     ObservableList<String> styleClass = tf.getStyleClass(); 
     if (tf.getText().trim().length()==0) { 
      if (! styleClass.contains("error")) { 
       styleClass.add("error"); 
      } 
     } else { 
      // remove all occurrences: 
      styleClass.removeAll(Collections.singleton("error"));      
     } 
    } 

    public static void main(String[] args) { 
     launch(args); 
    } 
} 

Bằng cách này, nếu bạn đang sử dụng JavaFX 8, ủng hộ pseudoclasses qua thiết lập các lớp trực tiếp, vì nó là sạch hơn (bạn không cần tất cả các kiểm tra mã xấu xí mà bạn chỉ thêm lớp kiểu một lần và/hoặc loại bỏ tất cả các lần xuất hiện của nó) và hiệu quả hơn. Để thiết lập và bỏ đặt pseudoclass làm:

final PseudoClass errorClass = PseudoClass.getPseudoClass("error"); 

tfFirstName.pseudoClassStateChanged(errorClass, true); // or false to unset it 

Sau đó, css nên

.text-field:error { 
    -fx-text-box-border: red ; 
    -fx-focus-color: red ; 
} 

Answer 2

Với điều này nó hiện đang làm việc (Lưu ý đại tràng thay vì giữa -text-field và error..) pefectly fine (nó thậm chí không cần "setUpValidation"):

public void initialize(URL arg0, ResourceBundle arg1) { 
    removeRed(tfFirstName); 
    removeRed(tfLastName); 
} 

public void OKButtonClicked() { 
    try{ 
     //also: call validation class here 
     removeRed(tfFirstName); 
     removeRed(tfLastName); 
    } catch(ValidationException e) { 
     setRed(tfFirstName); 
     setRed(tfLastName); 
    } 

} 

private void setRed(TextField tf) { 
    ObservableList<String> styleClass = tf.getStyleClass(); 

    if(!styleClass.contains("tferror")) { 
     styleClass.add("tferror"); 
    } 
} 


private void removeRed(TextField tf) { 
    ObservableList<String> styleClass = tf.getStyleClass(); 
    styleClass.removeAll(Collections.singleton("tferror")); 
} 

Và trong css tôi thêm như sau (tiếc là nó không thay đổi chiều rộng biên giới với "-fx biên giới-width: 2px" nữa):

.tferror { 
    -fx-text-box-border: red ; 
    -fx-focus-color: red ; 
} 

Answer 3

Các giải pháp nêu trên bởi James_D làm việc hoàn toàn tốt đẹp (nhưng không phải cho JAVAFX 8.0). James đã đề cập đến những thay đổi mã cho JAVAFX 8.0, tôi chỉ thử nó và nó hoạt động như một sự quyến rũ. Đây là phiên bản thay đổi cho JAVAFX 8.0, chỉ cần một người nào đó cần tham khảo nhanh.Tất cả tín dụng đi vào JAMES_D

import java.util.Collections; 

import javafx.application.Application; 
import javafx.beans.value.ChangeListener; 
import javafx.beans.value.ObservableValue; 
import javafx.collections.ObservableList; 
import javafx.css.PseudoClass; 
import javafx.scene.Scene; 
import javafx.scene.control.Label; 
import javafx.scene.control.TextField; 
import javafx.scene.layout.GridPane; 
import javafx.stage.Stage; 

public class ValidatingTextFieldExample extends Application { 
private final PseudoClass errorClass = PseudoClass.getPseudoClass("error"); 
@Override 
public void start(Stage primaryStage) { 
    GridPane root = new GridPane(); 
    TextField nameTF = new TextField(); 
    TextField emailTF = new TextField(); 

    root.add(new Label("Name:"), 0, 0); 
    root.add(nameTF, 1, 0); 
    root.add(new Label("Email:"), 0, 1); 
    root.add(emailTF, 1, 1); 

    setUpValidation(nameTF); 
    setUpValidation(emailTF); 

    Scene scene = new Scene(root, 250, 150); 
    scene.getStylesheets().add(getClass().getResource("text-field-red-border.css").toExternalForm()); 
    primaryStage.setScene(scene); 
    primaryStage.show(); 
} 

private void setUpValidation(final TextField tf) { 
    tf.textProperty().addListener(new ChangeListener<String>() { 

     @Override 
     public void changed(ObservableValue<? extends String> observable, 
       String oldValue, String newValue) { 
      validate(tf); 
     } 

    }); 

    validate(tf); 
} 

private void validate(TextField tf) { 
    ObservableList<String> styleClass = tf.getStyleClass(); 
    if (tf.getText().trim().length()==0) { 
     tf.pseudoClassStateChanged(errorClass, true); 
    } 
    else{ 
     tf.pseudoClassStateChanged(errorClass, false); 
    } 

} 

public static void main(String[] args) { 
    launch(args); 
} 

}

Answer 4

Khi sử dụng phong cách javafx8 moderna, bạn có thể sử dụng css này để làm cho biên giới tương tự như 'trên tập trung' đường viền màu xanh:

.text-input.error { 
    -fx-focus-color: #d35244; 
    -fx-faint-focus-color: #d3524422; 

    -fx-highlight-fill: -fx-accent; 
    -fx-highlight-text-fill: white; 
    -fx-background-color: 
     -fx-focus-color, 
     -fx-control-inner-background, 
     -fx-faint-focus-color, 
     linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background); 
    -fx-background-insets: -0.2, 1, -1.4, 3; 
    -fx-background-radius: 3, 2, 4, 0; 
    -fx-prompt-text-fill: transparent; 
} 

thêm css làm tài nguyên classpath và tải nó bằng cách sử dụng:

scene.getStylesheets().add(
    getClass().getClassLoader().getResource(<your css resource path>).toString()); 

rồi áp dụng nó vào trường văn bản sử dụng:

// add error class (red border) 
textField.getStyleClass().add("error"); 
// remove error class (red border) 
textField.getStyleClass().remove("error");