If you create a binding between a JavaFX TextField and a property, then this binding is invalidated on every keystroke, which causes a change to the text.
If you have a chain of bindings the default behavior could cause problems, because in the middle of the editing values may be not valid.
Ok, I know I could create an uni-directional binding from the property to the textfield and register a change listener to get informed when the cursor leaves the field and update the property manually if necessary.
Is there an easy, elegant way to change this behavior so that the binding is only invalidated when the editing is complete, e.g. when the cursor leaves the field?
Thanks
I think you've pretty much described the only way to do it. Here's about the cleanest way I can see to implement it (using Java 8, though it's easy enough to convert the lambdas back to be JavaFX 2.2 compatible if you need):
import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.beans.binding.StringBinding;
import javafx.event.ActionEvent;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class CommitBoundTextField extends Application {
#Override
public void start(Stage primaryStage) {
TextField tf1 = new TextField();
createCommitBinding(tf1).addListener((obs, oldText, newText) ->
System.out.printf("Text 1 changed from \"%s\" to \"%s\"%n", oldText, newText));
TextField tf2 = new TextField();
createCommitBinding(tf2).addListener((obs, oldText, newText) ->
System.out.printf("Text 2 changed from \"%s\" to \"%s\"%n", oldText, newText));
VBox root = new VBox(5, tf1, tf2);
Scene scene = new Scene(root, 250, 100);
primaryStage.setScene(scene);
primaryStage.show();
}
private StringBinding createCommitBinding(TextField textField) {
StringBinding binding = Bindings.createStringBinding(() -> textField.getText());
textField.addEventHandler(ActionEvent.ACTION, evt -> binding.invalidate());
textField.focusedProperty().addListener((obs, wasFocused, isFocused)-> {
if (! isFocused) binding.invalidate();
});
return binding ;
}
public static void main(String[] args) {
launch(args);
}
}
I realize that I am a little late with a response, but thought this might be useful to someone.
When using TextFields, I often attach a TextFormatter to help validate entries. You can attach a listener to the formatters' valueProperty. That property is updated when the text is committed, rather than on every keystroke.
Here's an example of what I am talking about using a TextField specialized for integer inputs. When you make edits in the text field, the changes will be reflected in the Label when you tap Enter, lose focus by clicking the button, switch to a different window, and so on.
import javafx.application.Application;
import javafx.beans.binding.StringBinding;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.control.TextFormatter;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.converter.IntegerStringConverter;
class IntTextField extends TextField {
private final IntegerProperty value;
TextFormatter<Integer> formatter;
public double getValue() {
return value.getValue();
}
public void setValue(int newValue) {
value.setValue(newValue);
}
public IntegerProperty valueProperty() {
return value;
}
public StringBinding getStringBinding () {
return value.asString();
}
IntTextField(int initValue) {
value = new SimpleIntegerProperty(initValue);
setText(initValue + "");
formatter = new TextFormatter(new IntegerStringConverter(), initValue);
formatter.valueProperty().addListener((ObservableValue<? extends Integer> obs,
Integer oldValue, Integer newValue) -> value.setValue(newValue));
setTextFormatter(formatter);
}
IntTextField() {
this(0);
}
}
public class TFBindingDemo extends Application {
#Override
public void start(Stage stage) {
stage.setTitle("TFBindingDemo");
IntTextField intTextField = new IntTextField(12345);
intTextField.setMaxWidth(150);
Label label = new Label("Type in the TextField");
label.textProperty().bind(intTextField.getStringBinding());
Button removeFocusButton = new Button("Click Here to Remove Focus");
VBox root = new VBox(20, intTextField, label, removeFocusButton);
root.setAlignment(Pos.CENTER);
root.setPadding(new Insets(20));
Scene scene = new Scene(root, 325, 200);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch();
}
}
Related
I am new to JAVA FX, I want to 'live' update one TextField based on another TextField value.
This is my snippet code:
#FXML
private void initialize() {
tf_code.textProperty().addListener((observable, oldValue, newValue) -> {
System.out.println(newValue.substring(2, 6));
tf_newCode.setText(newValue.substring(2, 6));
});
}
Should I add another listener to my second TextField ?
Works for me. Note that the below code does not require a .fxml file. Perhaps the call to method substring() in the code you posted is throwing an Exception that you are unaware of because you are catching it in an empty catch block? Of-course I'm only guessing since you only posted part of your code.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class JfxTst00 extends Application {
public void start(Stage mainStage) throws Exception {
mainStage.setTitle("JfxTst00");
BorderPane root = new BorderPane();
TextField tf_NewCode = new TextField();
TextField tf_Code = new TextField();
tf_Code.textProperty().addListener((observable, oldVal, newVal) -> tf_NewCode.setText(newVal));
root.setTop(tf_Code);
root.setBottom(tf_NewCode);
Scene scene = new Scene(root, 220, 70);
mainStage.setScene(scene);
mainStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Your questions does not actually explain the problem you're facing, though I see a few that you should be having.
First of all, you only need one listener for the first TextField because that is the one we are watching for changes.
Then you need to account for input into the TextField that is less than 2 characters and more than 6. Since you have set hard limits in your subString(2, 6) call, we only want our listener to work within those constraints.
Here is a simple text application that demonstrates:
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class TextFieldBinding extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
// Simple interface
VBox root = new VBox(5);
root.setPadding(new Insets(10));
root.setAlignment(Pos.CENTER);
TextField txt1 = new TextField();
TextField txt2 = new TextField();
txt1.textProperty().addListener((observable, oldValue, newValue) -> {
// First, only update txt2 if the new value entered in txt1 is greater than 2, otherwise
// our substring() method will throw an exception
if (newValue.length() > 2) {
// We also need to prevent trying to get a substring that exceeds the remaining length
// of the txt1 input
int maxIndex;
if (newValue.length() < 6) {
maxIndex = newValue.length();
} else {
maxIndex = 6;
}
// Now set the text for txt2
txt2.setText(newValue.substring(2, maxIndex));
}
});
root.getChildren().addAll(txt1, txt2);
// Show the Stage
primaryStage.setWidth(300);
primaryStage.setHeight(300);
primaryStage.setScene(new Scene(root));
primaryStage.show();
}
}
I am new in this forum and also to programming. Furthermore, my English is not the best, but I hope you can understand what I mean and help me out.
I want to program a GUI and using JavaFX and the Gauges from the medusa- library. What I need to do is changing the maxValue and the minValue of the Gauge while the program is running. I can change the values, but the scale of the Gauge does not rearrange the ticks properly. For example, when I create a Gauge from 0 to 10 and then set the maxValue to 100, the scale shows all numbers as a major tick and the scale becomes unreadable. Because I could not find how to fix this, I have tried to delete the original Gauge and create simply a new one.
Here is what I have tried(I deleted the rest of the class, because it has over 800 lines):
package application;
import eu.hansolo.medusa.Gauge;
import eu.hansolo.medusa.Gauge.SkinType;
import eu.hansolo.medusa.GaugeBuilder;
import javafx.beans.property.SimpleObjectProperty;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
public class Controller {
#FXML
StackPane stackPane;
private Gauge gauge;
private Button button;
#FXML
private void initialize() {
gauge = GaugeBuilder.create().skinType(SkinType.QUARTER).barBackgroundColor(Color.LIGHTGREY)
.needleColor(Color.RED).decimals(0).valueVisible(true).valueColor(Color.BLACK).title("Stromstärke")
.unit("[mA]").subTitle("Phase 1").minValue(0).maxValue(10).build();
stackPane.getChildren().add(gauge);
}
public void setMaxValueGauge(StackPane pStackPane, Gauge pGauge, int intMinValue, int pMaxValue) {
pStackPane.getChildren().remove(pGauge);
Gauge newGauge = GaugeBuilder.create().skinType(pGauge.getSkinType()).barBackgroundColor(pGauge.getBarColor())
.needleColor(pGauge.getNeedleColor()).decimals(0).valueVisible(true).valueColor(Color.BLACK)
.title(pGauge.getTitle()).unit(pGauge.getUnit()).subTitle(pGauge.getSubTitle()).minValue(intMinValue)
.maxValue(pMaxValue).build();
pGauge = null;
pGauge = newGauge;
pStackPane.getChildren().add(pGauge);
}
#FXML
public void testButton() {
setMaxValueGauge(stackPane, gauge, 0, 30);
}
}
The method testButton() is only for testing. When I call testButton() the first time, it works well, but when I use it twice or more, it seems that the old Gauge is not replaced. Instead the new one stacks on top of the old one.
Can you please help me. I need either to fix the ticks of the scale, when I set a new maxValue, or to properly replace the old Gauge in the Stackpane.
You appear to be doing too much to set the max-value.
Here is an MCVE that changes the maxValue.
import eu.hansolo.medusa.Gauge;
import eu.hansolo.medusa.Gauge.SkinType;
import eu.hansolo.medusa.GaugeBuilder;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.util.Duration;
/**
*
* #author blj0011
*/
public class MedusaGaugeTest extends Application
{
#Override
public void start(Stage primaryStage)
{
Gauge gauge = GaugeBuilder.create().skinType(SkinType.QUARTER).barBackgroundColor(Color.LIGHTGREY)
.needleColor(Color.RED).decimals(0).valueVisible(true).valueColor(Color.BLACK).title("Stromstärke")
.unit("[mA]").subTitle("Phase 1").minValue(0).maxValue(10).build();;
Timeline timeline = new Timeline(new KeyFrame(Duration.seconds(1), (ActionEvent event) -> {
if (gauge.getValue() <= gauge.getMaxValue()) {
gauge.setValue(gauge.getValue() + 1);
}
}));
timeline.setCycleCount(Timeline.INDEFINITE);
Button btn = new Button();
btn.setText("Start");
btn.setOnAction((ActionEvent event) -> {
timeline.play();
});
Button btn2 = new Button();
btn2.setText("Increase MaxValue");
btn2.setOnAction((ActionEvent event) -> {
gauge.setMaxValue(15);
});
VBox root = new VBox(gauge, new VBox(btn, btn2));
Scene scene = new Scene(root, 300, 250);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args)
{
launch(args);
}
}
I have this code sample that implement input mask to TextField:
package com.example;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage stage) {
TextField field = new TextField() {
#Override public void replaceText(int start, int end, String text) {
super.replaceText(start, end, "#");
}
};
Button button = new Button("Show Text");
button.setOnAction(new EventHandler<ActionEvent>(){
#Override
public void handle(ActionEvent event) {
System.out.println("TEXT: " + field.getText());
}
});
VBox root = new VBox(20);
root.setAlignment(Pos.CENTER);
root.getChildren().addAll(field, button);
Scene scene = new Scene(root, 500, 500);
stage.setScene(scene);
stage.show();
}
}
Whenever I type the word "LIFE" in the TextField and press the button, the output always returns TEXT: ####, I want the output to return TEXT: LIFE. It seems like getText is not working. How to fix this?
Your approach doesn't work, because the replaceText method calls setText; so the implementation in your subclass causes the text field's textProperty to contain only '#' characters. Hence when you call getText(), you get a string with all '#' characters.
If you want to use a subclass of TextField like that, you would have to keep track of the "real" text elsewhere, which would get quite difficult. (Also, I think your implementation doesn't behave properly with copy and paste, and fixing that would be a bit tricky too.)
Probably the way to do this is to use a PasswordField, and replace it with a TextField when you want to show the text.
Here's a simple example:
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class RevealPasswordExample extends Application {
#Override
public void start(Stage primaryStage) {
PasswordField passwordField = new PasswordField();
TextField textField = new TextField();
passwordField.textProperty().bindBidirectional(textField.textProperty());
StackPane textContainer = new StackPane(passwordField);
CheckBox showText = new CheckBox("Show text");
showText.selectedProperty().addListener((obs, wasSelected, isNowSelected) -> {
if (isNowSelected) {
textContainer.getChildren().setAll(textField);
} else {
textContainer.getChildren().setAll(passwordField);
}
});
VBox root = new VBox(5, textContainer, showText);
root.setAlignment(Pos.CENTER);
root.setPadding(new Insets(24));
primaryStage.setScene(new Scene(root));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Actually getText() is working properly, that's why you got #### at the output.
The thing is you have used replaceText() method, which will replace all the characters of your text field to '#' from the start to end. I donno why u have used that. If you don't wanna show the string typed in the field try it as a password field like,
PasswordField field = new PasswordField();
field.getText();
by using this also you can get the field text but it won't be visible to the user.
I've made my own TimePicker that is supposed to work very much like DatePicker. I would like to know the best way to handle an event such as selecting a time and confirming it from the PopupWindow.
I could:
Make my TimePicker's popup node (a separate FXML and controller) define an interface and force the TimePicker parent to implement the methods to handle the selected date. (I'd MUCH like to avoid using interfaces in this manner. It seems like a terribly way to do things.)
Register some kind of custom EventHandler and listener to the popup window? Then, if I click OKAY after selecting a date from the PopupWindow, an event can be fired all the way up to the TimePicker.
Implement some kind of callback-like function. In android, for example, there were options for going to another screen solely to retrieve a result. I'm not sure if JavaFX has that kind of thing. The screens are quite separated from each other.
Just expose a ReadOnlyProperty representing the value. The user of your popup can then just observe the property.
Here's a proof of concept using a DatePicker:
import java.time.LocalDate;
import javafx.application.Application;
import javafx.beans.property.ReadOnlyObjectProperty;
import javafx.beans.property.ReadOnlyObjectWrapper;
import javafx.geometry.Bounds;
import javafx.geometry.Insets;
import javafx.geometry.Point2D;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.DatePicker;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.stage.Popup;
import javafx.stage.PopupWindow;
import javafx.stage.Stage;
public class DatePickerPopupExample extends Application {
#Override
public void start(Stage primaryStage) {
Label dateLabel = new Label(LocalDate.now().toString());
Button changeButton = new Button("Change");
HBox root = new HBox(5, dateLabel, changeButton);
root.setAlignment(Pos.CENTER);
changeButton.setOnAction(event -> {
DatePickerPopup popup = new DatePickerPopup();
popup.valueProperty().addListener((obs, oldDate, newDate) -> {
dateLabel.setText(newDate.toString());
});
Bounds buttonBds = changeButton.getBoundsInLocal();
Point2D loc = changeButton.localToScreen(buttonBds.getMaxX(), buttonBds.getMinY());
popup.showPopup(primaryStage, loc.getX(), loc.getY());
});
Scene scene = new Scene(root, 250, 150);
primaryStage.setScene(scene);
primaryStage.show();
}
public class DatePickerPopup {
private final ReadOnlyObjectWrapper<LocalDate> value = new ReadOnlyObjectWrapper<>();
private final Popup popup ;
public ReadOnlyObjectProperty<LocalDate> valueProperty() {
return value.getReadOnlyProperty();
}
public final LocalDate getValue() {
return valueProperty().get();
}
public DatePickerPopup(LocalDate date) {
value.set(date);
DatePicker picker = new DatePicker(date);
Button okButton = new Button("OK");
okButton.setOnAction(event -> {
popup.hide();
value.set(picker.getValue());
});
Button cancelButton = new Button("Cancel");
cancelButton.setOnAction(event -> {
popup.hide();
});
BorderPane root = new BorderPane();
root.setCenter(picker);
HBox buttons = new HBox(5, okButton, cancelButton);
buttons.setPadding(new Insets(5));
buttons.setAlignment(Pos.CENTER);
root.setBottom(buttons);
popup = new Popup();
popup.getContent().add(root);
}
public DatePickerPopup() {
this(LocalDate.now());
}
public void showPopup(Stage owner, double x, double y) {
popup.show(owner, x, y);
}
}
public static void main(String[] args) {
launch(args);
}
}
I don't know if anyone could understand my problem from the title, but here's more specific description. I have class, in which I created a FlowPane, where I added objects of another class(images packed inside VBoxes). Each VBox have ContextMenu, where is MenuItem "Remove File". My problem is, how to remove this object while beeing inside the VBox class. Here is a little part of my code:
//removed, entire code is below after edit
The code where I'm accessing my CustomPane (my class of FlowPane, with specified attributes) works, because I can remove object if I'm doing it by their indexes, but when I remove one of them, other's indexes changes, so I'm looking for another solution. I need to specifically remove the object of the class in the code.
Okay so here is so called sscce, which of I had no idea, since now:
package sscce;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.ContextMenu;
import javafx.scene.control.Label;
import javafx.scene.control.MenuItem;
import javafx.scene.input.MouseButton;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.FlowPane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class Sscce extends Application {
#Override
public void start(Stage primaryStage) {
CustomPane root = new CustomPane();
root.setPadding(new Insets(20));
root.setHgap(10);
root.setVgap(10);
for (int i = 0; i < 10; i++) {
RectangleBox recB = new RectangleBox();
root.getChildren().add(recB);
}
Scene scene = new Scene(root, 300, 250);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
class RectangleBox extends VBox {
static int index = 0;
public RectangleBox() {
Rectangle rec = new Rectangle(150, 150);
rec.setFill(Color.GREEN);
StackPane sp = new StackPane();
sp.getChildren().add(rec);
Label label = new Label(Integer.toString(index));
index++;
sp.getChildren().add(label);
getChildren().add(sp);
final ContextMenu cm = new ContextMenu();
MenuItem removeRec = new MenuItem("Remove Rectangle");
removeRec.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent t) {
((CustomPane) getParent()).getPane().getChildren().remove(0); //here is the problem, I want this line to remove the rectangle I clicked on(now it's removing first element in the pane).
}
});
cm.getItems().add(removeRec);
createContextMenuEvent(cm, rec);
}
private void createContextMenuEvent(final ContextMenu cm, final Rectangle rec) {
addEventHandler(MouseEvent.MOUSE_CLICKED, new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent t) {
if (t.getButton() == MouseButton.SECONDARY) {
cm.show(rec, t.getScreenX(), t.getScreenY());
}
}
});
}
}
class CustomPane extends FlowPane {
public CustomPane() {
//setAlignment(Pos.CENTER);
setHgap(25);
setVgap(25);
setPadding(new Insets(20));
}
public CustomPane getPane() {
return this;
}
}
It should work after copy/paste this entire code to java project. So I removed everything that is not neccessary, and I have replaced images to rectangles, now this program looks kind of stupid;p
I added comment to a line I have problem with. I hope now it's a lot clearer than before.
try this:
((CustomPane) RectangleBox.this.getParent()).getChildren().remove(RectangleBox.this);
hope it helps.