JavaFx; Label Center depend on width - javafx

i have Pane and Label on it.
How to set layoutXProperty of Label so that it would be in Center on X line?
I think i should use formula like this: (Pane.width-Label.width)/2
But i don't know how it write right. And i have not found answer in google.
Can some one hint me?
thxs.
Upd. Text of the Label i update after if declaration, and it text can be different length. So i want to set layoutXProperty to it depend on length of text and would be on CENTER.
UPD: code inserted
public void start(Stage myStage) throws FileNotFoundException {
myStage.setTitle("OrthographyChecker");
Pane pane = new Pane();
Scene scene = new Scene(pane, 700, 300);
Label labelUp = new Label();
labelUp.setFont(new Font(fontSize));
labelUp.layoutXProperty().bind(pane.widthProperty().subtract(labelUp.widthProperty()).divide(2));
labelUp.layoutYProperty().bind(pane.heightProperty().subtract(labelUp.heightProperty()).divide(5));
labelUp.setText("Click to start");
pane.getChildren().addAll(labelUp);
TextField inputTxt = new TextField("");
inputTxt.setVisible(false);
inputTxt.layoutXProperty().bind(pane.widthProperty().subtract(inputTxt.widthProperty()).divide(2));
inputTxt.layoutYProperty().bind(labelUp.layoutYProperty().add(35));
pane.getChildren().addAll(inputTxt);
Label chkL = new Label("");
chkL.setFont(new Font(fontSize));
chkL.layoutYProperty().bind(inputTxt.layoutYProperty().add(30));
chkL.layoutXProperty().bind(pane.widthProperty().subtract(chkL.widthProperty()).divide(2));
chkL.setStyle("-fx-border-color: blue;");
pane.getChildren().addAll(chkL);
inputTxt.setOnKeyPressed(event -> {
if (event.getCode().equals(KeyCode.ENTER)) {
try {
for (String OneWrd : chkWrd[0].replace(", ", ",").split(",")) {
if (inputTxt.getText().equalsIgnoreCase(OneWrd)) {
chkL.setText("You are right!");
chkL.setVisible(true);
notfound[0] = false;
break;
}
}
if (notfound[0]){
chkL.setText("Wrong! Right answer: \"" + chkWrd[0] + "\"");
chkL.setVisible(true);
}
} catch (Exception e) {
errPrint(e, "Установки ожидания ");
}
inputTxt.setText("");
pause[0] = false;
notfound[0] = true;
chkL.layoutXProperty().bind(pane.widthProperty().subtract(labelUp.widthProperty()).divide(2));
}
});
myStage.setScene(scene);
myStage.show();
}
It part of code, which use it trouble label (variable chkL). As you can see, i have binded it to center, like another Label. But this label changes alingment after first iteration of change text of label, and starts to looks like that screen (label in border)
and i am trying to solve exact it proplem. Binds works, but not like i am expecting

The correct way to center a label is to use a layout pane and configure the pane and/or label so that it is centered. For example, if you wanted the label horizontally centered at the top of the layout (or a region of the layout), you might use a BorderPane as follows:
<BorderPane>
<top>
<Label alignment="CENTER" text="A Label" fx:id="myLabel">
<maxWidth><Double fx:constant="POSITIVE_INFINITY"/></maxWidth>
</Label>
</top>
<center>
<!-- other content ... -->
</center>
<!-- other BorderPane regions as required -->
</BorderPane>
All of the settings here can be made using Scene Builder, if you choose to use it.

Related

Region width not refreshing automatically after modifying Grid Pane to which the region width is bound - JavaFX

I'm making a simple Java GUI app using JavaFX that has a Border Pane as the root node.
In the top section of the Border Pane, there is a Grid Pane with three columns (top Grid Pane from now on).
In the first column of the top Grid Pane, there is a Home Button, in the second column, there is an empty Region that only serves as spacer between the first and third column of the top Grid Pane, and in the third column, there is another GridPane (right Grid Pane from now on).
The right Grid Pane contains one Button (Log In Button) on start. However, when a user successfully logs into the app, two other Buttons and a Label are added to the right Grid Pane as part of the Log In Button click event.
The spacer maxWidthProperty and minWidthProperty are bound to the top Grid Pane (tgp) widthProperty and the right Grid Pane(rgp) widthProperty like this:
spacer.minWidthProperty().bind(tgp.widthProperty().subtract(80).subtract(rgp.widthProperty()).subtract(3));
spacer.maxWidthProperty().bind(tgp.widthProperty().subtract(80).subtract(rgp.widthProperty()).subtract(3));
which makes the right Grid Pane move nicely with its buttons staying on the right side of the scene when a user resizes the main stage.
However, a problem occurs when the user logs in and additional buttons are added to the right Grid Pane. The spacer somehow misses this change and its width stays the same, which makes the additional Buttons appear outside of the current stage width. The only way to refresh the spacer width is to interact with the stage somehow, by clicking minimize/maximize/restore or by clicking any button on the scene.
Is there a way to automatically refresh Region width after the nodes to which its width is bound to are modified? Or, is there a better approach to making a top Grid Pane with one button on the left and modifiable number of buttons (nodes) on the right?
Edit: Here is a demonstration of the problem with several screenshots stacked on one another:
Minimal reproducible example:
BorderPane root = new BorderPane();
GridPane tgp = new GridPane();
tgp.minWidthProperty().bind(root.widthProperty());
tgp.maxWidthProperty().bind(root.widthProperty());
tgp.setStyle("-fx-background-color: WHITE; -fx-border-color: LIGHTGREY;");
tgp.setMinHeight(37);
tgp.setMaxHeight(37);
root.setTop(tgp);
Button homeButton = new Button("Home"));
homeButton.setMinHeight(35);
homeButton.setMaxHeight(35);
homeButton.setMinWidth(80);
homeButton.setMaxWidth(80);
tgp.add(homeButton, 0, 0);
GridPane rgp = new GridPane(); // Right Grid Pane - holds User related nodes
rgp.setHgap(5);
tgp.add(rgp, 2, 0);
Label unl = new Label("My Profile");
unl.setFont(new Font("Calibri", 15));
unl.setTextFill(Color.RED);
unl.setMinWidth(Region.USE_PREF_SIZE);
Button wlButton = new Button("Watchlist");
wlButton.setMinHeight(35);
wlButton.setMaxHeight(35);
wlButton.setMinWidth(80);
wlButton.setMaxWidth(80);
Button cartButton = new Button("Cart");
cartButton.setMinHeight(35);
cartButton.setMaxHeight(35);
cartButton.setMinWidth(60);
cartButton.setMaxWidth(60);
Button logInOutButton = new Button("Log In");
logInOutButton.setMinHeight(35);
logInOutButton.setMaxHeight(35);
logInOutButton.setMinWidth(60);
logInOutButton.setMaxWidth(60);
rgp.add(logInOutButton, 3, 0);
logInOutButton.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
if (logInOutButton.getText().equals("Log In")) {
LogInStage lis = new LogInStage();
lis.initStage();
if (lis.username != null) {
logInOutButton.setText("Log Out");
rgp.add(unl, 0, 0);
rgp.add(wlButton, 1, 0);
rgp.add(cartButton, 2, 0);
}
} else if (logInOutButton.getText().equals("Log Out")) {
logInOutButton.setText("Log In");
rgp.getChildren().remove(unl);
rgp.getChildren().remove(wlButton);
rgp.getChildren().remove(cartButton);
}
}
});
Region spacer = new Region();
spacer.minWidthProperty().bind(tgp.widthProperty().subtract(80).subtract(rgp.widthProperty()).subtract(3));
spacer.maxWidthProperty().bind(tgp.widthProperty().subtract(80).subtract(rgp.widthProperty()).subtract(3));
tgp.add(spacer, 1, 0)
It's always a bad idea to use bindings, if you can avoid it. Any changes to the size constraints can lead to a new layout pass being scheduled, but during the layout pass they are assumed to be constant. If you now introduce a binding the following sequence of events could happen:
A layout pass is requested for the GridPane, setting a flag to indicate layout is required
A layout pass happens. During the layout pass the children are resized. This triggers an update of the constraints of the children with the bindings.
The flag is cleared, but the changes to the contraints already happened. The layout won't reflect this. The GridPane gets another reason to do a layout.
I don't know, how your scene is set up in detail, but I recommend using column constraints: Set the grow priorities for the outer ones to SOMETIMES and the one for the center to ALWAYS. If you require some spacing around the children, you could use GridPane.setMargin (or the padding of the GridPane itself, if you require the a distance to the edges for all children).
#Override
public void start(Stage primaryStage) {
Button[] rightContent = new Button[3];
for (int i = 0; i < rightContent.length; i++) {
Button btn = new Button(Integer.toString(i));
GridPane.setColumnIndex(btn, i);
rightContent[i] = btn;
}
Button cycle = new Button("cycle");
GridPane rgp = new GridPane(); // I would usually use a HBox here
// don't grow larger than needed
rgp.setMaxWidth(Region.USE_PREF_SIZE);
// cycle though 0 to 3 buttons on the right
cycle.setOnAction(new EventHandler<ActionEvent>() {
int nextIndex = 0;
#Override
public void handle(ActionEvent event) {
if (nextIndex >= rightContent.length) {
rgp.getChildren().clear();
nextIndex = 0;
} else {
rgp.getChildren().add(rightContent[nextIndex]);
nextIndex++;
}
}
});
ColumnConstraints sideConstraints = new ColumnConstraints();
sideConstraints.setHgrow(Priority.SOMETIMES);
ColumnConstraints centerConstraints = new ColumnConstraints();
centerConstraints.setHgrow(Priority.ALWAYS);
//prefer to grow the center part of the GridPane
GridPane root = new GridPane();
root.getColumnConstraints().addAll(sideConstraints, centerConstraints, sideConstraints);
root.add(cycle, 0, 0);
root.add(rgp, 2, 0);
// add something to visualize the center part
// you could simply leave this part out
Region center = new Region();
center.setStyle("-fx-border-radius: 10;-fx-border-width: 1;-fx-border-color:black;");
root.add(center, 1, 0);
Scene scene = new Scene(root, 400, 300);
primaryStage.setScene(scene);
primaryStage.show();
}
As mentioned in the comments, the center region is not actually needed.

JavaFX: CSS isn't picked up during offscreen rendering of Text

I'm trying to pre-render some Text elements offscreen to retrieve their widths before rendering them later on-screen:
Group offScreenRoot = new Group();
Scene offScreen = new Scene(offScreenRoot, 1024, 768);
Set<Text> textSet = new HashSet<>();
Text textText = new Text(getText());
textSet.add(textText);
Text idText = new Text(getId());
textSet.add(idText);
for (String s : getStrings()) {
textSet.add(new Text(s));
}
for (Text text : textSet) {
text.setStyle("-fx-font-size: 48;"); // <- HERE!
text.applyCss();
offScreenRoot.getChildren().add(text);
}
for (Text text : textSet) {
System.out.println(text.getLayoutBounds().getWidth());
}
I'm applying a large font size via CSS, but this doesn't get picked up. Instead, the Text is as wide as it would be, rendered in the default font size (I guess).
Is there a way to render a Text off-screen and get the actual width value as per CSS font size?
I am not sure to understand the purpose of your code. It would have been easier with a MCVE, please keep it mind for the next time.
I think you made some simple mistakes. Looking at the applyCss definition You should apply the applyCss on the parent's node, not on the node.
Another thing important in the doc is :
Provided that the Node's Scene is not null
And unfortunately when you apply your CSS, the text's scene is null as it not yet added to his parent.
text.applyCss();
offScreenRoot.getChildren().add(text);
So there is two solutions, as described in the code below in comment (and especially in the for loop where you add Texts to the parent) :
public class MainOffscreen extends Application {
private List<String> stringsList = new ArrayList<>();
#Override
public void start(Stage primaryStage) throws Exception {
// Populates stringsList
stringsList.add("String1");
stringsList.add("String2");
stringsList.add("String3");
stringsList.add("String4");
VBox offscreenRootVbox = new VBox(10.0);
Scene offScreen = new Scene(offscreenRootVbox, 900, 700);
// Replace the Hashset by list in order to keep order, more interesting for testing.
List<Text> textSet = new ArrayList();
// Text text.
Text textText = new Text("Text");
textSet.add(textText);
// Text id.
Text idText = new Text("Id");
textSet.add(idText);
// Populate String list.
for(String s: stringsList) {
textSet.add(new Text(s));
}
// Print the width of Texts before applying Css.
for(Text text: textSet) {
System.out.println("BEFORE Width of " + text.getText() + " : " + text.getLayoutBounds().getWidth());
}
System.out.println("\n----------\n");
for(Text text: textSet) {
text.setStyle("-fx-font-size: 48;"); // <- HERE!
// First add it to the parent.
offscreenRootVbox.getChildren().add(text);
// Either apply the CSS on the each Text, or Apply it on the parent's Text, I choose the
// second solution.
// text.applyCss();
}
// Apply the css on the parent's node
offscreenRootVbox.applyCss();
for(Text text: textSet) {
System.out.println("AFTER Width of " + text.getText() + " : " + text.getLayoutBounds().getWidth());
}
// primaryStage.setScene(offScreen);
// primaryStage.show();
}
}
And it gives this output :
BEFORE Width of Text : 22.13671875
BEFORE Width of Id : 10.259765625
BEFORE Width of String1 : 37.845703125
BEFORE Width of String2 : 37.845703125
BEFORE Width of String3 : 37.845703125
BEFORE Width of String4 : 37.845703125
----------
AFTER Width of Text : 88.546875
AFTER Width of Id : 41.0390625
AFTER Width of String1 : 151.3828125
AFTER Width of String2 : 151.3828125
AFTER Width of String3 : 151.3828125
AFTER Width of String4 : 151.3828125
Hope this helps you.

Replace a label with textfield in javafx at same position

I have a number of Labels in my VBox and on click of a button i want to replace all these labels with textfields.
I wouldn't recommend using a VBox, since replacing the children will likely modify the layout causing a effect that could confuse the user.
Instead I recommend using a GridPane, which allows you to place multiple children in a single cell. This way you could put all the Labels and VBoxes in the grid, but set the visible property of the TextFields to false. This means both Label and TextField will be used for layout calculation and you can simply swap between "editing mode" and "normal mode" by inverting the visible property of all children:
FXML
<HBox xmlns:fx="http://javafx.com/fxml/1" fx:controller="fxml.LabelReplaceController">
<children>
<GridPane fx:id="grid">
<children>
<TextField fx:id="t1" text="Hello World!" visible="false" GridPane.rowIndex="0"/>
<Label text="${t1.text}" GridPane.rowIndex="0" />
<TextField fx:id="t2" text="foo" visible="false" GridPane.rowIndex="1"/>
<Label text="${t2.text}" GridPane.rowIndex="1" />
<TextField fx:id="t3" text="bar" visible="false" GridPane.rowIndex="2"/>
<Label text="${t3.text}" GridPane.rowIndex="2" />
</children>
</GridPane>
<ToggleButton selected="false" onAction="#selectionChanged" text="edit"/>
</children>
</HBox>
public class LabelReplaceController {
#FXML
private Pane grid;
#FXML
private void selectionChanged(ActionEvent event) {
for (Node child : grid.getChildren()) {
child.setVisible(!child.isVisible());
}
}
}
You can iterate over your VBox and replace the:
VBox vBox = ...
int currentPos = 0;
Map<Integer, TextField> toInsert = new HashMap<>(); // map with TextFields that need to be inserted at position
for (Iterator<Node> iterator = vBox.getChildren().iterator(); iterator.hasNext(); ) {
Node child = iterator.next();
if (child instanceof Label) {
Label lbl = (Label)child;
TextField text = new TextField(lbl.getText());
iterator.remove(); // remove the label that is at index currentPos
toInsert.put(currentPos, text);
}
currentPos++;
}
for (Integer pos : toInsert.keySet()) {
TextField field = toInsert.get(pos);
vBox.getChildren().add(pos, field); // Add the Text field at the old position of the Label
}
In the first loop you remove the labels and create the replacement TextFields and remember at which position you need to insert them later on. This cannot happen in the same loop. Then in the second loop you add those TextFields to the VBox at the position you assigned them.
Edit:
Based on #fabian's valid comments the above proposed solution may cause problems. Here is an alternative approach, that creates a second VBox where all non Label nodes are copied over and the Labels are replaced with TextField. I assume that the original VBox is a child element of some Parent.
Parent parent = ... // Parent of VBox
VBox vbox = ...
// Find the index of vBox in Parent
int position = 0;
for (int i = 0; i<parent.getChildren().size(); i++) {
if (parent.getChildren().equals(vBox)) {
position = i;
break; // found our position, no need to look further
}
}
VBox copyVBox = new VBox();
for (Node child : vBox.getChildren()) {
if (child instanceof Label) {
Label lbl = (Label)child;
TextField text = new TextField(lbl.getText());
copyVBox.getChildren().add(text);
} else {
copyVBox.getChildren().add(child);
}
}
parent.getChildren().remove(vBox);
parent.getChildren().add(position, copyVBox);

JavaFX: How can I horizontally center an ImageView inside a ScrollPane?

viewScroll.setContent(new ImageView(bigimg));
double w = viewScroll.getContent().getBoundsInLocal().getWidth();
double vw = viewScroll.getViewportBounds().getWidth();
viewScroll.getContent().setTranslateX((vw/2)-(w/2));
viewScroll.toFront();
I set an ImageView with some Image inside the ScrollPane but the ImageView always goes to the far left corner. Here I'm trying to manually offset the difference, but it doesn't work well. The ImageView goes too far to the right plus it only updates once because it's inside the eventhandler for a button.
Here is an example using a label without the need for listeners:
public void start(Stage primaryStage) throws Exception {
ScrollPane scrollPane = new ScrollPane();
Label label = new Label("Hello!");
label.translateXProperty().bind(scrollPane.widthProperty().subtract(label.widthProperty()).divide(2));
scrollPane.setContent(label);
Scene scene = new Scene(scrollPane);
primaryStage.setScene(scene);
primaryStage.setWidth(200);
primaryStage.setHeight(200);
primaryStage.show();
}
I am not sure if you are familiar with properties or not, but in the code above, when I bind the translateXProperty to the formula, every time one of the dependencies changes, such as the ScrollPane's widthProperty or the Label's widthProperty, the formula is recalculated and translateXProperty is set to the result of the formula.
I am not sure, but in your previous code, it appears that the calculation code would be in a resize listener. This is not required when dealing with properties as they update whenever dependencies changed (note the bind() and not set()).

Adjustment of contents in FlowPane

I have a flowpane in center and i applied a slider effect which gets invoke on a click of button on the right (so slider moves from right to left when expanded). I have followed JewelSea slider tutorial mentioned here Slider
Now i have two different flowpanes in two different nodes. Both the flowpane contains array of labels but the only difference is, One flowpane contains scrollbar and is contained in TitlePane while the other is without scrollbar and no titlepane.
So now if i click on slider the contents in the flowpane(without scrollbar & titlepane) gets automatically adjusted but its not the same case with the flowpane containing scrollbar.
Here is relevant code for flowpane with scrollbar-
public void loadCase() {
ScrollPane s = null;
if (!homeController.mainTabPane.getTabs().contains(testTab)) {
int app = 0;
if (appareaList.size() > 0) {
FlowPane fpTestmoduleContainer = new FlowPane();
FlowPane example = new FlowPane();
for (ApplicationAreas appttribute : appareaList) {
appTestTitledPane[app] = new TitledPane();
appTestTitledPane[app].setText(appttribute.getApplication_name());
appTestTitledPane[app].setPrefSize(Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);
/*Module loop start*/
fpTestmoduleContainer.setHgap(10);
fpTestmoduleContainer.setVgap(10);
// fpTestmoduleContainer.setPrefSize(Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);
List<TestModuleAttribute> testmoduleList = WSData.getTestingModuleList(appttribute.getApplication_id());
ArrayList<Label> listTestlbs = new ArrayList<Label>(testmoduleList.size());
System.out.println("testmoduleList.size()" + testmoduleList.size());
int i = 0;
for (TestModuleAttribute testmattribute : testmoduleList) {
listTestlbs.add(new Label());
listTestlbs.get(i).setText(testmattribute.getModule_name());
listTestlbs.get(i).setAlignment(Pos.CENTER);
listTestlbs.get(i).setTextAlignment(TextAlignment.CENTER);
listTestlbs.get(i).setWrapText(true);
listTestlbs.get(i).setPrefSize(Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);
listTestlbs.get(i).setId(testmattribute.getFxnode_css());
Image imgInstalled = new Image(getClass().getResourceAsStream("/upgradeworkbench/View/Icons/ok.png"));
listTestlbs.get(i).setGraphic(new ImageView(imgInstalled));
listTestlbs.get(i).setContentDisplay(ContentDisplay.BOTTOM);
Tooltip testtp = new Tooltip();
testtp.setText("Total No. Of test Cases :" + testmattribute.getTest_case());
testtp.setWrapText(true);
listTestlbs.get(i).setTooltip(testtp);
addModuleMouseClickListener(listTestlbs.get(i), testmattribute.getModule_name(), testmattribute.getFxnode_css(), testmattribute.getTest_case());
i = i + 1;
}
s = new ScrollPane();
s.setContent(fpTestmoduleContainer);
fpTestmoduleContainer.setPrefWidth(1500);
fpTestmoduleContainer.getChildren().addAll(listTestlbs);
//appTestTitledPane[app].setContent(fpTestmoduleContainer[app]);
listTestlbs.clear();
app = app + 1;
}
appareaTestmoduleContainer.getPanes().addAll(appTestTitledPane);
appareaTestmoduleContainer.setExpandedPane(appTestTitledPane[0]);
testTab.setText("Test Cases Wizard");
testTab.setText("Testing Application Foot Print");
//mainTab.setClosable(true);
// testTab.getContent().setVisible(true);
HBox hb = new HBox();
testTab.setContent(s);
}
}
}
Image of slider working as expected - before sliding
After sliding (without scrollbar) the 4 modules get to the next row as space is occupied by the slider
After adding scrollpane and embedding flowpane inside it. Slider overlaps the flowpane contents as shown
I want to know why the scrollbar causing issue in auto adjustment of contents inside the flowpane and how can i fix it ?
Here the width of your scrollpane is fixed. And then so is the width of the flow pane.You need to change the size of your scrollpane so that its content gets reset.
Use the following code.
scroll[app].setFitToHeight(true);
scroll[app].setFitToWidth(true);
This code will set the size of scrollpane according to the view. The flowpane will also adjust accordingly then.

Resources