We Keep Coding

There is an unexplained space between buttons

I've a problem with an exercise. There is an unexplained space between the first and the second buttons on the scene. I've change the location of the buttons but still the first one has a space from the second one. What cause this and how can I make this space shorter?
https://imgur.com/hYolYE2
public void start(Stage myStage) {
GridPane myPane = new GridPane();
myPane.setPadding(new Insets(10, 10, 10, 10));
myPane.setHgap(10);
myPane.setVgap(10);
Button btn1 = new Button("Computer Scinence");
Button btn2 = new Button("Chemistry");
Button btn3 = new Button("Arts");
DrawText txt1 = new DrawText("Computer Scince","Times Roman",FontWeight.BOLD,FontPosture.ITALIC,20,Color.GREEN);
DrawText txt2 = new DrawText("Chemistry","Times Roman",FontWeight.BOLD,FontPosture.ITALIC,20,Color.BLUE);
DrawText txt3 = new DrawText("Arts","Times Roman",FontWeight.BOLD,FontPosture.ITALIC,20,Color.YELLOW);
GridPane.setConstraints(btn1,0,1);
GridPane.setConstraints(btn2,1,1);
GridPane.setConstraints(btn3,2,1);
GridPane.setConstraints(txt1,0,2);
GridPane.setConstraints(txt2,0,3);
GridPane.setConstraints(txt3,0,4);
myPane.getChildren().addAll(btn1,btn2,btn3,txt1,txt2,txt3);
Scene myScene = new Scene(myPane,350,190);
myStage.setScene(myScene);
myStage.setTitle("Exercise 3_3");
myStage.show();
}

You can often debug GridPane layout issues by turning on the grid lines:
myPane.setGridLinesVisible(true);
After recreating your application (you did not include your DrawText class, so I'm just styling Labels instead) and turning on the grid lines reveals the issue:
You can see that the Computer Science Label at GridPane location 0, 1 has a greater width than the Computer Science Button. This causes the GridPane to expand the width of the first column to accommodate the Label.
You have a couple of options to resolve this, depending on how you want the layout to work.
1) Set Column Span:
If you want to keep the Computer Science Button the same size, but have the first column's width not expand to fit the Label, just have that Label span 2 columns:
GridPane.setColumnSpan(txt1, 2);
2) Increase Button Width:
If you'd like the Computer Science Button to expand to fill the rest of the column, you can set its MaxWidth property to use the maximum value:
btn1.setMaxWidth(Double.MAX_VALUE);

Trying to get an Hbox to be in front of a parent Pane

I've just been trying to put a blue box inside of a black box, to put it simply.
I have a class called DialoguePane, which extends Javafx Pane. It also has a field, an HBox that's supposed to hold buttons called actionButtonHBox, which I want to put inside of the DialoguePane.
Below is a picture of the window. The box with the label "select an action" is the DialoguePane object. Right now I'm as far as I have the two boxes inside one another. However, when I try to call the .setBackground method or use css styling to try to style the background of the Hbox, nothing changes, the background does not change. I also use toFront(), but nothing changes. I'm glad I'm at least at the point of having the boxes properly inside of one another, but I just want to change the background color of this region for formatting and design purposes.
Here's relevant parts of the Dialogue Pane's constructor
public class DialoguePane extends Pane {
private HBox actionButtonHbox;
public DialoguePane(String string) {
super();
this.resizeRelocate(480, 200, 450, 140); //Makes the DialoguePane's whole region have a width of 450, height of 140, at position x-cor 480px and y-cor 200px
this.setStyle("-fx-background-color: rgba(0, 0, 0, .95)");
//this.setDisplayableText(string);
this.makeActionButtonHbox();
}
public void makeActionButtonHbox() {
actionButtonHbox = new HBox();
System.out.println("Before: " + actionButtonHbox.backgroundProperty());
actionButtonHbox.resizeRelocate(0, 100, 400, 40); //Sets it at this position inside of the DialoguePane, a box with 400 width and 40 height. It's pretty thin.
actionButtonHbox.setBackground(new Background(new BackgroundFill(Color.LIGHTBLUE, CornerRadii.EMPTY, Insets.EMPTY)));
actionButtonHbox.toFront();
System.out.println("After " + actionButtonHbox.backgroundProperty());
this.getChildren().add(actionButtonHbox);
}
There's other code that's responsible for putting a TextArea above the hbox (which is what says "Select an Action below" in the Pane, which happens in the setDisplayableText method).
So what could I do to make the background of this pane visible?

JavaFX - How do you add multiple elements to a StackPane?

I'm new to JavaFX. I'm trying to create a simple centred menu that contains text with buttons below.
I've created two elements, Text title and Button testButton. Then I created StackPane stackPane. I'm then trying to add the two elements to the stackPanes children and adding that to a new Scene. However, only the last element shows up.
How can I add multiple elements to the StackPane?
#Override
public void start(Stage primaryStage) throws Exception {
primaryStage.setTitle("Test Title");
Text title = new Text("hey!");
StackPane.setAlignment(title, Pos.TOP_CENTER);
Button testButton = new Button("Testing");
StackPane.setAlignment(testButton, Pos.TOP_CENTER);
StackPane stackPane = new StackPane();
stackPane.setPrefSize(300, 300);
stackPane.setPadding(new Insets(25, 0, 0, 0));
stackPane.getChildren().add(title);
stackPane.getChildren().add(testButton);
Scene scene = new Scene(stackPane);
primaryStage.setScene(scene);
primaryStage.show();
}

I want to reference the official documentation here: https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/StackPane.html, especially:
StackPane lays out its children in a back-to-front stack.
The z-order of the children is defined by the order of the children list with the 0th child being the bottom and last child on top. If a border and/or padding have been set, the children will be layed out within those insets.
Now, to answer your question: You do it as you did, but you probably want an offset as both the children are at the same position, hence the one later added is overlaying all the previous ones.
You can check that by changing e.g.
Text title = new Text("Adding a very, very, very, very, very, very long text here... now that vile button should not overlap me anymore!");
or setting the alignment differently.
If you don't want to bother with the optimal layout by manually positioning, it's probably better to use another Pane that does that for you, e.g. one of the direct known subclasses here: https://docs.oracle.com/javafx/2/api/javafx/scene/layout/Pane.html

JavaFX Graphical Glitch

I'm experiencing a weird graphical glitch on my application. The situation is that I am creating some GridPanes and adding them to a parent GridPane which is inside a ScrollPane. However, upon scrolling, some weird glitches begin occurring. Here is a picture:
(Sorry for having to use links, I don't have enough reputation to post images).
http://s11.postimg.org/x9eg8bz4z/Glitch.png
Here is a picture of what it should look like:
http://s11.postimg.org/cqjk39l7n/Normal.png
Here is my code:
private static class Controller implements Initializable {
#FXML private GridPane projectsPane;
#Override
public void initialize(URL location, ResourceBundle resources) {
//I first create some objects to be used when
//creating the GridPanes in the following loop,
//but I have removed the code for simplicity
for(AvailableProject availableProject : availableProjects) {
GridPane projectPane = new GridPane();
projectPane.setBackground(new Background(new BackgroundFill(Color.DARKGREY, CornerRadii.EMPTY, Insets.EMPTY)));
ColumnConstraints column1 = new ColumnConstraints();
column1.setPercentWidth(50);
ColumnConstraints column2 = new ColumnConstraints();
column2.setPercentWidth(50);
projectPane.getColumnConstraints().addAll(column1, column2);
projectPane.setPadding(new Insets(5));
Label projectName = new Label(availableProject.projectName);
GridPane.setValignment(projectName, VPos.CENTER);
projectPane.add(projectName, 0, 0);
TextFlow description = new TextFlow(new Text(availableProject.description));
description.setMaxSize(200, 100);
GridPane.setValignment(description, VPos.CENTER);
projectPane.add(description, 0, 1);
Label category = new Label(availableProject.category);
GridPane.setValignment(category, VPos.CENTER);
GridPane.setHalignment(category, HPos.RIGHT);
projectPane.add(category, 1, 0, 1, 2);
projectsPane.add(projectPane, 0, yRow);
yRow++;
Pane pane = new Pane();
pane.setMinHeight(15);
projectsPane.addRow(yRow, pane);
yRow++;
}
}
}
I have tried simplifying the code to make it cleaner, but I will post the rest if needed.
Thank you!

I seem to have found the solution. By the looks of it, this really is a bug. I will report it to Oracle later. It seems the problem was that I had padding in my ScrollPane. By my testing, if padding was greater than 5, the glitches would occur. A workaround is to assign the padding to the parent GridPane rather than the ScrollPane.

JavaFX Button with multiple text lines

I need to create a toolbar in my screen that will have multiple buttons, and each button must have multiple lines of Text. For example:
I looked over the internet and StackOverflow but I couldn't find anything showing how to do this in JavaFX. I'm using JavaFX 8.
Someone could help me, please?
Tks

Also you can use the wrapTextProperty. But you have to set toolbar height greater than expected button height.
Button btn = new Button();
btn.wrapTextProperty().setValue(true);
// or btn.setWrapText(true);
btn.setText("Some looooooooooooong text");
Or if you want to determine exactly where the line should be wrapped, you can go this way:
Button btn = new Button();
btn.setText("Line1\n Line2\n Line3");
Last way will work without changing toolbar height.

I resolved this problem including a VBox inside my button, and then including several Labels inside the VBox. Like this:
The result is:
If there is a more elegant way to have the same result, please, let me know.
Thank you.

In the button text property select "switch to multi-line mode
"

From sobolev's response, you can do:
Button btn = new Button();
btn.setText("Line1\n Line2\n Line3");
button.textAlignmentProperty().set(TextAlignment.CENTER);
This will create 3 lines of text and allign them in the center of your button.

My solution is pretty much the same as the one given by the OP, but instead of Label uses Text so it's more flexible to changes in the size of the button, as it will use as many lines as needed. If required, also one can set a wrapping width, to define a width constraint.
#Override
public void start(Stage primaryStage) {
Button btn = new Button();
ImageView imageView = new ImageView(new Image(getClass().getResource(<image>).toExternalForm()));
Text text=new Text("Some long text that may be line wrapped");
text.setWrappingWidth(100);
VBox vBox = new VBox(5, imageView,text);
vBox.setAlignment(Pos.CENTER);
btn.setGraphic(vBox);
btn.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
Scene scene = new Scene(new StackPane(btn), 300, 250);
primaryStage.setScene(scene);
primaryStage.show();
}

Label label= new Label("your long text here");
label.setStyle("-fx-max-width : 180px);
label.setWrapText(true);