6 Replies Latest reply: Jun 20, 2013 4:42 PM by likejiujitsu RSS

    How to get default border for TextField?

    likejiujitsu

      In my UI input textfields, I border them red if user enters bad data. However I need to reset the border back to how it was.

      field.setStyle("-fx-border-color: gray;");
      

       

      This does not produce the default border on windows XP (JavaFX2.2.21)

      The default border is rounded and lightgray.

       

      I also tried unsuccessfully

       

      field.setStyle("-fx-border-color: null;");

      -border-color: null;");r-color: gray;"

        • 1. Re: How to get default border for TextField?
          James_D

          The default stylesheet (in Java 7), caspian.css, doesn't actually apply a border to the text field at all but uses overlayed backgrounds of different radii to get the border effect.

           

          The best way to get the effect you want is to add and remove a style class from the text field, and define the border color in an external stylesheet. However, you need to be aware of https://javafx-jira.kenai.com/browse/RT-23085. One workaround is to set a default border radius of zero on the text field and a different radius for your "custom" css class. Since the default stylesheet doesn't use a border this won't break anything.

           

          Example:

           

          import java.util.regex.Pattern;
          
          import javafx.application.Application;
          import javafx.beans.value.ChangeListener;
          import javafx.beans.value.ObservableValue;
          import javafx.scene.Scene;
          import javafx.scene.control.TextField;
          import javafx.scene.layout.VBox;
          import javafx.stage.Stage;
          
          public class ErrorTextFieldTest extends Application {
          
           @Override
            public void start(Stage primaryStage) {
            final VBox root = new VBox();
            final TextField textField = new TextField();
            root.getChildren().addAll(textField);
          
            final Pattern intPattern = Pattern.compile("-?[1-9]\\d*");
            final String errorCSSClass = "error" ;
            textField.textProperty().addListener(new ChangeListener<String>() {
                @Override
                public void changed(ObservableValue<? extends String> observable,
                    String oldValue, String newValue) {
                  if (newValue.length()==0 || intPattern.matcher(newValue).matches()) {
                    textField.getStyleClass().remove(errorCSSClass);
                  } else if (! textField.getStyleClass().contains(errorCSSClass)) {
                    textField.getStyleClass().add(errorCSSClass);
                  }
                  System.out.println(textField.getStyleClass());
                }
              });
          
            Scene scene = new Scene(root, 200, 100);
            scene.getStylesheets().add(getClass().getResource("errorTextField.css").toExternalForm());
            primaryStage.setScene(scene);
            primaryStage.show();
            }
          
            public static void main(String[] args) {
            launch(args);
            }
          }
          

           

          errorTextField.css:

          @CHARSET "US-ASCII";
          .text-field.error {
           -fx-border-color: red ;
            -fx-border-width: 2px ;
          }
          .text-field {
           -fx-border-width: 0px ;
          }
          

           

          (Note there is no space in ".text-field.error".)

          • 2. Re: How to get default border for TextField?
            James_D

            Another way to do the css file is to override the defined colors. This one overrides colors both for caspian.css (default stylesheet for Java 7) and modena.css (for Java 8).

            @CHARSET "US-ASCII";
            .text-field.error {
             -fx-focus-color: red ;
             -fx-text-box-border: red ;
             -fx-faint-focus-color: #ff000022 ;
            }
            
            • 3. Re: How to get default border for TextField?
              likejiujitsu

              Thanks for replying. Does setting the border width to zero, will that reset it back to the default border?

              • 4. Re: How to get default border for TextField?
                James_D

                likejiujitsu wrote:

                 

                Thanks for replying. Does setting the border width to zero, will that reset it back to the default border?

                Yes.

                 

                Try the code: it should run as is. The text field will be in regular mode if you enter an integer and in "error mode" (red border) otherwise. It reverts to normal as appropriate.

                • 5. Re: How to get default border for TextField?
                  likejiujitsu

                  Excellent! that worked.

                  • 6. Re: How to get default border for TextField?
                    likejiujitsu

                    Update: The solution works for text fields; however if you try to do the same thing in a table like the 'addressbook' sample tutorial, the red border does not show. It shows only when you click on the cell.