JavaFX Update Textfield with Numeric Values

Question

I'm trying to update a textfield with a numeric value and can't seem to figure out how to do so. The values I'm trying to add in the textfield are the values of the position on a slider, updating the textfield as you move it back and fourth. Any type of help would be appreciated. I'm not sure if you guys want me to post my code but its only a slider from 1-10 and a blank textfield in a gridpane so its not much help.

public class Main extends Application {

private static Slider fibSlider = new Slider(0,10,0);
private static Label indexLabel = new Label("Index: ");
private static int colIndex = 0;
private static int rowIndex = 0; 
private static int topIndex = 0;
private static int rightIndex = 0;  
private static int leftIndex = 0;
private static int bottomIndex = 0;
private static TextField tfIndex;

@Override
public void start(Stage primaryStage) {


    fibSlider.setMajorTickUnit(1);
    fibSlider.setMinorTickCount(0);
    fibSlider.setShowTickLabels(true);
    fibSlider.setShowTickMarks(true);

/*  fibSlider.valueProperty().addListener(sl -> {
            tfIndex.setText(fibSlider.getValue());
        });
    */
    GridPane mainGPane = buildGPane();
    Scene mainScene = new Scene(mainGPane, 500, 200);

    primaryStage.setTitle("ex");
    primaryStage.setScene(mainScene);
    primaryStage.show();


}

 public static GridPane buildGPane() {
     GridPane gPane = new GridPane();
     gPane.setAlignment(Pos.CENTER);
        gPane.setPadding(new Insets(topIndex=10,rightIndex=10,
           bottomIndex=10,leftIndex=10));
        gPane.setHgap(2);
        gPane.setVgap(2);
        gPane.add(fibSlider,colIndex=1,rowIndex=3);
        gPane.add(indexLabel,colIndex=1,rowIndex=5);
        gPane.add(tfIndex,colIndex=2,rowIndex=5);

        return gPane;

 }
 public Main() {
        tfIndex = new TextField();
 }

Possible duplicate of [*Leveraging the observer pattern in JavaFX GUI design*](http://stackoverflow.com/q/31909941/230513); if not, post a [mcve]. — trashgod, May 05 '16 at 08:17
Okay I just added some code, basically what I'm trying to do is get the textfield to update with the sliders value. — Jake, May 05 '16 at 08:22
Where exactly is the problem? uncomment the listener and add a `Double.toString` call around `fibSlider.getValue()`. — fabian, May 05 '16 at 09:12
How can I make the textfield empty while the slider is being dragged? — Jake, May 05 '16 at 09:25

score 1 · Accepted Answer · answered May 05 '16 at 08:38

Your code example has some issues as you are defining the members as static members which is not good form in OO programming. Further as you then try to initialize some of those static JavaFX controls you get exceptions as the Toolkit is not yet initialized, at least you do with a recent version of the JVM.

The trick is to bind the text property of tfIndex to the value of fibSlider. As the value is of type Double and for the binding you actually need a StringProperty, you can convert the DoubleProperty to a StringProperty:

tfIndex.textProperty().bind(fibSlider.valueProperty().asString());

Here is the complete example:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class Main extends Application {

    private Slider fibSlider = new Slider(0, 10, 0);
    private Label indexLabel = new Label("Index: ");
    private int colIndex = 0;
    private int rowIndex = 0;
    private int topIndex = 0;
    private int rightIndex = 0;
    private int leftIndex = 0;
    private int bottomIndex = 0;
    private TextField tfIndex;

    @Override
    public void start(Stage primaryStage) {

        tfIndex = new TextField();

        fibSlider.setMajorTickUnit(1);
        fibSlider.setMinorTickCount(0);
        fibSlider.setShowTickLabels(true);
        fibSlider.setShowTickMarks(true);

        tfIndex.textProperty().bind(fibSlider.valueProperty().asString());

        GridPane mainGPane = buildGPane();
        Scene mainScene = new Scene(mainGPane, 500, 200);

        primaryStage.setTitle("ex");
        primaryStage.setScene(mainScene);
        primaryStage.show();


    }

    private GridPane buildGPane() {
        GridPane gPane = new GridPane();
        gPane.setAlignment(Pos.CENTER);
        gPane.setPadding(new Insets(topIndex = 10, rightIndex = 10,
                bottomIndex = 10, leftIndex = 10));
        gPane.setHgap(2);
        gPane.setVgap(2);
        gPane.add(fibSlider, colIndex = 1, rowIndex = 3);
        gPane.add(indexLabel, colIndex = 1, rowIndex = 5);
        gPane.add(tfIndex, colIndex = 2, rowIndex = 5);

        return gPane;

    }
}

Thanks very much for the response, I actually used a line such as (Sorry not sure how to put in blocks) fibSlider.valueProperty().addListener(sl -> { tfIndex.setText(Double.toString(fibSlider.getValue())); }); — Jake, May 05 '16 at 08:56
Just another question, how can I make the textfield empty while the slider is being dragged? — Jake, May 05 '16 at 09:21
There is the property [`valueChange`](https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/Slider.html#valueChangingProperty) that indicates that. If you want to display the value of the slider only when it is not changing I would suggest a listener on that property and set the text once the value becomes false. — hotzst, May 05 '16 at 09:53

JavaFX Update Textfield with Numeric Values

1 Answers1